From b5f235fef627aef893744b87eb627f6f55b04bdb Mon Sep 17 00:00:00 2001
From: Boris Trombert <boris.trombert@infomaniak.com>
Date: Tue, 20 Aug 2024 11:44:11 +0200
Subject: [PATCH] new style for ai actions modal in posts

Changelog: fixed
---
 .../components/assets/icon_react_for_me.tsx   |  4 ++--
 .../src/plugins/ai/components/dot_menu.tsx    | 23 ++++++++++++++++---
 2 files changed, 22 insertions(+), 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
index 6e47f8bc0e..4502722024 100644
--- 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
index 22d7daeb20..75393a15c8 100644
--- 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,12 +135,28 @@ 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;
@@ -148,10 +164,11 @@ export const DropdownMenuItemStyled = styled.a`
     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='#'