Merge branch 'fix-ai-menu-style' into 'master'

new style for ai actions modal in posts See merge request kchat/webapp!889
Infomaniak · Aug 20, 2024 · 3fd9e27 · 3fd9e27
2 parents 9fc02e5 + b5f235f
commit 3fd9e27
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/webapp/channels/src/plugins/ai/components/assets/icon_react_for_me.tsx b/webapp/channels/src/plugins/ai/components/assets/icon_react_for_me.tsx
@@ -4,8 +4,8 @@ import Svg from '../svg';
 
 const IconReactForMe = () => (
     <Svg
-        width='18'
-        height='18'
+        width='16'
+        height='16'
         viewBox='0 0 18 18'
         fill='none'
     >

diff --git a/webapp/channels/src/plugins/ai/components/dot_menu.tsx b/webapp/channels/src/plugins/ai/components/dot_menu.tsx
@@ -39,7 +39,7 @@ export const DropdownMenu = styled.div`
     text-align: left;
     list-style: none;
 
-    padding: 10px 0;
+    padding: 3px 0;
     font-family: Open Sans;
     font-style: normal;
     font-weight: normal;
@@ -135,23 +135,40 @@ const DotMenu = ({
                     }
                 }}
             >
+                {title && <DropdownMenuTitle>{title}</DropdownMenuTitle>}
                 {children}
             </Menu>
         </Dropdown>
     );
 };
 
+export const DropdownMenuTitle = styled.div`
+ && {
+    font-family: "SuisseIntl", sans-serif;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    padding: 5px 10px;
+    text-decoration: unset;
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+}
+`;
+
 export const DropdownMenuItemStyled = styled.a`
  && {
     font-family: "SuisseIntl", sans-serif;
     font-style: normal;
     font-weight: normal;
     font-size: 14px;
     color: var(--center-channel-color);
-    padding: 10px 20px;
+    padding: 5px 10px;
     text-decoration: unset;
     display: inline-flex;
     align-items: center;
+    min-height: 32px;
 
     >.icon {
         margin-right: 8px;
@@ -187,7 +204,7 @@ export const iconSplitStyling = css`
     gap: 8px;
 `;
 
-export const DropdownMenuItem = (props: { children: React.ReactNode, onClick?: () => void, className?: string}) => {
+export const DropdownMenuItem = (props: { children: React.ReactNode; onClick?: () => void; className?: string}) => {
     return (
         <DropdownMenuItemStyled
             href='#'