From ccdb8f634d5d3ddf3b9160d565a6de42ba8e4fd6 Mon Sep 17 00:00:00 2001
From: Katia Aresti <karesti@redhat.com>
Date: Fri, 27 Oct 2023 15:54:37 +0100
Subject: [PATCH] ISPN-15105 dark theme fixes

---
 src/app/AppLayout/AppLayout.tsx     | 9 +++++----
 src/app/Common/CacheTypeBadge.tsx   | 9 ++++-----
 src/app/app.css                     | 4 ++++
 src/app/assets/languages/en.json    | 3 ++-
 src/app/providers/ThemeProvider.tsx | 6 +++---
 5 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
index c7fb4f8da..267f51997 100644
--- a/src/app/AppLayout/AppLayout.tsx
+++ b/src/app/AppLayout/AppLayout.tsx
@@ -41,7 +41,7 @@ import { IAppRoute, routes } from '@app/routes';
 import { APIAlertProvider } from '@app/providers/APIAlertProvider';
 import { ActionResponseAlert } from '@app/Common/ActionResponseAlert';
 import { useHistory } from 'react-router';
-import { global_spacer_sm } from '@patternfly/react-tokens';
+import { global_Color_light_100, global_spacer_sm } from '@patternfly/react-tokens';
 import { About } from '@app/About/About';
 import { ErrorBoundary } from '@app/ErrorBoundary';
 import { BannerAlert } from '@app/Common/BannerAlert';
@@ -165,11 +165,12 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <Switch
-            id="simple-switch"
+            id="darkThemeSwitch"
             isChecked={theme === 'dark'}
             onChange={toggleTheme}
-            ouiaId="BasicSwitch"
-            label=""
+            ouiaId="DarkThemeOuiaId"
+            label={t('layout.dark-theme')}
+            className="darkThemeSwitch"
           />
           <ToolbarItem>
             <Dropdown
diff --git a/src/app/Common/CacheTypeBadge.tsx b/src/app/Common/CacheTypeBadge.tsx
index 0374d305f..1358eb8dc 100644
--- a/src/app/Common/CacheTypeBadge.tsx
+++ b/src/app/Common/CacheTypeBadge.tsx
@@ -1,6 +1,6 @@
 import displayUtils from '@services/displayUtils';
 import { global_FontSize_md, global_FontSize_sm, global_spacer_sm, global_spacer_xs } from '@patternfly/react-tokens';
-import { Badge } from '@patternfly/react-core';
+import { Label } from '@patternfly/react-core';
 import React from 'react';
 import { CacheType } from '@services/infinispanRefData';
 
@@ -8,11 +8,10 @@ const CacheTypeBadge = (props: { cacheType: string; small: boolean; cacheName: s
   const cacheTypeEnum = CacheType[props.cacheType];
 
   return (
-    <Badge
+    <Label
       data-cy={`type-${props.cacheName}`}
+      color={displayUtils.cacheTypeColor(cacheTypeEnum)}
       style={{
-        backgroundColor: displayUtils.cacheTypeLabelBackgroundColor(cacheTypeEnum),
-        color: displayUtils.cacheTypeLabelTextColor(cacheTypeEnum),
         fontSize: props.small ? global_FontSize_sm.value : global_FontSize_md.value,
         fontWeight: 'lighter',
         padding: global_spacer_xs.value,
@@ -21,7 +20,7 @@ const CacheTypeBadge = (props: { cacheType: string; small: boolean; cacheName: s
       }}
     >
       {props.cacheType}
-    </Badge>
+    </Label>
   );
 };
 export { CacheTypeBadge };
diff --git a/src/app/app.css b/src/app/app.css
index 9fc213982..e911cae29 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -55,3 +55,7 @@ body,
 .role-icon {
   margin-right: var(--pf-v5-global--spacer--xs);
 }
+
+.darkThemeSwitch .pf-v5-c-switch__input:not(:checked) ~ .pf-v5-c-switch__label {
+  color: var(--pf-v5-global--Color--light-100);
+}
diff --git a/src/app/assets/languages/en.json b/src/app/assets/languages/en.json
index 932d69d34..1a75ec8aa 100644
--- a/src/app/assets/languages/en.json
+++ b/src/app/assets/languages/en.json
@@ -20,7 +20,8 @@
     "skip-to-content": "Skip to Content",
     "about-name": "About",
     "documentation-name": "Documentation",
-    "close-browser-message": "Close the browser or open an incognito window to log again."
+    "close-browser-message": "Close the browser or open an incognito window to log again.",
+    "dark-theme": "Dark theme"
   },
   "welcome-page": {
     "welcome-title": "Welcome to {{brandname}} Server",
diff --git a/src/app/providers/ThemeProvider.tsx b/src/app/providers/ThemeProvider.tsx
index b3e90c9c2..55ef48bdb 100644
--- a/src/app/providers/ThemeProvider.tsx
+++ b/src/app/providers/ThemeProvider.tsx
@@ -22,7 +22,7 @@ const ThemeProvider = ({children})=>{
             document.documentElement.classList.remove('pf-v5-theme-dark');
         }
 
-        if(localStorage){
+        if (localStorage) {
             localStorage.setItem('theme',theme);
         }
     },[theme])
@@ -33,9 +33,9 @@ const ThemeProvider = ({children})=>{
     const themeState = {
         theme,
         toggleTheme,
-        syntaxHighLighterTheme 
+        syntaxHighLighterTheme
     }
     return <ThemeContext.Provider value={themeState} >{children}</ThemeContext.Provider>
 }
 
-export {ThemeProvider}
\ No newline at end of file
+export {ThemeProvider}