[MM-54745] Fixing inconsistent styles for menu items in profile/accou… (#25719)

* [MM-54745] Fixing inconsistent styles for menu items in profile/account menu

* [MM-54745] Updating the snapshot tests

* [MM-54745] Set a custom status text made to display with full opacity

* [MM-54745] Fixing the CI pipeline lint issues

* [MM-54745] Fixing a few more linter issues blocking the build

* [MM-54745] Fixing type check issue for color parameter

* [MM-54745] ESlint issues for import statements and alignment of closing brackets

* [MM-54745] Updating snapshots and fixing minor ESLint issues on the way in the test file

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap

@@ -50,8 +50,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
           Nev Aa
         </Text>
         <Text
-          className=""
+          className="contrast"
-          color="disabled"
+          color="inherit"
           margin="none"
         >
           @undefined
@@ -94,7 +94,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
         onClick={[Function]}
         rightDecorator={
           <CheckIcon
-            color="var(--semantic-color-success)"
+            color="var(--button-bg)"
             size={16}
           />
         }
@@ -208,6 +208,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
         }
         icon={
           <AccountOutlineIcon
+            className="profile__icon"
+            color="rgba(var(--center-channel-color-rgb), 0.56)"
             size={16}
           />
         }
@@ -218,9 +220,13 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
+      <span
+        className="logout__icon"
+      >
         <MenuItemAction
           icon={
             <ExitToAppIcon
+              color="rgba(var(--center-channel-color-rgb), 0.56)"
               size={16}
             />
           }
@@ -229,6 +235,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
           show={true}
           text="Log Out"
         />
+      </span>
     </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
@@ -284,8 +291,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
           Nev Aa
         </Text>
         <Text
-          className=""
+          className="contrast"
-          color="disabled"
+          color="inherit"
           margin="none"
         >
           @undefined
@@ -335,7 +342,6 @@ exports[`components/StatusDropdown should match snapshot with custom status and
             tooltipDirection="bottom"
           />
           <Text
-            color="disabled"
             margin="none"
           />
           <div
@@ -409,7 +415,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
         onClick={[Function]}
         rightDecorator={
           <CheckIcon
-            color="var(--semantic-color-success)"
+            color="var(--button-bg)"
             size={16}
           />
         }
@@ -523,6 +529,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
         }
         icon={
           <AccountOutlineIcon
+            className="profile__icon"
+            color="rgba(var(--center-channel-color-rgb), 0.56)"
             size={16}
           />
         }
@@ -533,9 +541,13 @@ exports[`components/StatusDropdown should match snapshot with custom status and
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
+      <span
+        className="logout__icon"
+      >
         <MenuItemAction
           icon={
             <ExitToAppIcon
+              color="rgba(var(--center-channel-color-rgb), 0.56)"
               size={16}
             />
           }
@@ -544,6 +556,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
           show={true}
           text="Log Out"
         />
+      </span>
     </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
@@ -599,8 +612,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
           Nev Aa
         </Text>
         <Text
-          className=""
+          className="contrast"
-          color="disabled"
+          color="inherit"
           margin="none"
         >
           @undefined
@@ -618,7 +631,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
-        ariaLabel="Set a Custom Status"
+        ariaLabel="Set a custom status"
         className="MenuItem__primary-text custom_status__row"
         dialogType={[Function]}
         id="status-menu-custom-status"
@@ -641,10 +654,9 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
             tooltipDirection="bottom"
           />
           <Text
-            color="disabled"
             margin="none"
           >
-            Set a Custom Status
+            Set a custom status
           </Text>
         </span>
       </MenuItemToggleModalRedux>
@@ -676,7 +688,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
         onClick={[Function]}
         rightDecorator={
           <CheckIcon
-            color="var(--semantic-color-success)"
+            color="var(--button-bg)"
             size={16}
           />
         }
@@ -790,6 +802,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
         }
         icon={
           <AccountOutlineIcon
+            className="profile__icon"
+            color="rgba(var(--center-channel-color-rgb), 0.56)"
             size={16}
           />
         }
@@ -800,9 +814,13 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
+      <span
+        className="logout__icon"
+      >
         <MenuItemAction
           icon={
             <ExitToAppIcon
+              color="rgba(var(--center-channel-color-rgb), 0.56)"
               size={16}
             />
           }
@@ -811,6 +829,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
           show={true}
           text="Log Out"
         />
+      </span>
     </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
@@ -866,8 +885,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
           Nev Aa
         </Text>
         <Text
-          className=""
+          className="contrast"
-          color="disabled"
+          color="inherit"
           margin="none"
         >
           @undefined
