partner request design

Reviewed-on: #36

package-lock.json

@@ -1,5 +1,9 @@
 {
+<<<<<<< HEAD
+  "name": "itguild.info",
+=======
   "name": "outstaffing-react",
+>>>>>>> 42b597d58589cfa47890a35c06fd651fc654742a
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
@@ -9,7 +13,9 @@
       "dependencies": {
         "@ckeditor/ckeditor5-build-classic": "^38.0.1",
         "@ckeditor/ckeditor5-react": "^6.0.0",
+        "@emotion/react": "^11.11.4",
         "@reduxjs/toolkit": "^1.6.0",
+        "@table-library/react-table-library": "^4.1.7",
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
@@ -2830,21 +2836,21 @@
       }
     },
     "node_modules/@emotion/babel-plugin": {
-      "version": "11.10.6",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
-      "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/runtime": "^7.18.3",
-        "@emotion/hash": "^0.9.0",
-        "@emotion/memoize": "^0.8.0",
-        "@emotion/serialize": "^1.1.1",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
         "babel-plugin-macros": "^3.1.0",
         "convert-source-map": "^1.5.0",
         "escape-string-regexp": "^4.0.0",
         "find-root": "^1.1.0",
         "source-map": "^0.5.7",
-        "stylis": "4.1.3"
+        "stylis": "4.2.0"
       }
     },
     "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
@@ -2867,39 +2873,39 @@
       }
     },
     "node_modules/@emotion/cache": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
-      "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
       "dependencies": {
-        "@emotion/memoize": "^0.8.0",
-        "@emotion/sheet": "^1.2.1",
-        "@emotion/utils": "^1.2.0",
-        "@emotion/weak-memoize": "^0.3.0",
-        "stylis": "4.1.3"
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
       }
     },
     "node_modules/@emotion/hash": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
-      "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
     },
     "node_modules/@emotion/memoize": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
-      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "node_modules/@emotion/react": {
-      "version": "11.10.6",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
-      "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.6",
-        "@emotion/cache": "^11.10.5",
-        "@emotion/serialize": "^1.1.1",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@emotion/utils": "^1.2.0",
-        "@emotion/weak-memoize": "^0.3.0",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
         "hoist-non-react-statics": "^3.3.1"
       },
       "peerDependencies": {
@@ -2912,44 +2918,44 @@
       }
     },
     "node_modules/@emotion/serialize": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
-      "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.3.tgz",
+      "integrity": "sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==",
       "dependencies": {
-        "@emotion/hash": "^0.9.0",
-        "@emotion/memoize": "^0.8.0",
-        "@emotion/unitless": "^0.8.0",
-        "@emotion/utils": "^1.2.0",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@emotion/sheet": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
-      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
     },
     "node_modules/@emotion/unitless": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
-      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
     },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
-      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
     },
     "node_modules/@emotion/utils": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
-      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
     },
     "node_modules/@emotion/weak-memoize": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
-      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
@@ -5203,6 +5209,21 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@table-library/react-table-library": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@table-library/react-table-library/-/react-table-library-4.1.7.tgz",
+      "integrity": "sha512-KKFjdACvEUeD9yhgXBjZUJSdE9pxUbJdou4Pp71FW8dxQWc7LcMcSxpveSfGXw8KlcWY0hThJOwyjQb+UKOmnw==",
+      "dependencies": {
+        "clsx": "1.1.1",
+        "react-virtualized-auto-sizer": "1.0.7",
+        "react-window": "1.8.7"
+      },
+      "peerDependencies": {
+        "@emotion/react": ">= 11",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.16.5",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
@@ -8011,9 +8032,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001458",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001458.tgz",
-      "integrity": "sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w==",
+      "version": "1.0.30001597",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz",
+      "integrity": "sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==",
       "funding": [
         {
           "type": "opencollective",
@@ -8022,6 +8043,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -8247,6 +8272,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -21332,6 +21365,39 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-virtualized-auto-sizer": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz",
+      "integrity": "sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA==",
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc"
+      }
+    },
+    "node_modules/react-window": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.7.tgz",
+      "integrity": "sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-window/node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/react-yandex-metrika": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-yandex-metrika/-/react-yandex-metrika-2.6.0.tgz",
@@ -23086,9 +23152,9 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
-      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "node_modules/supports-color": {
       "version": "5.5.0",

package.json

@@ -5,7 +5,9 @@
   "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^38.0.1",
     "@ckeditor/ckeditor5-react": "^6.0.0",
+    "@emotion/react": "^11.11.4",
     "@reduxjs/toolkit": "^1.6.0",
+    "@table-library/react-table-library": "^4.1.7",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",

src/App.js

@@ -1,156 +0,0 @@
-import React from "react";
-import {
-  BrowserRouter as Router,
-  Route,
-  Routes,
-  Navigate,
-} from "react-router-dom";
-
-import { getNotification } from "@redux/outstaffingSlice";
-
-import Auth from "./pages/Auth/Auth";
-import CatalogSpecialists from "@pages/CatalogSpecialists/CatalogSpecialists";
-import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
-import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo";
-import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
-import { TrackerRegistration } from "@pages/TrackerRegistration/TrackerRegistration";
-import Home from "./pages/Home/Home";
-import Candidate from "./components/Candidate/Candidate";
-import Calendar from "./components/Calendar/Calendar";
-import ReportForm from "./components/ReportForm/ReportForm";
-import FreeDevelopers from "./components/FreeDevelopers/FreeDevelopers";
-import { TicketFullScreen } from "./components/Modal/Tracker/TicketFullScreen/TicketFullScreen";
-import { ProfileCalendar } from "./components/ProfileCalendar/ProfileCalendar";
-import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting";
-import Article from "./pages/Article/Article";
-import FormPage from "./pages/FormPage/FormPage";
-import SingleReportPage from "./pages/SingleReportPage/SingleReportPage";
-import { QuizPage } from "./pages/quiz/QuizPage";
-import { QuizReportPage } from "./pages/quiz/QuizReportPage";
-import { Profile } from "./pages/Profile/Profile.js";
-import { Summary } from "./pages/Summary/Summary";
-import { ViewReport } from "./pages/ViewReport/ViewReport";
-import { Tracker } from "./pages/Tracker/Tracker";
-import { Payouts } from "./pages/Payouts/Payouts";
-import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings";
-import { PartnerRequests } from "./pages/PartnerRequests/PartnerRequests";
-import { PartnerAddRequest } from "./pages/PartnerAddRequest/PartnerAddRequest";
-import { PartnerBid } from "./pages/PartnerBid/PartnerBid";
-import { PartnerCategories } from "./pages/PartnerСategories/PartnerСategories";
-import { PartnerTreaties } from "./pages/PartnerTreaties/PartnerTreaties";
-import { PartnerEmployees } from "./pages/PartnerEmployees/PartnerEmployees";
-import { AuthForCandidate } from "./pages/AuthForCandidate/AuthForCandidate";
-import { RegistrationForCandidate } from "./pages/RegistrationForCandidate/RegistrationForCandidate";
-import { ProfileCandidate } from "./pages/ProfileCandidate/ProfileCandidate";
-import { PassingTests } from "./pages/quiz/PassingTests";
-import Blog from "./pages/Blog/Blog";
-import Statistics from "@pages/Statistics/Statistics";
-import { ProjectTracker } from "./pages/ProjectTracker/ProjectTracker";
-import { FrequentlyAskedQuestions } from "./pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
-import { FrequentlyAskedQuestion } from "./pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
-import Notification from "@components/Notification/Notification";
-import { useSelector } from "react-redux";
-
-import "./assets/global.scss";
-import "./assets/fonts/stylesheet.css";
-import "bootstrap/dist/css/bootstrap.min.css";
-
-const App = () => {
-  const notification = useSelector(getNotification)
-  return (
-    <>
-      <Router>
-        <Routes>
-          <Route exact path="/auth" element={<Auth />} />
-          <Route exact path="/tracker-intro" element={<TrackerIntro />} />
-          <Route exact path="/tracker-auth" element={<TrackerAuth />} />
-          <Route exact path="/tracker-registration" element={<TrackerRegistration />} />
-          <Route exact path="/company" element={<CompanyInfo />} />
-          <Route exact path="/registration-setting" element={<RegistrationSetting />} />
-          <Route exact path="/catalog-specialists" element={<CatalogSpecialists />} />
-
-          <Route exact path="/worker/:id" element={<FreeDevelopers />} />
-          <Route
-            exact
-            path="/tracker/task/:id"
-            element={<TicketFullScreen />}
-          ></Route>
-          <Route
-            exact
-            path="/tracker/project/:id"
-            element={<ProjectTracker />}
-          />
-
-          <Route exact path="/auth-candidate" element={<AuthForCandidate />} />
-          <Route
-            exact
-            path="/registration-candidate"
-            element={<RegistrationForCandidate />}
-          />
-
-          <Route exact path="/blog" element={<Blog />}></Route>
-          <Route exact path="/blog/article/:id" element={<Article />}></Route>
-          <Route
-            exact
-            path="/frequently-asked-questions"
-            element={<FrequentlyAskedQuestions />}
-          />
-          <Route
-            exact
-            path="/frequently-asked-question/:id"
-            element={<FrequentlyAskedQuestion />}
-          />
-
-          <Route exact path="/candidate/:id" element={<Candidate />} />
-          <Route exact path="/candidate/:id/form" element={<FormPage />} />
-          <Route path="/:userId/calendar" element={<Calendar />} />
-
-          <Route exact path="/report" element={<ReportForm />} />
-          <Route path="/report/:id" element={<SingleReportPage />} />
-
-          <Route exact path="quiz">
-            <Route index element={<QuizPage />} />
-            <Route exact path="test/:uuid" element={<PassingTests />} />
-            <Route exact path="report/:uuid" element={<QuizReportPage />} />
-          </Route>
-
-          <Route exact path="profile">
-            <Route index element={<Profile />} />
-            <Route exact path="catalog" element={<Home />} />
-            <Route exact path="calendar" element={<ProfileCalendar />} />
-            <Route exact path="calendar/view/" element={<ProfileCalendar />} />
-            <Route exact path="summary" element={<Summary />} />
-            <Route exact path="view/:id" element={<ViewReport />} />
-            <Route exact path="tracker" element={<Tracker />} />
-            <Route exact path="statistics/:id" element={<Statistics/>}/>
-            <Route exact path="payouts" element={<Payouts />} />
-            <Route exact path="settings" element={<PartnerSettings />} />
-            <Route exact path="requests" element={<PartnerRequests />} />
-            <Route exact path="add-request" element={<PartnerAddRequest />} />
-            <Route exact path="edit-request" element={<PartnerAddRequest />} />
-            <Route exact path="bid" element={<PartnerBid />} />
-            <Route exact path="categories" element={<PartnerCategories />} />
-            <Route exact path="treaties" element={<PartnerTreaties />} />
-            <Route
-              exact
-              path="categories/employees"
-              element={<PartnerEmployees />}
-            />
-          </Route>
-
-
-          <Route exact path="profile-candidate/:id">
-            <Route index element={<ProfileCandidate />} />
-          </Route>
-
-          <Route path="*" element={<Navigate to="/auth" replace />} />
-        </Routes>
-      </Router>
-      {notification.show &&
-        <Notification />
-      }
-    </>
-  );
-};
-
-export default App;

src/App.jsx

@@ -0,0 +1,34 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import React from "react";
+import { useSelector } from "react-redux";
+import {
+  Navigate,
+  Route,
+  BrowserRouter as Router,
+  Routes
+} from "react-router-dom";
+
+import { getNotification } from "@redux/outstaffingSlice";
+
+import { MainPage } from "@pages/MainPage/MainPage";
+
+import { Notification } from "@components/Notification/Notification";
+
+import "assets/fonts/stylesheet.css";
+import "assets/global.scss";
+
+const App = () => {
+  const notification = useSelector(getNotification);
+  return (
+    <>
+      <Router>
+        <Routes>
+          <Route path="*" element={<MainPage />} />
+        </Routes>
+      </Router>
+      {notification.show && <Notification />}
+    </>
+  );
+};
+
+export default App;

src/api/request.js

@@ -41,7 +41,7 @@ export const apiRequest = (
           if (response.data?.redirect || response.status === 401) {
             window.location.replace("/auth");
             localStorage.clear();
-            // dispatch(auth(false));
+            store.dispatch(auth(false));
             store.dispatch(setProfileInfo({}));
           }
           return resolve(response);
@@ -51,10 +51,10 @@ export const apiRequest = (
 };
 
 const RequestError = (code, msg, data) => {
-  const description = msg ? `- ${msg}` : "";
+  const descriptionMessage = msg ? `- ${msg}` : "";
 
   this.name = "RequestError";
-  this.message = `API returned: ${code}${description}.`;
+  this.message = `API returned: ${code}${descriptionMessage}.`;
   this.code = code;
   this.description = msg;
   this.data = data;

src/assets/fonts/stylesheet.css

@@ -394,3 +394,16 @@
   url('LabGrotesque-Light.ttf') format('truetype');
   font-weight: 300;
 }
+
+@font-face {
+  font-family: 'Geraspoheko';
+  src: url('GeraspohekoRegular.eot');
+  src: local('Geraspoheko'), local('GeraspohekoRegular'),
+  url('GeraspohekoRegular.eot?#iefix') format('embedded-opentype'),
+  url('GeraspohekoRegular.woff2') format('woff2'),
+  url('GeraspohekoRegular.woff') format('woff'),
+  url('GeraspohekoRegular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

src/assets/icons/arrows/arrowLanding.svg

@@ -0,0 +1,10 @@
+<svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_76_12)">
+<path d="M22.7685 8.75957H22.345C15.3781 8.75957 8.41109 8.75957 1.44414 8.75957C1.22469 8.76628 1.00541 8.7416 0.792717 8.68623C0.259454 8.5302 -0.0459255 8.00204 0.00624986 7.38338C0.0222895 7.10907 0.131776 6.84899 0.315899 6.64783C0.500021 6.44667 0.747298 6.31697 1.01524 6.28102C1.18606 6.26022 1.35806 6.2511 1.53009 6.25372C8.46839 6.25372 15.407 6.25372 22.3458 6.25372H22.7931C22.6734 6.12655 22.6066 6.05322 22.5376 5.98222C21.3043 4.73398 20.0705 3.48392 18.8362 2.23203C18.4764 1.86848 18.2991 1.45188 18.438 0.941657C18.4905 0.730456 18.5968 0.537048 18.7462 0.38089C18.8956 0.224732 19.0828 0.111333 19.289 0.052101C19.4952 -0.00713091 19.7131 -0.0101062 19.9208 0.043474C20.1284 0.0970542 20.3186 0.205301 20.472 0.357322C20.9393 0.80435 21.3828 1.27556 21.8355 1.73663C23.3982 3.32762 24.9604 4.9181 26.5221 6.50805C27.1582 7.15557 27.1597 7.85069 26.5275 8.4951C24.5402 10.5235 22.5445 12.5363 20.568 14.5725C19.717 15.4494 18.6574 14.8432 18.4418 14.0724C18.377 13.8673 18.3702 13.6478 18.4221 13.439C18.4741 13.2301 18.5827 13.0403 18.7357 12.8913C19.0672 12.541 19.4086 12.2 19.747 11.856L22.5092 9.04745C22.5798 8.96787 22.6465 8.88985 22.7685 8.75957Z" fill="#A7CA60"/>
+</g>
+<defs>
+<clipPath id="clip0_76_12">
+<rect width="27" height="15" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/arrows/tableArrow.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.11629 5.8584L8.07227 0.858398H0.160323L4.11629 5.8584Z" fill="#2E3A59"/>
+</svg>

src/assets/icons/authIcon.svg

@@ -0,0 +1,11 @@
+<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_68_166)">
+<path d="M7.83533 -0.000427246C8.01139 0.0347969 8.19098 0.0603351 8.36352 0.106127C10.1325 0.574608 11.2721 1.69782 11.6378 3.48501C12.1598 6.0326 10.4182 8.17423 8.22135 8.59868C7.24129 8.79102 6.22489 8.63913 5.34382 8.16864C4.46275 7.69816 3.771 6.93791 3.38538 6.0163C2.7159 4.41052 3.02929 2.48332 4.40345 1.19367C5.09537 0.544667 5.89733 0.14003 6.8441 0.0330362C6.87122 0.0255363 6.89714 0.014272 6.92113 -0.000427246H7.83533Z" fill="#838383"/>
+<path d="M7.5037 17.9969C5.99838 17.9969 4.49305 18.0057 2.98817 17.993C2.33244 17.997 1.69302 17.7886 1.16549 17.399C0.50526 16.9094 0.11176 16.2485 0.0408957 15.4344C-0.0880693 13.9523 0.0822738 12.4997 0.633346 11.1106C0.967863 10.2674 1.46655 9.54135 2.29624 9.0962C2.79777 8.82462 3.36124 8.68806 3.93142 8.69993C4.11276 8.70345 4.30467 8.79195 4.47016 8.88178C4.7369 9.0262 4.98559 9.20408 5.24263 9.36611C6.01995 9.85749 6.86152 10.1243 7.78716 10.0547C8.46852 10.0037 9.09838 9.77647 9.67982 9.42071C9.87921 9.29874 10.0861 9.18338 10.2674 9.03764C10.7428 8.65414 11.2683 8.64798 11.8295 8.77346C12.8648 9.00374 13.5937 9.61928 14.0981 10.5311C14.6025 11.443 14.8301 12.4244 14.9273 13.4442C14.9789 13.9979 15.0026 14.5538 14.9982 15.1099C14.989 16.6108 13.8608 17.8252 12.3652 17.9648C12.1328 17.9863 11.8982 17.9987 11.6649 17.9991C10.2767 18.0026 8.88887 17.9991 7.50063 17.9991L7.5037 17.9969Z" fill="#838383"/>
+</g>
+<defs>
+<clipPath id="clip0_68_166">
+<rect width="15" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/calendar.svg

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z" fill-rule="evenodd"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.569 2.26115H12.9023V1.42782C12.9023 1.2068 12.8145 0.99484 12.6583 0.83856C12.502 0.68228 12.29 0.594482 12.069 0.594482C11.848 0.594482 11.636 0.68228 11.4798 0.83856C11.3235 0.99484 11.2357 1.2068 11.2357 1.42782V2.26115H6.23568V1.42782C6.23568 1.2068 6.14788 0.99484 5.9916 0.83856C5.83532 0.68228 5.62336 0.594482 5.40234 0.594482C5.18133 0.594482 4.96937 0.68228 4.81309 0.83856C4.65681 0.99484 4.56901 1.2068 4.56901 1.42782V2.26115H2.90234C2.2393 2.26115 1.60342 2.52454 1.13458 2.99338C0.665736 3.46222 0.402344 4.09811 0.402344 4.76115V14.7611C0.402344 15.4242 0.665736 16.0601 1.13458 16.5289C1.60342 16.9978 2.2393 17.2612 2.90234 17.2612H14.569C15.2321 17.2612 15.8679 16.9978 16.3368 16.5289C16.8056 16.0601 17.069 15.4242 17.069 14.7611V4.76115C17.069 4.09811 16.8056 3.46222 16.3368 2.99338C15.8679 2.52454 15.2321 2.26115 14.569 2.26115ZM15.4023 14.7611C15.4023 14.9822 15.3145 15.1941 15.1583 15.3504C15.002 15.5067 14.79 15.5945 14.569 15.5945H2.90234C2.68133 15.5945 2.46937 15.5067 2.31309 15.3504C2.15681 15.1941 2.06901 14.9822 2.06901 14.7611V8.92782H15.4023V14.7611ZM15.4023 7.26115H2.06901V4.76115C2.06901 4.54014 2.15681 4.32817 2.31309 4.17189C2.46937 4.01561 2.68133 3.92782 2.90234 3.92782H4.56901V4.76115C4.56901 4.98216 4.65681 5.19412 4.81309 5.3504C4.96937 5.50669 5.18133 5.59448 5.40234 5.59448C5.62336 5.59448 5.83532 5.50669 5.9916 5.3504C6.14788 5.19412 6.23568 4.98216 6.23568 4.76115V3.92782H11.2357V4.76115C11.2357 4.98216 11.3235 5.19412 11.4798 5.3504C11.636 5.50669 11.848 5.59448 12.069 5.59448C12.29 5.59448 12.502 5.50669 12.6583 5.3504C12.8145 5.19412 12.9023 4.98216 12.9023 4.76115V3.92782H14.569C14.79 3.92782 15.002 4.01561 15.1583 4.17189C15.3145 4.32817 15.4023 4.54014 15.4023 4.76115V7.26115Z" fill="#406128"/>
 </svg>

src/assets/icons/telegramIcon.svg

@@ -0,0 +1,15 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_64_66)">
+<mask id="mask0_64_66" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="23" height="22">
+<path d="M22.0015 0H0V22H22.0015V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_64_66)">
+<path d="M10.9461 22.0001C4.87347 21.9702 -0.0423218 16.9977 0.000274756 10.9273C0.0436186 4.86661 4.99678 -0.0297562 11.0545 0.000136144C17.1159 0.0307758 22.0317 4.98468 22.0018 11.0349C21.9719 17.1247 17.0255 22.0293 10.9461 22.0001ZM16.0487 7.6025C16.0711 6.87985 15.8103 6.63324 15.2715 6.68256C14.9591 6.71096 14.664 6.8126 14.3777 6.93217C12.3622 7.77513 10.3475 8.61809 8.335 9.46778C7.12361 9.97969 5.91447 10.4968 4.71056 11.0259C4.48935 11.1231 4.25096 11.2531 4.27338 11.567C4.2958 11.8749 4.56782 11.9234 4.77557 11.9937C5.37491 12.1962 5.97874 12.392 6.59303 12.5415C7.0997 12.6655 7.61161 12.6199 8.06298 12.3173C9.56955 11.3069 11.0709 10.2898 12.5782 9.28021C12.7307 9.17857 12.9108 8.94392 13.0901 9.15316C13.2747 9.36764 13.0087 9.5029 12.8801 9.62995C11.8354 10.6612 10.7809 11.6828 9.7362 12.7133C9.26839 13.1752 9.31397 13.6011 9.85727 13.9718C10.1547 14.1743 10.4603 14.3656 10.76 14.5667C11.5544 15.0995 12.3361 15.6525 13.1447 16.1629C14.0243 16.7182 14.4457 16.5523 14.7476 15.5852C14.7768 15.4911 14.8029 15.3947 14.8239 15.2983C15.1318 13.9016 15.3246 12.4847 15.5465 11.073C15.7378 9.85713 15.8993 8.63678 16.0472 7.6025H16.0487Z" fill="#9F9F9F"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_64_66">
+<rect width="23" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/vkIcon.svg

@@ -0,0 +1,16 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_64_59)">
+<mask id="mask0_64_59" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22">
+<path d="M21.9955 0H0V22H21.9955V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_64_59)">
+<path d="M10.9755 22C4.9123 21.9881 -0.0230861 17.0228 8.12304e-05 10.9589C0.0232485 4.91 4.97209 -0.0119356 11.0195 2.17408e-05C17.07 0.0119791 21.9994 4.95335 21.9956 11.003C21.9919 17.0743 17.0438 22.012 10.9755 22ZM11.4724 9.84166C11.4724 9.53076 11.4807 9.21913 11.4702 8.90824C11.4545 8.42621 11.3454 8.29393 10.8716 8.20798C10.2289 8.09215 9.58239 8.10336 8.93968 8.20873C8.77303 8.23638 8.60861 8.31336 8.4569 8.39332C8.28875 8.48151 8.26708 8.58987 8.47858 8.66012C8.78797 8.76325 8.99424 8.96653 9.04132 9.29162C9.12203 9.84689 9.16313 10.4044 9.05552 10.9634C8.95164 11.503 8.5974 11.6315 8.1774 11.2691C8.07502 11.1801 7.98758 11.0718 7.90014 10.9671C7.31797 10.2669 6.96373 9.44856 6.68348 8.59436C6.58409 8.29019 6.37633 8.13923 6.07739 8.134C5.45561 8.12279 4.83308 8.12129 4.2113 8.13998C3.84959 8.15119 3.76739 8.28645 3.91685 8.62126C4.63728 10.2355 5.43095 11.8101 6.52953 13.2084C7.66324 14.6515 9.10634 15.4354 10.9874 15.2972C11.314 15.2733 11.515 15.2045 11.4702 14.8226C11.4538 14.6784 11.4821 14.5237 11.5158 14.3795C11.6234 13.9139 11.9208 13.7756 12.3491 13.9841C12.6428 14.1276 12.8931 14.3376 13.127 14.5581C13.6898 15.0909 14.3302 15.3689 15.1202 15.2987C15.5155 15.2636 15.9161 15.2927 16.3144 15.292C16.6387 15.292 17.0117 15.3241 17.1589 14.9684C17.3001 14.6261 17.0109 14.3854 16.7957 14.1702C16.3024 13.6792 15.7838 13.2136 15.2868 12.7256C14.9468 12.3916 14.9274 12.1935 15.2046 11.8116C15.4819 11.4297 15.789 11.0688 16.0768 10.6944C16.5401 10.0913 16.9661 9.465 17.1634 8.71617C17.2785 8.27898 17.2037 8.15567 16.7576 8.14521C15.999 8.12802 15.2397 8.14297 14.4812 8.15119C14.2189 8.15418 14.0874 8.32307 14.0066 8.554C13.8788 8.91646 13.757 9.28265 13.6038 9.63464C13.334 10.2557 12.9701 10.8192 12.4634 11.2758C12.2885 11.4335 12.0793 11.5874 11.8252 11.4963C11.5509 11.3984 11.4919 11.1368 11.4784 10.8849C11.4597 10.5374 11.4739 10.1884 11.4724 9.84016V9.84166Z" fill="#9F9F9F"/>
+<path d="M11.4733 9.84153C11.4733 10.1898 11.4598 10.5388 11.4785 10.8863C11.492 11.1381 11.5518 11.3997 11.8253 11.4976C12.0794 11.588 12.2894 11.4341 12.4635 11.2772C12.9702 10.8205 13.3334 10.257 13.6039 9.63601C13.7571 9.28402 13.879 8.91782 14.0067 8.55537C14.0882 8.32369 14.219 8.15479 14.4813 8.15255C15.2398 8.14433 15.9991 8.13013 16.7577 8.14657C17.2038 8.15629 17.2793 8.2796 17.1635 8.71754C16.9662 9.46636 16.5402 10.0926 16.0769 10.6957C15.7891 11.0701 15.482 11.4311 15.2047 11.813C14.9275 12.1956 14.9461 12.3929 15.2869 12.727C15.7839 13.215 16.3026 13.6806 16.7958 14.1716C17.011 14.3861 17.3002 14.6267 17.159 14.9697C17.0125 15.3255 16.6396 15.2933 16.3145 15.2933C15.9162 15.2933 15.5156 15.2649 15.1203 15.3C14.3303 15.3703 13.6906 15.0923 13.1271 14.5594C12.894 14.3382 12.6436 14.129 12.3492 13.9855C11.9209 13.7762 11.6235 13.9152 11.5159 14.3808C11.4823 14.5251 11.4539 14.6798 11.4703 14.824C11.5144 15.2059 11.3141 15.2746 10.9875 15.2986C9.10646 15.4368 7.66337 14.6529 6.52967 13.2098C5.43109 11.8115 4.63817 10.2369 3.91699 8.62262C3.76752 8.28782 3.84973 8.15255 4.21144 8.14134C4.83321 8.12266 5.45575 8.12415 6.07753 8.13536C6.37721 8.1406 6.58422 8.29156 6.68362 8.59572C6.96312 9.44992 7.3181 10.2683 7.90028 10.9685C7.98772 11.0739 8.07441 11.1822 8.17754 11.2704C8.59679 11.6329 8.95178 11.5051 9.05566 10.9648C9.16327 10.4058 9.12217 9.84825 9.04146 9.29298C8.99437 8.96715 8.78811 8.76387 8.47871 8.66149C8.26647 8.59124 8.28889 8.48287 8.45704 8.39469C8.60875 8.31472 8.77315 8.237 8.93981 8.2101C9.58177 8.10472 10.229 8.09351 10.8717 8.20935C11.3455 8.29455 11.4546 8.42682 11.4703 8.9096C11.48 9.22049 11.4725 9.53213 11.4725 9.84302L11.4733 9.84153Z" fill="#FBFBFB"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_64_59">
+<rect width="22" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/EllipseIntro.svg

@@ -0,0 +1,12 @@
+<svg width="1005" height="969" viewBox="0 0 1005 969" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_53_13)">
+<circle cx="502.5" cy="466.5" r="281.5" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_f_53_13" x="0.300003" y="-35.7" width="1004.4" height="1004.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="110.35" result="effect1_foregroundBlur_53_13"/>
+</filter>
+</defs>
+</svg>

