💄(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.

Author: AntoLC

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 {

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}
     />
   );
 };

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx

@@ -66,7 +66,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 {

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}

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,21 +83,21 @@ export const DocIcon = ({
         ref={iconRef}
         onClick={toggleEmojiPicker}
         color="tertiary-text"
+        {...buttonProps}
       >
         {!emoji ? (
           defaultIcon
         ) : (
-          <Icon
+          <Text
             {...textProps}
-            iconName={emoji}
             $size={$size}
             $variation={$variation}
             $weight={$weight}
             aria-hidden="true"
             data-testid="doc-emoji-icon"
           >
             {emoji}
-          </Icon>
+          </Text>
         )}
       </BoxButton>
       {openEmojiPicker &&

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>

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"