@@ -885,7 +904,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
-        ariaLabel="Set a Custom Status"
+        ariaLabel="Set a custom status"
         className="MenuItem__primary-text custom_status__row"
         dialogType={[Function]}
         id="status-menu-custom-status"
@@ -908,10 +927,9 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
             tooltipDirection="bottom"
           />
           <Text
-            color="disabled"
             margin="none"
           >
-            Set a Custom Status
+            Set a custom status
           </Text>
         </span>
       </MenuItemToggleModalRedux>
@@ -943,7 +961,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
         onClick={[Function]}
         rightDecorator={
           <CheckIcon
-            color="var(--semantic-color-success)"
+            color="var(--button-bg)"
             size={16}
           />
         }
@@ -1057,6 +1075,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
         }
         icon={
           <AccountOutlineIcon
+            className="profile__icon"
+            color="rgba(var(--center-channel-color-rgb), 0.56)"
             size={16}
           />
         }
@@ -1067,9 +1087,13 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
+      <span
+        className="logout__icon"
+      >
         <MenuItemAction
           icon={
             <ExitToAppIcon
+              color="rgba(var(--center-channel-color-rgb), 0.56)"
               size={16}
             />
           }
@@ -1078,6 +1102,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
           show={true}
           text="Log Out"
         />
+      </span>
     </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
@@ -1133,8 +1158,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
           Nev Aa
         </Text>
         <Text
-          className=""
+          className="contrast"
-          color="disabled"
+          color="inherit"
           margin="none"
         >
           @undefined
@@ -1152,7 +1177,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
-        ariaLabel="Set a Custom Status"
+        ariaLabel="Set a custom status"
         className="MenuItem__primary-text custom_status__row"
         dialogType={[Function]}
         id="status-menu-custom-status"
@@ -1175,10 +1200,9 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
             tooltipDirection="bottom"
           />
           <Text
-            color="disabled"
             margin="none"
           >
-            Set a Custom Status
+            Set a custom status
           </Text>
           <PulsatingDot />
         </span>
@@ -1211,7 +1235,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
         onClick={[Function]}
         rightDecorator={
           <CheckIcon
-            color="var(--semantic-color-success)"
+            color="var(--button-bg)"
             size={16}
           />
         }
@@ -1325,6 +1349,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
         }
         icon={
           <AccountOutlineIcon
+            className="profile__icon"
+            color="rgba(var(--center-channel-color-rgb), 0.56)"
             size={16}
           />
         }
@@ -1335,9 +1361,13 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
+      <span
+        className="logout__icon"
+      >
         <MenuItemAction
           icon={
             <ExitToAppIcon
+              color="rgba(var(--center-channel-color-rgb), 0.56)"
               size={16}
             />
           }
@@ -1346,6 +1376,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
           show={true}
           text="Log Out"
         />
+      </span>
     </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
@@ -1409,8 +1440,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
           Nev Aa
         </Text>
         <Text
-          className=""
+          className="contrast"
-          color="disabled"
+          color="inherit"
           margin="none"
         >
           @undefined
@@ -1453,7 +1484,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
         onClick={[Function]}
         rightDecorator={
           <CheckIcon
-            color="var(--semantic-color-success)"
+            color="var(--button-bg)"
             size={16}
           />
         }
@@ -1567,6 +1598,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
         }
         icon={
           <AccountOutlineIcon
+            className="profile__icon"
+            color="rgba(var(--center-channel-color-rgb), 0.56)"
             size={16}
           />
         }
@@ -1577,9 +1610,13 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
+      <span
+        className="logout__icon"
+      >
         <MenuItemAction
           icon={
             <ExitToAppIcon
+              color="rgba(var(--center-channel-color-rgb), 0.56)"
               size={16}
             />
           }
@@ -1588,6 +1625,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
           show={true}
           text="Log Out"
         />
+      </span>
     </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
@@ -1643,8 +1681,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
           Nev Aa
         </Text>
         <Text
-          className=""
+          className="contrast"
-          color="disabled"
+          color="inherit"
           margin="none"
         >
           @undefined
@@ -1687,7 +1725,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
         onClick={[Function]}
         rightDecorator={
           <CheckIcon
-            color="var(--semantic-color-success)"
+            color="var(--button-bg)"
             size={16}
           />
         }
@@ -1801,6 +1839,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
         }
         icon={
           <AccountOutlineIcon
+            className="profile__icon"
+            color="rgba(var(--center-channel-color-rgb), 0.56)"
             size={16}
           />
         }
@@ -1811,9 +1851,13 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
+      <span
+        className="logout__icon"
+      >
         <MenuItemAction
           icon={
             <ExitToAppIcon
+              color="rgba(var(--center-channel-color-rgb), 0.56)"
               size={16}
             />
           }
@@ -1822,6 +1866,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
           show={true}
           text="Log Out"
         />
