client: dark theme login

heyxkhoa · Jan 16, 2023 · a83de09 · a83de09
1 parent 6c4ef19
commit a83de09
Showing 1 changed file with 23 additions and 13 deletions.
diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js
@@ -33,7 +33,9 @@ const Footer = () => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
 
-    const currentTheme = useSelector((state) => state.dashboard.theme);
+    const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto'));
+    const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : ''));
+    const isLoggedIn = profileName !== '';
 
     const getYear = () => {
         const today = new Date();
@@ -68,6 +70,25 @@ const Footer = () => {
             {t(name)}
         </a>);
 
+    const renderThemeSelect = (currentTheme, isLoggedIn) => {
+        if (!isLoggedIn) {
+            return '';
+        }
+
+        return <select
+            className="form-control select select--theme"
+            value={currentTheme}
+            onChange={onThemeChanged}
+        >
+            {Object.values(THEMES)
+                .map((theme) => (
+                    <option key={theme} value={theme}>
+                        {t(`theme_${theme}`)}
+                    </option>
+                ))}
+        </select>;
+    };
+
     return (
         <>
             <footer className="footer">
@@ -77,18 +98,7 @@ const Footer = () => {
                             {renderLinks(linksData)}
                         </div>
                         <div className="footer__column footer__column--theme">
-                            <select
-                                className="form-control select select--theme"
-                                value={currentTheme}
-                                onChange={onThemeChanged}
-                            >
-                                {Object.values(THEMES)
-                                    .map((theme) => (
-                                        <option key={theme} value={theme}>
-                                            {t(`theme_${theme}`)}
-                                        </option>
-                                    ))}
-                            </select>
+                            {renderThemeSelect(currentTheme, isLoggedIn)}
                         </div>
                         <div className="footer__column footer__column--language">
                             <select