From 1ea457a39da063edb4cb19c7bede9b934424ae4c Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Sat, 8 Jun 2024 14:48:42 +0300
Subject: [PATCH 01/16] imported ApperearanceForm into settings

---
 frontend/src/pages/settings/index.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/pages/settings/index.jsx b/frontend/src/pages/settings/index.jsx
index 6299dff2..87b99b40 100644
--- a/frontend/src/pages/settings/index.jsx
+++ b/frontend/src/pages/settings/index.jsx
@@ -8,6 +8,7 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Stack from 'react-bootstrap/Stack';
 
+import ApperearanceForm from 'src/components/Forms/AppearanceForm.jsx';
 import { actions as modalActions } from '../../slices/modalSlice.js';
 
 import AvatarChangeForm from '../../components/Forms/AvatarChangeForm.jsx';
@@ -40,6 +41,8 @@ function SettingsPage() {
                     <UpdateAccountForm />
                     <hr className="border-secondary-subtle" />
                     <ChangePasswordForm />
+                    <hr className="border-secondary-subtle" />
+                    <ApperearanceForm />
                   </Stack>
                 </div>
               </div>

From 0b1070aedaa81f993dcbe27af6a5682cd1b3f090 Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Sat, 8 Jun 2024 15:04:36 +0300
Subject: [PATCH 02/16] added new locales

---
 frontend/src/locales/ru.json | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/locales/ru.json b/frontend/src/locales/ru.json
index 37382b37..000d01f1 100644
--- a/frontend/src/locales/ru.json
+++ b/frontend/src/locales/ru.json
@@ -395,6 +395,7 @@
     "signUp": "Регистрация"
   },
   "profileSettings": {
+    "appearance": "Внешний вид",
     "changeButton": "Изменить",
     "changePassword": "Изменить пароль",
     "currentPassword": "Текущий пароль",
@@ -407,7 +408,11 @@
     "updateButton": "Изменить",
     "updateFailed": "Не удалось обновить данные. Попробуйте позже",
     "updateSuccessful": "Данные аккаунта были обновлены",
-    "usernameLabel": "Имя пользователя"
+    "usernameLabel": "Имя пользователя",
+    "language": "Язык интерфейса",
+    "theme": "Тема",
+    "russian": "Русский",
+    "english": "English"
   },
   "forgotPass": {
     "pageHeader": "Забыли пароль?",

From b4936765bfe953e62da14857a2bc709ab8615c13 Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Sat, 8 Jun 2024 19:01:33 +0300
Subject: [PATCH 03/16] changed name of locales

---
 frontend/src/locales/ru.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/locales/ru.json b/frontend/src/locales/ru.json
index 000d01f1..31fc5b17 100644
--- a/frontend/src/locales/ru.json
+++ b/frontend/src/locales/ru.json
@@ -411,8 +411,8 @@
     "usernameLabel": "Имя пользователя",
     "language": "Язык интерфейса",
     "theme": "Тема",
-    "russian": "Русский",
-    "english": "English"
+    "ru": "Русский",
+    "en": "English"
   },
   "forgotPass": {
     "pageHeader": "Забыли пароль?",

From d3adf227ce938e3371356a91a4b345f36a8421a8 Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Sat, 8 Jun 2024 19:38:52 +0300
Subject: [PATCH 04/16] added eng locales

---
 frontend/src/locales/en.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 38c60a63..d5d0685d 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -262,6 +262,7 @@
     "signUp": "Sign Up"
   },
   "profileSettings": {
+    "appearance": "Appearance",
     "changeButton": "Change",
     "changePassword": "Change Password",
     "currentPassword": "Current Password",
@@ -274,7 +275,9 @@
     "updateButton": "Update",
     "updateFailed": "Failed to update account data. Try again later",
     "updateSuccessful": "Profile has been updated successfully",
-    "usernameLabel": "Username"
+    "usernameLabel": "Username",
+    "ru": "Russian",
+    "en": "English"
   },
   "forgotPass": {
     "pageHeader": "Forgot password?",

From 2e484854918a2f35f4d93d30742459d2afe44624 Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Sat, 8 Jun 2024 19:41:34 +0300
Subject: [PATCH 05/16] created AppearanceForm component

---
 .../src/components/Forms/AppearanceForm.jsx   | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 frontend/src/components/Forms/AppearanceForm.jsx

diff --git a/frontend/src/components/Forms/AppearanceForm.jsx b/frontend/src/components/Forms/AppearanceForm.jsx
new file mode 100644
index 00000000..d88e05da
--- /dev/null
+++ b/frontend/src/components/Forms/AppearanceForm.jsx
@@ -0,0 +1,60 @@
+import { useFormik } from 'formik';
+import { Button } from 'react-bootstrap';
+import Form from 'react-bootstrap/Form';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { useLanguage } from '../../hooks';
+
+function LanguageItem({ value, language }) {
+  const { t } = useTranslation();
+  return value === language ? (
+    <option selected>{t(`profileSettings.${value}`)}</option>
+  ) : (
+    <option value={value}>{t(`profileSettings.${value}`)}</option>
+  );
+}
+
+function ApperearanceForm() {
+  const { t } = useTranslation();
+  const { language, availableLanguages, setLanguage } = useLanguage();
+  const userInfo = useSelector((state) => state.user.userInfo);
+  const initialValues = {
+    language: language,
+    theme: '',
+  };
+  const formik = useFormik({
+    initialValues,
+    onSubmit: (values) => {},
+  });
+  return (
+    <Form className="d-flex flex-column gap-3" onSubmit={formik.handleSubmit}>
+      <h5>{t('profileSettings.appearance')}</h5>
+      <Form.Group>
+        <Form.Label>{t('profileSettings.language')}</Form.Label>
+        <Form.Select name='language' onChange={formik.handleChange}>
+          {availableLanguages.map((lang) => {
+            return <LanguageItem key={lang} language={language} value={lang} />;
+          })}
+        </Form.Select>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>{t('profileSettings.theme')}</Form.Label>
+        <Form.Select name='theme' onChange={formik.handleChange}>
+          <option>{t('settings.themes.system')}</option>
+          <option>{t('settings.themes.light')}</option>
+          <option>{t('settings.themes.dark')}</option>
+        </Form.Select>
+      </Form.Group>
+      <Button
+        className="ms-auto"
+        disabled={!formik.dirty || formik.isSubmitting}
+        type="submit"
+        variant="primary"
+      >
+        {t('profileSettings.changeButton')}
+      </Button>
+    </Form>
+  );
+}
+
+export default ApperearanceForm;

From 1e3cff396a2b9ba4e3e3c1a7dd253f95ffbf2f9e Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Sun, 9 Jun 2024 23:18:41 +0300
Subject: [PATCH 06/16] added themeItem for AppearanceForm

---
 .../src/components/Forms/AppearanceForm.jsx   | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Forms/AppearanceForm.jsx b/frontend/src/components/Forms/AppearanceForm.jsx
index d88e05da..fb7a52a8 100644
--- a/frontend/src/components/Forms/AppearanceForm.jsx
+++ b/frontend/src/components/Forms/AppearanceForm.jsx
@@ -3,6 +3,7 @@ import { Button } from 'react-bootstrap';
 import Form from 'react-bootstrap/Form';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { useTernaryDarkMode } from 'usehooks-ts';
 import { useLanguage } from '../../hooks';
 
 function LanguageItem({ value, language }) {
@@ -14,13 +15,24 @@ function LanguageItem({ value, language }) {
   );
 }
 
+function ThemeItem({ value, theme }) {
+  const { t } = useTranslation();
+  return value === theme ? (
+    <option selected>{t(`settings.themes.${theme}`)}</option>
+  ) : (
+    <option value={value}>{t(`settings.themes.${theme}`)}</option>
+  );
+}
+
 function ApperearanceForm() {
   const { t } = useTranslation();
   const { language, availableLanguages, setLanguage } = useLanguage();
-  const userInfo = useSelector((state) => state.user.userInfo);
+  const { ternaryDarkMode, setTernaryDarkMode } = useTernaryDarkMode();
+  const themes = ['system', 'light', 'dark'];
+  // const userInfo = useSelector((state) => state.user.userInfo);
   const initialValues = {
-    language: language,
-    theme: '',
+    language,
+    theme: ternaryDarkMode,
   };
   const formik = useFormik({
     initialValues,
@@ -31,7 +43,7 @@ function ApperearanceForm() {
       <h5>{t('profileSettings.appearance')}</h5>
       <Form.Group>
         <Form.Label>{t('profileSettings.language')}</Form.Label>
-        <Form.Select name='language' onChange={formik.handleChange}>
+        <Form.Select name="language" onChange={formik.handleChange}>
           {availableLanguages.map((lang) => {
             return <LanguageItem key={lang} language={language} value={lang} />;
           })}
@@ -39,10 +51,12 @@ function ApperearanceForm() {
       </Form.Group>
       <Form.Group>
         <Form.Label>{t('profileSettings.theme')}</Form.Label>
-        <Form.Select name='theme' onChange={formik.handleChange}>
-          <option>{t('settings.themes.system')}</option>
-          <option>{t('settings.themes.light')}</option>
-          <option>{t('settings.themes.dark')}</option>
+        <Form.Select name="theme" onChange={formik.handleChange}>
+          {themes.map((theme) => {
+            return (
+              <ThemeItem key={theme} theme={theme} value={ternaryDarkMode} />
+            );
+          })}
         </Form.Select>
       </Form.Group>
       <Button

From a061f7c68c6bcb018ecbe7dad59b55ceed01946b Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Mon, 10 Jun 2024 00:07:57 +0300
Subject: [PATCH 07/16] added new eng locales

---
 frontend/src/locales/en.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index d5d0685d..6a9b0f45 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -276,6 +276,8 @@
     "updateFailed": "Failed to update account data. Try again later",
     "updateSuccessful": "Profile has been updated successfully",
     "usernameLabel": "Username",
+    "language": "UI Language",
+    "theme": "Theme",
     "ru": "Russian",
     "en": "English"
   },

From 3ec9cfc867cab228ff262437ae74fae0d7956dd4 Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Mon, 10 Jun 2024 00:08:28 +0300
Subject: [PATCH 08/16] added updateSuccessful when form submiting

---
 .../src/components/Forms/AppearanceForm.jsx   | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Forms/AppearanceForm.jsx b/frontend/src/components/Forms/AppearanceForm.jsx
index fb7a52a8..26b644ac 100644
--- a/frontend/src/components/Forms/AppearanceForm.jsx
+++ b/frontend/src/components/Forms/AppearanceForm.jsx
@@ -2,9 +2,10 @@ import { useFormik } from 'formik';
 import { Button } from 'react-bootstrap';
 import Form from 'react-bootstrap/Form';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import { useTernaryDarkMode } from 'usehooks-ts';
 import { useLanguage } from '../../hooks';
+import FormAlert from './FormAlert.jsx';
+import { useState } from 'react';
 
 function LanguageItem({ value, language }) {
   const { t } = useTranslation();
@@ -18,9 +19,9 @@ function LanguageItem({ value, language }) {
 function ThemeItem({ value, theme }) {
   const { t } = useTranslation();
   return value === theme ? (
-    <option selected>{t(`settings.themes.${theme}`)}</option>
+    <option selected>{t(`settings.themes.${value}`)}</option>
   ) : (
-    <option value={value}>{t(`settings.themes.${theme}`)}</option>
+    <option value={value}>{t(`settings.themes.${value}`)}</option>
   );
 }
 
@@ -29,18 +30,32 @@ function ApperearanceForm() {
   const { language, availableLanguages, setLanguage } = useLanguage();
   const { ternaryDarkMode, setTernaryDarkMode } = useTernaryDarkMode();
   const themes = ['system', 'light', 'dark'];
-  // const userInfo = useSelector((state) => state.user.userInfo);
+  const initialFormState = { state: 'initial', message: '' };
+  const [formState, setFormState] = useState(initialFormState);
   const initialValues = {
     language,
     theme: ternaryDarkMode,
   };
   const formik = useFormik({
     initialValues,
-    onSubmit: (values) => {},
+    onSubmit: (values) => {
+      const {language, theme } = values; 
+      setFormState(initialFormState);
+      setLanguage(language);
+      setTernaryDarkMode(theme);
+      setFormState({
+        state: 'success',
+        message: 'profileSettings.updateSuccessful',
+      })
+      formik.resetForm();
+    },
   });
   return (
     <Form className="d-flex flex-column gap-3" onSubmit={formik.handleSubmit}>
       <h5>{t('profileSettings.appearance')}</h5>
+      <FormAlert onClose={() => setFormState(initialFormState)} state={formState.state}>
+        {t(formState.message)}
+      </FormAlert>
       <Form.Group>
         <Form.Label>{t('profileSettings.language')}</Form.Label>
         <Form.Select name="language" onChange={formik.handleChange}>
@@ -54,7 +69,7 @@ function ApperearanceForm() {
         <Form.Select name="theme" onChange={formik.handleChange}>
           {themes.map((theme) => {
             return (
-              <ThemeItem key={theme} theme={theme} value={ternaryDarkMode} />
+              <ThemeItem key={theme} theme={ternaryDarkMode} value={theme} />
             );
           })}
         </Form.Select>

From cc5a039026ac2526bcdc04534b9f30ecbe3eff4a Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Mon, 10 Jun 2024 11:44:29 +0300
Subject: [PATCH 09/16] renamed initialValues

---
 .../src/components/Forms/AppearanceForm.jsx   | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Forms/AppearanceForm.jsx b/frontend/src/components/Forms/AppearanceForm.jsx
index 26b644ac..9b473f23 100644
--- a/frontend/src/components/Forms/AppearanceForm.jsx
+++ b/frontend/src/components/Forms/AppearanceForm.jsx
@@ -3,9 +3,9 @@ import { Button } from 'react-bootstrap';
 import Form from 'react-bootstrap/Form';
 import { useTranslation } from 'react-i18next';
 import { useTernaryDarkMode } from 'usehooks-ts';
+import { useState } from 'react';
 import { useLanguage } from '../../hooks';
 import FormAlert from './FormAlert.jsx';
-import { useState } from 'react';
 
 function LanguageItem({ value, language }) {
   const { t } = useTranslation();
@@ -33,32 +33,35 @@ function ApperearanceForm() {
   const initialFormState = { state: 'initial', message: '' };
   const [formState, setFormState] = useState(initialFormState);
   const initialValues = {
-    language,
-    theme: ternaryDarkMode,
+    selectedLanguage: language,
+    selectedTheme: ternaryDarkMode,
   };
   const formik = useFormik({
     initialValues,
     onSubmit: (values) => {
-      const {language, theme } = values; 
+      const { selectedLanguage, selectedTheme } = values;
       setFormState(initialFormState);
-      setLanguage(language);
-      setTernaryDarkMode(theme);
+      setLanguage(selectedLanguage);
+      setTernaryDarkMode(selectedTheme);
       setFormState({
         state: 'success',
         message: 'profileSettings.updateSuccessful',
-      })
+      });
       formik.resetForm();
     },
   });
   return (
     <Form className="d-flex flex-column gap-3" onSubmit={formik.handleSubmit}>
       <h5>{t('profileSettings.appearance')}</h5>
-      <FormAlert onClose={() => setFormState(initialFormState)} state={formState.state}>
+      <FormAlert
+        onClose={() => setFormState(initialFormState)}
+        state={formState.state}
+      >
         {t(formState.message)}
       </FormAlert>
       <Form.Group>
         <Form.Label>{t('profileSettings.language')}</Form.Label>
-        <Form.Select name="language" onChange={formik.handleChange}>
+        <Form.Select name="selectedLanguage" onChange={formik.handleChange}>
           {availableLanguages.map((lang) => {
             return <LanguageItem key={lang} language={language} value={lang} />;
           })}
@@ -66,10 +69,10 @@ function ApperearanceForm() {
       </Form.Group>
       <Form.Group>
         <Form.Label>{t('profileSettings.theme')}</Form.Label>
-        <Form.Select name="theme" onChange={formik.handleChange}>
-          {themes.map((theme) => {
+        <Form.Select name="selectedTheme" onChange={formik.handleChange}>
+          {themes.map((item) => {
             return (
-              <ThemeItem key={theme} theme={ternaryDarkMode} value={theme} />
+              <ThemeItem key={item} theme={ternaryDarkMode} value={item} />
             );
           })}
         </Form.Select>

From 17cf66e94fa79561ee03eed6abbd527f5c63a71f Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Mon, 10 Jun 2024 13:04:30 +0300
Subject: [PATCH 10/16] added setLanguage to Effect for changing language in
 user navigation

---
 frontend/src/hooks/useLanguage.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/hooks/useLanguage.js b/frontend/src/hooks/useLanguage.js
index 9490ad49..61127d32 100644
--- a/frontend/src/hooks/useLanguage.js
+++ b/frontend/src/hooks/useLanguage.js
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 
 import { AVAILABLE_LANGUAGES } from '../initI18next';
 
@@ -7,6 +7,10 @@ const useLanguage = () => {
   const { i18n } = useTranslation();
   const { resolvedLanguage, changeLanguage } = i18n;
   const [language, setLanguage] = useState(resolvedLanguage);
+  
+  useEffect(() => {
+    setLanguage(resolvedLanguage);
+  });
 
   useLayoutEffect(() => {
     changeLanguage(language);

From b08a92fe546fdcae4c5304d01ac0850098bdc745 Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Mon, 10 Jun 2024 13:08:41 +0300
Subject: [PATCH 11/16] lint fix

---
 frontend/src/hooks/useLanguage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/hooks/useLanguage.js b/frontend/src/hooks/useLanguage.js
index 61127d32..95284626 100644
--- a/frontend/src/hooks/useLanguage.js
+++ b/frontend/src/hooks/useLanguage.js
@@ -7,7 +7,7 @@ const useLanguage = () => {
   const { i18n } = useTranslation();
   const { resolvedLanguage, changeLanguage } = i18n;
   const [language, setLanguage] = useState(resolvedLanguage);
-  
+
   useEffect(() => {
     setLanguage(resolvedLanguage);
   });

From a2710a495edfb98bffe64f252574aaa4503b1d81 Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Mon, 10 Jun 2024 13:51:03 +0300
Subject: [PATCH 12/16] added setLanguage and resolvedLanguage to useEffect

---
 frontend/src/hooks/useLanguage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/hooks/useLanguage.js b/frontend/src/hooks/useLanguage.js
index 95284626..7e88c47c 100644
--- a/frontend/src/hooks/useLanguage.js
+++ b/frontend/src/hooks/useLanguage.js
@@ -10,7 +10,7 @@ const useLanguage = () => {
 
   useEffect(() => {
     setLanguage(resolvedLanguage);
-  });
+  }, [setLanguage, resolvedLanguage]);
 
   useLayoutEffect(() => {
     changeLanguage(language);

From 87152c00b211eb06ec3d178d97f087166cde0263 Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Mon, 10 Jun 2024 13:51:16 +0300
Subject: [PATCH 13/16] added setLanguage and resolvedLanguage to useEffect

---
 frontend/src/components/Navigation/LanguageSelector.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/Navigation/LanguageSelector.jsx b/frontend/src/components/Navigation/LanguageSelector.jsx
index 58c908f1..b3868267 100644
--- a/frontend/src/components/Navigation/LanguageSelector.jsx
+++ b/frontend/src/components/Navigation/LanguageSelector.jsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import Dropdown from 'react-bootstrap/Dropdown';
 import Button from 'react-bootstrap/Button';
 
+import { useEffect } from 'react';
 import { useLanguage } from '../../hooks';
 
 function LanguageSelector() {
@@ -10,6 +11,10 @@ function LanguageSelector() {
 
   const { language, availableLanguages, setLanguage } = useLanguage();
 
+  useEffect(() => {
+    setLanguage(language);
+  }, [setLanguage, language]);
+
   return (
     <Dropdown align="end" as="li" className="nav-item">
       <Dropdown.Toggle

From daff9231bc15249fbcd4c7dbc02651f9d7d504d7 Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Mon, 10 Jun 2024 13:51:29 +0300
Subject: [PATCH 14/16] change default value for language

---
 frontend/src/components/Forms/AppearanceForm.jsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Forms/AppearanceForm.jsx b/frontend/src/components/Forms/AppearanceForm.jsx
index 9b473f23..4fecc25e 100644
--- a/frontend/src/components/Forms/AppearanceForm.jsx
+++ b/frontend/src/components/Forms/AppearanceForm.jsx
@@ -3,23 +3,23 @@ import { Button } from 'react-bootstrap';
 import Form from 'react-bootstrap/Form';
 import { useTranslation } from 'react-i18next';
 import { useTernaryDarkMode } from 'usehooks-ts';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useLanguage } from '../../hooks';
 import FormAlert from './FormAlert.jsx';
 
 function LanguageItem({ value, language }) {
   const { t } = useTranslation();
-  return value === language ? (
-    <option selected>{t(`profileSettings.${value}`)}</option>
-  ) : (
-    <option value={value}>{t(`profileSettings.${value}`)}</option>
-  );
+  if (value !== language) {
+    return (
+      <option value={value}>{t(`profileSettings.${value}`)}</option>
+    )
+  }
 }
 
 function ThemeItem({ value, theme }) {
   const { t } = useTranslation();
   return value === theme ? (
-    <option selected>{t(`settings.themes.${value}`)}</option>
+    <option value={value}>{t(`settings.themes.${value}`)}</option>
   ) : (
     <option value={value}>{t(`settings.themes.${value}`)}</option>
   );
@@ -62,6 +62,7 @@ function ApperearanceForm() {
       <Form.Group>
         <Form.Label>{t('profileSettings.language')}</Form.Label>
         <Form.Select name="selectedLanguage" onChange={formik.handleChange}>
+        <option defaultValue={language}>{t(`profileSettings.${language}`)}</option>
           {availableLanguages.map((lang) => {
             return <LanguageItem key={lang} language={language} value={lang} />;
           })}

From bfb32d082620cf754fd73f7b5f47fefe542b635f Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Mon, 10 Jun 2024 15:23:39 +0300
Subject: [PATCH 15/16] lint fix

---
 .../src/components/Forms/AppearanceForm.jsx   | 21 ++++++++++---------
 frontend/src/pages/settings/index.jsx         |  2 +-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Forms/AppearanceForm.jsx b/frontend/src/components/Forms/AppearanceForm.jsx
index 4fecc25e..faaba847 100644
--- a/frontend/src/components/Forms/AppearanceForm.jsx
+++ b/frontend/src/components/Forms/AppearanceForm.jsx
@@ -3,26 +3,22 @@ import { Button } from 'react-bootstrap';
 import Form from 'react-bootstrap/Form';
 import { useTranslation } from 'react-i18next';
 import { useTernaryDarkMode } from 'usehooks-ts';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useLanguage } from '../../hooks';
 import FormAlert from './FormAlert.jsx';
 
 function LanguageItem({ value, language }) {
   const { t } = useTranslation();
   if (value !== language) {
-    return (
-      <option value={value}>{t(`profileSettings.${value}`)}</option>
-    )
+    return <option value={value}>{t(`profileSettings.${value}`)}</option>;
   }
 }
 
 function ThemeItem({ value, theme }) {
   const { t } = useTranslation();
-  return value === theme ? (
-    <option value={value}>{t(`settings.themes.${value}`)}</option>
-  ) : (
-    <option value={value}>{t(`settings.themes.${value}`)}</option>
-  );
+  if (value !== theme) {
+    return <option value={value}>{t(`settings.themes.${value}`)}</option>;
+  }
 }
 
 function ApperearanceForm() {
@@ -62,7 +58,9 @@ function ApperearanceForm() {
       <Form.Group>
         <Form.Label>{t('profileSettings.language')}</Form.Label>
         <Form.Select name="selectedLanguage" onChange={formik.handleChange}>
-        <option defaultValue={language}>{t(`profileSettings.${language}`)}</option>
+          <option defaultValue={language}>
+            {t(`profileSettings.${language}`)}
+          </option>
           {availableLanguages.map((lang) => {
             return <LanguageItem key={lang} language={language} value={lang} />;
           })}
@@ -71,6 +69,9 @@ function ApperearanceForm() {
       <Form.Group>
         <Form.Label>{t('profileSettings.theme')}</Form.Label>
         <Form.Select name="selectedTheme" onChange={formik.handleChange}>
+          <option defaultValue={ternaryDarkMode}>
+            {t(`settings.themes.${ternaryDarkMode}`)}
+          </option>
           {themes.map((item) => {
             return (
               <ThemeItem key={item} theme={ternaryDarkMode} value={item} />
diff --git a/frontend/src/pages/settings/index.jsx b/frontend/src/pages/settings/index.jsx
index 87b99b40..25b8a4f4 100644
--- a/frontend/src/pages/settings/index.jsx
+++ b/frontend/src/pages/settings/index.jsx
@@ -8,12 +8,12 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Stack from 'react-bootstrap/Stack';
 
-import ApperearanceForm from 'src/components/Forms/AppearanceForm.jsx';
 import { actions as modalActions } from '../../slices/modalSlice.js';
 
 import AvatarChangeForm from '../../components/Forms/AvatarChangeForm.jsx';
 import ChangePasswordForm from '../../components/Forms/ChangePasswordForm.jsx';
 import UpdateAccountForm from '../../components/Forms/UpdateAccountForm.jsx';
+import ApperearanceForm from '../../components/Forms/AppearanceForm.jsx';
 
 function SettingsPage() {
   const { t } = useTranslation();

From b1bf035729b5fd12c3f298e76891d9479cdfe5ed Mon Sep 17 00:00:00 2001
From: Daniil Bobrov <allodrmen@yandex.ru>
Date: Mon, 10 Jun 2024 17:33:11 +0300
Subject: [PATCH 16/16] change settings for submit

---
 frontend/src/components/Forms/AppearanceForm.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Forms/AppearanceForm.jsx b/frontend/src/components/Forms/AppearanceForm.jsx
index faaba847..446cb10f 100644
--- a/frontend/src/components/Forms/AppearanceForm.jsx
+++ b/frontend/src/components/Forms/AppearanceForm.jsx
@@ -29,16 +29,18 @@ function ApperearanceForm() {
   const initialFormState = { state: 'initial', message: '' };
   const [formState, setFormState] = useState(initialFormState);
   const initialValues = {
-    selectedLanguage: language,
-    selectedTheme: ternaryDarkMode,
+    selectedLanguage: '',
+    selectedTheme: '',
   };
   const formik = useFormik({
     initialValues,
     onSubmit: (values) => {
       const { selectedLanguage, selectedTheme } = values;
       setFormState(initialFormState);
-      setLanguage(selectedLanguage);
-      setTernaryDarkMode(selectedTheme);
+      setLanguage(selectedLanguage !== '' ? selectedLanguage : language);
+      setTernaryDarkMode(
+        selectedTheme !== '' ? selectedTheme : ternaryDarkMode,
+      );
       setFormState({
         state: 'success',
         message: 'profileSettings.updateSuccessful',