+      </span>
     </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
@@ -1877,8 +1922,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
           Nev Aa
         </Text>
         <Text
-          className=""
+          className="contrast"
-          color="disabled"
+          color="inherit"
           margin="none"
         >
           @undefined
@@ -1896,7 +1941,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
-        ariaLabel="Set a Custom Status"
+        ariaLabel="Set a custom status"
         className="MenuItem__primary-text custom_status__row"
         dialogType={[Function]}
         id="status-menu-custom-status"
@@ -1919,10 +1964,9 @@ exports[`components/StatusDropdown should not show clear status button when cust
             tooltipDirection="bottom"
           />
           <Text
-            color="disabled"
             margin="none"
           >
-            Set a Custom Status
+            Set a custom status
           </Text>
         </span>
       </MenuItemToggleModalRedux>
@@ -1954,7 +1998,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
         onClick={[Function]}
         rightDecorator={
           <CheckIcon
-            color="var(--semantic-color-success)"
+            color="var(--button-bg)"
             size={16}
           />
         }
@@ -2068,6 +2112,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
         }
         icon={
           <AccountOutlineIcon
+            className="profile__icon"
+            color="rgba(var(--center-channel-color-rgb), 0.56)"
             size={16}
           />
         }
@@ -2078,9 +2124,13 @@ exports[`components/StatusDropdown should not show clear status button when cust
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
+      <span
+        className="logout__icon"
+      >
         <MenuItemAction
           icon={
             <ExitToAppIcon
+              color="rgba(var(--center-channel-color-rgb), 0.56)"
               size={16}
             />
           }
@@ -2089,6 +2139,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
           show={true}
           text="Log Out"
         />
+      </span>
     </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
@@ -2144,8 +2195,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
           Nev Aa
         </Text>
         <Text
-          className=""
+          className="contrast"
-          color="disabled"
+          color="inherit"
           margin="none"
         >
           @undefined
@@ -2195,7 +2246,6 @@ exports[`components/StatusDropdown should show clear status button when custom s
             tooltipDirection="bottom"
           />
           <Text
-            color="disabled"
             margin="none"
           />
           <div
@@ -2269,7 +2319,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
         onClick={[Function]}
         rightDecorator={
           <CheckIcon
-            color="var(--semantic-color-success)"
+            color="var(--button-bg)"
             size={16}
           />
         }
@@ -2383,6 +2433,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
         }
         icon={
           <AccountOutlineIcon
+            className="profile__icon"
+            color="rgba(var(--center-channel-color-rgb), 0.56)"
             size={16}
           />
         }
@@ -2393,9 +2445,13 @@ exports[`components/StatusDropdown should show clear status button when custom s
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
+      <span
+        className="logout__icon"
+      >
         <MenuItemAction
           icon={
             <ExitToAppIcon
+              color="rgba(var(--center-channel-color-rgb), 0.56)"
               size={16}
             />
           }
@@ -2404,6 +2460,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
           show={true}
           text="Log Out"
         />
+      </span>
     </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>

webapp/channels/src/components/status_dropdown/status_dropdown.scss

@@ -1,3 +1,15 @@
+.profile__icon {
+    &:hover {
+        fill: rgba(255, 0, 0, 0.72);
+    }
+}
+
+.logout__icon {
+    &:hover {
+        fill: rgba(255, 0, 0, 0.72);
+    }
+}
+
 #statusDropdownMenu {
     .icon {
         position: relative;
@@ -88,6 +100,7 @@ button.custom_status__row {
     &__container {
         display: flex;
         padding: 7px 0;
+        color: rgba(var(--center-channel-color-rgb), 1);
         line-height: 20px;
     }
 
@@ -132,6 +145,10 @@ button.custom_status__row {
 .custom-status {
     &-emoji {
         fill: rgba(var(--center-channel-color-rgb), 0.56);
+
+        &:hover {
+            fill: rgba(var(--center-channel-color-rgb), 0.72);
+        }
     }
 
     &-suggestion-emoji > span:first-child {
@@ -199,7 +216,13 @@ button.custom_status__row {
             text-overflow: ellipsis;
             white-space: nowrap;
 
+            &.contrast {
+                color: rgba(var(--center-channel-color-rgb), 0.75);
+            }
+
             &.bold {
+                font-family: 'Metropolis', sans-serif;
+                font-size: 16px;
                 font-weight: 600;
             }
         }

webapp/channels/src/components/status_dropdown/status_dropdown.tsx

@@ -282,13 +282,13 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
             customStatusText = customStatus?.text;
             break;
         case isStatusSet && !customStatus?.text && customStatus?.duration === CustomStatusDuration.DONT_CLEAR:
-            customStatusHelpText = this.props.intl.formatMessage({id: 'status_dropdown.set_custom_text', defaultMessage: 'Set Custom Status Text...'});
+            customStatusHelpText = this.props.intl.formatMessage({id: 'status_dropdown.set_custom_text', defaultMessage: 'Set custom status text...'});
             break;
         case isStatusSet && !customStatus?.text && customStatus?.duration !== CustomStatusDuration.DONT_CLEAR:
             customStatusText = '';
             break;
         case !isStatusSet:
-            customStatusHelpText = this.props.intl.formatMessage({id: 'status_dropdown.set_custom', defaultMessage: 'Set a Custom Status'});
+            customStatusHelpText = this.props.intl.formatMessage({id: 'status_dropdown.set_custom', defaultMessage: 'Set a custom status'});
         }
 
         const customStatusEmoji = isStatusSet ? (
@@ -369,7 +369,6 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                         />
                         <Text
                             margin='none'
-                            color='disabled'
                         >
                             {customStatusHelpText}
                         </Text>
@@ -397,7 +396,7 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
         const selectedIndicator = (
             <CheckIcon
                 size={16}
-                color={'var(--semantic-color-success)'}
+                color={'var(--button-bg)'}
             />
         );
 
@@ -529,8 +528,8 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                                 >{`${currentUser.first_name} ${currentUser.last_name}`}</Text>
                                 <Text
                                     margin={'none'}
-                                    className={!currentUser.first_name && !currentUser.last_name ? 'bold' : ''}
+                                    className={!currentUser.first_name && !currentUser.last_name ? 'bold' : 'contrast'}
-                                    color={!currentUser.first_name && !currentUser.last_name ? undefined : 'disabled'}
+                                    color={!currentUser.first_name && !currentUser.last_name ? undefined : 'inherit'}
                                 >
                                     {'@' + currentUser.username}
                                 </Text>
@@ -612,7 +611,13 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                             dialogType={UserSettingsModal}
                             dialogProps={{isContentProductSettings: false}}
                             text={this.props.intl.formatMessage({id: 'navbar_dropdown.profileSettings', defaultMessage: 'Profile'})}
-                            icon={<AccountOutlineIcon size={16}/>}
+                            icon={
+                                <AccountOutlineIcon
+                                    size={16}
+                                    color={'rgba(var(--center-channel-color-rgb), 0.56)'}
+                                    className={'profile__icon'}
+                                />
+                            }
                         >
                             {this.props.showCompleteYourProfileTour && (
                                 <div
@@ -625,12 +630,19 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                         </Menu.ItemToggleModalRedux>
                     </Menu.Group>
                     <Menu.Group>
+                        <span className={'logout__icon'}>
                             <Menu.ItemAction
                                 id='logout'
                                 onClick={this.handleEmitUserLoggedOutEvent}
                                 text={this.props.intl.formatMessage({id: 'navbar_dropdown.logout', defaultMessage: 'Log Out'})}
-                            icon={<ExitToAppIcon size={16}/>}
+                                icon={
+                                    <ExitToAppIcon
+                                        size={16}
+                                        color={'rgba(var(--center-channel-color-rgb), 0.56)'}
                                     />
+                                }
+                            />
+                        </span>
                     </Menu.Group>
                 </Menu>
             </MenuWrapper>

webapp/channels/src/i18n/en.json

@@ -5057,14 +5057,14 @@
   "status_dropdown.profile_button_label.online": "Current status: Online. Select to open profile and status menu.",
   "status_dropdown.profile_button_label.ooo": "Current status: Out of office. Select to open profile and status menu.",
   "status_dropdown.set_away": "Away",
-  "status_dropdown.set_custom": "Set a Custom Status",
+  "status_dropdown.set_custom": "Set a custom status",
-  "status_dropdown.set_custom_text": "Set Custom Status Text...",
+  "status_dropdown.set_custom_text": "Set custom status text...",
-  "status_dropdown.set_dnd": "Do Not Disturb",
+  "status_dropdown.set_dnd": "Do not disturb",
   "status_dropdown.set_dnd.extra": "Disables all notifications",
   "status_dropdown.set_offline": "Offline",
   "status_dropdown.set_online": "Online",
-  "status_dropdown.set_ooo": "Out of Office",
+  "status_dropdown.set_ooo": "Out of office",
-  "status_dropdown.set_ooo.extra": "Automatic Replies are enabled",
+  "status_dropdown.set_ooo.extra": "Automatic replies are enabled",
   "success_modal.return_to_workspace": "Return to workspace",
   "success_modal.subtitle": "Your final bill will be prorated. Your workspace now has {plan} limits.",
   "suggestion_list.no_matches": "No items match __{value}__",