fix theme config page when theme is forced

Signed-off-by: Guillaume BERNARD <guillaume.bernard@live.fr>

Author: guillaumebernard84

frontend/src/components/App/Settings/Settings.tsx

@@ -52,6 +52,7 @@ export default function Settings() {
   const dispatch = useDispatch();
   const themeName = useTypedSelector(state => state.theme.name);
   const appThemes = useAppThemes();
+  const forceTheme = useTypedSelector(state => state.config.forceTheme);
 
   useEffect(() => {
     dispatch(
@@ -200,6 +201,19 @@ export default function Settings() {
             pb: 5,
           }}
         >
+          {forceTheme && (
+            <Typography
+              variant="body2"
+              sx={theme => ({
+                textAlign: 'center',
+                color: theme.palette.text.secondary,
+                fontStyle: 'italic',
+                mb: 2,
+              })}
+            >
+              {t('translation|Theme has been forced by your administrator')}
+            </Typography>
+          )}
           <Box
             sx={{
               display: 'grid',
@@ -210,18 +224,20 @@ export default function Settings() {
                 gridTemplateColumns: 'repeat(auto-fit, minmax(130px, 1fr))',
                 gap: 2,
               },
+              opacity: forceTheme ? 0.5 : 1,
+              pointerEvents: forceTheme ? 'none' : 'auto',
             }}
           >
             {appThemes.map(it => (
               <Box
                 key={it.name}
                 role="button"
-                tabIndex={0}
+                tabIndex={forceTheme ? -1 : 0}
                 onKeyDown={e => {
                   if (e.key === 'Enter' || e.key === ' ') dispatch(setTheme(it.name));
                 }}
                 sx={{
-                  cursor: 'pointer',
+                  cursor: forceTheme ? 'not-allowed' : 'pointer',
                   border: themeName === it.name ? '2px solid' : '1px solid',
                   borderColor: themeName === it.name ? 'primary' : 'divider',
                   borderRadius: 2,
@@ -231,10 +247,10 @@ export default function Settings() {
                   alignItems: 'center',
                   transition: '0.2 ease',
                   '&:hover': {
-                    backgroundColor: 'divider',
+                    backgroundColor: forceTheme ? 'transparent' : 'divider',
                   },
                 }}
-                onClick={() => dispatch(setTheme(it.name))}
+                onClick={() => !forceTheme && dispatch(setTheme(it.name))}
               >
                 <ThemePreview theme={it} size={110} />
                 <Box sx={{ mt: 1 }}>{capitalize(it.name)}</Box>

frontend/src/i18n/locales/de/translation.json

@@ -141,6 +141,7 @@
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
   "Theme": "Design",
+  "Theme has been forced by your administrator": "",
   "Cluster Settings": "Cluster-Einstellungen",
   "There seem to be no clusters configured…": "",
   "Cluster {{ clusterName }} does not exist. Please select a valid cluster:": "",

frontend/src/i18n/locales/en/translation.json

@@ -141,6 +141,7 @@
   "Sort sidebar items alphabetically": "Sort sidebar items alphabetically",
   "Use evict for pod deletion": "Use evict for pod deletion",
   "Theme": "Theme",
+  "Theme has been forced by your administrator": "Theme has been forced by your administrator",
   "Cluster Settings": "Cluster Settings",
   "There seem to be no clusters configured…": "There seem to be no clusters configured…",
   "Cluster {{ clusterName }} does not exist. Please select a valid cluster:": "Cluster {{ clusterName }} does not exist. Please select a valid cluster:",

frontend/src/i18n/locales/es/translation.json

@@ -141,6 +141,7 @@
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
   "Theme": "Tema",
+  "Theme has been forced by your administrator": "",
   "Cluster Settings": "Configuración del cluster",
   "There seem to be no clusters configured…": "No parece haber clusters configurados…",
   "Cluster {{ clusterName }} does not exist. Please select a valid cluster:": "El cluster {{ clusterName }} no existe. Por favor seleccione un cluster válido:",

frontend/src/i18n/locales/fr/translation.json

@@ -141,6 +141,7 @@
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
   "Theme": "Thème",
+  "Theme has been forced by your administrator": "Le thème est imposé par votre administrateur",
   "Cluster Settings": "Paramètres du cluster",
   "There seem to be no clusters configured…": "",
   "Cluster {{ clusterName }} does not exist. Please select a valid cluster:": "",

frontend/src/i18n/locales/hi/translation.json

@@ -141,6 +141,7 @@
   "Sort sidebar items alphabetically": "साइडबार आइटमों को वर्णानुक्रम में सॉर्ट करें",
   "Use evict for pod deletion": "Pod हटाने के लिए निष्कासन का उपयोग करें",
   "Theme": "थीम",
+  "Theme has been forced by your administrator": "",
   "Cluster Settings": "क्लस्टर सेटिंग्स",
   "There seem to be no clusters configured…": "ऐसा लगता है कि कोई क्लस्टर कॉन्फ़िगर नहीं किया गया है…",
   "Cluster {{ clusterName }} does not exist. Please select a valid cluster:": "क्लस्टर {{ clusterName }} मौजूद नहीं है। कृपया वैध क्लस्टर चुनें:",

frontend/src/i18n/locales/it/translation.json

@@ -141,6 +141,7 @@
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
   "Theme": "Tema",
+  "Theme has been forced by your administrator": "",
   "Cluster Settings": "Impostazioni Cluster",
   "There seem to be no clusters configured…": "Sembra che non ci siano cluster configurati…",
   "Cluster {{ clusterName }} does not exist. Please select a valid cluster:": "Il cluster {{ clusterName }} non esiste. Seleziona un cluster valido:",

frontend/src/i18n/locales/ja/translation.json

@@ -141,6 +141,7 @@
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
   "Theme": "テーマ",
+  "Theme has been forced by your administrator": "",
   "Cluster Settings": "クラスター設定",
   "There seem to be no clusters configured…": "設定されたクラスターがないようです...",
   "Cluster {{ clusterName }} does not exist. Please select a valid cluster:": "クラスター {{ clusterName }} は存在しません。有効なクラスターを選択してください:",

frontend/src/i18n/locales/ko/translation.json

@@ -141,6 +141,7 @@
   "Sort sidebar items alphabetically": "사이드바 항목을 가나다순으로 정렬",
   "Use evict for pod deletion": "",
   "Theme": "테마",
+  "Theme has been forced by your administrator": "",
   "Cluster Settings": "클러스터 설정",
   "There seem to be no clusters configured…": "설정된 클러스터가 없는 것 같습니다…",
   "Cluster {{ clusterName }} does not exist. Please select a valid cluster:": "클러스터 {{ clusterName }} 가 존재하지 않습니다. 유효한 클러스터를 선택하세요:",

frontend/src/i18n/locales/pt/translation.json

@@ -141,6 +141,7 @@
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
   "Theme": "Tema",
+  "Theme has been forced by your administrator": "",
   "Cluster Settings": "Definições do Cluster",
   "There seem to be no clusters configured…": "Parece não haver clusters configurados…",
   "Cluster {{ clusterName }} does not exist. Please select a valid cluster:": "O cluster {{ clusterName }} não existe. Por favor, selecione um cluster válido:",