polishing a rock of shit

frontend/app/src/App.css

@@ -3,6 +3,7 @@ body {
   color: #fff;
   font-family: "Comfortaa", sans-serif;
   background-image: linear-gradient(to bottom, #020917, #101725);
+  background-color: #001529
 }
 
 .content {

frontend/app/src/components/HeaderComponent.tsx

@@ -1,14 +1,15 @@
 import {
   DesktopOutlined,
+  GlobalOutlined,
   LogoutOutlined,
   SettingOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { Layout, Menu, MenuProps, Popover } from "antd";
+import { Layout, Menu, MenuProps, Popover, Select } from "antd";
 import React, { useState } from "react";
 import AuthModal from "./AuthModal";
 import "./styles.css";
-import { StorePrototype, logOut, store } from "../config/store";
+import { StorePrototype, logOut, setLanguage, store } from "../config/store";
 import { useSelector } from "react-redux";
 import tr from "../config/translation";
 import { Link, useNavigate } from "react-router-dom";
@@ -23,11 +24,34 @@ const HeaderComponent = () => {
 
   const [authModalOpen, setAuthModalOpen] = useState(false);
   const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const [languageSelectOpen, setLanguageSelectOpen] = useState(false);
+  const currentLanguage = useSelector(
+    (state: StorePrototype) => state.settings.language
+  );
 
   const user: NullableUser = useSelector(
     (state: StorePrototype) => state.auth.user
   );
 
+  const languageSelectItems: MenuProps["items"] = [
+    {
+      label: "English",
+      key: "en",
+      onClick: () => {
+        store.dispatch(setLanguage("en"));
+        window.location.reload();
+      },
+    },
+    {
+      label: "Русский",
+      key: "ru",
+      onClick: () => {
+        store.dispatch(setLanguage("ru"));
+        window.location.reload();
+      },
+    },
+  ];
+
   const userMenuItems: MenuProps["items"] = [
     {
       label: <Link to="/settings">{tr("Settings")}</Link>,
@@ -59,6 +83,28 @@ const HeaderComponent = () => {
       icon: <DesktopOutlined />,
       disabled: !user,
     },
+    {
+      label: (
+        <Popover
+          trigger="click"
+          open={languageSelectOpen}
+          onOpenChange={(isOpen) => setLanguageSelectOpen(isOpen)}
+          content={
+            <Menu
+              theme="dark"
+              mode="vertical"
+              items={languageSelectItems}
+              selectedKeys={currentLanguage ? [currentLanguage] : undefined}
+            />
+          }
+        >
+          {tr("Language")}
+        </Popover>
+      ),
+      key: "language",
+      icon: <GlobalOutlined />,
+      onClick: () => setLanguageSelectOpen(true),
+    },
     {
       label: user ? (
         <Popover

frontend/app/src/components/styles.css

@@ -14,7 +14,6 @@
     opacity: 0%;
   }
   50% {
-    opacity: 20%;
     transform: translateY(3%);
   }
   100% {

frontend/app/src/config/store.ts

@@ -19,11 +19,11 @@ const initialAuthDataState: AuthDataType = {
 };
 
 export type SettingsType = {
-  language: string | null;
+  language: string | undefined;
 };
 
 const initialSettingsState: SettingsType = {
-  language: null,
+  language: undefined,
 };
 
 export type StorePrototype = {

frontend/app/src/config/translationMap.json

@@ -49,5 +49,20 @@
     },
     "Login failed!": {
         "ru": "Вход не удался!"
+    },
+    "Language": {
+        "ru": "Язык"
+    },
+    "Create queue": {
+        "ru": "Создать очередь"
+    },
+    "My queues": {
+        "ru": "Мои очереди"
+    },
+    "Settings": {
+        "ru": "Настройки"
+    },
+    "Dashboard": {
+        "ru": "Панель управления"
     }
 }

frontend/app/src/pages/styles.css

@@ -5,7 +5,6 @@
       opacity: 0%;
     }
     50% {
-      opacity: 20%;
       transform: translateY(3%);
     }
     100% {