feat: add modal box utility classes

src/locales/en/en.json

@@ -113,12 +113,18 @@
     "createTitle": "Create your PIN Code",
     "confirmTitle": "Confirm your PIN Code"
   },
+  "logout": {
+    "title": "Logout",
+    "desc": "Are you sure you want to continue?"
+  },
   "button": {
     "login": "Login",
     "register": "Register",
     "recover": "Recover",
     "continue": "Continue",
-    "resetPassword": "Reset Password"
+    "resetPassword": "Reset Password",
+    "logout": "Logout",
+    "cancel": "Cancel"
   },
   "notFound": {
     "code": "404",

src/locales/ru/ru.json

@@ -113,12 +113,18 @@
     "createTitle": "Создайте PIN-код",
     "confirmTitle": "Подтвердите PIN-код"
   },
+  "logout": {
+    "title": "Выйти",
+    "desc": "Вы уверены, что хотите продолжить?"
+  },
   "button": {
     "login": "Войти",
     "register": "Зарегистрироваться",
     "recover": "Восстановить",
     "continue": "Продолжить",
-    "resetPassword": "Сбросить пароль"
+    "resetPassword": "Сбросить пароль",
+    "logout": "Выйти",
+    "cancel": "Отмена"
   },
   "notFound": {
     "code": "404",

src/pages/Settings/Settings.tsx

-import React from "react";
+import React, { useState } from "react";
 import "./Settings.css";
 import { useLanguage } from "../../contexts/LanguageContext/useLanguage";
 import CSelect from "../../components/CSelect";
@@ -10,12 +10,19 @@ import { MdOutlineLogout } from "react-icons/md";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch } from "../../stores/store";
 import { logout } from "../../stores/slices/authSlice";
+import CModal from "../../components/CModal";
+import CButton from "../../components/CButton";
 
 const Settings: React.FC = () => {
+  const [isOpenLogoutModal, setIsOpenLogoutModal] = useState(false);
   const { language, changeLanguage } = useLanguage();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
+  const toggleLogoutModal = () => {
+    setIsOpenLogoutModal((prev) => !prev);
+  };
+
   return (
     <div className="settings">
       <h3 className="settings__title">{t("settings.title")}</h3>
@@ -62,14 +69,30 @@ const Settings: React.FC = () => {
           {t("settings.recoverPassword")}
         </div>
 
-        <div
-          className="settings__content__action"
-          onClick={() => dispatch(logout())}
-        >
+        <div className="settings__content__action" onClick={toggleLogoutModal}>
           <MdOutlineLogout className="settings__content__action__icon" />{" "}
           {t("settings.logout")}
         </div>
       </div>
+
+      <CModal
+        isOpen={isOpenLogoutModal}
+        onToggle={toggleLogoutModal}
+        content={
+          <div className="modal__box">
+            <h3 className="modal__box__title">{t("logout.title")}</h3>
+            <p>{t("logout.desc")}</p>
+            <div className="modal__box__actions">
+              <CButton title={t("button.cancel")} onClick={toggleLogoutModal} />
+              <CButton
+                title={t("button.logout")}
+                variant="danger"
+                onClick={() => dispatch(logout())}
+              />
+            </div>
+          </div>
+        }
+      />
     </div>
   );
 };

src/styles/global.css

@@ -55,4 +55,19 @@ html[data-theme='dark'] {
     --content-bg-color: #000000;
     --text-color: #ffffff;
     --on-text-color: #000000;
+}
+
+.modal__box {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.modal__box__title {
+    text-align: center;
+}
+
+.modal__box__actions {
+    display: flex;
+    gap: 0.5rem;
 }
\ No newline at end of file