feat: add logout icon and integrate it into LogoutCard and PageHeader for improved user experience

Author: AbhishekA1509

src/Assets/IconV2/ic-logout.svg

@@ -19,10 +19,10 @@ import Tippy from '@tippyjs/react'
 import './pageHeader.css'
 import ReactGA from 'react-ga4'
 import { ReactComponent as ICMediumPaintBucket } from '@IconsV2/ic-medium-paintbucket.svg'
-import { ReactComponent as DropDownIcon } from '@Icons/ic-chevron-down.svg'
+import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { ReactComponent as Close } from '@Icons/ic-close.svg'
 import { ReactComponent as Question } from '@Icons/ic-help-outline.svg'
-import { getRandomColor, TippyCustomized, TippyTheme } from '../../../Common'
+import { getAlphabetIcon, TippyCustomized, TippyTheme } from '../../../Common'
 import LogoutCard from '../LogoutCard'
 import { setActionWithExpiry, handlePostHogEventUpdate } from './utils'
 import { InstallationType, ServerInfo, PageHeaderType } from './types'
@@ -143,9 +143,9 @@ const PageHeader = ({
                 <span className="fs-13 cn-9" data-testid="go-to-get-started">
                     Help
                 </span>
-                <DropDownIcon
+                <ICCaretDown
                     style={{ ['--rotateBy' as any]: `${180 * Number(showHelpCard)}deg` }}
-                    className="fcn-9 icon-dim-20 rotate pointer"
+                    className="scn-7 icon-dim-16 rotate pointer"
                 />
             </div>
             {!window._env_.K8S_CLIENT && (
@@ -164,14 +164,17 @@ const PageHeader = ({
                     arrow
                     onClose={handleCloseSwitchThemeLocationTippyChange}
                 >
-                    <div
-                        className="logout-card__initial cursor fs-13 icon-dim-24 flex logout-card__initial--nav"
-                        onClick={onClickLogoutButton}
-                        style={{ backgroundColor: getRandomColor(email) }}
+                    <button
+                        type="button"
                         data-testid="profile-button"
+                        onClick={onClickLogoutButton}
+                        className="dc__transparent flex p-4 dc__gap-4 br-18 bg__secondary border__secondary"
                     >
-                        {email[0]}
-                    </div>
+                        {getAlphabetIcon(email, 'm-0-imp')}
+                        <ICCaretDown
+                            className={`scn-7 icon-dim-16 ${showLogOutCard ? 'dc__flip-180' : ''} dc__transition--transform`}
+                        />
+                    </button>
                 </TippyCustomized>
             )}
         </>
@@ -285,7 +288,7 @@ const PageHeader = ({
                 )}
             {showLogOutCard && (
                 <LogoutCard
-                    className="logout-card__more-option"
+                    className="logout-card__more-option mt-8"
                     userFirstLetter={email}
                     setShowLogOutCard={setShowLogOutCard}
                     showLogOutCard={showLogOutCard}

src/Shared/Components/Header/PageHeader.tsx

@@ -43,6 +43,7 @@ import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
 import { ReactComponent as ICK8sJob } from '@IconsV2/ic-k8s-job.svg'
 import { ReactComponent as ICLdap } from '@IconsV2/ic-ldap.svg'
 import { ReactComponent as ICLoginDevtronLogo } from '@IconsV2/ic-login-devtron-logo.svg'
+import { ReactComponent as ICLogout } from '@IconsV2/ic-logout.svg'
 import { ReactComponent as ICMediumPaintbucket } from '@IconsV2/ic-medium-paintbucket.svg'
 import { ReactComponent as ICMicrosoft } from '@IconsV2/ic-microsoft.svg'
 import { ReactComponent as ICMissing } from '@IconsV2/ic-missing.svg'
@@ -111,6 +112,7 @@ export const iconMap = {
     'ic-k8s-job': ICK8sJob,
     'ic-ldap': ICLdap,
     'ic-login-devtron-logo': ICLoginDevtronLogo,
+    'ic-logout': ICLogout,
     'ic-medium-paintbucket': ICMediumPaintbucket,
     'ic-microsoft': ICMicrosoft,
     'ic-missing': ICMissing,

src/Shared/Components/Icon/Icon.tsx

@@ -19,6 +19,7 @@ import { useHistory } from 'react-router-dom'
 import { useMainContext } from '@Shared/Providers'
 import { getRandomColor, stopPropagation } from '../../Common'
 import { ThemeSwitcher } from './ThemeSwitcher'
+import { Icon } from './Icon'
 
 interface LogoutCardType {
     className: string
@@ -27,6 +28,9 @@ interface LogoutCardType {
     showLogOutCard: boolean
 }
 
+export const LOGOUT_CARD_BASE_BUTTON_CLASS =
+    'dc__unset-button-styles dc__content-space px-12 py-6 fs-13 fw-4 lh-20 cursor w-100 flex left br-4'
+
 const LogoutCard = ({ className, userFirstLetter, setShowLogOutCard, showLogOutCard }: LogoutCardType) => {
     const history = useHistory()
     const { viewIsPipelineRBACConfiguredNode } = useMainContext()
@@ -55,18 +59,19 @@ const LogoutCard = ({ className, userFirstLetter, setShowLogOutCard, showLogOutC
                         {userFirstLetter[0]}
                     </p>
                 </div>
-                <div className="dc__border-top-n1 py-4">
+                <div className="dc__border-top-n1 py-4 px-4 flexbox-col">
                     <ThemeSwitcher onChange={toggleLogoutCard} />
 
                     {viewIsPipelineRBACConfiguredNode}
 
                     <button
-                        className="dc__unset-button-styles px-12 py-6 fs-13 fw-4 lh-20 cr-5 dc__hover-n50 cursor w-100 flex left"
+                        className={`${LOGOUT_CARD_BASE_BUTTON_CLASS} cr-5 dc__hover-r50`}
                         data-testid="logout-button"
                         onClick={onLogout}
                         type="button"
                     >
                         Logout
+                        <Icon name="ic-logout" color="R500" />
                     </button>
                 </div>
             </div>

src/Shared/Components/LogoutCard.tsx

@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import { useTheme } from '@Shared/Providers'
+import { getThemePreferenceText, useTheme } from '@Shared/Providers'
+import { ReactComponent as ICCaretLeftSmall } from '@Icons/ic-caret-left-small.svg'
 import { ThemeSwitcherProps } from './types'
+import { LOGOUT_CARD_BASE_BUTTON_CLASS } from '../LogoutCard'
 
 const ThemeSwitcher = ({ onChange }: ThemeSwitcherProps) => {
-    const { handleThemeSwitcherDialogVisibilityChange } = useTheme()
+    const { handleThemeSwitcherDialogVisibilityChange, themePreference } = useTheme()
 
     if (!window._env_.FEATURE_EXPERIMENTAL_THEMING_ENABLE) {
         return null
@@ -33,10 +35,14 @@ const ThemeSwitcher = ({ onChange }: ThemeSwitcherProps) => {
         <button
             type="button"
             data-testid="open-theme-switcher-dialog"
-            className="dc__transparent fs-13 fw-4 lh-20 cn-9 dc__hover-n50 w-100"
+            className={`${LOGOUT_CARD_BASE_BUTTON_CLASS} dc__hover-n50`}
             onClick={handleShowThemeSwitcherDialog}
         >
             Theme
+            <div className="flexbox dc__gap-4 dc__align-items-center">
+                <span className="cn-7 fs-13 fw-4 lh-20">{getThemePreferenceText(themePreference)}</span>
+                <ICCaretLeftSmall className="dc__flip-180 icon-16 dc__no-shrink scn-7" />
+            </div>
         </button>
     )
 }

src/Shared/Components/ThemeSwitcher/ThemeSwitcher.component.tsx

@@ -16,4 +16,4 @@
 
 export * from './ThemeProvider'
 export { AppThemeType } from './types'
-export { getComponentSpecificThemeClass, getAppThemeForAutoPreference } from './utils'
+export { getComponentSpecificThemeClass, getAppThemeForAutoPreference, getThemePreferenceText } from './utils'

src/Shared/Providers/ThemeProvider/index.ts

@@ -68,3 +68,16 @@ export const getThemeConfigFromLocalStorage = (): ThemeConfigType => {
 }
 
 export const getComponentSpecificThemeClass = (appTheme: AppThemeType) => `component-specific-theme__${appTheme}`
+
+export const getThemePreferenceText = (themePreference: ThemePreferenceType): string => {
+    switch (themePreference) {
+        case 'auto':
+            return `System (${getAppThemeForAutoPreference() === AppThemeType.dark ? 'Dark' : 'Light'})`
+        case AppThemeType.dark:
+            return 'Dark'
+        case AppThemeType.light:
+            return 'Light'
+        default:
+            return null
+    }
+}