src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx

@@ -9,14 +9,14 @@ const AllTaskTableItem = ({ task, projects }) => {
     e.target?.classList.toggle("open-desc-item");
     e.target
       .closest("td")
-      ?.querySelector(".taskList__table__name-project")
+      ?.querySelector(".task-list__table__name-project")
       .classList.toggle("hide-desc");
   }
 
   return (
     <tr key={task.id}>
       <td>
-        <div className="taskList__table__title-task">
+        <div className="task-list__table__title-task">
           <p>{task.title}</p>
 
           <img
@@ -27,7 +27,7 @@ const AllTaskTableItem = ({ task, projects }) => {
             }}
           />
         </div>
-        <div className="taskList__table__name-project hide-desc">
+        <div className="task-list__table__name-project hide-desc">
           <h4>Проект:</h4>
           <p>
             {projects?.map((project) => {

src/components/AllTaskTableTracker/AllTaskTableItem/allTaskTableItem.scss

@@ -3,7 +3,7 @@
   transform: rotate(45deg) !important;
 }
 
-.taskList {
+.task-list {
   &__table {
     margin-top: 20px;
     font-size: 14px;

src/components/AllTaskTableTracker/AllTaskTableTracker.jsx

@@ -34,7 +34,7 @@ const AllTaskTableTracker = ({ filteredAllTasks, projects, loader }) => {
 
   return (
     <>
-      <table className="taskList__table">
+      <table className="task-list__table">
         <thead>
           <tr>
             <th>Задача</th>

src/components/ArchiveTableTracker/ArchiveTableTracker.jsx

@@ -24,9 +24,13 @@ const ArchiveTableTracker = ({ filterCompleteTasks, loader }) => {
                 );
               })
             ) : (
-              <div className="archive__noItem">
-                <p>В данном месяце у вас не было задач</p>
-              </div>
+              <tr>
+                <td>
+                  <div className="archive__no-item">
+                    <p>В данном месяце у вас не было задач</p>
+                  </div>
+                </td>
+              </tr>
             )}
           </>
         )}

src/components/ArchiveTableTracker/ArchiveTasksItem/ArchiveTasksItem.jsx

@@ -1,14 +1,14 @@
 import React from "react";
 
-import { getCorrectDate } from "@components/Calendar/calendarHelper";
+import { getCorrectDate } from "@utils/calendarHelper";
 
 import "./archiveTasksItem.scss";
 
 const ArchiveTasksItem = ({ task, index }) => {
   return (
     <tr key={index}>
-      <td className="archive__completeTask__description">
-        <p className="completeTask__title">{task.title}</p>
+      <td className="archive__complete-task__description">
+        <p className="complete-task__title">{task.title}</p>
         {/*<p*/}
         {/*  className="date"*/}
         {/*  dangerouslySetInnerHTML={{*/}
@@ -16,7 +16,7 @@ const ArchiveTasksItem = ({ task, index }) => {
         {/*  }}*/}
         {/*/>*/}
       </td>
-      <td className="archive__completeTask__time">
+      <td className="archive__complete-task__time">
         <p>
           {new Date(
             task.timers.reduce((acc, cur) => acc + cur.deltaSeconds, 0) * 1000
@@ -25,7 +25,7 @@ const ArchiveTasksItem = ({ task, index }) => {
             .slice(11, 19)}
         </p>
       </td>
-      <td className="archive__completeTask__info">
+      <td className="archive__complete-task__info">
         <div>
           <p>{getCorrectDate(task.updated_at)}</p>
         </div>

src/components/ArchiveTableTracker/ArchiveTasksItem/archiveTasksItem.scss

@@ -1,10 +1,10 @@
-.completeTask__title {
+.complete-task__title {
   white-space: nowrap;
   max-width: 250px;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.archive__completeTask__time {
+.archive__complete-task__time {
   text-align: center;
 }

src/components/AuthBlock/AuthBlock.jsx

@@ -108,7 +108,7 @@ export const AuthBlock = ({ title, description, img, resetModal }) => {
           >
             {isLoading ? <Loader /> : "Войти"}
           </button>
-          <NavLink to="/tracker-registration" className="auth__registration">
+          <NavLink to="/auth" className="auth__registration">
             Регистрация
           </NavLink>
         </div>

src/components/AuthBlock/authBlock.scss

@@ -101,6 +101,21 @@
         line-height: 32px;
         color: white;
         height: 45px;
+
+        @media (max-width: 900px) {
+          max-width: 185px;
+        }
+
+        @media (max-width: 450px) {
+          width: 100%;
+          max-width: none;
+          margin-right: 0;
+        }
+      }
+
+      @media (max-width: 450px) {
+        flex-direction: column;
+        row-gap: 10px;
       }
     }
 
@@ -139,20 +154,21 @@
       transform: scale(1.03);
       color: white;
     }
+
+    @media (max-width: 450px) {
+      width: 100%;
+      max-width: none;
+    }
   }
 
   &__img {
     position: absolute;
     right: 48px;
-    top: -90px;
+    top: -20px;
 
     @media (max-width: 900px) {
-      order: 1;
-      position: inherit;
-      right: inherit;
-      top: inherit;
+      top: 100px;
       max-width: 115px;
-      margin-bottom: 35px;
     }
   }
 }

src/components/AuthBox/AuthBox.jsx

@@ -70,6 +70,7 @@ export const AuthBox = ({ title }) => {
           dispatch(setUserInfo(res));
           dispatch(loading(false));
           dispatch(setRole("ROLE_PARTNER"));
+          navigate("/profile");
         }
       });
     }
@@ -90,7 +91,7 @@ export const AuthBox = ({ title }) => {
         <input id="loginEmail" type="text" name="email" placeholder="E-mail" />
 
         <label htmlFor="password">Ваш пароль</label>
-        <div className="inputWrapper">
+        <div className="input-wrapper">
           <input
             id="loginPassword"
             type={showPassword ? "text" : "password"}

src/components/AuthBox/authBox.scss

@@ -93,7 +93,7 @@
       color: #000000;
     }
 
-    .inputWrapper {
+    .input-wrapper {
       width: 100%;
       position: relative;
 

src/components/Calendar/Calendar.jsx

@@ -11,11 +11,11 @@ import { LogoutButton } from "@components/LogoutButton/LogoutButton";
 
 import rectangle from "assets/images/rectangle_secondPage.png";
 
+import { currentMonth } from "../../utils/calendarHelper";
 import CalendarComponent from "./CalendarComponent";
 import "./calendar.scss";
-import { currentMonth } from "./calendarHelper";
 
-const Calendar = () => {
+export const Calendar = () => {
   if (localStorage.getItem("role_status") !== "18") {
     return <Navigate to="/profile" replace />;
   }
@@ -60,7 +60,7 @@ const Calendar = () => {
               <img className="calendar__title-img" src={rectangle} alt="img" />
             </div>
             <div>
-              <Link to="/report">
+              <Link to="/profile/calendar/report">
                 <button className="calendar__btn">Заполнить отчет</button>
               </Link>
             </div>
@@ -79,10 +79,8 @@ const Calendar = () => {
             </p>
           </div>
         </div>
-        <Footer />
       </section>
+      <Footer />
     </div>
   );
 };
-
-export default Calendar;

src/components/Calendar/CalendarComponent.jsx

@@ -6,8 +6,8 @@ import calendarIcon from "assets/icons/calendar.svg";
 import ellipse from "assets/icons/ellipse.png";
 import rectangle from "assets/images/rectangle__calendar.png";
 
+import { calendarHelper, currentMonthAndDay } from "../../utils/calendarHelper";
 import "./calendarComponent.scss";
-import { calendarHelper, currentMonthAndDay } from "./calendarHelper";
 
 const CalendarComponent = ({ onSelect }) => {
   const [value, setValue] = useState(moment());

src/components/Calendar/calendar.scss

@@ -1,6 +1,5 @@
 .calendar {
   margin-bottom: 40px;
-  font-family: "LabGrotesque", sans-serif;
 
   &__header {
     display: flex;
@@ -136,10 +135,6 @@
       line-height: normal;
     }
   }
-
-  footer {
-    margin-top: 2rem !important;
-  }
 }
 
 @media (max-width: 575.98px) {

src/components/Calendar/calendarComponent.scss

@@ -1,9 +1,8 @@
 .calendar-component {
   position: relative;
-  margin: 30px 0;
+  margin: 10px 0;
   background-color: #f9f9f9;
   padding: 20px 30px;
-  font-family: "LabGrotesque", sans-serif;
 
   &__header {
     display: flex;
@@ -24,10 +23,14 @@
 
       .calendar__hours {
         margin: 0 5px;
-        line-height: 0;
+        font-size: 22px;
         font-weight: 500;
         display: flex;
         align-items: center;
+        span {
+          font-size: 22px;
+          font-weight: 500;
+        }
       }
     }
 
@@ -55,21 +58,33 @@
     }
 
     &-box {
+      background-color: #e5f1fb;
+      height: 47px;
       display: flex;
       align-items: center;
-      margin-left: 20px;
-      cursor: pointer;
+      margin: 0 15px;
+      padding: 0 20px;
+      border-radius: 5px;
+
+      font-weight: 400;
+      font-size: 16px;
+      color: #406128;
 
       img {
-        margin: 0px 10px;
-        width: 12px;
-        height: 12px;
-
-        &:first-child {
-          transform: rotate(180deg);
-          margin: 0;
-        }
+        width: 17px;
+        height: 17px;
+        margin: 0 10px 0 0;
       }
+    }
+
+    &-arrow {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      height: 47px;
+      padding: 0 8px;
+      background-color: #e5f1fb;
+      border-radius: 5px;
 
       span {
         color: #18586e;
@@ -94,7 +109,7 @@
   }
 
   &__rectangle {
-    margin: 20px 0;
+    margin: 10px 0;
 
     img {
       width: 100%;
@@ -108,12 +123,9 @@
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 
       p {
-        color: #398208;
-        font-size: 25px;
-        font-weight: 400;
-        font-style: normal;
-        letter-spacing: normal;
-        line-height: 30px;
+        color: #9babc5;
+        font-size: 14px;
+        font-weight: 500;
         text-align: center;
       }
     }
@@ -128,24 +140,48 @@
 
     button {
       margin: 0 auto;
-      width: 125px;
-      height: 42px;
+      width: 135px;
+      height: 82px;
       padding: 0px;
       box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-      border-radius: 5px;
+      border-radius: 10px;
       border: 1px solid #c4c4c4;
       background-color: #ffffff;
       margin-top: 20px;
       font-size: 1.2em;
       text-align: center;
 
+      .form-date {
+        width: 100%;
+        padding: 5px 0 0 15px;
+        height: 100%;
+      }
+
+      .form-box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-top: #eff5fa 2px solid;
+
+        .form-hours {
+          display: none;
+        }
+      }
+
       a {
         color: black;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
-        font-weight: 500;
-        font-size: 12px;
+        font-weight: 400;
+        font-size: 16px;
+        height: 100%;
 
         @media (max-width: 500px) {
           font-size: 10px;
@@ -153,20 +189,6 @@
         }
       }
 
-      img {
-        width: 16px;
-        height: 16px;
-        margin: 0 5px 0 0;
-
-        @media (max-width: 968px) {
-          margin-right: 2px;
-
-          @media (max-width: 610px) {
-            display: none;
-          }
-        }
-      }
-
       @media (max-width: 1200px) {
         width: 110px;
       }
@@ -215,18 +237,7 @@
   }
 }
 
-.calendar__icon {
-  margin-right: 10px;
-  margin-top: -4px;
-}
-
-@media (max-width: 575.98px) {
-  .calendar__icon {
-    display: none;
-  }
-}
-
-.selectDays {
+.select-days {
   border-style: dashed !important;
 
   &:hover {
@@ -234,7 +245,7 @@
   }
 }
 
-.selectedDay {
+.selected-day {
   background-color: #edf1ff !important;
 
   &:hover {
@@ -247,11 +258,48 @@
 }
 
 .before {
-  background-color: #e5f9b6 !important;
+  background-color: #ffffff !important;
+
+  .form-date {
+    height: 35% !important;
+  }
+  .form-box {
+    background-color: #fafbfe;
+
+    .form-hours {
+      color: #6dd077;
+      background-color: #6dd0772f;
+      border-spacing: 10px;
+      border-radius: 5px;
+      display: flex !important;
+      flex-direction: row;
+      width: 95%;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 0 7px;
+      position: relative;
+
+      span {
+        color: #1458dd;
+        font-weight: 700;
+        font-size: 14px;
+        margin: auto;
+      }
+    }
+    .form-hours::before {
+      content: "";
+      position: absolute;
+      top: 10%;
+      left: 0;
+      height: 75%;
+      border-left: 2px solid #6dd077;
+      border-radius: 5px;
+    }
+  }
 }
 
 .pass {
-  background-color: #f7d7c9 !important;
+  background-color: #ba5c33 !important;
 }
 
 .today {
@@ -260,30 +308,37 @@
 }
 
 .selected {
-  background-color: #f9f9c3 !important;
+  background-color: #cbcbb4 !important;
 }
 
 .block {
   pointer-events: none;
 }
 
-.selectDateRange {
+.select-date-range {
   display: flex;
   align-items: center;
   column-gap: 16px;
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 400;
   position: relative;
 
   .select {
+    background-color: #e5f1fb;
+    color: #406128;
     border-radius: 5px;
-    border: 2px solid #c4c4c4;
-    box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-    padding: 5px 8px;
+    padding: 15px;
     cursor: pointer;
     text-align: center;
   }
 
+  .hint {
+    color: #6f6f6f;
+    font-size: 14px;
+    font-weight: 300;
+    margin: 0 0 0 20px;
+  }
+
   .close {
     cursor: pointer;
     margin-left: 8px;
@@ -293,7 +348,7 @@
 }
 
 @media (max-width: 575.98px) {
-  .selectDateRange {
+  .select-date-range {
     font-size: 14px;
     text-align: center;
     column-gap: 8px;

src/components/Candidate/Candidate.jsx

@@ -28,11 +28,11 @@ import rectangle from "assets/images/rectangle_secondPage.png";
 
 import "./candidate.scss";
 
-const Candidate = () => {
+export const Candidate = () => {
   if (localStorage.getItem("role_status") !== "18") {
     return <Navigate to="/profile" replace />;
   }
-  // const { id: candidateId } = useParams();
+  const { id: candidateId } = useParams();
 
   const navigate = useNavigate();
 
@@ -47,7 +47,7 @@ const Candidate = () => {
   }, []);
 
   useEffect(() => {
-    apiRequest(`/user/me`, {}).then((el) =>
+    apiRequest(`/resume?userId=${candidateId}`).then((el) =>
       dispatch(currentCandidate(el.userCard))
     );
   }, [dispatch]);
@@ -91,10 +91,10 @@ const Candidate = () => {
   const { header, img, classes } = setStyles();
 
   return (
-    <div className="candidate__wrapper">
+    <div className="candidate">
       <ProfileHeader />
       <Navigation />
-      <div className="container candidate">
+      <div className="container">
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/profile" },
@@ -103,9 +103,7 @@ const Candidate = () => {
               link: "/profile/catalog"
             },
             {
-              name: `${currentCandidateObj.specification} ${
-                SKILLS[currentCandidateObj.position_id]
-              }, ${LEVELS[currentCandidateObj.level]}`,
+              name: `${currentCandidateObj.fio}`,
               link: `/candidate/${currentCandidateObj.id}`
             }
           ]}
@@ -115,6 +113,7 @@ const Candidate = () => {
           <div className="col-12 candidate__header">
             <div className="candidate__header__left">
               <h3>
+                {currentCandidateObj.fio} &nbsp;{" "}
                 {currentCandidateObj.specification} &nbsp;{" "}
                 {SKILLS[currentCandidateObj.position_id]} &nbsp;{" "}
                 {LEVELS[currentCandidateObj.level]}
@@ -233,10 +232,8 @@ const Candidate = () => {
             )}
           </div>
         </div>
-        <Footer />
       </div>
+      <Footer />
     </div>
   );
 };
-
-export default Candidate;

src/components/Candidate/candidate.scss

@@ -1,22 +1,23 @@
 @use "sass:math";
 
 .candidate {
-  padding-top: 23px;
-  z-index: 0;
+  display: flex;
+  flex-direction: column;
+  background: #f1f1f1;
 
-  &__wrapper {
-    background: #f1f1f1;
-    min-height: 100vh;
+  .container {
+    margin-top: 23px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
 
-  .profileBreadcrumbs {
+  .profile-breadcrumbs {
     position: relative;
-    z-index: -1;
   }
 
   .row {
     position: relative;
-    z-index: -1;
   }
 
   &__header {
@@ -32,13 +33,11 @@
 
   .col-xl-8 {
     position: relative;
-    z-index: -1;
   }
 
   &__main {
     margin-top: 60px;
     position: relative;
-    z-index: -1;
 
     &-description {
       padding-left: 16px;
@@ -148,12 +147,6 @@
       }
     }
   }
-
-  footer {
-    margin-top: 2.5rem !important;
-    position: relative;
-    z-index: -2;
-  }
 }
 
 @media (max-width: 375.98px) {

src/components/CardArticle/cardArticle.scss

@@ -29,8 +29,13 @@
     display: flex;
     padding: 0 0 14px 16px;
 
+    p {
+      font-size: 13px;
+    }
+
     img {
-      margin-right: 9px;
+      width: 15px;
+      margin-right: 5px;
     }
   }
 }

src/components/CardControl/CardControl.jsx

@@ -10,11 +10,11 @@ export const CardControl = ({ title, path, description, img }) => {
     <Link to={`/${path}`} className="control-card">
       <div className="control-card__about">
         <img src={img} alt="itemImg" />
-        <h3>{title}</h3>
+        <h3 dangerouslySetInnerHTML={{ __html: title }}></h3>
       </div>
       <div className="control-card__info">
         <p dangerouslySetInnerHTML={{ __html: description }}></p>
-        <div className="control-card__infoLink">
+        <div className="control-card__info-link">
           <img src={rightArrow} alt="arrow" />
         </div>
       </div>

src/components/CardControl/CardControl.scss

@@ -38,7 +38,7 @@
       font-weight: 500;
       font-size: 18px;
       line-height: 22px;
-      max-width: 125px;
+      max-width: 165px;
       margin-bottom: 0;
     }
   }
@@ -60,7 +60,7 @@
         font-weight: 700;
       }
     }
-    &Link {
+    &-link {
       width: 48px;
       height: 48px;
       background: #ddeec6;

src/components/CatalogPersonCard/CatalogPersonCard.jsx

@@ -12,30 +12,30 @@ export const CatalogPersonCard = ({
   description
 }) => {
   return (
-    <div className="catalogPersonCard">
-      <div className="catalogPersonCard__head">
-        <div className="catalogPersonCard__avatar">
+    <div className="catalog-person-card">
+      <div className="catalog-person-card__head">
+        <div className="catalog-person-card__avatar">
           <img src={img} alt="avatar" />
-          <span className="catalogPersonCard__skill">{level}</span>
+          <span className="catalog-person-card__skill">{level}</span>
         </div>
-        <div className="catalogPersonCard__info">
-          <span className="catalogPersonCard__name">{name}</span>
-          <span className="catalogPersonCard__salary">{salary} / час</span>
-          <p className="catalogPersonCard__category">
+        <div className="catalog-person-card__info">
+          <span className="catalog-person-card__name">{name}</span>
+          <span className="catalog-person-card__salary">{salary} / час</span>
+          <p className="catalog-person-card__category">
             <span>Разработка:</span> {category}
           </p>
         </div>
       </div>
-      <div className="catalogPersonCard__items">
+      <div className="catalog-person-card__items">
         {skills.map((item, index) => {
           return (
-            <div className="catalogPersonCard__skillItem" key={index}>
+            <div className="catalog-person-card__skill-item" key={index}>
               {item}
             </div>
           );
         })}
       </div>
-      <p className="catalogPersonCard__description">{description}</p>
+      <p className="catalog-person-card__description">{description}</p>
     </div>
   );
 };

src/components/CatalogPersonCard/catalogPersonCard.scss

@@ -1,5 +1,5 @@
-.catalogPersonCard {
-  background: #FFFFFF;
+.catalog-person-card {
+  background: #ffffff;
   padding: 29px 32px;
   border-radius: 8px;
   display: flex;
@@ -25,7 +25,7 @@
     bottom: -10px;
     padding: 3.5px 19px;
     border-radius: 44px;
-    background: #1458DD;
+    background: #1458dd;
     color: white;
     font-size: 14px;
   }
@@ -45,7 +45,7 @@
   }
 
   &__salary {
-    color: #1458DD;
+    color: #1458dd;
     font-weight: 700;
     font-size: 18px;
     line-height: 22px;
@@ -53,7 +53,7 @@
 
   &__category {
     span {
-      color: #6F6F6F;
+      color: #6f6f6f;
       font-size: 12px;
       line-height: 18px;
       font-weight: 400;
@@ -72,25 +72,25 @@
     row-gap: 16px;
     margin-top: 22px;
     padding-bottom: 17px;
-    border-bottom: 0.5px solid #B3DF93;
+    border-bottom: 0.5px solid #b3df93;
   }
 
-  &__skillItem {
+  &__skill-item {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 12px;
-    color: #6F6F6F;
+    color: #6f6f6f;
     width: 62px;
     height: 26px;
-    border: 0.5px solid #8DC63F;
+    border: 0.5px solid #8dc63f;
     border-radius: 44px;
   }
 
   &__description {
     margin-top: 17px;
     max-width: 245px;
-    color: #6F6F6F;
+    color: #6f6f6f;
     font-size: 12px;
     line-height: 18px;
   }

src/components/CategoriesItem/CategoriesItem.jsx

@@ -10,14 +10,16 @@ export const CategoriesItem = ({ img, title, skills, available, link }) => {
     <Link
       to={link}
       className={
-        available ? "categoriesItem" : "categoriesItem categoriesItem__disable"
+        available
+          ? "categories-item"
+          : "categories-item categories-item__disable"
       }
     >
-      <div className="categoriesItem__title">
+      <div className="categories-item__title">
         <img src={img} alt="img" />
         <h5>{title}</h5>
       </div>
-      <div className="categoriesItem__description">
+      <div className="categories-item__description">
         <p>{skills}</p>
         <div className="more">
           <img src={rightArrow} alt="arrow" />

src/components/CategoriesItem/categoriesItem.scss

@@ -1,4 +1,4 @@
-.categoriesItem {
+.categories-item {
   display: flex;
   flex-direction: column;
   padding: 33px 32px 25px 28px;

src/components/Common/AuthHeader/AuthHeader.jsx

@@ -24,9 +24,9 @@ export const AuthHeader = () => {
                   <span>Главная</span>
                 </NavLink>
               </li>
-              <li>
-                <NavLink to={"/auth"}>Кабинет разработчика</NavLink>
-              </li>
+              {/*<li>*/}
+              {/*  <NavLink to={"/profile"}>Кабинет разработчика</NavLink>*/}
+              {/*</li>*/}
               <li>
                 <NavLink to={"/tracker-intro"}>Трекер</NavLink>
               </li>
@@ -51,5 +51,3 @@ export const AuthHeader = () => {
     </div>
   );
 };
-
-export default AuthHeader;

src/components/Common/AuthHeader/authHeader.scss

@@ -25,6 +25,7 @@
     background: #ffffff;
 
     .auth-nav {
+      height: 35px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
@@ -48,11 +49,13 @@
             text-decoration: none;
           }
 
-          a:focus {
+          a:focus,
+          a.active {
             color: #000000;
           }
 
           .candidate {
+            background: transparent;
             color: #1458dd;
           }
         }

src/components/Common/BaseButton/basebutton.scss

@@ -6,7 +6,6 @@
   border-radius: 44px;
   color: white;
   font-style: normal;
-  font-family: "LabGrotesque", sans-serif;
   border: none;
   transition: 0.5s;
 

src/components/Common/Loader/Loader.jsx

@@ -8,7 +8,7 @@ export const Loader = ({ width = 50, height = 50, style }) => {
     <div className="loader">
       <SVGLoader
         type="Circles"
-        color={style ? style : `#fff`}
+        color={style ? style : `green`}
         height={height}
         width={width}
       />

src/components/Common/Loader/loader.scss

@@ -5,7 +5,6 @@
   justify-content: center;
   align-items: center;
   position: relative;
-
   //&:hover {
   //  path {
   //    fill: #6aaf5c;

src/components/Common/ModalLayout/ModalLayout.jsx

@@ -5,19 +5,25 @@ import "./modalLayout.scss";
 export const ModalLayout = ({
   active,
   setActive,
+  onClose,
   children,
   styles,
   type,
   ...props
 }) => {
+  const handleClose = (event) => {
+    if (event.target.className === "modal-layout active") {
+      setActive(false);
+      if (onClose) {
+        onClose(); // Вызов колбэк-функции при закрытии модального окна
+      }
+    }
+  };
+
   return (
     <div
       className={active ? `modal-layout active` : "modal-layout"}
-      onClick={(event) => {
-        if (event.target.className === "modal-layout active") {
-          setActive(false);
-        }
-      }}
+      onClick={handleClose}
       {...props}
     >
       <div

src/components/Common/ModalLayout/modalLayout.scss

@@ -21,13 +21,15 @@
     align-items: center;
     justify-content: center;
 
-    .selectPerson {
+    .select-person {
       align-items: start;
+      margin: 0;
+      padding: 0;
 
       &__info {
         font-size: 15px;
         font-weight: 300;
-        margin: 12px 0 20px;
+        margin-top: 8px;
       }
 
       @media (max-width: 805px) {
@@ -45,23 +47,22 @@
         font-weight: 300;
       }
 
-      .addPersonBlock {
+      .add-person-block {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-
-        button {
-          // margin: 0 auto;
-        }
+        align-items: center;
+        row-gap: 5px;
       }
 
-      .invitePersonBlock {
+      .invite-person-block {
         display: flex;
         flex-direction: column;
-        row-gap: 20px;
+        align-items: center;
+        row-gap: 5px;
         &__input {
-          margin: 0;
-          min-width: 320px;
+          margin: 10px 0 10px 0;
+          min-width: 240px;
           height: 42px;
 
           input {
@@ -75,9 +76,12 @@
 
         &__btn {
           margin: 0;
-          max-width: 242px;
+          max-width: 190px;
           width: 100%;
         }
+        .email-error-message {
+          color: red;
+        }
       }
 
       @media (max-width: 805px) {
@@ -86,17 +90,16 @@
 
         span {
           text-align: center;
-          margin: 5px 0;
+          margin-top: 15px;
         }
 
-        .invitePersonBlock {
-          row-gap: 5px;
+        .invite-person-block {
           &__btn {
             margin: 5px auto;
           }
         }
 
-        .addPersonBtn {
+        .add-person-btn {
           margin: 10px auto 0;
         }
       }
@@ -106,7 +109,6 @@
       display: flex;
       flex-direction: column;
       row-gap: 10px;
-      padding: 19px 10px 29px 10px;
 
       @media (max-width: 500px) {
         padding: 10px;
@@ -114,7 +116,7 @@
     }
   }
 
-  .createTiketProject {
+  .create-ticket-project {
     padding: 0;
     background: white;
   }
@@ -128,14 +130,14 @@
   transform: scale(1);
 }
 
-.createProject,
-.createColumn,
-.editProject,
-.addWorker,
-.editColumn {
-  background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%);
+.create-project,
+.create-column,
+.edit-project,
+.add-worker,
+.edit-column {
+  // background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%);
   .title-project {
-    margin-top: 20px;
+    margin-top: 8px;
   }
   .button-add {
     margin-top: 8px;

src/components/Description/description.scss

@@ -18,7 +18,6 @@
   }
 
   &__empty {
-    font-family: "LabGrotesque", sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 16px;

src/components/FileTracker/FileTracker.jsx

@@ -4,34 +4,52 @@ import { backendImg } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
+import { useNotification } from "@hooks/useNotification";
+
 import close from "assets/icons/closeProjectPersons.svg";
 
 const FileTracker = ({ file, setDeletedTask, taskId }) => {
   const [openImg, setOpenImg] = useState(false);
+
+  const { showNotification } = useNotification();
+
   function deleteFile(file) {
     apiRequest("/file/detach", {
       method: "DELETE",
       data: {
-        file_id: file.id,
+        file_id: file.file_id,
         entity_type: 2,
         entity_id: taskId,
         status: 0
       }
-    }).then(() => {
-      setDeletedTask(file);
-    });
+    })
+      .then(() => {
+        setDeletedTask(file);
+        showNotification({
+          show: true,
+          text: "Файл успешно удален",
+          type: "success"
+        });
+      })
+      .catch(() => {
+        showNotification({
+          show: true,
+          text: "Ошибка при удалении файла",
+          type: "error"
+        });
+      });
   }
 
   return (
     <div
-      className={openImg ? "taskFile ImgOpened" : "taskFile"}
+      className={openImg ? "task-file img-opened" : "task-file"}
       key={file.id}
       onClick={() => {
         if (openImg) setOpenImg(!openImg);
       }}
     >
       <img
-        className="imgFile"
+        className="img-file"
         src={backendImg(file.file?.url)}
         alt="img"
         onClick={() => {
@@ -39,7 +57,7 @@ const FileTracker = ({ file, setDeletedTask, taskId }) => {
         }}
       />
       {!openImg && (
-        <div className="deleteFile" onClick={() => deleteFile(file)}>
+        <div className="delete-file" onClick={() => deleteFile(file)}>
           <img src={close} alt="delete" />
         </div>
       )}

src/components/Form/Form.jsx

@@ -7,6 +7,8 @@ import withReactContent from "sweetalert2-react-content";
 
 import { apiRequest } from "@api/request";
 
+import { useNotification } from "@hooks/useNotification";
+
 import { Loader } from "@components/Common/Loader/Loader";
 
 import "./form.scss";
@@ -18,6 +20,8 @@ const Form = () => {
 
   const urlParams = useParams();
 
+  const { showNotification } = useNotification();
+
   const [status, setStatus] = useState(null);
   const [data, setData] = useState({
     email: "",
@@ -75,10 +79,23 @@ const Form = () => {
         profile_id: urlParams.id,
         ...data
       }
-    }).then((res) => {
-      setStatus(res);
-      setIsFetching(false);
-    });
+    })
+      .then((res) => {
+        setStatus(res);
+        setIsFetching(false);
+        showNotification({
+          show: true,
+          text: "Отправка успешно завершена",
+          type: "success"
+        });
+      })
+      .catch(() => {
+        showNotification({
+          show: true,
+          text: "Ошибка отправки",
+          type: "error"
+        });
+      });
   };
 
   return (

src/components/FreeDevelopers/FreeDevelopers.jsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 import { scrollToForm } from "@utils/helper";
 
-import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
+import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
@@ -92,8 +92,8 @@ export const FreeDevelopers = () => {
             </BaseButton>
           </div>
         </div>
-        <Footer />
       </div>
+      <Footer />
     </section>
   );
 };

src/components/FreeDevelopers/freeDevelopers.scss

@@ -1,7 +1,7 @@
 .free-dev {
-  font-family: "LabGrotesque", sans-serif;
-  overflow: hidden;
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   background-color: #f1f1f1;
 
   .link {
@@ -29,7 +29,11 @@
   }
 
   &_page {
-    margin: 24px 0 30px 0;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    color: #000000;
+    padding: 50px 0 0;
   }
 
   &__title {

src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.scss

@@ -3,14 +3,15 @@
 .frequently-asked-questions-item {
   &__head {
     display: flex;
+    align-items: center;
     gap: 19px;
-    margin: 0 0 -5px 29px;
+    margin: 0 0 0px 29px;
   }
 
   &__title {
     font-weight: 700;
     @include adaptiv-value("font-size", 28, 22, 1);
-    line-height: 79%;
+    line-height: 100%;
     color: #1458dd;
   }
 

src/components/Modal/AcceptModal/AcceptModal.jsx

@@ -6,10 +6,10 @@ import "./acceptModal.scss";
 
 export const AcceptModal = ({ title, closeModal, agreeHandler }) => {
   return (
-    <div className="backDrop">
-      <div className="acceptModal">
-        <h3 className="acceptModal__title">{title}</h3>
-        <div className="acceptModal__buttons">
+    <div className="back-drop">
+      <div className="accept-modal">
+        <h3 className="accept-modal__title">{title}</h3>
+        <div className="accept-modal__buttons">
           <button
             className="agree"
             onClick={() => {
@@ -24,7 +24,7 @@ export const AcceptModal = ({ title, closeModal, agreeHandler }) => {
           </button>
         </div>
         <img
-          className="acceptModal__close"
+          className="accept-modal__close"
           src={close}
           alt="close"
           onClick={closeModal}

src/components/Modal/AcceptModal/acceptModal.scss

@@ -1,4 +1,4 @@
-.backDrop {
+.back-drop {
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.8);
@@ -10,7 +10,7 @@
   align-items: center;
   justify-content: center;
 
-  .acceptModal {
+  .accept-modal {
     border-radius: 20px;
     background: linear-gradient(180deg, #fff 0%, #ebebeb 100%);
     padding: 50px 34px 25px;

src/components/Modal/ModalErrorLogin/modalErrorLogin.scss

@@ -1,8 +1,8 @@
 .error-login {
   position: relative;
-  padding: 54px 76px;
+  padding: 30px;
   background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
-  border-radius: 40px;
+  border-radius: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -15,9 +15,7 @@
   }
 
   p {
-    font-size: 12px;
-    line-height: 14px;
-    width: 176px;
+    font-size: 15px;
     text-align: center;
     font-weight: 300;
     margin-bottom: 30px;

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 
 import { useFormValidation } from "@hooks/useFormValidation";
 import { useNotification } from "@hooks/useNotification";
@@ -10,11 +11,14 @@ import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 import anyMoment from "assets/icons/anyMoment.svg";
 import doc from "assets/icons/doc.svg";
 import telegramLogo from "assets/icons/tgLogo.svg";
+import accept from "assets/images/accept.png";
 
 import "./modalRegistration.scss";
 
 export const ModalRegistration = ({ active, setActive }) => {
   const [loader, setLoader] = useState(false);
+  const [isPartner, setIsPartner] = useState(false);
+  const navigate = useNavigate();
 
   const fields = {
     username: "",
@@ -30,10 +34,10 @@ export const ModalRegistration = ({ active, setActive }) => {
   const apiEndpoint = "/register/sign-up";
 
   const { showNotification } = useNotification();
-  const showNotificationError = () => {
+  const showNotificationError = (error) => {
     showNotification({
       show: true,
-      text: "Аккаунт с таким логином или email уже существует",
+      text: error,
       type: "error"
     });
   };
@@ -56,6 +60,8 @@ export const ModalRegistration = ({ active, setActive }) => {
     fields,
     showNotificationError,
     showNotificationTrue,
+    isPartner,
+    setLoader,
     closeModal
   );
 
@@ -71,7 +77,7 @@ export const ModalRegistration = ({ active, setActive }) => {
 
         <div className="input-body">
           <div className="input-body__box">
-            <div className="inputContainer">
+            <div className="input-container">
               <h5>Ваше имя</h5>
               <input
                 className={validationErrors.username ? "error" : ""}
@@ -82,7 +88,7 @@ export const ModalRegistration = ({ active, setActive }) => {
               />
               <span>{validationErrors.username}</span>
             </div>
-            <div className="inputContainer">
+            <div className="input-container">
               <h5>E-mail</h5>
               <input
                 type="email"
@@ -97,7 +103,7 @@ export const ModalRegistration = ({ active, setActive }) => {
           </div>
 
           <div className="input-body__box">
-            <div className="inputContainer">
+            <div className="input-container">
               <h5>Пароль</h5>
               <input
                 className={validationErrors.password ? "error" : ""}
@@ -109,7 +115,7 @@ export const ModalRegistration = ({ active, setActive }) => {
               />
               <span>{validationErrors.password}</span>
             </div>
-            <div className="inputContainer">
+            <div className="input-container">
               <h5>Повторите пароль</h5>
               <input
                 className={validationErrors.secondPassword ? "error" : ""}
@@ -123,20 +129,25 @@ export const ModalRegistration = ({ active, setActive }) => {
             </div>
           </div>
         </div>
+        <div
+          className="input_checkbox"
+          onClick={() => setIsPartner(!isPartner)}
+        >
+          <p>Партнер:</p>
+          <span className={isPartner ? "checkbox--active" : ""}>
+            {isPartner ? <img src={accept} alt="accept" /> : ""}
+          </span>
+        </div>
 
         <div className="button-box">
           {loader ? (
-            <Loader style={"green"} />
+            <Loader />
           ) : (
             <BaseButton
               onClick={async (e) => {
                 e.preventDefault();
-                setLoader(true);
-                const result = await handleSubmit(e);
-                if (result === true) {
-                  closeModal();
-                }
-                setLoader(false);
+                await handleSubmit(e);
+                navigate("/welcome-page");
               }}
               styles="button-box__submit"
             >

src/components/Modal/ModalRegistration/modalRegistration.scss

@@ -23,6 +23,7 @@
       display: flex;
       flex-direction: column;
       width: 65%;
+      align-items: center;
 
       @media (max-width: 1106px) {
         width: 100%;
@@ -112,9 +113,11 @@
             padding-left: 20px;
           }
 
-          .inputContainer {
+          .input-container {
             margin: 0 0 20px 0;
             width: 100%;
+            display: flex;
+            flex-direction: column;
           }
 
           span {
@@ -128,6 +131,38 @@
         }
       }
 
+      .input_checkbox {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        cursor: pointer;
+
+        p {
+          font-size: 16px;
+          font-weight: 500;
+        }
+
+        span {
+          border: 1px solid gray;
+          border-radius: 4px;
+          width: 20px;
+          height: 20px;
+          margin-left: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          img {
+            width: 15px;
+            height: 15px;
+          }
+        }
+
+        .checkbox--active {
+          background: #f2f2f2;
+        }
+      }
+
       .button-box {
         display: flex;
         flex-direction: row;
@@ -214,6 +249,5 @@
 
   .loader {
     justify-content: start;
-    left: 80px;
   }
 }

src/components/Modal/ModalReset/ModalReset.jsx

@@ -6,17 +6,17 @@ import "./modalReset.scss";
 
 export const ModalReset = ({ setModalReset }) => {
   return (
-    <div className="modalReset">
-      <h3 className="modalReset__title">Восстановление доступа</h3>
-      <div className="modalReset__input">
+    <div className="modal-reset">
+      <h3 className="modal-reset__title">Восстановление доступа</h3>
+      <div className="modal-reset__input">
         <span>Укажите e-mail, для которого хотите восстановить пароль.</span>
         <input placeholder="e-mail" />
       </div>
-      <button className="modalReset__submit">Восстановить</button>
+      <button className="modal-reset__submit">Восстановить</button>
       <img
         onClick={() => setModalReset(false)}
         src={close}
-        className="modalReset__close"
+        className="modal-reset__close"
         alt="close"
       />
     </div>

src/components/Modal/ModalReset/modalReset.scss

@@ -1,8 +1,8 @@
-.modalReset {
+.modal-reset {
   display: flex;
   flex-direction: column;
   border-radius: 20px;
-  background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%);
+  background: linear-gradient(180deg, #fff 0%, #ebebeb 100%);
   padding: 23px 110px 8px 36px;
   row-gap: 29px;
   position: relative;
@@ -28,7 +28,7 @@
       padding: 8px 12px;
       font-size: 15px;
       border-radius: 8px;
-      background-color: #EFF2F7;
+      background-color: #eff2f7;
       outline: none;
       border: none;
       max-width: 300px;
@@ -37,9 +37,9 @@
 
   &__submit {
     border-radius: 44px;
-    background: #52B709;
+    background: #52b709;
     padding: 9px 46px;
-    color: #FFF;
+    color: #fff;
     font-size: 16px;
     font-weight: 500;
     line-height: 32px;

src/components/Modal/ModalResetPassword/ModalResetPassword.jsx

@@ -7,7 +7,7 @@ import { useNotification } from "@hooks/useNotification";
 import { Loader } from "@components/Common/Loader/Loader";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import close from "assets/icons/close.png";
 
 import "./modalResetPassword.scss";
@@ -117,16 +117,16 @@ export const ModalResetPassword = ({ active, setActive }) => {
   };
   return (
     <ModalLayout active={active} setActive={setActive}>
-      <div className="resetPassword">
+      <div className="reset-password">
         <img
-          className="resetPassword__close"
+          className="reset-password__close"
           src={close}
           alt="close"
           onClick={() => setActive(false)}
         />
-        <h3 className="resetPassword__title">Восстановление пароля</h3>
+        <h3 className="reset-password__title">Восстановление пароля</h3>
         {!step ? (
-          <div className="resetPassword__email">
+          <div className="reset-password__email">
             <h5>Введите ваш e-mail:</h5>
             <input
               type="email"
@@ -149,7 +149,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
               <Loader style={"green"} />
             ) : (
               <button
-                className="resetPassword__btn"
+                className="reset-password__btn"
                 onClick={(e) => {
                   e.preventDefault();
                   submitHandler();
@@ -160,11 +160,11 @@ export const ModalResetPassword = ({ active, setActive }) => {
             )}
           </div>
         ) : (
-          <div className="resetPassword__email">
+          <div className="reset-password__email">
             <img
               src={arrow}
               onClick={() => setStep(false)}
-              className="resetPassword__email__arrow"
+              className="reset-password__email__arrow"
             />
             <h5>Введите код подтверждения:</h5>
             <input
@@ -185,7 +185,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
               placeholder="token"
             />
             {inputsError.token && (
-              <span className="warningText">Введите данные</span>
+              <span className="warning-text">Введите данные</span>
             )}
             <h5>Введите новый пароль:</h5>
             <input
@@ -206,13 +206,13 @@ export const ModalResetPassword = ({ active, setActive }) => {
               className={inputsError.password ? "error" : ""}
             />
             {inputsError.password && (
-              <span className="warningText">Минимум 6 символов</span>
+              <span className="warning-text">Минимум 6 символов</span>
             )}
             {loader ? (
               <Loader style={"green"} />
             ) : (
               <button
-                className="resetPassword__btn"
+                className="reset-password__btn"
                 onClick={(e) => {
                   e.preventDefault();
                   resetPassword();

src/components/Modal/ModalResetPassword/modalResetPassword.scss

@@ -1,4 +1,4 @@
-.resetPassword {
+.reset-password {
   width: 280px;
   position: relative;
 
@@ -62,7 +62,14 @@
     justify-content: center;
     align-items: center;
     background-color: #ffffff;
-    background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
+    background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
+      linear-gradient(
+        36deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.16) 47%,
+        rgba(255, 255, 255, 0.17) 50%,
+        rgba(255, 255, 255, 0) 100%
+      );
     color: #ffffff;
     font-weight: 500;
     font-size: 15px;
@@ -75,7 +82,7 @@
     border: 1px solid red;
   }
 
-  .warningText {
+  .warning-text {
     color: red;
     font-size: 12px;
     margin-bottom: 10px;

src/components/Modal/ModalSelect/ModalSelect.jsx

@@ -5,7 +5,6 @@ import "./modalSelect.scss";
 export const ModalSelect = ({ active, children }) => {
   return (
     <div className={active ? "project__settings active" : "project__settings "}>
-      <span className="project__settings-ellipsis">...</span>
       {children}
     </div>
   );

src/components/Modal/ModalSelect/modalSelect.scss

@@ -1,29 +1,30 @@
 .project {
   &__settings {
     position: absolute;
-    padding: 32px 23px 10px 11px;
+    padding: 0 10px;
     background: #e1fccf;
     border-radius: 12px;
     transform: scale(0);
-    bottom: -40px;
-    right: -120px;
+    bottom: -30px;
+    right: -130px;
 
     @media (max-width: 1050px) {
-      right: 10px;
-      padding-top: 10px;
-      bottom: -75px;
+      right: 5px;
+      bottom: -30px;
     }
 
     &-menu {
       font-size: 14px;
-      line-height: 38px;
+      padding: 5px 0;
 
       div {
         display: flex;
         align-items: center;
+        padding: 2px 0;
 
         img {
-          margin-right: 12px;
+          width: 12px;
+          margin-right: 5px;
         }
 
         p:hover {

src/components/Modal/ModalTrackerRegistration/ModalTrackerRegistration.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 import close from "assets/icons/closeProjectPersons.svg";
 
@@ -6,26 +7,27 @@ import "./modalTrackerRegistration.scss";
 
 export const ModalTrackerRegistration = ({ setModalReset, email }) => {
   return (
-    <div className="modalConfirmTracker">
-      <h3 className="modalConfirmTracker__title">
+    <div className="modal-confirm-tracker">
+      <h3 className="modal-confirm-tracker__title">
         Спасибо за регистрацию. Теперь можете войти в кабинет
       </h3>
-      <p className="modalConfirmTracker__info">
+      <p className="modal-confirm-tracker__info">
         Мы отправили ссылку
         <br />
         для активации вашего аккаунта на почту
         <br /> <span>{email}</span>
       </p>
-      <button
+      <Link
+        to={"/registration-setting"}
         onClick={() => setModalReset(false)}
-        className="modalConfirmTracker__btn"
+        className="modal-confirm-tracker__btn"
       >
         Понятно
-      </button>
+      </Link>
       <img
         onClick={() => setModalReset(false)}
         src={close}
-        className="modalReset__close"
+        className="modal-reset__close"
         alt="close"
       />
     </div>

src/components/Modal/ModalTrackerRegistration/modalTrackerRegistration.scss

@@ -1,4 +1,4 @@
-.modalConfirmTracker {
+.modal-confirm-tracker {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -27,13 +27,13 @@
 
   &__btn {
     border-radius: 44px;
-    background: #52B709;
+    background: #52b709;
     outline: none;
     border: none;
     font-size: 16px;
     font-weight: 500;
     line-height: 32px;
-    color: #FFF;
+    color: #fff;
     padding: 9px 37px;
   }
 }

src/components/Modal/Tracker/ListEmployees/ListEmployees.jsx

@@ -6,10 +6,12 @@ import {
   modalToggle
 } from "@redux/projectsTrackerSlice";
 
-import { caseOfNum, urlForLocal } from "@utils/helper";
+import { caseOfNum, removeLast, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
+import { useNotification } from "@hooks/useNotification";
+
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
 import close from "assets/icons/close.png";
@@ -24,6 +26,7 @@ const ListEmployees = ({
   setModalAdd
 }) => {
   const dispatch = useDispatch();
+  const { showNotification } = useNotification();
 
   function deletePerson(userId) {
     apiRequest("/project/del-user", {
@@ -32,9 +35,22 @@ const ListEmployees = ({
         project_id: projectBoard.id,
         user_id: userId
       }
-    }).then(() => {
-      dispatch(deletePersonOnProject(userId));
-    });
+    })
+      .then(() => {
+        dispatch(deletePersonOnProject(userId));
+        showNotification({
+          show: true,
+          text: "Участник успешно удален",
+          type: "success"
+        });
+      })
+      .catch(() => {
+        showNotification({
+          show: true,
+          text: "Ошибка удаления участника",
+          type: "error"
+        });
+      });
   }
 
   return (
@@ -51,8 +67,8 @@ const ListEmployees = ({
           {caseOfNum(projectBoard.projectUsers?.length, "persons")}
         </div>
         <div className="persons__list__info">
-          <span>В проекте - </span>
-          <p>“{projectBoard.name}”</p>
+          <span>В проекте </span>
+          <p>{projectBoard.name}</p>
         </div>
         <div className="persons__list__items">
           {projectBoard.projectUsers?.map((person) => {
@@ -67,7 +83,7 @@ const ListEmployees = ({
                   }
                   alt="avatar"
                 />
-                <span>{person.user.fio}</span>
+                <span>{removeLast(person.user.fio)}</span>
                 <img
                   className="delete"
                   src={close}
@@ -81,13 +97,13 @@ const ListEmployees = ({
         <div
           className="persons__list__add"
           onClick={() => {
-            dispatch(modalToggle("addWorker"));
+            dispatch(modalToggle("add-worker"));
             setModalAdd(true);
             setActiveListEmpl(false);
           }}
         >
-          <span className="addPerson">+</span>
-          <p>Добавить участников</p>
+          <span className="add-person">+</span>
+          <p>Добавить участника</p>
         </div>
       </div>
     </ModalLayout>

src/components/Modal/Tracker/ListEmployees/listEmployees.scss

@@ -13,7 +13,7 @@
         width: 100%;
       }
 
-      .projectPersons {
+      .project-persons {
         display: flex;
         position: relative;
         left: 5px;
@@ -37,7 +37,7 @@
         }
       }
 
-      .onePerson {
+      .one-person {
         display: flex;
         position: relative;
         left: -15px;
@@ -63,17 +63,17 @@
         display: flex;
       }
 
-      .countPersons {
+      .count-persons {
         color: #252c32;
         border: 1px solid #dde2e4;
         background: white;
         left: -20px;
       }
 
-      .addPerson {
+      .add-person {
         background: #00c5a8;
         color: white;
-        font-size: 14px;
+        font-size: 18px;
         transition: all 0.15s ease;
         left: -28px;
         z-index: 2;
@@ -100,15 +100,15 @@
         flex-direction: column;
         background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
         border-radius: 20px;
-        padding: 30px;
+        padding: 20px;
         cursor: default;
-        width: 800px;
+        width: 700px;
 
         &__close {
           cursor: pointer;
           position: absolute;
-          right: 25px;
-          top: 25px;
+          right: 20px;
+          top: 20px;
           margin-left: auto;
           width: 35px;
           height: 35px;
@@ -122,7 +122,7 @@
           span {
             font-size: 44px;
             font-weight: 700;
-            line-height: 40px;
+            line-height: 30px;
             width: auto;
             height: auto;
             margin-right: 5px;
@@ -131,7 +131,7 @@
 
         &__info {
           display: flex;
-          margin: 11px 0 35px;
+          margin: 10px 0;
           align-items: center;
 
           span {
@@ -161,14 +161,13 @@
         &__items {
           display: flex;
           flex-wrap: wrap;
-          row-gap: 32px;
-          column-gap: 85px;
-          margin-bottom: 38px;
+          row-gap: 10px;
+          column-gap: 30px;
+          margin-bottom: 10px;
         }
 
         &__item {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           max-width: 300px;
           width: 100%;
@@ -181,13 +180,13 @@
 
           span {
             display: block;
-            font-weight: 400;
+            font-weight: 500;
             font-size: 15px;
             line-height: initial;
             color: #807777;
             width: auto;
             height: auto;
-            max-width: 215px;
+            max-width: 280px;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -11,10 +11,10 @@ import { getProfileInfo } from "@redux/outstaffingSlice";
 import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
 
 import {
-  backendImg,
   caseOfNum,
   getCorrectRequestDate,
   getToken,
+  removeLast,
   urlForLocal
 } from "@utils/helper";
 
@@ -43,7 +43,7 @@ import send from "assets/icons/send.svg";
 import watch from "assets/icons/watch.svg";
 import avatarMok from "assets/images/avatarMok.png";
 
-import { getCorrectDate } from "../../../Calendar/calendarHelper";
+import { getCorrectDate } from "../../../../utils/calendarHelper";
 import "./modalTicket.scss";
 
 registerLocale("ru", ru);
@@ -99,6 +99,18 @@ export const ModalTiсket = ({
   const { showNotification } = useNotification();
   const [commentSendDisable, setCommentSendDisable] = useState(false);
 
+  const closeModal = () => {
+    setActive(false);
+    // Восстанавливаем скролл при закрытии модального окна
+    document.body.style.overflow = "auto";
+  };
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleModalSize = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
   function deleteTask() {
     apiRequest("/task/update-task", {
       method: "PUT",
@@ -106,15 +118,23 @@ export const ModalTiсket = ({
         task_id: task.id,
         status: 0
       }
-    }).then(() => {
-      setActive(false);
-      dispatch(setProjectBoardFetch(projectId));
-      showNotification({
-        show: true,
-        text: "Задача успешно была перемещена в архив",
-        type: "archive"
+    })
+      .then(() => {
+        closeModal();
+        dispatch(setProjectBoardFetch(projectId));
+        showNotification({
+          show: true,
+          text: "Задача успешно удалена",
+          type: "success"
+        });
+      })
+      .catch(() => {
+        showNotification({
+          show: true,
+          text: "Ошибка удаления",
+          type: "error"
+        });
       });
-    });
   }
 
   const priority = {
@@ -157,15 +177,23 @@ export const ModalTiсket = ({
         title: inputsValue.title,
         description: inputsValue.description
       }
-    }).then((res) => {
-      setEditOpen(!editOpen);
-      dispatch(setProjectBoardFetch(projectId));
-      showNotification({
-        show: true,
-        text: "Изменения сохранены",
-        type: "success"
+    })
+      .then((res) => {
+        setEditOpen(!editOpen);
+        dispatch(setProjectBoardFetch(projectId));
+        showNotification({
+          show: true,
+          text: "Изменения сохранены",
+          type: "success"
+        });
+      })
+      .catch(() => {
+        showNotification({
+          show: true,
+          text: "Ошибка при сохранении изменений",
+          type: "error"
+        });
       });
-    });
   }
 
   function createComment() {
@@ -558,7 +586,7 @@ export const ModalTiсket = ({
         (div) =>
           div.classList &&
           (div.classList.contains("button-add-worker") ||
-            div.classList.contains("dropdownList"))
+            div.classList.contains("dropdown-list"))
       )
     ) {
       setDropListOpen(false);
@@ -570,7 +598,7 @@ export const ModalTiсket = ({
       !path.find(
         (div) =>
           div.classList &&
-          (div.classList.contains("deadLine") ||
+          (div.classList.contains("dead-line") ||
             div.classList.contains("react-datepicker-popper"))
       )
     ) {
@@ -592,22 +620,22 @@ export const ModalTiсket = ({
 
   return (
     <div
-      className={active ? "modal-tiket active" : "modal-tiket"}
+      className={active ? "modal-ticket active" : "modal-ticket"}
       onClick={(e) => {
-        if (e.target.className.includes("modal-tiket")) setActive(false);
+        if (e.target.className.includes("modal-ticket")) closeModal();
       }}
     >
-      <div className="modal-tiket__content">
+      <div className={`modal-ticket__content ${isExpanded ? "expanded" : ""}`}>
         <div className="content">
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
             {projectName}
-            <Link
-              to={`/tracker/task/${task.id}`}
+            <img
+              src={fullScreen}
+              alt="Full screen"
+              onClick={toggleModalSize}
               className="title-project__full"
-            >
-              <img src={fullScreen}></img>
-            </Link>
+            />
           </h3>
           <div className="content__task">
             {editOpen ? (
@@ -622,7 +650,7 @@ export const ModalTiсket = ({
                 }}
               />
             ) : (
-              <h5 className="taskName">{inputsValue.title}</h5>
+              <h5 className="task-name">{inputsValue.title}</h5>
             )}
             <div className="content__description">
               {editOpen ? (
@@ -636,11 +664,8 @@ export const ModalTiсket = ({
                       "EasyImage",
                       "Image",
                       "ImageCaption",
-                      "ImageStyle",
-                      "ImageToolbar",
                       "ImageUpload",
-                      "MediaEmbed",
-                      "BlockQuote"
+                      "MediaEmbed"
                     ]
                   }}
                   onChange={(event, editor) => {
@@ -674,13 +699,13 @@ export const ModalTiсket = ({
               </div>
             )}
             {/*{uploadedFile && (*/}
-            {/*  <div className="fileLoaded">*/}
+            {/*  <div className="file-loaded">*/}
             {/*    {uploadedFile.map((file) => {*/}
             {/*      return (*/}
-            {/*        <div className="loadedFile" key={file.id}>*/}
+            {/*        <div className="loaded-file" key={file.id}>*/}
             {/*          <img src={backendImg(file.url)} alt="img" key={file.id} />*/}
             {/*          <div*/}
-            {/*            className="deleteFile"*/}
+            {/*            className="delete-file"*/}
             {/*            onClick={() => deleteLoadedFile(file)}*/}
             {/*          >*/}
             {/*            <img src={close} alt="delete" />*/}
@@ -757,14 +782,14 @@ export const ModalTiсket = ({
         </div>
         <div className="workers">
           <div className="workers_box task__info">
-            <span className="exit" onClick={() => setActive(false)}></span>
-            <p className="workers__creator">Создатель: {task.user?.fio}</p>
-
+            <span className="exit" onClick={() => closeModal()}></span>
+            <h5>Создатель: </h5>
+            <p className="workers__creator">{removeLast(task.user?.fio)}</p>
             {executor ? (
               <>
                 <h5>Исполнитель: </h5>
                 <div className="executor">
-                  <p>{executor.fio}</p>
+                  <p>{removeLast(executor.fio)}</p>
                   <img
                     src={
                       executor?.avatar
@@ -781,7 +806,7 @@ export const ModalTiсket = ({
                 </div>
               </>
             ) : (
-              <div className="add-worker moreItems ">
+              <div className="add-worker more-items">
                 <button
                   className="button-add-worker"
                   onClick={() => setDropListOpen(true)}
@@ -790,20 +815,20 @@ export const ModalTiсket = ({
                 </button>
                 <span>Добавить исполнителя</span>
                 {dropListOpen && (
-                  <div className="dropdownList">
+                  <div className="dropdown-list">
                     <img
                       src={close}
-                      className="dropdownList__close"
+                      className="dropdown-list__close"
                       onClick={() => setDropListOpen(false)}
                     />
                     {correctProjectUsers.map((person) => {
                       return (
                         <div
-                          className="dropdownList__person"
+                          className="dropdown-list__person"
                           key={person.user_id}
                           onClick={() => taskExecutor(person)}
                         >
-                          <span>{person.user.fio}</span>
+                          <span>{removeLast(person.user.fio)}</span>
                           <img
                             src={
                               person.user?.avatar
@@ -819,7 +844,6 @@ export const ModalTiсket = ({
                 )}
               </div>
             )}
-
             {Boolean(members.length) && (
               <div className="members">
                 <h5>Участники:</h5>
@@ -827,7 +851,7 @@ export const ModalTiсket = ({
                   {members.map((member) => {
                     return (
                       <div className="worker" key={member.user_id}>
-                        <p>{member.fio}</p>
+                        <p>{removeLast(member.fio)}</p>
                         <img
                           src={
                             member?.avatar
@@ -847,31 +871,30 @@ export const ModalTiсket = ({
                 </div>
               </div>
             )}
-
-            <div className="add-worker moreItems">
+            <div className="add-worker more-items">
               <button
                 className="button-add-worker"
                 onClick={() => setDropListMembersOpen(true)}
               >
                 +
               </button>
-              <span>Добавить участников</span>
+              <span>Добавить участника</span>
               {dropListMembersOpen && (
-                <div className="dropdownList">
+                <div className="dropdown-list">
                   <img
                     src={close}
-                    className="dropdownList__close"
+                    className="dropdown-list__close"
                     onClick={() => setDropListMembersOpen(false)}
                   />
                   {users.length ? (
                     users.map((person) => {
                       return (
                         <div
-                          className="dropdownList__person"
+                          className="dropdown-list__person"
                           key={person.user_id}
                           onClick={() => addMember(person)}
                         >
-                          <span>{person.user.fio}</span>
+                          <span>{removeLast(person.user.fio)}</span>
                           <img
                             src={
                               person.user?.avatar
@@ -884,7 +907,7 @@ export const ModalTiсket = ({
                       );
                     })
                   ) : (
-                    <p className="noUsers">Нет пользователей</p>
+                    <p className="no-users">Нет пользователей</p>
                   )}
                 </div>
               )}
@@ -892,14 +915,14 @@ export const ModalTiсket = ({
           </div>
 
           <div className="workers_box-middle">
-            <div className="deadLine">
+            <div className="dead-line">
               <div
-                className="deadLine__container"
+                className="dead-line__container"
                 onClick={() => setDatePickerOpen(!datePickerOpen)}
               >
-                <img src={calendarIcon} alt="calendar" />
+                <p>⌛</p>
                 <span>
-                  {deadLine ? getCorrectDate(deadLine) : "Срок исполнения:"}
+                  {deadLine ? getCorrectDate(deadLine) : "Срок исполнения"}
                 </span>
               </div>
               <DatePicker
@@ -916,8 +939,7 @@ export const ModalTiсket = ({
               />
             </div>
             <div className="time">
-              <img src={watch}></img>
-              <span>Длительность: </span>
+              <p>⏱</p>
               <p>
                 {correctTimerTime(currentTimerCount.hours)}:
                 {correctTimerTime(currentTimerCount.minute)}:
@@ -994,7 +1016,7 @@ export const ModalTiсket = ({
                   {correctProjectTags.map((tag) => {
                     return (
                       <div
-                        className="tagItem"
+                        className="tag-item"
                         key={tag.id}
                         onClick={() => addTagToTask(tag.id)}
                       >
@@ -1004,7 +1026,7 @@ export const ModalTiсket = ({
                     );
                   })}
                   {!Boolean(correctProjectTags.length) && (
-                    <p className="tags__dropDown__noItem">Нет тегов</p>
+                    <p className="tags__dropDown__no-item">Нет тегов</p>
                   )}
                 </div>
               )}
@@ -1091,7 +1113,7 @@ export const ModalTiсket = ({
         </div>
         {acceptModalOpen && (
           <AcceptModal
-            title={"Вы точно хотите переместить задачу в архив?"}
+            title={"Вы действительно хотите переместить задачу в архив?"}
             closeModal={closeAcceptModal}
             agreeHandler={deleteTask}
           />

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -1,4 +1,4 @@
-.modal-tiket {
+.modal-ticket {
   z-index: 9;
   height: 100%;
   width: 100%;
@@ -11,17 +11,24 @@
   justify-content: center;
 }
 
-.modal-tiket.active {
+.modal-ticket.active {
   display: flex;
 }
 
-.modal-tiket__content {
+.modal-ticket__content.expanded {
+  width: 100vw;
+  height: 100vh;
+  max-height: none;
+  max-width: none;
+}
+
+.modal-ticket__content {
   background: #ffffff;
   border-radius: 8px;
   display: flex;
   flex-direction: row;
   max-height: 700px;
-  // overflow-y: auto;
+  max-width: 915px;
 
   @media (max-width: 990px) {
     width: 96%;
@@ -52,7 +59,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 600px;
+    width: 68%;
     margin: 26px 0 0 21px;
 
     .title-project {
@@ -66,6 +73,7 @@
       margin-left: 15px;
 
       &__category {
+        height: 22px;
         margin-right: 5px;
       }
 
@@ -76,7 +84,6 @@
         line-height: 32px;
         color: #1458dd;
         margin: 0;
-        font-family: "LabGrotesque", sans-serif;
       }
 
       h2 {
@@ -100,10 +107,11 @@
     }
 
     &__task {
-      margin-top: -5px;
+      margin-top: -20px;
       padding: 18px;
       display: flex;
       flex-direction: column;
+      overflow-y: scroll;
 
       input {
         font-style: normal;
@@ -143,26 +151,22 @@
         margin-bottom: 0;
       }
 
-      .taskName {
-        display: -webkit-box;
+      .task-name {
         max-width: 550px;
-        overflow: hidden;
         text-overflow: ellipsis;
         -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
       }
 
-      .fullName {
+      .full-name {
         max-width: 800px;
       }
 
-      .fullDescription {
+      .full-description {
         max-width: 800px;
       }
 
       .comments__list {
         display: flex;
-        overflow-y: auto;
         height: 190px;
         flex-direction: column;
 
@@ -195,7 +199,7 @@
             margin: 10px 0;
           }
 
-          &__subComment {
+          &__sub-comment {
             &:before {
               content: "";
               background: #e4e4e6;
@@ -366,24 +370,23 @@
       column-gap: 25px;
       row-gap: 20px;
       margin-top: 33px;
-      overflow-y: auto;
 
-      .taskFile {
+      .task-file {
         cursor: pointer;
         position: relative;
-        .imgFile {
+        .img-file {
           max-width: 170px;
           max-height: 104px;
           object-fit: contain;
         }
 
         &:hover {
-          .deleteFile {
+          .delete-file {
             background: rgb(226, 226, 226, 0.6);
           }
         }
 
-        .deleteFile {
+        .delete-file {
           position: absolute;
           cursor: pointer;
           display: flex;
@@ -404,7 +407,7 @@
         }
       }
 
-      .ImgOpened {
+      .img-opened {
         position: fixed;
         width: 100vw;
         height: 100vh;
@@ -416,7 +419,7 @@
         z-index: 100;
         background-color: rgba(0, 0, 0, 0.2);
 
-        .imgFile {
+        .img-file {
           width: 90vw;
           height: 90vh;
           max-width: none;
@@ -425,18 +428,18 @@
       }
     }
 
-    .fileLoaded {
+    .file-loaded {
       display: flex;
       align-items: center;
       margin: 10px 0 0;
 
-      .loadedFile {
+      .loaded-file {
         position: relative;
         img {
           max-width: 100px;
           object-fit: contain;
         }
-        .deleteFile {
+        .delete-file {
           position: absolute;
           cursor: pointer;
           display: flex;
@@ -456,7 +459,7 @@
           }
         }
         &:hover {
-          .deleteFile {
+          .delete-file {
             background: rgb(226, 226, 226, 0.6);
           }
         }
@@ -609,12 +612,13 @@
   .workers {
     position: relative;
     border-left: 1px solid #f1f1f1;
+    width: 32%;
 
     .exit {
       cursor: pointer;
       position: absolute;
-      top: 25px;
-      right: 20px;
+      top: 15px;
+      right: 15px;
       width: 13px;
       height: 13px;
       display: flex;
@@ -640,8 +644,8 @@
     span {
       font-family: "Inter", sans-serif;
       font-weight: 500;
-      font-size: 11px;
-      color: #807777;
+      font-size: 12px;
+      color: #666;
     }
 
     .nameProject {
@@ -661,7 +665,7 @@
         color: #000000;
         font-size: 12px;
         line-height: 32px;
-        margin-left: 17px;
+        margin-left: 10px;
         font-style: normal;
         font-weight: 400;
       }
@@ -727,7 +731,7 @@
       }
     }
 
-    .deadLine {
+    .dead-line {
       position: relative;
       &__container {
         padding: 5px 10px 5px;
@@ -781,7 +785,6 @@
 
       .react-datepicker__current-month {
         font-size: 18px;
-        font-family: "LabGrotesque", sans-serif;
         text-transform: capitalize;
       }
 
@@ -824,7 +827,6 @@
       .react-datepicker__day {
         font-size: 16px;
         width: 35px;
-        font-family: "LabGrotesque", sans-serif;
         border-radius: 50px;
         padding: 7px;
       }
@@ -833,7 +835,6 @@
         font-size: 18px;
         width: 35px;
         font-weight: 500;
-        font-family: "LabGrotesque", sans-serif;
       }
 
       .react-datepicker__triangle {
@@ -848,9 +849,10 @@
     .time {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      font-size: 12px;
-      margin-top: 10px;
+      justify-content: center;
+      column-gap: 5px;
+      font-size: 13px;
+      margin-top: 5px;
       width: 160px;
 
       p {
@@ -862,7 +864,7 @@
     &__creator {
       font-size: 14px;
       font-weight: 500;
-      color: #2d4a17;
+
       max-width: 200px;
       overflow: hidden;
       white-space: nowrap;
@@ -875,6 +877,7 @@
         line-height: 32px;
         font-weight: 500;
         display: flex;
+        color: #2d4a17;
       }
     }
 
@@ -925,7 +928,7 @@
         }
       }
 
-      .dropdownList {
+      .dropdown-list {
         position: absolute;
         background: white;
         padding: 10px;
@@ -938,7 +941,7 @@
         flex-direction: column;
         row-gap: 8px;
 
-        .noUsers {
+        .no-users {
           font-size: 14px;
           text-align: center;
         }
@@ -964,11 +967,11 @@
     }
 
     &_box {
-      padding: 25px 0px 10px 40px;
+      padding: 25px 0px 10px 20px;
       border-bottom: 1px solid #f1f1f1;
 
       &-middle {
-        padding: 0px 0px 10px 35px;
+        padding: 0px 0px 10px 20px;
         border-bottom: 1px solid #f1f1f1;
       }
 
@@ -979,7 +982,7 @@
           position: relative;
 
           row-gap: 10px;
-          padding: 10px 40px 0px 40px;
+          padding: 10px 20px 0px 20px;
           border-radius: 10px;
           margin-bottom: 10px;
 
@@ -1065,7 +1068,7 @@
               top: 5px;
             }
 
-            .tagItem {
+            .tag-item {
               display: flex;
               align-items: center;
               justify-content: space-between;
@@ -1092,7 +1095,7 @@
               }
             }
 
-            &__noItem {
+            &__no-item {
               line-height: 20px;
               font-size: 15px;
               margin: 0;
@@ -1110,7 +1113,7 @@
 
       &-priority {
         position: relative;
-        padding: 10px 40px 0 40px;
+        padding: 10px 20px 0 20px;
         border-radius: 10px;
         margin-bottom: 10px;
         .priority {
@@ -1170,7 +1173,7 @@
       }
 
       &-bottom {
-        padding: 0px 110px 10px 35px;
+        padding: 0px 30px 10px 20px;
         font-weight: 400;
         font-size: 14px;
         line-height: 32px;
@@ -1186,16 +1189,17 @@
           }
 
           p {
-            margin: 0 0 0 12px;
+            margin: 0 0 0 5px;
           }
         }
 
         .edit {
           background: #52b709;
           border-radius: 50px;
-
+          width: fit-content;
           p {
             font-weight: 700;
+            padding-right: 10px;
           }
         }
 

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -7,19 +7,15 @@ import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
 import { getProfileInfo } from "@redux/outstaffingSlice";
-import {
-  deletePersonOnProject,
-  getBoarderLoader,
-  modalToggle,
-  setProjectBoardFetch,
-  setToggleTab
-} from "@redux/projectsTrackerSlice";
+import { getBoarderLoader, setToggleTab } from "@redux/projectsTrackerSlice";
 
+import { getCorrectDate } from "@utils/calendarHelper";
 import {
   backendImg,
   caseOfNum,
   getCorrectRequestDate,
   getToken,
+  removeLast,
   urlForLocal
 } from "@utils/helper";
 
@@ -27,23 +23,21 @@ import { apiRequest } from "@api/request";
 
 import { useNotification } from "@hooks/useNotification";
 
-import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import FileTracker from "@components/FileTracker/FileTracker";
 import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
-import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import calendarIcon from "assets/icons/calendar.svg";
-import close from "assets/icons/close.png";
 import fileDelete from "assets/icons/closeProjectPersons.svg";
+import close from "assets/icons/crossWhite.svg";
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
 import file from "assets/icons/fileModal.svg";
@@ -60,7 +54,6 @@ import "./ticketFullScreen.scss";
 registerLocale("ru", ru);
 
 export const TicketFullScreen = () => {
-  const [modalAddWorker, setModalAddWorker] = useState(false);
   const ticketId = useParams();
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -71,7 +64,6 @@ export const TicketFullScreen = () => {
   const [inputsValue, setInputsValue] = useState({});
   const [loader, setLoader] = useState(true);
   const [comments, setComments] = useState([]);
-  const [personListOpen, setPersonListOpen] = useState(false);
   const [timerStart, setTimerStart] = useState(false);
   const [timerInfo, setTimerInfo] = useState({});
   const [currentTimerCount, setCurrentTimerCount] = useState({
@@ -292,18 +284,6 @@ export const TicketFullScreen = () => {
     });
   }
 
-  function deletePerson(userId) {
-    apiRequest("/project/del-user", {
-      method: "DELETE",
-      data: {
-        project_id: projectInfo.id,
-        user_id: userId
-      }
-    }).then(() => {
-      dispatch(deletePersonOnProject(userId));
-    });
-  }
-
   function commentDelete(comment) {
     setComments((prevValue) =>
       prevValue.filter((item) => item.id !== comment.id)
@@ -586,7 +566,7 @@ export const TicketFullScreen = () => {
         (div) =>
           div.classList &&
           (div.classList.contains("button-add-worker") ||
-            div.classList.contains("dropdownList"))
+            div.classList.contains("dropdown-list"))
       )
     ) {
       setDropListOpen(false);
@@ -598,7 +578,7 @@ export const TicketFullScreen = () => {
       !path.find(
         (div) =>
           div.classList &&
-          (div.classList.contains("deadLine") ||
+          (div.classList.contains("dead-line") ||
             div.classList.contains("react-datepicker-popper"))
       )
     ) {
@@ -616,18 +596,6 @@ export const TicketFullScreen = () => {
     ) {
       setSelectTagsOpen(false);
     }
-
-    if (
-      event &&
-      !path.find(
-        (div) =>
-          div.classList &&
-          (div.classList.contains("addPerson") ||
-            div.classList.contains("persons__list"))
-      )
-    ) {
-      setPersonListOpen(false);
-    }
   };
 
   return (
@@ -649,7 +617,7 @@ export const TicketFullScreen = () => {
         <div className="tracker__tabs__head">
           <Link
             to="/profile/tracker"
-            className="tab active-tab projectsTab"
+            className="tab active-tab"
             onClick={() => toggleTabs(1)}
           >
             <img src={project} alt="img" />
@@ -657,20 +625,12 @@ export const TicketFullScreen = () => {
           </Link>
           <Link
             to="/profile/tracker"
-            className="tab tasksTab"
+            className="tab"
             onClick={() => toggleTabs(2)}
           >
             <img src={tasks} alt="img" />
             <p>Все мои задачи</p>
           </Link>
-          <Link
-            to="/profile/tracker"
-            className="tab archiveTab"
-            onClick={() => toggleTabs(3)}
-          >
-            <img src={archive} alt="img" />
-            <p>Архив</p>
-          </Link>
         </div>
         {loader ? (
           <Loader />
@@ -680,98 +640,6 @@ export const TicketFullScreen = () => {
               <div className="tasks__head">
                 <div className="tasks__head__wrapper tasks__head__wrapper__fullScreen">
                   <h5>{projectInfo.name}</h5>
-
-                  <TrackerModal
-                    active={modalAddWorker}
-                    setActive={setModalAddWorker}
-                  />
-
-                  <div className="tasks__head__persons">
-                    <div className="projectPersons">
-                      {projectInfo.projectUsers?.length &&
-                        projectInfo.projectUsers.slice(0, 3).map((person) => {
-                          return (
-                            <img
-                              key={person.user_id}
-                              src={
-                                person.user?.avatar
-                                  ? urlForLocal(person.user.avatar)
-                                  : avatarMok
-                              }
-                              alt="avatar"
-                            />
-                          );
-                        })}
-                    </div>
-                    {projectInfo.projectUsers?.length > 3 && (
-                      <span className="countPersons">+1</span>
-                    )}
-                    <span
-                      className="addPerson"
-                      onClick={() => {
-                        setPersonListOpen(true);
-                      }}
-                    >
-                      +
-                    </span>
-                    <p>добавить участника</p>
-                    {personListOpen && (
-                      <div className="persons__list">
-                        <img
-                          className="persons__list__close"
-                          src={close}
-                          alt="close"
-                          onClick={() => setPersonListOpen(false)}
-                        />
-                        <div className="persons__list__count">
-                          <span>{projectInfo.projectUsers?.length}</span>
-                          участник
-                        </div>
-                        <div className="persons__list__info">
-                          <span>В проекте - </span>
-                          <p>“{projectInfo.name}”</p>
-                        </div>
-                        <div className="persons__list__items">
-                          {projectInfo.projectUsers?.map((person) => {
-                            return (
-                              <div
-                                className="persons__list__item"
-                                key={person.user_id}
-                              >
-                                <img
-                                  className="avatar"
-                                  src={
-                                    person.user?.avatar
-                                      ? urlForLocal(person.user.avatar)
-                                      : avatarMok
-                                  }
-                                  alt="avatar"
-                                />
-                                <span>{person.user.fio}</span>
-                                <img
-                                  className="delete"
-                                  src={close}
-                                  alt="delete"
-                                  onClick={() => deletePerson(person.user_id)}
-                                />
-                              </div>
-                            );
-                          })}
-                        </div>
-                        <div
-                          className="persons__list__add"
-                          onClick={() => {
-                            dispatch(modalToggle("addWorker"));
-                            setModalAddWorker(true);
-                            setPersonListOpen(false);
-                          }}
-                        >
-                          <span className="addPerson">+</span>
-                          <p>Добавить участников</p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
                   <Link
                     to={`/tracker/project/${taskInfo.project_id}`}
                     className="link"
@@ -784,7 +652,7 @@ export const TicketFullScreen = () => {
                 </div>
               </div>
             </div>
-            <div className="modal-tiket__content ticket">
+            <div className="modal-ticket__content ticket">
               <div className="content ticket-whith">
                 <div className="content__task">
                   {editOpen ? (
@@ -799,8 +667,7 @@ export const TicketFullScreen = () => {
                       }}
                     />
                   ) : (
-                    <h5 className="fullName nameFullScreen">
-                      <span>Название задачи:</span>
+                    <h5 className="full-name name-fullscreen">
                       {inputsValue.title}
                     </h5>
                   )}
@@ -816,11 +683,8 @@ export const TicketFullScreen = () => {
                             "EasyImage",
                             "Image",
                             "ImageCaption",
-                            "ImageStyle",
-                            "ImageToolbar",
                             "ImageUpload",
-                            "MediaEmbed",
-                            "BlockQuote"
+                            "MediaEmbed"
                           ]
                         }}
                         onChange={(event, editor) => {
@@ -833,13 +697,8 @@ export const TicketFullScreen = () => {
                       />
                     ) : (
                       <div className="ticket__description">
-                        <span>
-                          Описание
-                          <br />
-                          задачи:{" "}
-                        </span>
-                        <p
-                          className="fullDescription fullScreenDescription"
+                        <div
+                          className="full-description fullscreen-description"
                           dangerouslySetInnerHTML={{
                             __html: inputsValue.description
                           }}
@@ -848,7 +707,7 @@ export const TicketFullScreen = () => {
                     )}
                   </div>
                   {Boolean(taskFiles.length) && (
-                    <div className="task__files filesFullScreen">
+                    <div className="task__files files-fullscreen">
                       {taskFiles.map((file) => {
                         return (
                           <FileTracker
@@ -862,17 +721,17 @@ export const TicketFullScreen = () => {
                     </div>
                   )}
                   {uploadedFile && (
-                    <div className="fileLoaded">
+                    <div className="file-loaded">
                       {uploadedFile.map((file) => {
                         return (
-                          <div className="loadedFile" key={file.id}>
+                          <div className="loaded-file" key={file.id}>
                             <img
                               src={backendImg(file.url)}
                               alt="img"
                               key={file.id}
                             />
                             <div
-                              className="deleteFile"
+                              className="delete-file"
                               onClick={() => deleteLoadedFile(file)}
                             >
                               <img src={fileDelete} alt="delete" />
@@ -884,18 +743,6 @@ export const TicketFullScreen = () => {
                     </div>
                   )}
                   <div className="content__communication">
-                    {/*<p className="tasks">*/}
-                    {/*  <BaseButton*/}
-                    {/*    onClick={() => {*/}
-                    {/*      dispatch(modalToggle("addSubtask"));*/}
-                    {/*      setModalAddWorker(true);*/}
-                    {/*    }}*/}
-                    {/*    styles={"button-green-add"}*/}
-                    {/*  >*/}
-                    {/*    <img src={plus}></img>*/}
-                    {/*    Добавить под задачу*/}
-                    {/*  </BaseButton>*/}
-                    {/*</p>*/}
                     <div className="file">
                       <div className="input__wrapper">
                         <input
@@ -918,7 +765,7 @@ export const TicketFullScreen = () => {
                       {caseOfNum(taskFiles.length, "files")}
                     </div>
                   </div>
-                  <div className="content__input commentFullScreen">
+                  <div className="content__input comment-fullscreen">
                     <input
                       placeholder="Оставить комментарий"
                       value={inputsValue.comment}
@@ -952,31 +799,34 @@ export const TicketFullScreen = () => {
                   </div>
                 </div>
               </div>
-              <div className="workers fullScreenWorkers">
+              <div className="workers fullscreen-workers">
                 <div className="workers_box task__info">
-                  <p className="workers__creator">
-                    Создатель :<p>&nbsp;{taskInfo.user?.fio}</p>
-                  </p>
+                  <div className="workers__creator">
+                    Создатель: <p>{removeLast(taskInfo.user?.fio)}</p>
+                  </div>
 
                   {taskInfo.executor ? (
-                    <div className="executor">
-                      <p>Исполнитель: {taskInfo.executor.fio}</p>
-                      <img
-                        src={
-                          taskInfo.executor?.avatar
-                            ? urlForLocal(taskInfo.executor.avatar)
-                            : avatarMok
-                        }
-                        alt="avatar"
-                      />
-                      <img
-                        src={close}
-                        className="delete"
-                        onClick={() => deleteTaskExecutor()}
-                      />
-                    </div>
+                    <>
+                      <h5>Исполнитель: </h5>
+                      <div className="executor">
+                        <p>{removeLast(taskInfo.executor.fio)}</p>
+                        <img
+                          src={
+                            taskInfo.executor?.avatar
+                              ? urlForLocal(taskInfo.executor.avatar)
+                              : avatarMok
+                          }
+                          alt="avatar"
+                        />
+                        <img
+                          src={close}
+                          className="delete"
+                          onClick={() => deleteTaskExecutor()}
+                        />
+                      </div>
+                    </>
                   ) : (
-                    <div className="add-worker moreItems ">
+                    <div className="add-worker more-items ">
                       <button
                         className="button-add-worker"
                         onClick={() => setDropListOpen(true)}
@@ -985,20 +835,20 @@ export const TicketFullScreen = () => {
                       </button>
                       <span>Добавить исполнителя</span>
                       {dropListOpen && (
-                        <div className="dropdownList">
+                        <div className="dropdown-list">
                           <img
                             src={close}
-                            className="dropdownList__close"
+                            className="dropdown-list__close"
                             onClick={() => setDropListOpen(false)}
                           />
                           {correctProjectUsers.map((person) => {
                             return (
                               <div
-                                className="dropdownList__person"
+                                className="dropdown-list__person"
                                 key={person.user_id}
                                 onClick={() => taskExecutor(person)}
                               >
-                                <span>{person.user.fio}</span>
+                                <span>{removeLast(person.user.fio)}</span>
                                 <img
                                   src={
                                     person.user?.avatar
@@ -1021,7 +871,7 @@ export const TicketFullScreen = () => {
                         {taskInfo.taskUsers.map((member) => {
                           return (
                             <div className="worker" key={member.user_id}>
-                              <p>{member.fio}</p>
+                              <p>{removeLast(member.fio)}</p>
                               <img
                                 src={
                                   member?.avatar
@@ -1041,30 +891,30 @@ export const TicketFullScreen = () => {
                       </div>
                     </div>
                   )}
-                  <div className="add-worker moreItems">
+                  <div className="add-worker more-items">
                     <button
                       className="button-add-worker"
                       onClick={() => setDropListMembersOpen(true)}
                     >
                       +
                     </button>
-                    <span>Добавить участников</span>
+                    <span>Добавить участника</span>
                     {dropListMembersOpen && (
-                      <div className="dropdownList">
+                      <div className="dropdown-list">
                         <img
                           src={close}
-                          className="dropdownList__close"
+                          className="dropdown-list__close"
                           onClick={() => setDropListMembersOpen(false)}
                         />
                         {users.length ? (
                           users.map((person) => {
                             return (
                               <div
-                                className="dropdownList__person"
+                                className="dropdown-list__person"
                                 key={person.user_id}
                                 onClick={() => addMember(person)}
                               >
-                                <span>{person.user.fio}</span>
+                                <span>{removeLast(person.user.fio)}</span>
                                 <img
                                   src={
                                     person.user?.avatar
@@ -1077,7 +927,7 @@ export const TicketFullScreen = () => {
                             );
                           })
                         ) : (
-                          <p className="noUsers">Нет пользователей</p>
+                          <p className="no-users">Нет пользователей</p>
                         )}
                       </div>
                     )}
@@ -1085,12 +935,12 @@ export const TicketFullScreen = () => {
                 </div>
 
                 <div className="workers_box-middle">
-                  <div className="deadLine">
+                  <div className="dead-line">
                     <div
-                      className="deadLine__container"
+                      className="dead-line__container"
                       onClick={() => setDatePickerOpen(!datePickerOpen)}
                     >
-                      <img src={calendarIcon} alt="calendar" />
+                      <p>⌛</p>
                       <span>
                         {deadLine
                           ? getCorrectDate(deadLine)
@@ -1111,8 +961,7 @@ export const TicketFullScreen = () => {
                     />
                   </div>
                   <div className="time">
-                    <img src={watch}></img>
-                    <span>Длительность : </span>
+                    <p>⏱</p>
                     <p>
                       {correctTimerTime(currentTimerCount.hours)}:
                       {correctTimerTime(currentTimerCount.minute)}:
@@ -1190,7 +1039,7 @@ export const TicketFullScreen = () => {
                         {correctProjectTags.map((tag) => {
                           return (
                             <div
-                              className="tagItem"
+                              className="tag-item"
                               key={tag.id}
                               onClick={() => addTagToTask(tag.id)}
                             >
@@ -1200,7 +1049,7 @@ export const TicketFullScreen = () => {
                           );
                         })}
                         {!Boolean(correctProjectTags.length) && (
-                          <p className="tags__dropDown__noItem">Нет тегов</p>
+                          <p className="tags__dropDown__no-item">Нет тегов</p>
                         )}
                       </div>
                     )}
@@ -1292,7 +1141,7 @@ export const TicketFullScreen = () => {
       </div>
       {acceptModalOpen && (
         <AcceptModal
-          title={"Вы точно хотите переместить задачу в архив?"}
+          title={"Вы действительно хотите переместить задачу в архив?"}
           closeModal={closeAcceptModal}
           agreeHandler={deleteTask}
         />

src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss

@@ -2,11 +2,11 @@
   background: #f5f5f5;
 }
 
-.fullName {
+.full-name {
   display: flex;
   align-items: center;
   span {
-    color: #6F6F6F;
+    color: #6f6f6f;
     font-weight: 500;
     font-size: 12px;
     line-height: 17px;
@@ -39,7 +39,7 @@
     span {
       display: flex;
       width: 120px;
-      color: #6F6F6F;
+      color: #6f6f6f;
       font-weight: 500;
       font-size: 12px;
       line-height: 17px;
@@ -47,10 +47,8 @@
   }
 }
 
-.fullScreenWorkers {
+.fullscreen-workers {
   @media (max-width: 880px) {
-    background: #DFF1FF;
-
     .workers_box {
       @media (max-width: 880px) {
         flex-direction: inherit !important;
@@ -62,7 +60,6 @@
         .workers__creator {
           margin-bottom: 0 !important;
           display: flex;
-
         }
 
         .add-worker {
@@ -85,7 +82,7 @@
       gap: 20px;
       border-bottom: none !important;
 
-      .deadLine {
+      .dead-line {
         width: 100%;
       }
 
@@ -123,13 +120,13 @@
   }
 }
 
-.commentFullScreen {
+.comment-fullscreen {
   @media (max-width: 520px) {
     width: auto !important;
   }
 }
 
-.filesFullScreen {
+.files-fullscreen {
   @media (max-width: 520px) {
     justify-content: space-evenly;
     max-height: 400px !important;
@@ -142,13 +139,13 @@
   }
 }
 
-.nameFullScreen {
+.name-fullscreen {
   @media (max-width: 520px) {
     white-space: inherit !important;
   }
 }
 
-.fullScreenDescription {
+.fullscreen-description {
   @media (max-width: 1190px) {
     white-space: inherit !important;
   }

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -22,14 +22,15 @@ import {
   setProjectBoardFetch
 } from "@redux/projectsTrackerSlice";
 
-import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
+import { getCorrectDate } from "@utils/calendarHelper";
+import { getCorrectRequestDate, removeLast, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
 import { useNotification } from "@hooks/useNotification";
 
-import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
+import { Loader } from "@components/Common/Loader/Loader";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
 import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg";
@@ -65,16 +66,18 @@ export const TrackerModal = ({
   const [projectName, setProjectName] = useState(defautlInput);
   const [valueColumn, setValueColumn] = useState("");
   const [nameProject, setNameProject] = useState("");
-  const [valueTiket, setValueTiket] = useState("");
+  const [valueTicket, setValueTicket] = useState("");
   const [descriptionTicket, setDescriptionTicket] = useState("");
   const [workers, setWorkers] = useState([]);
   const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
   const [selectedWorker, setSelectedWorker] = useState(null);
+  const [emailWorker, setEmailWorker] = useState("");
+  const [emailError, setEmailError] = useState("");
   const [selectColumnPriority, setSelectColumnPriority] = useState(
     "Выберите приоритет колонки"
   );
   const [selectedExecutorTask, setSelectedExecutorTask] = useState(
-    "Выберите исполнителя задачи"
+    "Выберите исполнителя"
   );
   const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false);
   const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
@@ -89,6 +92,7 @@ export const TrackerModal = ({
   const [deadLineDate, setDeadLineDate] = useState("");
   const [datePickerOpen, setDatePickerOpen] = useState(false);
   const [startDate, setStartDate] = useState(new Date());
+  const [loader, setLoader] = useState(false);
 
   const priority = [
     {
@@ -111,6 +115,19 @@ export const TrackerModal = ({
       return;
     }
 
+    const existingColumn = projectBoard.columns.find(
+      (column) => column.title === valueColumn
+    );
+
+    if (existingColumn) {
+      showNotification({
+        show: true,
+        text: "Колонка с таким названием уже существует",
+        type: "error"
+      });
+      return;
+    }
+
     apiRequest("/project-column/create-column", {
       method: "POST",
       data: {
@@ -120,15 +137,28 @@ export const TrackerModal = ({
           : 1,
         title: valueColumn
       }
-    }).then(() => {
-      dispatch(setProjectBoardFetch(projectBoard.id));
-    });
+    })
+      .then(() => {
+        dispatch(setProjectBoardFetch(projectBoard.id));
+        showNotification({
+          show: true,
+          text: "Колонка успешно создана",
+          type: "success"
+        });
+      })
+      .catch(() => {
+        showNotification({
+          show: true,
+          text: "Ошибка при создании колонки",
+          type: "error"
+        });
+      });
     setValueColumn("");
     setActive(false);
   }
 
-  function createTiket() {
-    if (!valueTiket || !descriptionTicket) {
+  function createTicket() {
+    if (!valueTicket || !descriptionTicket) {
       showNotification({
         show: true,
         text: "Введите название и описание",
@@ -137,11 +167,13 @@ export const TrackerModal = ({
       return;
     }
 
+    setLoader(true);
+
     apiRequest("/task/create-task", {
       method: "POST",
       data: {
         project_id: projectBoard.id,
-        title: valueTiket,
+        title: valueTicket,
         description: descriptionTicket,
         status: 1,
         user_id: localStorage.getItem("id"),
@@ -157,6 +189,7 @@ export const TrackerModal = ({
           text: "Задача с таким именем уже существует",
           type: "error"
         });
+        setLoader(false);
       } else {
         for (let i = 0; i < taskTags.length; i++) {
           apiRequest("/mark/attach", {
@@ -180,21 +213,23 @@ export const TrackerModal = ({
           }).then(() => {
             dispatch(setProjectBoardFetch(projectBoard.id));
             setActive(false);
-            setValueTiket("");
+            setValueTicket("");
             setDescriptionTicket("");
-            setSelectedExecutorTask("Выберите исполнителя задачи");
+            setSelectedExecutorTask("Выберите исполнителя");
             setSelectedPriority(null);
+            setLoader(false);
           });
         } else {
           setActive(false);
-          setValueTiket("");
+          setLoader(false);
+          setValueTicket("");
           setDescriptionTicket("");
           dispatch(setProjectBoardFetch(projectBoard.id));
         }
         setDeadLineDate("");
         showNotification({
           show: true,
-          text: "Задача создана",
+          text: "Задача успешно создана",
           type: "success"
         });
       }
@@ -211,6 +246,11 @@ export const TrackerModal = ({
     }).then(() => {
       setActive(false);
       dispatch(editProjectName({ id: projectId, name: projectName }));
+      showNotification({
+        show: true,
+        text: "Название проекта успешно изменено",
+        type: "success"
+      });
     });
   }
 
@@ -259,8 +299,25 @@ export const TrackerModal = ({
         title: columnName
       }
     }).then(() => {
-      setActive(false);
-      dispatch(editColumnName({ id: columnId, title: columnName }));
+      const existingColumn = projectBoard.columns.find(
+        (column) => column.title === columnName
+      );
+
+      if (existingColumn) {
+        showNotification({
+          show: true,
+          text: "Колонка с таким названием уже существует",
+          type: "error"
+        });
+      } else {
+        setActive(false);
+        dispatch(editColumnName({ id: columnId, title: columnName }));
+        showNotification({
+          show: true,
+          text: "Колонка успешно изменена",
+          type: "success"
+        });
+      }
     });
   }
 
@@ -279,6 +336,11 @@ export const TrackerModal = ({
           dispatch(setProject(result));
           setActive(false);
           setNameProject("");
+          showNotification({
+            show: true,
+            text: "Проект успешно создан",
+            type: "success"
+          });
         } else {
           showNotification({
             show: true,
@@ -302,11 +364,60 @@ export const TrackerModal = ({
       setActive(false);
       setSelectedWorker("");
       setSelectWorkersOpen(false);
+      showNotification({
+        show: true,
+        text: "Приглашение отправлено",
+        type: "success"
+      });
     });
   }
 
+  const validateEmail = (email) => {
+    // Простая валидация адреса электронной почты
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailPattern.test(email);
+  };
+
+  const inviteUserByEmail = () => {
+    if (validateEmail(emailWorker)) {
+      setEmailError("");
+      apiRequest("/project/add-user-by-email", {
+        method: "POST",
+        data: {
+          email: emailWorker,
+          project_id: projectBoard.id
+        }
+      }).then((response) => {
+        if (response.status === 400) {
+          showNotification({
+            show: true,
+            text: "Участник уже добавлен в проект",
+            type: "error"
+          });
+        } else if (response.status === 404) {
+          showNotification({
+            show: true,
+            text: "Данной почты не существует",
+            type: "error"
+          });
+        } else {
+          setActive(false);
+          setEmailWorker("");
+          dispatch(addPersonToProject(response));
+          showNotification({
+            show: true,
+            text: "Приглашение отправлено",
+            type: "success"
+          });
+        }
+      });
+    } else {
+      setEmailError("Некорректный e-mail адрес");
+    }
+  };
+
   useEffect(() => {
-    modalType === "addWorker"
+    modalType === "add-worker"
       ? apiRequest("/project/my-employee").then((el) => {
           let persons = el.managerEmployees;
           let ids = projectBoard.projectUsers.map((user) => user.user_id);
@@ -385,32 +496,28 @@ export const TrackerModal = ({
     }
   };
 
+  const handleModalClose = () => {
+    setEmailError("");
+    setEmailWorker("");
+  };
+
   return (
     <ModalLayout
       active={active}
       setActive={setActive}
+      onClose={handleModalClose}
       type={modalType}
-      // onClick={() => {
-      //   setSelectWorkersOpen(false);
-      // }}
     >
-      {modalType === "addWorker" && (
+      {modalType === "add-worker" && (
         <>
           <div className="select__person">
-            <div className="title-project selectPerson">
+            <div className="title-project select-person">
               <h4>Добавьте участника</h4>
-              {/*<div className="input-container">*/}
-              {/*  <input*/}
-              {/*    className="name-project"*/}
-              {/*    value={emailWorker}*/}
-              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
-              {/*  />*/}
-              {/*</div>*/}
-              <p className="selectPerson__info">
-                Выберите пользователя в проекте или добавьте по e-mail
-              </p>
               <div className="invite__blocks">
-                <div className="addPersonBlock">
+                <div className="add-person-block">
+                  <p className="select-person__info">
+                    Выберите пользователя в списке
+                  </p>
                   <div
                     className={
                       selectWorkersOpen
@@ -421,7 +528,7 @@ export const TrackerModal = ({
                   >
                     <p>
                       {selectedWorker
-                        ? selectedWorker.employee.fio
+                        ? removeLast(selectedWorker.employee.fio)
                         : "Выберите пользователя"}
                     </p>
                     <img className="arrow" src={arrowDown} alt="arrow" />
@@ -440,7 +547,7 @@ export const TrackerModal = ({
                                   setSelectedWorker(worker);
                                 }}
                               >
-                                <p>{worker.employee.fio}</p>
+                                <span>{removeLast(worker.employee.fio)}</span>
                                 <img
                                   src={urlForLocal(worker.employee.avatar)}
                                   alt="avatar"
@@ -455,23 +562,29 @@ export const TrackerModal = ({
                     )}
                   </div>
                   <BaseButton
-                    styles={"button-add addPersonBtn"}
+                    styles={"button-add add-person-btn"}
                     onClick={addUserToProject}
                   >
                     Добавить
                   </BaseButton>
                 </div>
-                <span>или</span>
-                <div className="invitePersonBlock">
-                  <div className="input-container invitePersonBlock__input">
+                <div className="invite-person-block">
+                  <span>или добавьте по e-mail</span>
+                  <div className="input-container invite-person-block__input">
                     <input
                       className="name-project"
                       placeholder="e-mail"
                       type="email"
+                      value={emailWorker}
+                      onChange={(e) => setEmailWorker(e.target.value)}
                     />
+                    <div className="email-error-message">{emailError}</div>
                   </div>
-                  <BaseButton styles={"button-add invitePersonBlock__btn"}>
-                    Отправить приглашение
+                  <BaseButton
+                    styles={"button-add add-person-btn"}
+                    onClick={inviteUserByEmail}
+                  >
+                    Пригласить
                   </BaseButton>
                 </div>
               </div>
@@ -479,36 +592,22 @@ export const TrackerModal = ({
           </div>
         </>
       )}
-      {modalType === "createTiketProject" && (
+      {modalType === "create-ticket-project" && (
         <>
           <div className="title-project">
-            <div className="createTaskHead">
-              <div className="createTaskBody__right__owner">
-                <p>Создатель : {profileInfo?.fio}</p>
-                <img
-                  src={
-                    profileInfo.photo
-                      ? urlForLocal(profileInfo.photo)
-                      : avatarMok
-                  }
-                  alt="avatar"
-                />
+            <div className="create-task-head">
+              <div className="create-task-body__right__owner">
+                <p>Создание задачи</p>
               </div>
-              {/*<span>Этап</span>*/}
-              {/*<div className="createTaskHead__selectColumn">*/}
-              {/*  <span>Backlog</span>*/}
-              {/*  <img src={arrowCreateTask} alt="arrow" />*/}
-              {/*</div>*/}
             </div>
-            <div className="createTaskBody">
-              <div className="createTaskBody__left">
-                <h4>Введите название и описание задачи</h4>
+            <div className="create-task-body">
+              <div className="create-task-body__left">
                 <div className="input-container">
                   <input
                     maxLength="100"
                     className="name-project"
-                    value={valueTiket}
-                    onChange={(e) => setValueTiket(e.target.value)}
+                    value={valueTicket}
+                    onChange={(e) => setValueTicket(e.target.value)}
                     placeholder="Название задачи"
                   />
                 </div>
@@ -525,7 +624,15 @@ export const TrackerModal = ({
                       "bulletedList",
                       "numberedList"
                     ],
-                    removePlugins: ["BlockQuote"],
+                    removePlugins: [
+                      "CKFinderUploadAdapter",
+                      "CKFinder",
+                      "EasyImage",
+                      "Image",
+                      "ImageCaption",
+                      "ImageUpload",
+                      "MediaEmbed"
+                    ],
                     placeholder: "Описание задачи"
                   }}
                   onChange={(event, editor) => {
@@ -534,14 +641,14 @@ export const TrackerModal = ({
                   }}
                 />
               </div>
-              <div className="createTaskBody__right">
-                <div className="createTaskBody__right__tags">
+              <div className="create-task-body__right">
+                <div className="create-task-body__right__tags">
                   <div className="tags__selected">
                     <div className="tags__selected__items">
                       {taskTags.map((tag) => {
                         return (
                           <div
-                            className="selectedTag"
+                            className="selected-tag"
                             key={tag.id}
                             style={{ background: tag.color }}
                           >
@@ -598,7 +705,7 @@ export const TrackerModal = ({
                         );
                       })}
                       {Boolean(!correctProjectTags.length) && (
-                        <p className="noTags">Нет тегов</p>
+                        <p className="no-tags">Нет тегов</p>
                       )}
                     </div>
                   )}
@@ -649,12 +756,12 @@ export const TrackerModal = ({
                   <div className="selected__executor">
                     {selectedExecutorTask.user_id ? (
                       <>
-                        <span>{selectedExecutorTask.user.fio}</span>
                         <img
                           className="avatar"
                           src={urlForLocal(selectedExecutorTask.user.avatar)}
                           alt="avatar"
                         />
+                        <span>{removeLast(selectedExecutorTask.user.fio)}</span>
                       </>
                     ) : (
                       <span>{selectedExecutorTask}</span>
@@ -671,7 +778,6 @@ export const TrackerModal = ({
                               className="executor"
                               key={person.user_id}
                             >
-                              <span>{person.user.fio}</span>
                               <img
                                 className="avatar"
                                 src={
@@ -681,6 +787,7 @@ export const TrackerModal = ({
                                 }
                                 alt="avatar"
                               />
+                              <span>{removeLast(person.user.fio)}</span>
                             </div>
                           );
                         })
@@ -690,14 +797,12 @@ export const TrackerModal = ({
                     </div>
                   )}
                 </div>
-                <div className="createTaskBody__right__deadLine">
-                  <img src={calendarImg} alt="calendar" />
-                  <span>Срок исполнения</span>
-                  <img src={arrowRight} className="arrow" alt="arrow" />
+                <div className="create-task-body__right__dead-line">
+                  <p>⌛</p>
                   <p onClick={() => setDatePickerOpen(!datePickerOpen)}>
                     {deadLineDate
                       ? getCorrectDate(deadLineDate)
-                      : "Дата не выбрана"}
+                      : "Срок исполнения"}
                   </p>
                   <DatePicker
                     className="datePicker"
@@ -711,15 +816,19 @@ export const TrackerModal = ({
                     }}
                   />
                 </div>
-                <BaseButton styles={"button-add"} onClick={createTiket}>
-                  Создать
-                </BaseButton>
               </div>
             </div>
+            {loader ? (
+              <Loader style={"green"} />
+            ) : (
+              <BaseButton styles={"button-add"} onClick={createTicket}>
+                Создать задачу
+              </BaseButton>
+            )}
           </div>
         </>
       )}
-      {modalType === "editProject" && (
+      {modalType === "edit-project" && (
         <div>
           <div className="title-project">
             <h4>Введите новое название</h4>
@@ -737,7 +846,7 @@ export const TrackerModal = ({
           </BaseButton>
         </div>
       )}
-      {modalType === "createProject" && (
+      {modalType === "create-project" && (
         <div>
           <div className="title-project">
             <h4>{titleProject}</h4>
@@ -772,7 +881,7 @@ export const TrackerModal = ({
           </BaseButton>
         </div>
       )}
-      {modalType === "createColumn" && (
+      {modalType === "create-column" && (
         <div>
           <div className="title-project">
             <h4>Введите название колонки</h4>
@@ -790,58 +899,52 @@ export const TrackerModal = ({
           </BaseButton>
         </div>
       )}
-      {modalType === "editColumn" && (
+      {modalType === "edit-column" && (
         <div>
           <div className="title-project">
-            <h4>Введите новое название</h4>
-            <div className="input-container">
-              <input
-                className="name-project"
-                value={columnName}
-                onChange={(e) => dispatch(setColumnName(e.target.value))}
-              />
+            <div>
+              <h4>Название колонки</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={columnName}
+                  onChange={(e) => dispatch(setColumnName(e.target.value))}
+                />
+              </div>
             </div>
-            <h4>Приоритет колонки</h4>
-            <div
-              className={
-                selectColumnPriorityOpen
-                  ? "select-priority select-priority--open"
-                  : "select-priority"
-              }
-              onClick={() =>
-                setSelectColumnPriorityOpen(!selectColumnPriorityOpen)
-              }
-            >
-              <span>{selectColumnPriority}</span>
-              <img src={arrowDown} alt="arrow" />
-              {selectColumnPriorityOpen && (
-                <div className="select-priority__dropDown">
-                  {projectBoard.columns.map((column, index) => {
-                    return (
-                      <span
-                        key={column.id}
-                        onClick={() => {
-                          setSelectColumnPriority(index + 1);
-                          dispatch(setColumnPriority(index + 1));
-                        }}
-                      >
-                        {index + 1}
-                      </span>
-                    );
-                  })}
-                </div>
-              )}
+            <div>
+              <h4>Приоритет колонки</h4>
+              <div
+                className={
+                  selectColumnPriorityOpen
+                    ? "select-priority select-priority--open"
+                    : "select-priority"
+                }
+                onClick={() =>
+                  setSelectColumnPriorityOpen(!selectColumnPriorityOpen)
+                }
+              >
+                <span>{selectColumnPriority}</span>
+                <img src={arrowDown} alt="arrow" />
+                {selectColumnPriorityOpen && (
+                  <div className="select-priority__dropDown">
+                    {projectBoard.columns.map((column, index) => {
+                      return (
+                        <span
+                          key={column.id}
+                          onClick={() => {
+                            setSelectColumnPriority(index + 1);
+                            dispatch(setColumnPriority(index + 1));
+                          }}
+                        >
+                          {index + 1}
+                        </span>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
             </div>
-            {/*<div className="input-container">*/}
-            {/*  <input*/}
-            {/*    className="name-project"*/}
-            {/*    placeholder="Приоритет колонки"*/}
-            {/*    type="number"*/}
-            {/*    step="1"*/}
-            {/*    value={columnPriority}*/}
-            {/*    onChange={(e) => dispatch(setColumnPriority(e.target.value))}*/}
-            {/*  />*/}
-            {/*</div>*/}
           </div>
           <BaseButton styles={"button-add"} onClick={changeColumnParams}>
             Сохранить
@@ -849,7 +952,14 @@ export const TrackerModal = ({
         </div>
       )}
 
-      <span className="exit" onClick={() => setActive(false)}></span>
+      <span
+        className="exit"
+        onClick={() => {
+          setActive(false);
+          setEmailError("");
+          setEmailWorker("");
+        }}
+      ></span>
     </ModalLayout>
   );
 };

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -30,13 +30,11 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  row-gap: 8px;
-  margin-bottom: 10px;
+  padding-bottom: 15px;
 
   .select-priority {
     background-color: white;
     width: 100%;
-    margin: 12px 0;
     padding: 10px 8px;
     border-radius: 8px;
     font-size: 14px;
@@ -174,12 +172,15 @@
 
       .executor {
         display: flex;
-        justify-content: space-between;
-
+        column-gap: 5px;
+        align-items: center;
         &:hover {
-          span {
-            font-weight: 600;
-          }
+          font-weight: 600;
+        }
+        span {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
         }
       }
     }
@@ -223,9 +224,10 @@
     border-radius: 5px;
     cursor: pointer;
     position: relative;
-    min-width: 320px;
+    min-width: 240px;
     height: 42px;
     width: 100%;
+    margin: 10px 0 10px 0;
 
     p {
       overflow: hidden;
@@ -236,6 +238,16 @@
       margin-left: 10px;
     }
 
+    span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 13px;
+      max-width: 270px;
+      margin: 0;
+      font-weight: 400;
+    }
+
     img {
       transition: all 0.3s ease;
       width: 20px;
@@ -247,10 +259,11 @@
       overflow-y: auto;
       display: flex;
       flex-direction: column;
+      justify-content: center;
       position: absolute;
       width: 100%;
       padding: 9.5px 12px;
-      top: 48px;
+      top: 45px;
       left: 0;
       background: white;
       border-radius: 5px;
@@ -294,9 +307,9 @@
     }
   }
 
-  .createTaskHead {
+  .create-task-head {
     width: 100%;
-    padding: 30px 42px 18px;
+    padding: 5px 10px;
     display: flex;
     column-gap: 9.5px;
     align-items: center;
@@ -308,7 +321,7 @@
       color: #000000;
     }
 
-    &__selectColumn {
+    &__select-column {
       display: flex;
       column-gap: 8px;
       cursor: pointer;
@@ -324,10 +337,10 @@
     }
   }
 
-  .createTaskBody {
-    padding: 13px 43px 46px 42px;
+  .create-task-body {
+    padding: 15px 30px;
     display: flex;
-    column-gap: 55px;
+    column-gap: 20px;
 
     &__left {
       display: flex;
@@ -336,7 +349,8 @@
         color: #263238 !important;
         font-size: 16px;
         line-height: 19.2px;
-        margin-bottom: 25px;
+        margin-bottom: 15px;
+        margin-left: 5px;
       }
 
       .input-container {
@@ -360,8 +374,8 @@
       }
 
       .ck-editor__editable.ck-rounded-corners {
-        min-height: 110px;
-        max-height: 110px;
+        min-height: 180px;
+        max-height: 180px;
       }
     }
 
@@ -370,16 +384,17 @@
       flex-direction: column;
       align-items: start;
       justify-content: end;
+      row-gap: 10px;
 
       &__owner {
         display: flex;
         align-items: center;
         column-gap: 9.5px;
         p {
-          color: #2d4a17;
-          font-size: 14px;
+          font-size: 18px;
           font-weight: 500;
           line-height: 32px;
+          padding-left: 15px;
         }
 
         img {
@@ -395,11 +410,11 @@
 
         .tags {
           &__selected {
-            width: 393px;
+            width: 250px;
             font-weight: 300;
             line-height: 18px;
             font-size: 15px;
-            margin-bottom: 17.5px;
+            margin-bottom: 10px;
             border-radius: 8px;
             display: flex;
             flex-direction: column;
@@ -436,7 +451,7 @@
               gap: 8px;
               max-width: 393px;
 
-              .selectedTag {
+              .selected-tag {
                 display: flex;
                 padding: 7px 7px 7px 8px;
                 border-radius: 35px;
@@ -513,7 +528,7 @@
               }
             }
 
-            .noTags {
+            .no-tags {
               text-align: center;
               font-size: 18px;
             }
@@ -526,7 +541,7 @@
 
         &__name {
           color: #000;
-          width: 393px;
+          width: 250px;
           height: 47px;
           font-size: 15px;
           font-weight: 400;
@@ -574,12 +589,11 @@
 
       .select__executor {
         background: #f1f1f1;
-        width: 393px;
+        width: 250px;
         height: 47px;
         font-weight: 300;
         line-height: 18px;
         font-size: 15px;
-        margin-bottom: 27px;
         z-index: 100;
       }
 
@@ -592,15 +606,15 @@
         font-size: 16px;
       }
 
-      &__deadLine {
+      &__dead-line {
         display: flex;
         align-items: center;
-        column-gap: 18px;
+        column-gap: 5px;
         font-weight: 300;
         line-height: 18px;
         font-size: 15px;
         position: relative;
-        margin-bottom: 22px;
+        margin: 8px 0 30px;
 
         span {
           color: #6f6f6f;
@@ -639,7 +653,6 @@
 
         .react-datepicker__current-month {
           font-size: 18px;
-          font-family: "LabGrotesque", sans-serif;
           text-transform: capitalize;
           padding-bottom: 8px;
         }
@@ -683,7 +696,6 @@
         .react-datepicker__day {
           font-size: 16px;
           width: 35px;
-          font-family: "LabGrotesque", sans-serif;
           border-radius: 50px;
           padding: 7px;
         }
@@ -692,7 +704,6 @@
           font-size: 18px;
           width: 35px;
           font-weight: 500;
-          font-family: "LabGrotesque", sans-serif;
         }
 
         .react-datepicker__triangle {
@@ -705,6 +716,10 @@
       }
     }
   }
+
+  .button-add {
+    margin: 0 30px;
+  }
 }
 
 .name-project {
@@ -730,9 +745,8 @@
   margin: 0 auto;
 }
 
-.addPersonBtn {
-  margin: 0 auto 0 0;
-  margin-top: 20px;
+.add-person-btn {
+  margin: 0;
 }
 
 .modal-add.active {

src/components/Navigation/Navigation.jsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
 
 import { getProfileInfo } from "@redux/outstaffingSlice";
@@ -9,9 +9,8 @@ import { urlForLocal } from "@utils/helper";
 import avatarMok from "assets/images/avatarMok.png";
 
 export const Navigation = () => {
-  const dispatch = useDispatch();
-
   const profileInfo = useSelector(getProfileInfo);
+  const currentPath = window.location.pathname;
   const [user] = useState(
     localStorage.getItem("role_status") === "18" ? "partner" : "developer"
   );
@@ -30,10 +29,10 @@ export const Navigation = () => {
         path: "/tracker",
         name: "Трекер"
       },
-      {
-        path: "/payouts",
-        name: "Выплаты"
-      },
+      // {
+      //   path: "/payouts",
+      //   name: "Выплаты"
+      // },
       {
         path: "/quiz",
         name: "Тесты"
@@ -44,26 +43,28 @@ export const Navigation = () => {
       }
     ],
     partner: [
-      {
-        path: "/catalog",
-        name: "Каталог"
-      },
+      // {
+      //   path: "/catalog",
+      //   active: "candidate",
+      //   name: "Каталог"
+      // },
       {
         path: "/requests",
-        name: "Запросы"
+        name: "Мои вакансии"
       },
       {
-        path: "/categories",
+        path: "/employees",
+        active: "calendar",
         name: "Персонал"
       },
       {
         path: "/tracker",
         name: "Трекер"
       },
-      {
-        path: "/treaties",
-        name: "Договора"
-      },
+      // {
+      //   path: "/treaties",
+      //   name: "Договоры"
+      // },
       {
         path: "/settings",
         name: "Настройки"
@@ -71,32 +72,22 @@ export const Navigation = () => {
     ]
   });
 
-  useEffect(() => {
-    if (localStorage.getItem("role_status") === "18") {
-      return;
-    }
-    // if (Object.keys(profileInfo).length) {
-    //   return;
-    // }
-    // apiRequest(`/user/me`).then((profileInfo) =>
-    //   dispatch(
-    //     setProfileInfo(
-    //       profileInfo.userCard ? profileInfo.userCard : profileInfo
-    //     )
-    //   )
-    // );
-  }, []);
-
   return (
-    <div className="profileHeader__info">
-      <div className="profileHeader__container">
-        <nav className="profileHeader__nav">
+    <div className="profile-header__info">
+      <div className="profile-header__container">
+        <nav className="profile-header__nav">
           {navInfo[user].map((link, index) => {
             return (
               <NavLink
                 key={index}
                 end
-                to={link.path === "/quiz" ? link.path : `/profile${link.path}`}
+                to={`/profile${link.path}`}
+                className={
+                  currentPath.includes(link.path) ||
+                  currentPath.includes(link.active)
+                    ? "active"
+                    : ""
+                }
               >
                 {link.name}
               </NavLink>
@@ -104,16 +95,16 @@ export const Navigation = () => {
           })}
         </nav>
 
-        <div className="profileHeader__personalInfo">
-          <h3 className="profileHeader__personalInfoName">
-            {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
+        <div className="profile-header__personal-info">
+          <h3 className="profile-header__personal-info-name">
+            {profileInfo?.fio || profileInfo?.username}
           </h3>
           <NavLink end to={"/profile"}>
             <img
               src={
                 profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
               }
-              className="profileHeader__personalInfoAvatar"
+              className="profile-header__personal-info-avatar"
               alt="avatar"
             />
           </NavLink>

src/components/Notification/notification.scss

@@ -5,7 +5,7 @@
   position: fixed;
   bottom: 25px;
   right: 25px;
-  z-index: 20;
+  z-index: 10000;
 
   &__info {
     display: flex;

src/components/OutstaffingBlock/outstaffingBlock.scss

@@ -1,15 +1,7 @@
-body {
-  font-family: "LabGrotesque", sans-serif !important;
-}
-
-.container {
-  max-width: 1160px !important;
-}
 .catalog {
   background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
-  font-family: "LabGrotesque", sans-serif;
   padding-top: 23px;
 
   &__title {
@@ -19,6 +11,10 @@ body {
   }
 }
 
+.container {
+  max-width: 1160px !important;
+}
+
 .outstaffing-block__selected .outstaffing-block__img {
   background-color: #52b70999;
   color: #f9f9f9;