feat: styled start conversation button

ts/components/buttons/MenuButton.tsx

@@ -13,7 +13,8 @@ const StyledMenuButton = styled.button`
   align-items: center;
   background: var(--menu-button-background-color);
 
-  border-radius: 2px;
+  border: 1.5px solid var(--menu-button-border-color);
+  border-radius: 7px;
   width: 51px;
   height: 33px;
   cursor: pointer;
@@ -22,6 +23,10 @@ const StyledMenuButton = styled.button`
 
   :hover {
     background: var(--menu-button-background-hover-color);
+    border-color: var(--menu-button-border-hover-color);
+    svg path {
+      fill: var(--menu-button-icon-hover-color);
+    }
   }
 `;
 
@@ -41,10 +46,11 @@ export const MenuButton = () => {
   return (
     <StyledMenuButton data-testid="new-conversation-button" onClick={onClickFn}>
       <SessionIcon
-        iconSize="small"
-        iconType="plusFat"
+        iconSize="medium"
+        iconType="plus"
         iconColor="var(--menu-button-icon-color)"
         iconRotation={isToggled ? 45 : 0}
+        iconPadding="2px"
         aria-label={window.i18n('chooseAnAction')}
       />
     </StyledMenuButton>

ts/themes/classicDark.ts

@@ -25,9 +25,12 @@ export const classicDark: ThemeColorVariables = {
   '--message-bubbles-sent-text-color': 'var(--background-primary-color)',
   '--message-bubbles-received-text-color': 'var(--text-primary-color)',
 
-  '--menu-button-background-color': 'var(--primary-color)',
-  '--menu-button-background-hover-color': THEMES.CLASSIC_DARK.COLOR4,
-  '--menu-button-icon-color': THEMES.CLASSIC_DARK.COLOR6,
+  '--menu-button-background-color': 'transparent',
+  '--menu-button-background-hover-color': 'var(--primary-color)',
+  '--menu-button-icon-color': 'var(--primary-color)',
+  '--menu-button-icon-hover-color': 'var(--text-primary-color)',
+  '--menu-button-border-color': 'var(--primary-color)',
+  '--menu-button-border-hover-color': 'var(--primary-color)',
 
   '--chat-buttons-background-color': THEMES.CLASSIC_DARK.COLOR2,
   '--chat-buttons-background-hover-color': THEMES.CLASSIC_DARK.COLOR3,

ts/themes/classicLight.ts

@@ -25,9 +25,12 @@ export const classicLight: ThemeColorVariables = {
   '--message-bubbles-sent-text-color': 'var(--text-primary-color)',
   '--message-bubbles-received-text-color': 'var(--text-primary-color)',
 
-  '--menu-button-background-color': THEMES.CLASSIC_LIGHT.COLOR0,
+  '--menu-button-background-color': 'transparent',
   '--menu-button-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR1,
-  '--menu-button-icon-color': THEMES.CLASSIC_LIGHT.COLOR6,
+  '--menu-button-icon-color': 'var(--text-primary-color)',
+  '--menu-button-icon-hover-color': THEMES.CLASSIC_LIGHT.COLOR6,
+  '--menu-button-border-color': 'var(--text-primary-color)',
+  '--menu-button-border-hover-color': THEMES.CLASSIC_LIGHT.COLOR1,
 
   '--chat-buttons-background-color': THEMES.CLASSIC_LIGHT.COLOR4,
   '--chat-buttons-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR3,

ts/themes/oceanDark.ts

@@ -25,9 +25,12 @@ export const oceanDark: ThemeColorVariables = {
   '--message-bubbles-sent-text-color': THEMES.OCEAN_DARK.COLOR0,
   '--message-bubbles-received-text-color': 'var(--text-primary-color)',
 
-  '--menu-button-background-color': 'var(--primary-color)',
-  '--menu-button-background-hover-color': THEMES.OCEAN_DARK.COLOR6,
-  '--menu-button-icon-color': THEMES.OCEAN_DARK.COLOR7!,
+  '--menu-button-background-color': 'transparent',
+  '--menu-button-background-hover-color': 'var(--primary-color)',
+  '--menu-button-icon-color': 'var(--primary-color)',
+  '--menu-button-icon-hover-color': 'var(--text-primary-color)',
+  '--menu-button-border-color': 'var(--primary-color)',
+  '--menu-button-border-hover-color': 'var(--primary-color)',
 
   '--chat-buttons-background-color': THEMES.OCEAN_DARK.COLOR2,
   '--chat-buttons-background-hover-color': THEMES.OCEAN_DARK.COLOR4,

ts/themes/oceanLight.ts

@@ -25,9 +25,12 @@ export const oceanLight: ThemeColorVariables = {
   '--message-bubbles-sent-text-color': 'var(--text-primary-color)',
   '--message-bubbles-received-text-color': 'var(--text-primary-color)',
 
-  '--menu-button-background-color': 'var(--primary-color)',
-  '--menu-button-background-hover-color': THEMES.OCEAN_LIGHT.COLOR3,
-  '--menu-button-icon-color': THEMES.OCEAN_LIGHT.COLOR1,
+  '--menu-button-background-color': 'transparent',
+  '--menu-button-background-hover-color': 'var(--primary-color)',
+  '--menu-button-icon-color': 'var(--primary-color)',
+  '--menu-button-icon-hover-color': THEMES.OCEAN_LIGHT.COLOR5,
+  '--menu-button-border-color': 'var(--primary-color)',
+  '--menu-button-border-hover-color': 'var(--primary-color)',
 
   '--chat-buttons-background-color': THEMES.OCEAN_LIGHT.COLOR5,
   '--chat-buttons-background-hover-color': THEMES.OCEAN_LIGHT.COLOR3,

ts/themes/variableColors.tsx

@@ -31,6 +31,9 @@ export type ThemeColorVariables = {
   '--menu-button-background-color': string;
   '--menu-button-background-hover-color': string;
   '--menu-button-icon-color': string;
+  '--menu-button-icon-hover-color': string;
+  '--menu-button-border-color': string;
+  '--menu-button-border-hover-color': string;
 
   /* Chat (Interaction) Buttons */
   /* Also used for Reaction Bar Buttons */