all: sync with master; upd chlog

client/src/components/ui/Footer.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames';
 
-import { REPOSITORY, PRIVACY_POLICY_LINK } from '../../helpers/constants';
+import { REPOSITORY, PRIVACY_POLICY_LINK, THEMES } from '../../helpers/constants';
 import { LANGUAGES } from '../../helpers/twosky';
 import i18n from '../../i18n';
 
@@ -10,6 +11,7 @@ import Version from './Version';
 import './Footer.css';
 import './Select.css';
 import { setHtmlLangAttr } from '../../helpers/helpers';
+import { changeTheme } from '../../actions';
 
 const linksData = [
     {
@@ -29,6 +31,11 @@ const linksData = [
 
 const Footer = () => {
     const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    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();
@@ -41,6 +48,11 @@ const Footer = () => {
         setHtmlLangAttr(value);
     };
 
+    const onThemeChanged = (event) => {
+        const { value } = event.target;
+        dispatch(changeTheme(value));
+    };
+
     const renderCopyright = () => <div className="footer__column">
         <div className="footer__copyright">
             {t('copyright')} &copy; {getYear()}{' '}
@@ -58,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">
@@ -66,6 +97,9 @@ const Footer = () => {
                         <div className="footer__column footer__column--links">
                             {renderLinks(linksData)}
                         </div>
+                        <div className="footer__column footer__column--theme">
+                            {renderThemeSelect(currentTheme, isLoggedIn)}
+                        </div>
                         <div className="footer__column footer__column--language">
                             <select
                                 className="form-control select select--language"