fix(multi-org): align dropdown icons and fix user avatar dropdown hover styles (#5296)

Author: ChitlangeSahas

package.json

@@ -164,7 +164,7 @@
   "dependencies": {
     "@codingame/monaco-jsonrpc": "^0.3.1",
     "@docsearch/react": "^3.0.0-alpha.37",
-    "@influxdata/clockface": "^5.2.0",
+    "@influxdata/clockface": "^6.0.1",
     "@influxdata/flux-lsp-browser": "0.8.28",
     "@influxdata/giraffe": "^2.33.4",
     "@influxdata/influxdb-templates": "0.9.0",

src/identity/components/GlobalHeader/GlobalHeader.tsx

@@ -7,6 +7,7 @@ import {
   IconFont,
   Icon,
   JustifyContent,
+  InfluxColors,
 } from '@influxdata/clockface'
 
 // Selectors and Context
@@ -72,6 +73,8 @@ export const GlobalHeader: FC = () => {
     }
   }, [orgsList])
 
+  const caretStyle = {fontSize: '18px', color: InfluxColors.Grey65}
+
   return (
     <FlexBox
       margin={ComponentSize.Large}
@@ -86,7 +89,7 @@ export const GlobalHeader: FC = () => {
               activeAccount={activeAccount}
               accountsList={sortedAccounts}
             />
-            <Icon glyph={IconFont.CaretRight_New} />
+            <Icon glyph={IconFont.CaretOutlineRight} style={caretStyle} />
             <OrgDropdown activeOrg={activeOrg} orgsList={sortedOrgs} />
           </>
         )}

src/identity/components/GlobalHeader/GlobalHeaderDropdown/GlobalHeaderDropdown.scss

@@ -26,3 +26,8 @@
   margin: 8px;
   background-color: rgba(241, 241, 243, 0.1);
 }
+
+.global-header--align-center {
+  display: flex;
+  align-items: center;
+}

src/identity/components/GlobalHeader/GlobalHeaderDropdown/index.tsx

@@ -84,7 +84,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
         active={active}
         onClick={onClick}
         size={dropdownButtonSize}
-        icon={dropdownButtonIcon}
+        trailingIcon={dropdownButtonIcon || IconFont.DoubleCaretVertical}
         className="global-header--dropdown-button"
       >
         {selectedItem?.name || defaultButtonText}
@@ -106,7 +106,11 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
           const iconEl = <Icon glyph={value.iconFont} className="button-icon" />
           const textEl = <span>{value.name}</span>
           return (
-            <Dropdown.HrefItem key={value.name} href={value.href}>
+            <Dropdown.HrefItem
+              key={value.name}
+              href={value.href}
+              className="global-header--align-center"
+            >
               {iconEl}
               {textEl}
             </Dropdown.HrefItem>
@@ -161,7 +165,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
               justifyContent={JustifyContent.SpaceBetween}
               alignItems={AlignItems.Center}
             >
-              <span>
+              <span className="global-header--align-center">
                 {iconEl}
                 {textEl}
               </span>

src/identity/components/GlobalHeader/UserPopoverStyles.scss

@@ -44,15 +44,17 @@
     padding: 0px 16px 16px 16px;
     display: inline-flex;
     flex-direction: column;
+    margin-top: 8px;
 
     .user-popover-footer--button {
-      margin-top: 10px;
       cursor: pointer;
       color: inherit;
-    }
-
-    a:hover {
-      color: $cf-grey-75;
+      padding: 8px 8px 8px 4px;
+      display: inline-flex;
+      align-items: center;
+      &:hover {
+        background: rgba(241, 241, 243, 0.1);
+      }
     }
 
     .user-popover-footer--button-icon {

yarn.lock

@@ -1458,10 +1458,10 @@
     gud "^1.0.0"
     warning "^4.0.3"
 
-"@influxdata/clockface@^5.2.0":
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-5.2.0.tgz#d6a079fe5c478151b916e73b3d34312afcc5988b"
-  integrity sha512-l3X7b4T98kw/1SMv5EcSCIoncoH7ByZ6rL1lAPlAnHRpPF1DFFo2D8fR/xB8ku+1K56uJwqfRaYIXoCbBo46jA==
+"@influxdata/clockface@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-6.0.1.tgz#93f021dbf3d05b029cea0bca6b55493299150f54"
+  integrity sha512-C6e9nsPCCQQtLlPEOz3FE2sV3QNLQ6I3WbnZES5io1bcR9U6pnF/YpOwU+zICq4bGImyh23QBvXY2ffcGcqOsQ==
   dependencies:
     "@types/react-window" "^1.8.5"
     react-window "^1.8.7"