💄(frontend) visual improvements around the Icon

With time some visual inconsistencies have crept into the DropButton and Icon component. This commit aims to harmonize the appearance with the design system.
2025-11-05 15:53:12 +01:00
parent 66f83db0e5
commit a9b77fb9a7
11 changed files with 50 additions and 27 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,8 @@ and this project adheres to
 - 🐛(backend) fix s3 version_id validation
 - 🐛(frontend) retry check media status after page reload #1555
 - 🐛(frontend) fix Interlinking memory leak #1560
+- 🐛(frontend) button new doc UI fix #1557
+- 🐛(frontend) interlinking UI fix #1557

 ## [3.8.2] - 2025-10-17

--- a/src/frontend/apps/e2e/tests/app-impress/doc-grid.spec.ts
+++ b/src/frontend/apps/e2e/tests/app-impress/doc-grid.spec.ts
@@ -134,6 +134,8 @@ test.describe('Document grid item options', () => {
  test('it deletes the document', async ({ page, browserName }) => {
    const [docTitle] = await createDoc(page, `delete doc`, browserName);

+    await verifyDocName(page, docTitle);
+
    await page.goto('/');

    await expect(page.getByText(docTitle)).toBeVisible();
--- a/src/frontend/apps/impress/src/components/DropButton.tsx
+++ b/src/frontend/apps/impress/src/components/DropButton.tsx
@@ -31,7 +31,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
  font-weight: 500;
  font-size: 0.938rem;
  padding: 0;
-  ${({ $css }) => $css};
+  border-radius: 4px;
  &:hover {
    background-color: var(
      --c--components--button--primary-text--background--color-hover
@@ -41,6 +41,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
    box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400);
    border-radius: 4px;
  }
+  ${({ $css }) => $css};
 `;

 export interface DropButtonProps {
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -13,7 +13,7 @@ export const Icon = ({
  iconName,
  disabled,
  variant = 'outlined',
-  $variation,
+  $variation = 'text',
  ...textProps
 }: IconProps) => {
  const hasLabel = 'aria-label' in textProps || 'aria-labelledby' in textProps;
@@ -41,15 +41,19 @@ type IconOptionsProps = TextType & {
  isHorizontal?: boolean;
 };

-export const IconOptions = ({ isHorizontal, ...props }: IconOptionsProps) => {
+export const IconOptions = ({
+  isHorizontal,
+  $css,
+  ...props
+}: IconOptionsProps) => {
  return (
    <Icon
-      {...props}
      iconName={isHorizontal ? 'more_horiz' : 'more_vert'}
      $css={css`
        user-select: none;
-        ${props.$css}
+        ${$css}
      `}
+      {...props}
    />
  );
 };
--- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -44,6 +44,11 @@
  contain: content;
 }

+.c__button--medium {
+  min-height: var(--c--components--button--medium-height);
+  height: auto;
+}
+
 /**
 * Modal
 */
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
@@ -77,7 +77,7 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
      onClick={handleClick}
      draggable="false"
      $css={css`
-        display: inline;
+        display: contents;
        padding: 0.1rem 0.4rem;
        border-radius: 4px;
        & svg {
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx
@@ -76,7 +76,7 @@ export const BoutonShare = ({

  return (
    <Button
-      color="tertiary-text"
+      color="primary-text"
      onClick={open}
      size="medium"
      disabled={isDisabled}
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
@@ -1,12 +1,13 @@
 import { MouseEvent, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';

-import { BoxButton, Icon, TextType } from '@/components';
+import { BoxButton, BoxButtonType, Text, TextType } from '@/components';
 import { EmojiPicker, emojidata } from '@/docs/doc-editor/';

 import { useDocTitleUpdate } from '../hooks/useDocTitleUpdate';

 type DocIconProps = TextType & {
+  buttonProps?: BoxButtonType;
  emoji?: string | null;
  defaultIcon: React.ReactNode;
  docId?: string;
@@ -16,6 +17,7 @@ type DocIconProps = TextType & {
 };

 export const DocIcon = ({
+  buttonProps,
  emoji,
  defaultIcon,
  $size = 'sm',
@@ -81,13 +83,13 @@ export const DocIcon = ({
        ref={iconRef}
        onClick={toggleEmojiPicker}
        color="tertiary-text"
+        {...buttonProps}
      >
        {!emoji ? (
          defaultIcon
        ) : (
-          <Icon
+          <Text
            {...textProps}
-            iconName={emoji}
            $size={$size}
            $variation={$variation}
            $weight={$weight}
@@ -95,7 +97,7 @@ export const DocIcon = ({
            data-testid="doc-emoji-icon"
          >
            {emoji}
-          </Icon>
+          </Text>
        )}
      </BoxButton>
      {openEmojiPicker &&
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
@@ -147,6 +147,11 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
            arrowCss={css`
              color: ${colorsTokens['primary-800']} !important;
            `}
+            buttonCss={css`
+              &:hover {
+                background-color: unset;
+              }
+            `}
            disabled={!canManage}
            showArrow={true}
            topMessage={
@@ -184,6 +189,11 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
          <Box $direction="row" $align="center" $gap={spacingsTokens['3xs']}>
            <DropdownMenu
              testId="doc-access-mode"
+              buttonCss={css`
+                &:hover {
+                  background-color: unset;
+                }
+              `}
              disabled={!canManage}
              showArrow={true}
              options={linkRoleOptions}
@@ -196,7 +206,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
              }
              label={t('Document access mode')}
            >
-              <Text $weight="initial" $variation="600">
+              <Text $weight="initial" $variation="600" $theme="primary">
                {linkModeTranslations[docLinkRole]}
              </Text>
            </DropdownMenu>
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
@@ -149,6 +149,14 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
      `}
    >
      <TreeViewItem {...props} onClick={handleActivate}>
+        <DocIcon
+          emoji={emoji}
+          withEmojiPicker={doc.abilities.partial_update}
+          defaultIcon={<SubPageIcon color={colorsTokens['primary-400']} />}
+          $size="sm"
+          docId={doc.id}
+          title={doc.title}
+        />
        <BoxButton
          onClick={(e) => {
            e.stopPropagation();
@@ -166,17 +174,6 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
            min-width: 0;
          `}
        >
-          <Box>
-            <DocIcon
-              emoji={emoji}
-              withEmojiPicker={doc.abilities.partial_update}
-              defaultIcon={<SubPageIcon color={colorsTokens['primary-400']} />}
-              $size="sm"
-              docId={doc.id}
-              title={doc.title}
-            />
-          </Box>
-
          <Box
            $direction="row"
            $align="center"
--- a/src/frontend/apps/impress/src/i18n/translations.json
+++ b/src/frontend/apps/impress/src/i18n/translations.json
@@ -351,7 +351,7 @@
      "Move to my docs": "In \"Meine Dokumente\" verschieben",
      "My docs": "Meine Dokumente",
      "Name": "Name",
-      "New doc": "Neues Dokument",
+      "New doc": "Neues Dok",
      "No active search": "Keine aktive Suche",
      "No document found": "Kein Dokument gefunden",
      "No documents found": "Keine Dokumente gefunden",
@@ -543,7 +543,7 @@
      "More docs": "Más documentos",
      "My docs": "Mis documentos",
      "Name": "Nombre",
-      "New doc": "Nuevo documento",
+      "New doc": "Nuevo doc",
      "No active search": "Ninguna búsqueda activa",
      "No document found": "No se ha encontrado ningún documento",
      "No documents found": "No se han encontrado documentos",
@@ -975,7 +975,7 @@
      "More docs": "Altri documenti",
      "My docs": "I miei documenti",
      "Name": "Nome",
-      "New doc": "Nuovo documento",
+      "New doc": "Nuovo doc",
      "No active search": "Nessuna ricerca attiva",
      "No document found": "Nessun documento trovato",
      "No documents found": "Nessun documento trovato",
@@ -1187,7 +1187,7 @@
      "Move to my docs": "Verplaatsen naar mijn documenten",
      "My docs": "Mijn documenten",
      "Name": "Naam",
-      "New doc": "Nieuw document",
+      "New doc": "Nieuw doc",
      "New sub-doc": "Nieuw subdocument",
      "No active search": "Geen actieve zoekactie",
      "No document found": "Geen documenten gevonden",