Fixed img in components

config/webpack/common.js

@@ -1,45 +1,44 @@
-const paths = require('../paths');
+const paths = require("../paths");
 
-const webpack = require('webpack');
+const webpack = require("webpack");
 
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CopyWebpackPlugin = require("copy-webpack-plugin");
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
-
-const Dotenv = require('dotenv-webpack');
 
+const Dotenv = require("dotenv-webpack");
 
 const plugins = [
-  '@babel/plugin-proposal-class-properties',
+  "@babel/plugin-proposal-class-properties",
-  '@babel/plugin-syntax-dynamic-import',
+  "@babel/plugin-syntax-dynamic-import",
-  '@babel/plugin-transform-runtime'
+  "@babel/plugin-transform-runtime",
 ];
 
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV === "development") {
-  plugins.push('react-refresh/babel');
+  plugins.push("react-refresh/babel");
 }
 
 const babelLoader = {
-  loader: 'babel-loader',
+  loader: "babel-loader",
   options: {
     presets: [
       // "react-app",
-      '@babel/preset-env',
+      "@babel/preset-env",
-      '@babel/preset-react',
+      "@babel/preset-react",
     ],
-    plugins: plugins
+    plugins: plugins,
-  }
+  },
 };
 
 module.exports = {
   entry: `${paths.src}/index.js`,
   output: {
     path: paths.build,
-    filename: '[name].bundle.js',
+    filename: "[name].bundle.js",
-    publicPath: '/',
+    publicPath: "/",
     // publicPath: 'https://itguild.info',
     asyncChunks: true,
     clean: true,
-    crossOriginLoading: 'anonymous',
+    crossOriginLoading: "anonymous",
     module: true,
     environment: {
       arrowFunction: true,
@@ -47,57 +46,56 @@ module.exports = {
       const: true,
       destructuring: true,
       dynamicImport: false,
-      forOf: true
+      forOf: true,
-    }
+    },
   },
   resolve: {
     alias: {
-      '@': `${paths.src}/modules`
+      "@": `${paths.src}/modules`,
     },
-    extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json']
+    extensions: [".mjs", ".js", ".jsx", ".ts", ".tsx", ".json"],
   },
   experiments: {
     topLevelAwait: true,
-    outputModule: true
+    outputModule: true,
   },
   module: {
     rules: [
-
       // JavaScript, React
       {
         test: /\.m?jsx?$/i,
         exclude: /node_modules/,
-        use: babelLoader
+        use: babelLoader,
       },
       // TypeScript
       {
         test: /.tsx?$/i,
         exclude: /node_modules/,
-        use: [babelLoader, 'ts-loader']
+        use: [babelLoader, "ts-loader"],
       },
       // CSS, SASS
       {
         test: /\.(c|sa|sc)ss$/i,
         use: [
-          'style-loader',
+          "style-loader",
           {
-            loader: 'css-loader',
+            loader: "css-loader",
-            options: {importLoaders: 1}
+            options: { importLoaders: 1 },
           },
-          'sass-loader'
+          "sass-loader",
-        ]
+        ],
       },
       // MD
       {
         test: /\.md$/i,
-        use: ['html-loader', 'markdown-loader']
+        use: ["html-loader", "markdown-loader"],
       },
       // static files
       {
-        test: /\.(jpe?g|png|gif|svg|eot|ttf|woff2|woff?)$/i,
+        test: /\.(jpe?g|png|gif|webp|svg|eot|ttf|woff2|woff?)$/i,
-        type: 'asset/resource'
+        type: "asset/resource",
-      }
+      },
-    ]
+    ],
   },
   plugins: [
     new webpack.ProgressPlugin(),
@@ -107,10 +105,10 @@ module.exports = {
         {
           from: `${paths.public}`,
           globOptions: {
-            ignore: ["**/index.html"]
+            ignore: ["**/index.html"],
-          }
+          },
-        }
+        },
-      ]
+      ],
     }),
 
     new HtmlWebpackPlugin({
@@ -119,11 +117,11 @@ module.exports = {
     }),
 
     new webpack.ProvidePlugin({
-      React: 'react'
+      React: "react",
     }),
 
     new Dotenv({
-      path: '.env'
+      path: ".env",
-    })
+    }),
-  ]
+  ],
 };

src/components/AuthBox/AuthBox.jsx

@@ -1,20 +1,18 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+
 import { useDispatch, useSelector } from "react-redux";
-
-import { Loader } from "../Loader/Loader";
-
 import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
 import { loading } from "../../redux/loaderSlice";
 import { setRole } from "../../redux/roleSlice";
 import { selectIsLoading } from "../../redux/loaderSlice";
 
-import ModalErrorLogin from "../../components/UI/ModalErrorLogin/ModalErrorLogin";
+import ModalRegistration from "../UI/ModalRegistration/ModalRegistration";
-
+import ModalErrorLogin from "../UI/ModalErrorLogin/ModalErrorLogin";
+import { Loader } from "../Loader/Loader";
 import { apiRequest } from "../../api/request";
 
 import ellipse from "../../images/ellipse.png";
-import ModalRegistration from "../UI/ModalRegistration/ModalRegistration";
 
 import "./authBox.scss";
 
@@ -78,7 +76,7 @@ export const AuthBox = ({ title }) => {
         Войти в <span>систему</span>
       </h2>
       <div className="auth-box__title">
-        <img src={ellipse} alt="" />
+        <img src={ellipse} alt="." />
         <span>{title}</span>
       </div>
       <form ref={ref} className="auth-box__form">

src/components/AuthHeader/AuthHeader.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 import { scrollToForm } from "../../helper";
 
-import userIcon from "../../images/userIcon.png";
+import userIcon from "../../images/userIcon.svg";
 
 import "./authHeader.scss";
 

src/components/AuthHeader/authHeader.scss

@@ -53,7 +53,7 @@
           }
 
           .candidate {
-            color: #1458DD;
+            color: #1458dd;
           }
         }
       }

src/components/Calendar/Calendar.js

@@ -1,78 +0,0 @@
-import React, {useEffect, useState} from 'react'
-import {useSelector} from 'react-redux'
-import {Link, Navigate, useNavigate} from 'react-router-dom'
-
-import CalendarComponent from './CalendarComponent'
-import {currentMonth} from './calendarHelper'
-import {Footer} from '../Footer/Footer'
-import {LogoutButton} from "../LogoutButton/LogoutButton";
-
-import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
-
-import rectangle from '../../images/rectangle_secondPage.png'
-
-import './calendar.scss'
-import {urlForLocal} from "../../helper";
-
-
-const Calendar = () => {
-  if(localStorage.getItem('role_status') !== '18') {
-    return <Navigate to="/profile" replace/>
-  }
-
-  const candidateForCalendar = useSelector(selectCurrentCandidate);
-
-  const [month, setMonth] = useState('');
-
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    setMonth(currentMonth)
-  }, [month]);
-
-  const {name, skillsName, photo} = candidateForCalendar;
-
-  const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));
-
-  return (
-      <div className='container'>
-        <section className='calendar'>
-          <div className='row'>
-            <div className='calendar__header'>
-            <h2 className='calendar__profile'>
-              Добрый день, <span>Александр !</span>
-            </h2>
-            <LogoutButton />
-            </div>
-            <div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
-              <div className='calendar__info'>
-                {photo && <img className='calendar__info-img' src={urlForLocal(photo)} alt='img'/>}
-                <h3 className='calendar__info-name'>{abbreviatedName}</h3>
-              </div>
-              <div className='calendar__title'>
-                <h3 className='calendar__title-text'>{skillsName} разработчик</h3>
-                <img className='calendar__title-img' src={rectangle} alt='img'/>
-              </div>
-              <div>
-                <Link to='/report'>
-                  <button className='calendar__btn'>Заполнить отчет за день</button>
-                </Link>
-              </div>
-            </div>
-          </div>
-
-          <div className='row'>
-            <div className='col-12 col-xl-12'>
-              <CalendarComponent onSelect={() => { navigate('/report/0') }}/>
-              <p className='calendar__hours'>
-                {month} : <span> 60 часов </span>
-              </p>
-            </div>
-          </div>
-          <Footer/>
-        </section>
-      </div>
-  )
-};
-
-export default Calendar

src/components/Calendar/Calendar.jsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { Link, Navigate, useNavigate } from "react-router-dom";
+
+import CalendarComponent from "./CalendarComponent";
+import { currentMonth } from "./calendarHelper";
+import { Footer } from "../Footer/Footer";
+import { LogoutButton } from "../LogoutButton/LogoutButton";
+import { urlForLocal } from "../../helper";
+import { selectCurrentCandidate } from "../../redux/outstaffingSlice";
+
+import rectangle from "../../images/rectangle_secondPage.png";
+
+import "./calendar.scss";
+
+const Calendar = () => {
+  if (localStorage.getItem("role_status") !== "18") {
+    return <Navigate to="/profile" replace />;
+  }
+
+  const candidateForCalendar = useSelector(selectCurrentCandidate);
+
+  const [month, setMonth] = useState("");
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setMonth(currentMonth);
+  }, [month]);
+
+  const { name, skillsName, photo } = candidateForCalendar;
+
+  const abbreviatedName = name && name.substring(0, name.lastIndexOf(" "));
+
+  return (
+    <div className="container">
+      <section className="calendar">
+        <div className="row">
+          <div className="calendar__header">
+            <h2 className="calendar__profile">
+              Добрый день, <span>Александр !</span>
+            </h2>
+            <LogoutButton />
+          </div>
+          <div className="col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row">
+            <div className="calendar__info">
+              {photo && (
+                <img
+                  className="calendar__info-img"
+                  src={urlForLocal(photo)}
+                  alt="img"
+                />
+              )}
+              <h3 className="calendar__info-name">{abbreviatedName}</h3>
+            </div>
+            <div className="calendar__title">
+              <h3 className="calendar__title-text">{skillsName} разработчик</h3>
+              <img className="calendar__title-img" src={rectangle} alt="img" />
+            </div>
+            <div>
+              <Link to="/report">
+                <button className="calendar__btn">
+                  Заполнить отчет за день
+                </button>
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col-12 col-xl-12">
+            <CalendarComponent
+              onSelect={() => {
+                navigate("/report/0");
+              }}
+            />
+            <p className="calendar__hours">
+              {month} : <span> 60 часов </span>
+            </p>
+          </div>
+        </div>
+        <Footer />
+      </section>
+    </div>
+  );
+};
+
+export default Calendar;

src/components/Calendar/CalendarComponent.js

@@ -1,92 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import ellipse from '../../images/ellipse.png'
-import rectangle from '../../images/rectangle__calendar.png'
-import calendarIcon from '../../images/calendar_icon.png'
-import moment from 'moment'
-import 'moment/locale/ru'
-import { calendarHelper, currentMonthAndDay, } from './calendarHelper'
-
-import './calendarComponent.scss'
-
-const CalendarComponent = ({ onSelect }) => {
-  const [value, setValue] = useState(moment())
-  const [calendar, setCalendar] = useState([])
-
-  useEffect(() => {
-    setCalendar(calendarHelper(value))
-  }, [value])
-
-  function beforeToday(day) {
-    return day.isBefore(new Date(), 'day')
-  }
-
-  function isToday(day) {
-    return day.isSame(new Date(), 'day')
-  }
-
-  function dayStyles(day) {
-    if (beforeToday(day)) return `before`
-    if (isToday(day)) return `today`
-    if (day.day() === 6 || day.day() === 0) return `selected`
-    return ''
-  }
-
-  function prevMonth() {
-    return value.clone().subtract(1, 'month')
-  }
-
-  function nextMonth() {
-    return value.clone().add(1, 'month');
-  }
-
-  return (
-    <div className='calendar-component'>
-      <div className='calendar-component__header'>
-        <h3>Мои отчеты</h3>
-        <div className='calendar-component__header-box'>
-          <img src={ellipse} alt='' />
-          <span onClick={() => setValue(prevMonth())}>{prevMonth().format('MMMM')}</span>
-        </div>
-        <div className='calendar-component__header-box'>
-          <img src={ellipse} alt='' />
-          <span onClick={() => setValue(nextMonth())}>{nextMonth().format('MMMM')}</span>
-        </div>
-      </div>
-
-      <div className='calendar-component__rectangle'>
-        <img src={rectangle} alt='' />
-      </div>
-
-      <div className='calendar-component__body'>
-        <div>
-          <p>Пн</p>
-          <p>Вт</p>
-          <p>Ср</p>
-          <p>Чт</p>
-          <p>Пт</p>
-          <p>Сб</p>
-          <p>Вс</p>
-        </div>
-
-        <div className='calendar-component__form'>
-          {calendar.map((week) =>
-            week.map((day) => (
-              <button
-                onClick={() => { setValue(day); onSelect(day) }}
-                key={day}
-                className={dayStyles(day)}
-                name={day.format('dddd')}
-                id='btn'
-              >
-                <img className={'calendar__icon'} src={calendarIcon} alt='' />
-                {currentMonthAndDay(day)}
-              </button>
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default CalendarComponent

src/components/Calendar/CalendarComponent.jsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from "react";
+import { calendarHelper, currentMonthAndDay } from "./calendarHelper";
+
+import ellipse from "../../images/ellipse.png";
+import rectangle from "../../images/rectangle__calendar.png";
+import calendarIcon from "../../images/calendar_icon.png";
+
+import moment from "moment";
+import "moment/locale/ru";
+
+import "./calendarComponent.scss";
+
+const CalendarComponent = ({ onSelect }) => {
+  const [value, setValue] = useState(moment());
+  const [calendar, setCalendar] = useState([]);
+
+  useEffect(() => {
+    setCalendar(calendarHelper(value));
+  }, [value]);
+
+  function beforeToday(day) {
+    return day.isBefore(new Date(), "day");
+  }
+
+  function isToday(day) {
+    return day.isSame(new Date(), "day");
+  }
+
+  function dayStyles(day) {
+    if (beforeToday(day)) return `before`;
+    if (isToday(day)) return `today`;
+    if (day.day() === 6 || day.day() === 0) return `selected`;
+    return "";
+  }
+
+  function prevMonth() {
+    return value.clone().subtract(1, "month");
+  }
+
+  function nextMonth() {
+    return value.clone().add(1, "month");
+  }
+
+  return (
+    <div className="calendar-component">
+      <div className="calendar-component__header">
+        <h3>Мои отчеты</h3>
+        <div className="calendar-component__header-box">
+          <img src={ellipse} alt="" />
+          <span onClick={() => setValue(prevMonth())}>
+            {prevMonth().format("MMMM")}
+          </span>
+        </div>
+        <div className="calendar-component__header-box">
+          <img src={ellipse} alt="" />
+          <span onClick={() => setValue(nextMonth())}>
+            {nextMonth().format("MMMM")}
+          </span>
+        </div>
+      </div>
+
+      <div className="calendar-component__rectangle">
+        <img src={rectangle} alt="" />
+      </div>
+
+      <div className="calendar-component__body">
+        <div>
+          <p>Пн</p>
+          <p>Вт</p>
+          <p>Ср</p>
+          <p>Чт</p>
+          <p>Пт</p>
+          <p>Сб</p>
+          <p>Вс</p>
+        </div>
+
+        <div className="calendar-component__form">
+          {calendar.map((week) =>
+            week.map((day) => (
+              <button
+                onClick={() => {
+                  setValue(day);
+                  onSelect(day);
+                }}
+                key={day}
+                className={dayStyles(day)}
+                name={day.format("dddd")}
+                id="btn"
+              >
+                <img className={"calendar__icon"} src={calendarIcon} alt="" />
+                {currentMonthAndDay(day)}
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CalendarComponent;

src/components/Calendar/calendar.scss

@@ -1,6 +1,6 @@
 .calendar {
   margin-bottom: 40px;
-  font-family: 'LabGrotesque', sans-serif;
+  font-family: "LabGrotesque", sans-serif;
 
   &__header {
     display: flex;
@@ -85,7 +85,7 @@
       );
     border: none;
     color: #ffffff;
-    font-family: 'Muller';
+    font-family: "Muller";
     font-size: 1.6em;
     letter-spacing: normal;
     text-align: center;

src/components/Calendar/calendarComponent.scss

@@ -210,12 +210,6 @@
     padding: 28px 10px 48px 10px;
 
     &__header {
-      //h3 {
-      //  position: absolute;
-      //  top: -10%;
-      //  left: 25%;
-      //}
-
       &-box {
         margin-left: 20px;
       }
@@ -233,101 +227,6 @@
   }
 }
 
-//@media (max-width: 768px) {
-//  .calendar-component__form > button {
-//    width: 70px;
-//    height: 40px;
-//
-//    img {
-//      display: none;
-//    }
-//  }
-//}
-
-//@media (max-width: 540.98px) {
-//  .calendar-component__form > button {
-//    width: 68px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 520.98px) {
-//  .calendar-component__form > button {
-//    width: 66px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 500.98px) {
-//  .calendar-component__form > button {
-//    width: 64px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 480.98px) {
-//  .calendar-component__form > button {
-//    width: 60px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 460.98px) {
-//  .calendar-component__form > button {
-//    width: 56px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 440.98px) {
-//  .calendar-component__form > button {
-//    width: 52px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 428.98px) {
-//  .calendar-component__form > button {
-//    width: 50px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 414.98px) {
-//  .calendar-component__form > button {
-//    width: 49px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 395.98px) {
-//  .calendar-component__form > button {
-//    width: 46px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 350.98px) {
-//  .calendar-component__form > button {
-//    width: 44px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 349.98px) {
-//  .calendar-component__form > button {
-//    width: 42px;
-//    height: 40px;
-//  }
-//}
-//
-//@media (max-width: 346.98px) {
-//  .calendar-component__form > button {
-//    width: 40px;
-//    height: 40px;
-//  }
-//}
-
 .calendar__icon {
   margin-right: 10px;
   margin-top: -4px;

src/components/Candidate/Candidate.js

@@ -7,6 +7,7 @@ import Sidebar from "../CandidateSidebar/CandidateSidebar";
 import { ProfileHeader } from "../ProfileHeader/ProfileHeader";
 import { ProfileBreadcrumbs } from "../ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../Footer/Footer";
+import { Navigation } from "../Navigation/Navigation";
 
 import {
   currentCandidate,
@@ -16,17 +17,17 @@ import {
 import { apiRequest } from "../../api/request";
 import { createMarkup } from "../../helper";
 
-import gitImgItem from "../../images/gitItemImg.png";
+import gitImgItem from "../../images/gitItemImg.svg";
+
 import rectangle from "../../images/rectangle_secondPage.png";
-import front from "../Outstaffing/images/front_end.png";
+import front from "../../images/front-end.webp";
-import back from "../Outstaffing/images/back_end.png";
+import back from "../../images/back-end.webp";
-import design from "../Outstaffing/images/design.png";
+import design from "../../images/design.webp";
-import rightArrow from "../../images/arrowRight.png";
+import rightArrow from "../../images/arrowRight.svg";
 
 import { LEVELS, SKILLS } from "../../constants/constants";
 
 import "./candidate.scss";
-import { Navigation } from "../Navigation/Navigation";
 
 const Candidate = () => {
   if (localStorage.getItem("role_status") !== "18") {

src/components/CandidateSidebar/CandidateSidebar.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { Achievement } from "../Achievement/Achievement";
 
+import { Achievement } from "../Achievement/Achievement";
 import ModalAspt from "../UI/ModalAspt/ModalAspt";
+
 import { urlForLocal } from "../../helper";
 import { LEVELS, SKILLS } from "../../constants/constants";
 

src/components/CardControl/CardControl.js

@@ -1,20 +1,23 @@
-import React from 'react'
+import React from "react";
-import rightArrow from "../../images/arrowRight.png"
+import { Link } from "react-router-dom";
-import { Link } from 'react-router-dom'
+
-import './CardControl.scss'
+import rightArrow from "../../images/arrowRight.svg";
+
+import "./CardControl.scss";
 
 export const CardControl = ({ title, path, description, img }) => {
   return (
-	<Link to={`/${path}`} className='control-card'>
+    <Link to={`/${path}`} className="control-card">
-		<div className='control-card__about'>
+      <div className="control-card__about">
-			<img src={img} alt='itemImg' />
+        <img src={img} alt="itemImg" />
         <h3>{title}</h3>
       </div>
-		<div className='control-card__info'>
+      <div className="control-card__info">
         <p dangerouslySetInnerHTML={{ __html: description }}></p>
-			<div className='control-card__infoLink'>
+        <div className="control-card__infoLink">
-				<img src={rightArrow} alt='arrow' />
+          <img src={rightArrow} alt="arrow" />
         </div>
       </div>
-	</Link>)
+    </Link>
-}
+  );
+};

src/components/CategoriesItem/CategoriesItem.js

@@ -1,25 +1,30 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import rightArrow from "../../images/arrowRight.png"
+import rightArrow from "../../images/arrowRight.svg";
 
-import './categoriesItem.scss'
+import "./categoriesItem.scss";
 
 export const CategoriesItem = ({ img, title, skills, available, link }) => {
   return (
-        <Link to={link} className={available ? "categoriesItem" : "categoriesItem categoriesItem__disable"}>
+    <Link
-            <div className='categoriesItem__title'>
+      to={link}
-                <img src={img} alt='img' />
+      className={
+        available ? "categoriesItem" : "categoriesItem categoriesItem__disable"
+      }
+    >
+      <div className="categoriesItem__title">
+        <img src={img} alt="img" />
         <h5>{title}</h5>
       </div>
-            <div className='categoriesItem__description'>
+      <div className="categoriesItem__description">
         <p>{skills}</p>
-                <div className='more'>
+        <div className="more">
           <img src={rightArrow} alt="arrow" />
         </div>
       </div>
     </Link>
-    )
+  );
 };
 
-export default CategoriesItem
+export default CategoriesItem;

src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.jsx

@@ -1,14 +1,17 @@
 import React from "react";
-import "./FrequentlyAskedQuestionsItem.scss";
-import { FREQUENTLY_ASKED_QUESTION_ROUTE } from "../../constants/router-path";
 import { Link } from "react-router-dom";
+
 import questionIcon from "./../../images/faq/question.svg";
 
+import "./FrequentlyAskedQuestionsItem.scss";
+
 export const FrequentlyAskedQuestionsItem = ({ rubric }) => {
   return (
     <div className="frequently-asked-questions-item">
       <div className="frequently-asked-questions-item__head">
-        <div className="frequently-asked-questions-item__icon-question"><img src={questionIcon} alt="" /></div>
+        <div className="frequently-asked-questions-item__icon-question">
+          <img src={questionIcon} alt="" />
+        </div>
         <div className="frequently-asked-questions-item__title">
           {rubric?.title}
         </div>
@@ -16,7 +19,7 @@ export const FrequentlyAskedQuestionsItem = ({ rubric }) => {
       {rubric?.questions?.map((question) => (
         <Link
           key={question.id}
-          to={FREQUENTLY_ASKED_QUESTION_ROUTE + "/" + question.id}
+          to={`/frequently-asked-question/${question.id}`}
           className="frequently-asked-questions-item__body"
         >
           <p>{question.title}</p>

src/components/Outstaffing/Outstaffing.js

@@ -1,26 +1,28 @@
-import React from 'react'
+import React from "react";
-import {useSelector, useDispatch} from 'react-redux'
+import { useSelector, useDispatch } from "react-redux";
 
-import OutstaffingBlock from '../OutstaffingBlock/OutstaffingBlock'
+import OutstaffingBlock from "../OutstaffingBlock/OutstaffingBlock";
-import TagSelect from '../Select/TagSelect'
+import TagSelect from "../Select/TagSelect";
 
-import {selectTags, getPositionId, setPositionId} from '../../redux/outstaffingSlice'
+import {
-
+  selectTags,
-import front from './images/front_end.png'
+  getPositionId,
-import back from './images/back_end.png'
+  setPositionId,
-import design from './images/design.png'
+} from "../../redux/outstaffingSlice";
-
-import './outstaffing.scss'
 
+import front from "../../images/front-end.webp";
+import back from "../../images/back-end.webp";
+import design from "../../images/design.webp";
 
+import "./outstaffing.scss";
 
 const createSelectPositionHandler =
   ({ positionId, setPositionId, dispatch }) =>
   (id) => {
     if (id === positionId) {
-            dispatch(setPositionId(null))
+      dispatch(setPositionId(null));
     } else {
-            dispatch(setPositionId(id))
+      dispatch(setPositionId(id));
     }
   };
 
@@ -32,48 +34,48 @@ const Outstaffing = () => {
   const onSelectPosition = createSelectPositionHandler({
     positionId,
     setPositionId,
-    dispatch
+    dispatch,
   });
   return (
     <>
-        <section className='outstaffing'>
+      <section className="outstaffing">
-          <div className='row'>
+        <div className="row">
-            <div className='col-12 col-xl-4'>
+          <div className="col-12 col-xl-4">
             <OutstaffingBlock
               dataTags={
                 tagsArr &&
-                    tagsArr.flat().filter((tag) => tag.name === 'skills_front')
+                tagsArr.flat().filter((tag) => tag.name === "skills_front")
               }
               img={front}
-                  header='Frontend разработчики'
+              header="Frontend разработчики"
-                  positionId='2'
+              positionId="2"
-                  isSelected={positionId === '2'}
+              isSelected={positionId === "2"}
               onSelect={(id) => onSelectPosition(id)}
             />
           </div>
-            <div className='col-12 col-xl-4'>
+          <div className="col-12 col-xl-4">
             <OutstaffingBlock
               dataTags={
                 tagsArr &&
-                    tagsArr.flat().filter((tag) => tag.name === 'skills_back')
+                tagsArr.flat().filter((tag) => tag.name === "skills_back")
               }
               img={back}
-                  header='Backend разработчики'
+              header="Backend разработчики"
-                  positionId='1'
+              positionId="1"
-                  isSelected={positionId === '1'}
+              isSelected={positionId === "1"}
               onSelect={(id) => onSelectPosition(id)}
             />
           </div>
-            <div className='col-12 col-xl-4'>
+          <div className="col-12 col-xl-4">
             <OutstaffingBlock
               dataTags={
                 tagsArr &&
-                    tagsArr.flat().filter((tag) => tag.name === 'skills_design')
+                tagsArr.flat().filter((tag) => tag.name === "skills_design")
               }
               img={design}
-                  header='Дизайн проектов'
+              header="Дизайн проектов"
-                  positionId='5'
+              positionId="5"
-                  isSelected={positionId === '5'}
+              isSelected={positionId === "5"}
               onSelect={(id) => onSelectPosition(id)}
             />
           </div>
@@ -81,7 +83,7 @@ const Outstaffing = () => {
       </section>
       <TagSelect />
     </>
-  )
+  );
 };
 
-export default Outstaffing
+export default Outstaffing;

src/components/features/quiz/CardAviableTest.js

@@ -1,34 +1,38 @@
-import React from 'react'
+import React from "react";
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
-import rightArrow from "../../../images/arrowRight.png"
-import StarRating from '../../StarRating/StarRating'
 
+import rightArrow from "../../../images/arrowRight.svg";
+import StarRating from "../../StarRating/StarRating";
 
 export const CardAvailableTest = ({ title, description, path, passedTest }) => {
-
-
   return (
-    <div className='card-available-test'>
+    <div className="card-available-test">
-      <Link to={`/${path}`} className="card-available-test__container" style={{ opacity: passedTest ? 0.3 : 1, pointerEvents: passedTest ? 'none' : 'all' }}>
+      <Link
-        <div className='card-available-test__top-head'>
+        to={`/${path}`}
+        className="card-available-test__container"
+        style={{
+          opacity: passedTest ? 0.3 : 1,
+          pointerEvents: passedTest ? "none" : "all",
+        }}
+      >
+        <div className="card-available-test__top-head">
           <StarRating />
-          <h3 className='card-available-test__title'>{title}</h3>
+          <h3 className="card-available-test__title">{title}</h3>
         </div>
-        <div className='card-available-test__info'>
+        <div className="card-available-test__info">
           <p dangerouslySetInnerHTML={{ __html: description }}></p>
-          <div className='card-available-test__infoLink'>
+          <div className="card-available-test__infoLink">
-            <img src={rightArrow} alt='arrow' />
+            <img src={rightArrow} alt="arrow" />
           </div>
         </div>
       </Link>
 
-      {passedTest && <div className='card-available-test__finished'>
+      {passedTest && (
-        <p>
+        <div className="card-available-test__finished">
-          Получить отчет по тестированию
+          <p>Получить отчет по тестированию</p>
-        </p>
+          <Link to={"/quiz/report"}>Отчет по тесту</Link>
-        <Link to={'/quiz/report'}>Отчет по тесту</Link>
-      </div>}
         </div>
-  )
+      )}
-}
+    </div>
-
+  );
+};

src/constants/router-path.js

@@ -1,2 +0,0 @@
-export const FREQUENTLY_ASKED_QUESTIONS_ROUTE = "/frequently-asked-questions";
-export const FREQUENTLY_ASKED_QUESTION_ROUTE = "/frequently-asked-question";

src/images/arrowRight.svg

@@ -0,0 +1,9 @@
+<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="18" y="10" width="17.8125" height="10" transform="rotate(180 18 10)" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_931_914" transform="matrix(0.0244088 0 0 0.0434783 -0.000381388 0)"/>
+</pattern>
+<image id="image0_931_914" width="41" height="23" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAXCAMAAAChzpYZAAAAAXNSR0IB2cksfwAAAEJQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAjuH28gAAABZ0Uk5TAEK0Cvb/vgaIlxC7oNwcwg/J2f1bS4SvOREAAABWSURBVHicY2CAA0YmZgaiACMLKxs7kQpZOUYV4lPIyUUYgBUSBRiYiFTIysDMBiS5eQgDBrBSXj5ifESSUn6ilQoIDi2lQkTlDqBSYRGiFAKViuKVBgCepwfqGDtvmgAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>

src/images/userIcon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1111 19.9999V18.111C19.1111 17.1091 18.7131 16.1482 18.0046 15.4397C17.2962 14.7313 16.3353 14.3333 15.3333 14.3333H7.77778C6.77585 14.3333 5.81496 14.7313 5.10649 15.4397C4.39801 16.1482 4 17.1091 4 18.111V19.9999" stroke="#406128" stroke-width="1.9" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M11.5551 10.5556C13.6415 10.5556 15.3329 8.86419 15.3329 6.77778C15.3329 4.69137 13.6415 3 11.5551 3C9.46871 3 7.77734 4.69137 7.77734 6.77778C7.77734 8.86419 9.46871 10.5556 11.5551 10.5556Z" stroke="#406128" stroke-width="1.9" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>

src/pages/AuthForCandidate/AuthForCandidate.jsx

@@ -8,27 +8,26 @@ import { useNavigate } from "react-router-dom";
 
 import AuthHeader from "../../components/AuthHeader/AuthHeader";
 import SideBar from "../../components/SideBar/SideBar";
-import CategoriesItem from "../../components/CategoriesItem/CategoriesItem"
+import CategoriesItem from "../../components/CategoriesItem/CategoriesItem";
-import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate"
+import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate";
 import { Footer } from "../../components/Footer/Footer";
 
-import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png"
+import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png";
-import FrontendImg from "../../pages/PartnerСategories/images/PersonalFrontend.png"
+import FrontendImg from "../../pages/PartnerСategories/images/PersonalFrontend.png";
-import ArchitectureImg from "../../pages/PartnerСategories/images/PersonalArchitecture.png"
+import ArchitectureImg from "../../pages/PartnerСategories/images/PersonalArchitecture.png";
-import DesignImg from "../../pages/PartnerСategories/images/PersonalDesign.png"
+import DesignImg from "../../pages/PartnerСategories/images/PersonalDesign.png";
-import TestImg from "../../pages/PartnerСategories/images/PersonalTesters.png"
+import TestImg from "../../pages/PartnerСategories/images/PersonalTesters.png";
-import AdminImg from "../../pages/PartnerСategories/images/PersonalAdmin.png"
+import AdminImg from "../../pages/PartnerСategories/images/PersonalAdmin.png";
-import ManageImg from "../../pages/PartnerСategories/images/PersonalMng.png"
+import ManageImg from "../../pages/PartnerСategories/images/PersonalMng.png";
-import CopyImg from "../../pages/PartnerСategories/images/PersonalCopy.png"
+import CopyImg from "../../pages/PartnerСategories/images/PersonalCopy.png";
-import SmmImg from "../../pages/PartnerСategories/images/PersonalSMM.png"
+import SmmImg from "../../pages/PartnerСategories/images/PersonalSMM.png";
 
-import authImg from "../../images/authCandidateFormImg.png"
+import authImg from "../../images/authCandidateFormImg.png";
-import arrowBtn from "../../images/arrowRight.png";
+import arrowBtn from "../../images/arrowRight.svg";
 
-import './authForCandidate.scss';
+import "./authForCandidate.scss";
 
 export const AuthForCandidate = () => {
-
   const isLoading = useSelector(selectIsLoading);
   const ref = useRef();
   const dispatch = useDispatch();
@@ -38,67 +37,71 @@ export const AuthForCandidate = () => {
 
   const [personalInfoItems] = useState([
     {
-            title: 'Backend разработчики',
+      title: "Backend разработчики",
-            link: '/registration-candidate',
+      link: "/registration-candidate",
-            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: true,
-            img: BackEndImg
+      img: BackEndImg,
     },
     {
-            title: 'Frontend разработчики',
+      title: "Frontend разработчики",
-            link: '/registration-candidate',
+      link: "/registration-candidate",
-            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: true,
-            img: FrontendImg
+      img: FrontendImg,
     },
     {
-            title: 'Архитектура проектов',
+      title: "Архитектура проектов",
-            link: '/registration-candidate',
+      link: "/registration-candidate",
-            description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
+      description: "Потоки данных ER ERP CRM CQRS UML BPMN",
       available: true,
-            img: ArchitectureImg
+      img: ArchitectureImg,
     },
     {
-            title: 'Дизайн проектов',
+      title: "Дизайн проектов",
-            link: '/registration-candidate',
+      link: "/registration-candidate",
-            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: true,
-            img: DesignImg
+      img: DesignImg,
     },
     {
-            title: 'Тестирование проектов',
+      title: "Тестирование проектов",
-            link: '/registration-candidate',
+      link: "/registration-candidate",
-            description: 'SQL Postman TestRail Kibana Ручное тестирование',
+      description: "SQL Postman TestRail Kibana Ручное тестирование",
       available: false,
-            img: TestImg
+      img: TestImg,
     },
     {
-            title: 'Администрирование проектов',
+      title: "Администрирование проектов",
-            link: '/registration-candidate',
+      link: "/registration-candidate",
-            description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
+      description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
       available: false,
-            img: AdminImg
+      img: AdminImg,
     },
     {
-            title: 'Управление проектом',
+      title: "Управление проектом",
-            link: '/registration-candidate',
+      link: "/registration-candidate",
-            description: 'Scrum Kanban Agile Miro CustDev',
+      description: "Scrum Kanban Agile Miro CustDev",
       available: false,
-            img: ManageImg
+      img: ManageImg,
     },
     {
-            title: 'Копирайтинг проектов',
+      title: "Копирайтинг проектов",
-            link: '/registration-candidate',
+      link: "/registration-candidate",
-            description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
+      description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
       available: false,
-            img: CopyImg
+      img: CopyImg,
     },
     {
-            title: 'Реклама и SMM',
+      title: "Реклама и SMM",
-            link: '/registration-candidate',
+      link: "/registration-candidate",
-            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: false,
-            img: SmmImg
+      img: SmmImg,
     },
   ]);
 
@@ -137,16 +140,19 @@ export const AuthForCandidate = () => {
   };
 
   return (
-        <div className='auth-candidate'>
+    <div className="auth-candidate">
       <AuthHeader />
-            <div className='container'>
+      <div className="container">
-                <div className='auth__wrapper'>
+        <div className="auth__wrapper">
-                    <div className='auth__info'>
+          <div className="auth__info">
             <h3>Войти, уже есть доступ</h3>
-                        <img src={authImg} alt='img' />
+            <img src={authImg} alt="img" />
-                        <p>если вы получили доступ пройдя 2 шага для входа или хотите узнать свои результаты в кабинете</p>
+            <p>
+              если вы получили доступ пройдя 2 шага для входа или хотите узнать
+              свои результаты в кабинете
+            </p>
           </div>
-                    <form ref={ref} className='auth__form'>
+          <form ref={ref} className="auth__form">
             <label htmlFor="login">Ваш email *</label>
             <input id="login" type="text" name="username" placeholder="Email" />
 
@@ -162,27 +168,40 @@ export const AuthForCandidate = () => {
                 e.preventDefault();
                 submitHandler();
               }}
-                        >Войти</button>
+            >
+              Войти
+            </button>
           </form>
         </div>
-                <div className='auth-candidate__start'>
+        <div className="auth-candidate__start">
-                    <h2 className="auth-candidate__start__title">Хочу в команду <span>Айти специалистов</span></h2>
+          <h2 className="auth-candidate__start__title">
+            Хочу в команду <span>Айти специалистов</span>
+          </h2>
           <div className="change-mode__arrow">
-                        <img src={arrowBtn}></img>
+            <img src={arrowBtn} alt="#"></img>
           </div>
-                    <p className="auth-candidate__start__description">Для нас не имеет значение Ваша локация.</p>
+          <p className="auth-candidate__start__description">
-                    <div className='auth-candidate__start__categoriesWrapper'>
+            Для нас не имеет значение Ваша локация.
+          </p>
+          <div className="auth-candidate__start__categoriesWrapper">
             <StepsForCandidate step="шаг 1 - выбери специализацтию" />
             {personalInfoItems.map((item, index) => {
-                            return <CategoriesItem link={item.link} key={index} title={item.title} img={item.img} skills={item.description} available={item.available} />
+              return (
-                        })
+                <CategoriesItem
-
+                  link={item.link}
-                        }
+                  key={index}
+                  title={item.title}
+                  img={item.img}
+                  skills={item.description}
+                  available={item.available}
+                />
+              );
+            })}
           </div>
         </div>
       </div>
       <SideBar />
       <Footer />
     </div>
-    )
+  );
 };

src/pages/AuthForDevelopers/AuthForDevelopers.jsx

@@ -1,24 +1,22 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
-
-import { AuthBox } from "../../components/AuthBox/AuthBox";
-
 import { useSelector } from "react-redux";
-import arrow from "../../images/arrow__login_page.png";
-import medium from "../../images/medium_male_big.png";
-import cross from "../../images/cross.png";
-import text from "../../images/Body_Text.png";
-import arrowBtn from "../../images/arrowRight.png";
-import vector from "../../images/Vector_Smart_Object.png";
-import vectorBlack from "../../images/Vector_Smart_Object_black.png";
-
-import { selectAuth } from "../../redux/outstaffingSlice";
-import { Link, useNavigate } from "react-router-dom";
-import { scrollToForm } from "../../helper";
 
 import { Footer } from "../../components/Footer/Footer";
 import SideBar from "../../components/SideBar/SideBar";
 import AuthHeader from "../../components/AuthHeader/AuthHeader";
 import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
+import { AuthBox } from "../../components/AuthBox/AuthBox";
+import { selectAuth } from "../../redux/outstaffingSlice";
+import { Link, useNavigate } from "react-router-dom";
+import { scrollToForm } from "../../helper";
+
+import arrow from "../../images/arrow__login_page.png";
+import medium from "../../images/medium_male_big.png";
+import cross from "../../images/cross.png";
+import text from "../../images/Body_Text.png";
+import arrowBtn from "../../images/arrowRight.svg";
+import vector from "../../images/Vector_Smart_Object.png";
+import vectorBlack from "../../images/Vector_Smart_Object_black.png";
 
 import "./authForDevelopers.scss";
 

src/pages/AuthForPartners/AuthForPartners.js

@@ -1,16 +1,4 @@
 import React, { useEffect } from "react";
-import arrow from "../../images/arrow__login_page.png";
-import authImg from "../../images/auth_img.png";
-import cross from "../../images/cross.png";
-import text from "../../images/Body_Text.png";
-import arrowBtn from "../../images/arrowRight.png";
-import vector from "../../images/Vector_Smart_Object.png";
-import vectorBlack from "../../images/Vector_Smart_Object_black.png";
-
-import { useSelector } from "react-redux";
-import { selectAuth } from "../../redux/outstaffingSlice";
-import { Link, useNavigate } from "react-router-dom";
-import { scrollToForm } from "../../helper";
 
 import { Footer } from "../../components/Footer/Footer";
 import { AuthBox } from "../../components/AuthBox/AuthBox";
@@ -18,6 +6,19 @@ import SideBar from "../../components/SideBar/SideBar";
 import AuthHeader from "../../components/AuthHeader/AuthHeader";
 import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
 
+import { useSelector } from "react-redux";
+import { selectAuth } from "../../redux/outstaffingSlice";
+import { Link, useNavigate } from "react-router-dom";
+import { scrollToForm } from "../../helper";
+
+import arrow from "../../images/arrow__login_page.png";
+import authImg from "../../images/auth_img.png";
+import cross from "../../images/cross.png";
+import text from "../../images/Body_Text.png";
+import arrowBtn from "../../images/arrowRight.svg";
+import vector from "../../images/Vector_Smart_Object.png";
+import vectorBlack from "../../images/Vector_Smart_Object_black.png";
+
 import "./authForPartners.scss";
 
 const AuthForPartners = () => {

src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.jsx

@@ -1,19 +1,18 @@
+import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router";
+
 import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import SideBar from "../../components/SideBar/SideBar";
 import AuthHeader from "../../components/AuthHeader/AuthHeader";
 import { Footer } from "../../components/Footer/Footer";
-import arrowBtn from "../../images/arrowRight.png";
+
+import arrowBtn from "../../images/arrowRight.svg";
+
 import "./FrequentlyAskedQuestion.scss";
-import { useEffect, useState } from "react";
-import {
-  FREQUENTLY_ASKED_QUESTIONS_ROUTE,
-  FREQUENTLY_ASKED_QUESTION_ROUTE,
-} from "../../constants/router-path";
 
 export const FrequentlyAskedQuestion = () => {
   const params = useParams();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   const [question, setQuestion] = useState({
     id: params.id,
     title: "Это фриланс-платформа?",
@@ -35,16 +34,19 @@ export const FrequentlyAskedQuestion = () => {
             { name: "Главная", link: "/auth" },
             {
               name: "FAQ (часто задаваемые вопросы)",
-              link: FREQUENTLY_ASKED_QUESTIONS_ROUTE,
+              link: "/frequently-asked-questions",
             },
             {
               name: question.title,
-              link: FREQUENTLY_ASKED_QUESTION_ROUTE + "/" + params.id,
+              link: `/frequently-asked-question/${params.id}`,
             },
           ]}
         />
         <div className="frequently-asked-question__title">{question.title}</div>
-        <div className="frequently-asked-question__back" onClick={()=>navigate(-1)}>
+        <div
+          className="frequently-asked-question__back"
+          onClick={() => navigate(-1)}
+        >
           <div className="frequently-asked-question__arrow">
             <img src={arrowBtn}></img>
           </div>

src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx

@@ -1,78 +1,83 @@
 import React from "react";
-import "./FrequentlyAskedQuestions.scss";
+
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { Footer } from "../../components/Footer/Footer";
+import { FrequentlyAskedQuestionsItem } from "../../components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem";
+
 import AuthHeader from "../../components/AuthHeader/AuthHeader";
 import SideBar from "../../components/SideBar/SideBar";
 import arrow from "./../../images/faq/arrow.svg";
-import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { Footer } from "../../components/Footer/Footer";
-import { FREQUENTLY_ASKED_QUESTIONS_ROUTE } from "../../constants/router-path";
-import { FrequentlyAskedQuestionsItem } from "../../components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem";
 
+import "./FrequentlyAskedQuestions.scss";
 
 export const FrequentlyAskedQuestions = () => {
-
   const rubrics = [
     {
-      title: 'Общие вопросы ',
+      title: "Общие вопросы ",
       questions: [
         {
           id: 1,
-          title: 'Это фриланс-платформа?'
+          title: "Это фриланс-платформа?",
         },
         {
           id: 2,
-          title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
+          title:
+            "Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
         },
         {
           id: 3,
-          title: 'Это фриланс-платформа?'
+          title: "Это фриланс-платформа?",
         },
         {
           id: 4,
-          title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
+          title:
-        }
+            "Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
-      ]
+        },
+      ],
     },
     {
-      title: 'Поиск специалиста',
+      title: "Поиск специалиста",
       questions: [
         {
           id: 11,
-          title: 'Это фриланс-платформа?'
+          title: "Это фриланс-платформа?",
         },
         {
           id: 22,
-          title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
+          title:
+            "Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
         },
         {
           id: 33,
-          title: 'Это фриланс-платформа?'
+          title: "Это фриланс-платформа?",
         },
         {
           id: 44,
-          title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
+          title:
-        }
+            "Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
-      ]
+        },
+      ],
     },
     {
-      title: 'Бронирование специалиста',
+      title: "Бронирование специалиста",
       questions: [
         {
           id: 11,
-          title: 'Это фриланс-платформа?'
+          title: "Это фриланс-платформа?",
-        }        
+        },
-      ]
+      ],
     },
     {
-      title: 'Работа с выбранным специалистом',
+      title: "Работа с выбранным специалистом",
       questions: [
         {
           id: 11,
-          title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
+          title:
-        }        
+            "Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
-      ]
         },
-  ]
+      ],
+    },
+  ];
 
   return (
     <div className="frequently-asked-questions">
@@ -83,7 +88,10 @@ export const FrequentlyAskedQuestions = () => {
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/auth" },
-            { name: "FAQ (часто задаваемые вопросы)", link: FREQUENTLY_ASKED_QUESTIONS_ROUTE },
+            {
+              name: "FAQ (часто задаваемые вопросы)",
+              link: "/frequently-asked-questions",
+            },
           ]}
         />
         <div className="frequently-asked-questions__about">
@@ -98,13 +106,12 @@ export const FrequentlyAskedQuestions = () => {
           </div>
         </div>
         <div className="frequently-asked-questions__items">
-          {
+          {rubrics.map((rubric, index) => (
-            rubrics.map((rubric,index)=><FrequentlyAskedQuestionsItem rubric={rubric} key={index} />)
+            <FrequentlyAskedQuestionsItem rubric={rubric} key={index} />
-          }          
+          ))}
         </div>
       </div>
       <Footer />
     </div>
   );
 };
-

src/pages/PartnerEmployees/PartnerEmployees.js

@@ -1,36 +1,44 @@
-import React from 'react';
+import React from "react";
 import { Link, Navigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { getPartnerEmployees } from "../../redux/outstaffingSlice";
 
 import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
-import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";
 
-import imgInfo from "./emplInfo.png"
+import imgInfo from "./emplInfo.png";
-import rightArrow from "../../images/arrowRight.png"
+import rightArrow from "../../images/arrowRight.svg";
 
-import "./partnerEmployees.scss"
+import "./partnerEmployees.scss";
 
 export const PartnerEmployees = () => {
   const partnerEmployees = useSelector(getPartnerEmployees);
-    if(localStorage.getItem('role_status') !== '18' || !partnerEmployees.length) {
+  if (
-        return <Navigate to="/profile/categories" replace/>
+    localStorage.getItem("role_status") !== "18" ||
+    !partnerEmployees.length
+  ) {
+    return <Navigate to="/profile/categories" replace />;
   }
   return (
     <div className="partnerEmployees">
       <ProfileHeader />
       <div className="container">
-                <ProfileBreadcrumbs links={[
+        <ProfileBreadcrumbs
-                    {name: 'Главная', link: '/profile'},
+          links={[
-                    {name: 'Данные моего персонала', link: '/profile/categories'},
+            { name: "Главная", link: "/profile" },
-                    {name: 'Backend разработчики', link: '/profile/categories/employees'},
+            { name: "Данные моего персонала", link: "/profile/categories" },
+            {
+              name: "Backend разработчики",
+              link: "/profile/categories/employees",
+            },
           ]}
         />
         <h2 className="partnerEmployees__title">Backend разработчики</h2>
         <div className="partnerEmployees__items">
           {partnerEmployees.map((person) => {
-                            return <div className="partnerEmployees__item" key={person.id}>
+            return (
+              <div className="partnerEmployees__item" key={person.id}>
                 <div className="partnerEmployees__item__name">
                   <img src={person.personAvatar} alt="avatar" />
                   <h4>{person.name}</h4>
@@ -42,7 +50,7 @@ export const PartnerEmployees = () => {
                     <div className="info_summary">
                       <img src={imgInfo} alt="img" />
                       <p>Данные и резюме</p>
-                                                    <Link to='/candidate/26' className="arrow">
+                      <Link to="/candidate/26" className="arrow">
                         <img src={rightArrow} alt="arrow" />
                       </Link>
                     </div>
@@ -53,22 +61,25 @@ export const PartnerEmployees = () => {
                     <div className="partnerEmployees__item__info__project__details">
                       <div className="details__item">
                         <p>Открытые задачи</p>
-                                                        <span className="count">{person.tasks_in_progress}</span>
+                        <span className="count">
+                          {person.tasks_in_progress}
+                        </span>
                       </div>
                       <div className="details__item">
-                                                        <p>Отработанных часов в <span>марте</span></p>
+                        <p>
+                          Отработанных часов в <span>марте</span>
+                        </p>
                         <span className="count">{person.month_hours}</span>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-                        })
+            );
-
+          })}
-                    }
         </div>
       </div>
       <Footer />
     </div>
-    )
+  );
-}
+};

src/pages/PartnerСategories/PartnerСategories.js

@@ -1,100 +1,104 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { Navigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 
 import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
-import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";
 
 import { setPartnerEmployees } from "../../redux/outstaffingSlice";
 
-import BackEndImg from "./images/personalBackEnd.png"
+import BackEndImg from "./images/personalBackEnd.png";
-import FrontendImg from "./images/PersonalFrontend.png"
+import FrontendImg from "./images/PersonalFrontend.png";
-import ArchitectureImg from "./images/PersonalArchitecture.png"
+import ArchitectureImg from "./images/PersonalArchitecture.png";
-import DesignImg from "./images/PersonalDesign.png"
+import DesignImg from "./images/PersonalDesign.png";
-import TestImg from "./images/PersonalTesters.png"
+import TestImg from "./images/PersonalTesters.png";
-import AdminImg from "./images/PersonalAdmin.png"
+import AdminImg from "./images/PersonalAdmin.png";
-import ManageImg from "./images/PersonalMng.png"
+import ManageImg from "./images/PersonalMng.png";
-import CopyImg from "./images/PersonalCopy.png"
+import CopyImg from "./images/PersonalCopy.png";
-import SmmImg from "./images/PersonalSMM.png"
+import SmmImg from "./images/PersonalSMM.png";
-import rightArrow from "../../images/arrowRight.png"
+import rightArrow from "../../images/arrowRight.svg";
 import avatarImg from "../PartnerEmployees/avatarMok.png";
 
-import "./partnerСategories.scss"
+import "./partnerСategories.scss";
-import { Navigation } from '../../components/Navigation/Navigation';
+import { Navigation } from "../../components/Navigation/Navigation";
 
 export const PartnerCategories = () => {
   const dispatch = useDispatch();
-    if(localStorage.getItem('role_status') !== '18') {
+  if (localStorage.getItem("role_status") !== "18") {
-        return <Navigate to="/profile" replace/>
+    return <Navigate to="/profile" replace />;
   }
 
   const [personalInfoItems] = useState([
     {
-            title: 'Backend разработчики',
+      title: "Backend разработчики",
-            link: '/profile/categories/employees',
+      link: "/profile/categories/employees",
-            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: true,
-            img: BackEndImg
+      img: BackEndImg,
     },
     {
-            title: 'Frontend разработчики',
+      title: "Frontend разработчики",
-            link: '/profile/categories/employees',
+      link: "/profile/categories/employees",
-            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: true,
-            img: FrontendImg
+      img: FrontendImg,
     },
     {
-            title: 'Архитектура проектов',
+      title: "Архитектура проектов",
-            link: '/profile/categories/employees',
+      link: "/profile/categories/employees",
-            description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
+      description: "Потоки данных ER ERP CRM CQRS UML BPMN",
       available: true,
-            img: ArchitectureImg
+      img: ArchitectureImg,
     },
     {
-            title: 'Дизайн проектов',
+      title: "Дизайн проектов",
-            link: '/profile/categories/employees',
+      link: "/profile/categories/employees",
-            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: true,
-            img: DesignImg
+      img: DesignImg,
     },
     {
-            title: 'Тестирование проектов',
+      title: "Тестирование проектов",
-            link: '/profile/add-request',
+      link: "/profile/add-request",
-            description: 'SQL Postman TestRail Kibana Ручное тестирование',
+      description: "SQL Postman TestRail Kibana Ручное тестирование",
       available: false,
-            img: TestImg
+      img: TestImg,
     },
     {
-            title: 'Администрирование проектов',
+      title: "Администрирование проектов",
-            link: '/profile/add-request',
+      link: "/profile/add-request",
-            description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
+      description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
       available: false,
-            img: AdminImg
+      img: AdminImg,
     },
     {
-            title: 'Управление проектом',
+      title: "Управление проектом",
-            link: '/profile/add-request',
+      link: "/profile/add-request",
-            description: 'Scrum Kanban Agile Miro CustDev',
+      description: "Scrum Kanban Agile Miro CustDev",
       available: false,
-            img: ManageImg
+      img: ManageImg,
     },
     {
-            title: 'Копирайтинг проектов',
+      title: "Копирайтинг проектов",
-            link: '/profile/add-request',
+      link: "/profile/add-request",
-            description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
+      description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
       available: false,
-            img: CopyImg
+      img: CopyImg,
     },
     {
-            title: 'Реклама и SMM',
+      title: "Реклама и SMM",
-            link: '/profile/add-request',
+      link: "/profile/add-request",
-            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: false,
-            img: SmmImg
+      img: SmmImg,
     },
-    ])
+  ]);
 
   const [mokPersons] = useState([
     {
@@ -105,7 +109,7 @@ export const PartnerCategories = () => {
       project: "Админка НВД Консалтинг",
       tasks_in_progress: 5,
       month_hours: 140,
-            id: 1
+      id: 1,
     },
     {
       personAvatar: avatarImg,
@@ -115,7 +119,7 @@ export const PartnerCategories = () => {
       project: "Админка НВД Консалтинг",
       tasks_in_progress: 5,
       month_hours: 140,
-            id: 2
+      id: 2,
     },
     {
       personAvatar: avatarImg,
@@ -125,47 +129,58 @@ export const PartnerCategories = () => {
       project: "Админка НВД Консалтинг",
       tasks_in_progress: 5,
       month_hours: 140,
-            id: 3
+      id: 3,
     },
-    ])
+  ]);
   return (
     <div className="partnerCategories">
       <ProfileHeader />
       <Navigation />
       <div className="container">
-                <ProfileBreadcrumbs links={[
+        <ProfileBreadcrumbs
-                    {name: 'Главная', link: '/profile'},
+          links={[
-                    {name: 'Данные моего персонала', link: '/profile/categories'},
+            { name: "Главная", link: "/profile" },
+            { name: "Данные моего персонала", link: "/profile/categories" },
           ]}
         />
         <h2 className="partnerCategories__title">Данные персонала</h2>
         <div className="partnerCategories__items">
           {personalInfoItems.map((item, index) => {
-                        return <Link to={item.link} key={index} className={item.available ? "partnerCategories__item item" : "partnerCategories__item item item__disable"}
+            return (
+              <Link
+                to={item.link}
+                key={index}
+                className={
+                  item.available
+                    ? "partnerCategories__item item"
+                    : "partnerCategories__item item item__disable"
+                }
                 onClick={() => {
-                                        dispatch(setPartnerEmployees(mokPersons))
+                  dispatch(setPartnerEmployees(mokPersons));
-                        }}>
+                }}
+              >
                 <div className="item__title">
                   <img src={item.img} alt={item.title} />
                   <h4>{item.title}</h4>
                 </div>
                 <div className="item__info">
                   <p>{item.description}</p>
-                                <div className='more'>
+                  <div className="more">
                     <img src={rightArrow} alt="arrow" />
                   </div>
                 </div>
-                            {!item.available &&
+                {!item.available && (
                   <div className="item__disableHover">
                     <p>У вас нет персонала из категории</p>
                     <button>Подобрать</button>
                   </div>
-                            }
+                )}
               </Link>
+            );
           })}
         </div>
       </div>
       <Footer />
     </div>
-    )
+  );
-}
+};

src/pages/RegistrationForCandidate/RegistrationForCandidate.js

@@ -1,64 +1,70 @@
-import React from 'react';
+import React from "react";
 
 import AuthHeader from "../../components/AuthHeader/AuthHeader";
 import SideBar from "../../components/SideBar/SideBar";
-import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate"
+import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate";
 import { Footer } from "../../components/Footer/Footer";
 
-import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png"
+import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png";
-import arrowBtn from "../../images/arrowRight.png";
+import arrowBtn from "../../images/arrowRight.svg";
 
-import './registationForCandidate.scss'
+import "./registationForCandidate.scss";
 
 export const RegistrationForCandidate = () => {
   return (
-        <div className='registrationCandidate'>
+    <div className="registrationCandidate">
       <AuthHeader />
-            <div className='container'>
+      <div className="container">
-                <div className='registrationCandidate__start'>
+        <div className="registrationCandidate__start">
-                    <h2 className="auth-candidate__start__title">Хочу в команду <span>Айти специалистов</span></h2>
+          <h2 className="auth-candidate__start__title">
+            Хочу в команду <span>Айти специалистов</span>
+          </h2>
           <div className="change-mode__arrow">
             <img src={arrowBtn}></img>
           </div>
-                    <p className="auth-candidate__start__description">Для нас не имеет значение Ваша локация.</p>
+          <p className="auth-candidate__start__description">
+            Для нас не имеет значение Ваша локация.
+          </p>
           <StepsForCandidate step="шаг 2 - заполните данные" />
-                    <div className='registrationCandidate__formWrapper'>
+          <div className="registrationCandidate__formWrapper">
-                        <div className='registrationCandidate__info'>
+            <div className="registrationCandidate__info">
-                            <div className='registrationCandidate__info__category'>
+              <div className="registrationCandidate__info__category">
-                                <img src={BackEndImg} alt='img' />
+                <img src={BackEndImg} alt="img" />
                 <p>Backend разработчики</p>
               </div>
-                            <p className='registrationCandidate__info__skills'>Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript</p>
+              <p className="registrationCandidate__info__skills">
-                            <div className='registrationCandidate__info__arrow'>
+                Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript
-                                <img src={arrowBtn} alt='img' />
+              </p>
+              <div className="registrationCandidate__info__arrow">
+                <img src={arrowBtn} alt="img" />
               </div>
             </div>
-                        <form className='registrationCandidate__form'>
+            <form className="registrationCandidate__form">
-                            <div className='registrationCandidate__form__input'>
+              <div className="registrationCandidate__form__input">
                 <label htmlFor="name">Ваше имя *</label>
                 <input id="name" type="text" placeholder="Имя" />
               </div>
-                            <div className='registrationCandidate__form__input'>
+              <div className="registrationCandidate__form__input">
                 <label htmlFor="summary">Если есть ссылка на резюме</label>
                 <input id="summary" type="text" placeholder="Резюме" />
               </div>
-                            <div className='registrationCandidate__form__input'>
+              <div className="registrationCandidate__form__input">
                 <label htmlFor="email">Ваш email *</label>
                 <input id="email" type="text" placeholder="Email" />
               </div>
-                            <div className='registrationCandidate__form__input'>
+              <div className="registrationCandidate__form__input">
                 <label htmlFor="tg">Ваш телеграм*</label>
                 <input id="tg" type="text" placeholder="Телеграм" />
               </div>
-                            <div className='registrationCandidate__form__input'>
+              <div className="registrationCandidate__form__input">
                 <label htmlFor="password">Придумайте пароль*</label>
                 <input id="password" type="text" placeholder="Пароль" />
               </div>
-                            <div className='registrationCandidate__form__input'>
+              <div className="registrationCandidate__form__input">
                 <label htmlFor="secondPassword">Повторите пароль*</label>
                 <input id="secondPassword" type="text" placeholder="Пароль" />
               </div>
-                            <div className='registrationCandidate__form__submit'>
+              <div className="registrationCandidate__form__submit">
                 <button>Отправить</button>
               </div>
             </form>
@@ -68,5 +74,5 @@ export const RegistrationForCandidate = () => {
       <SideBar />
       <Footer />
     </div>
-    )
+  );
-}
+};

src/pages/Summary/Summary.js

@@ -1,122 +1,152 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import { Navigate } from "react-router-dom";
+
 import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import { getProfileInfo } from "../../redux/outstaffingSlice";
-import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
-import {Footer} from '../../components/Footer/Footer'
+import { Footer } from "../../components/Footer/Footer";
 import { urlForLocal } from "../../helper";
+import { apiRequest } from "../../api/request";
+import { Navigation } from "../../components/Navigation/Navigation";
 
 import arrow from "../../images/right-arrow.png";
-import rightArrow from "../../images/arrowRight.png"
+import rightArrow from "../../images/arrowRight.svg";
-import gitImgItem from "../../images/gitItemImg.png"
+import gitImgItem from "../../images/gitItemImg.svg";
 
-import {apiRequest} from "../../api/request";
+import "./summary.scss";
-import {Navigate} from "react-router-dom";
-import { Navigation } from '../../components/Navigation/Navigation';
-
-import './summary.scss'
 
 export const Summary = () => {
-    if(localStorage.getItem('role_status') === '18') {
+  if (localStorage.getItem("role_status") === "18") {
-        return <Navigate to="/profile" replace/>
+    return <Navigate to="/profile" replace />;
   }
   const profileInfo = useSelector(getProfileInfo);
   const [openGit, setOpenGit] = useState(false);
   const [gitInfo, setGitInfo] = useState([]);
 
   useEffect(() => {
-    apiRequest(`/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`)
+    apiRequest(
-        .then(responseGit => setGitInfo(responseGit))
+      `/profile/portfolio-projects?card_id=${localStorage.getItem("cardId")}`
+    ).then((responseGit) => setGitInfo(responseGit));
   }, []);
   return (
-      <div className='summary'>
+    <div className="summary">
       <ProfileHeader />
       <Navigation />
-        <div className='container'>
+      <div className="container">
-          <div className='summary__content'>
+        <div className="summary__content">
-              <ProfileBreadcrumbs links={[
+          <ProfileBreadcrumbs
-                  {name: 'Главная', link: '/profile'},
+            links={[
-                  {name: 'Данные и резюме', link: '/profile/summary'}
+              { name: "Главная", link: "/profile" },
+              { name: "Данные и резюме", link: "/profile/summary" },
             ]}
           />
-            <h2 className='summary__title'>Ваше резюме {openGit && <span>- Git</span>}</h2>
+          <h2 className="summary__title">
-            {openGit && <div className='summary__back' onClick={() => setOpenGit(false)}>
+            Ваше резюме {openGit && <span>- Git</span>}
-              <img src={arrow} alt='arrow'/>
+          </h2>
+          {openGit && (
+            <div className="summary__back" onClick={() => setOpenGit(false)}>
+              <img src={arrow} alt="arrow" />
               <p>Вернуться</p>
-            </div>}
-            <div className={openGit ? 'summary__info openGit' : 'summary__info'}>
-              <div className='summary__person'>
-                <img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
-                <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
             </div>
-              {!openGit &&
+          )}
-              <button className='summary__git' onClick={() => setOpenGit(true)}>Git</button>
+          <div className={openGit ? "summary__info openGit" : "summary__info"}>
-              }
+            <div className="summary__person">
+              <img
+                src={urlForLocal(profileInfo.photo)}
+                className="summary__avatar"
+                alt="avatar"
+              />
+              <p className="summary__name">
+                {profileInfo.fio}, {profileInfo.specification} разработчик
+              </p>
             </div>
-          </div>
+            {!openGit && (
-          {!openGit &&
+              <button className="summary__git" onClick={() => setOpenGit(true)}>
-          <div className='summary__skills skills__section'>
+                Git
-            <div className='summary__sections__head'>
+              </button>
-              <h3>Основной стек</h3>
-              <button>Редактировать раздел</button>
-            </div>
-            <div className='skills__section__items'>
-              <div className='skills__section__items__wrapper'>
-                {profileInfo.skillValues && profileInfo.skillValues.map((skill, index) =>
-                    <span key={skill.id} className='skill_item'>{skill.skill.name}
-                        {profileInfo.skillValues.length > index + 1 && ','}
-                    </span>
             )}
           </div>
         </div>
+        {!openGit && (
+          <div className="summary__skills skills__section">
+            <div className="summary__sections__head">
+              <h3>Основной стек</h3>
+              <button>Редактировать раздел</button>
             </div>
-          }
+            <div className="skills__section__items">
-          {profileInfo.vc_text && !openGit &&
+              <div className="skills__section__items__wrapper">
-          <div className='summary__experience'>
+                {profileInfo.skillValues &&
-            <div className='experience__block'>
+                  profileInfo.skillValues.map((skill, index) => (
+                    <span key={skill.id} className="skill_item">
+                      {skill.skill.name}
+                      {profileInfo.skillValues.length > index + 1 && ","}
+                    </span>
+                  ))}
+              </div>
+            </div>
+          </div>
+        )}
+        {profileInfo.vc_text && !openGit && (
+          <div className="summary__experience">
+            <div className="experience__block">
               <div className="summary__sections__head">
                 <h3>Описание опыта работы</h3>
                 <button>Редактировать раздел</button>
               </div>
-              <div className="experience__content" dangerouslySetInnerHTML={{__html:profileInfo.vc_text}}>
+              <div
+                className="experience__content"
+                dangerouslySetInnerHTML={{ __html: profileInfo.vc_text }}
+              ></div>
             </div>
           </div>
-          </div>
+        )}
-          }
+        {openGit && (
-          {openGit &&
+          <div className="summary__sectionGit">
-          <div className='summary__sectionGit'>
+            <div className="summary__sections__head">
-            <div className='summary__sections__head'>
               <h3>Страница портфолио кода разработчика</h3>
               <button>Редактировать раздел</button>
             </div>
-            <div className='summary__sectionGitItems'>
+            <div className="summary__sectionGitItems">
-              {Boolean(gitInfo.length) && gitInfo.map((itemGit) => {
+              {Boolean(gitInfo.length) &&
-                return <a href={itemGit.link} target="_blank" rel="noreferrer" key={itemGit.id} className='summary__sectionGitItem gitItem'>
+                gitInfo.map((itemGit) => {
-                  <div className='gitItem__info'>
+                  return (
-                    <div className='gitItem__info__about'>
+                    <a
-                      <img src={gitImgItem} alt='gitImg'/>
+                      href={itemGit.link}
-                      <div className='gitItem__info__name'>
+                      target="_blank"
+                      rel="noreferrer"
+                      key={itemGit.id}
+                      className="summary__sectionGitItem gitItem"
+                    >
+                      <div className="gitItem__info">
+                        <div className="gitItem__info__about">
+                          <img src={gitImgItem} alt="gitImg" />
+                          <div className="gitItem__info__name">
                             <h4>{itemGit.title}</h4>
                             <p>{itemGit.description}</p>
                           </div>
                         </div>
-                    <div className='gitItem__info__specification'>
+                        <div className="gitItem__info__specification">
-                      <span className='gitItem__lineSkill'/>
+                          <span className="gitItem__lineSkill" />
                           <p>{itemGit.main_stack}</p>
                         </div>
                       </div>
-                  <a className='gitItem__link' href={itemGit.link} target="_blank" rel="noreferrer">
+                      <a
-                    <img src={rightArrow} alt='arrowRight'/>
+                        className="gitItem__link"
+                        href={itemGit.link}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <img src={rightArrow} alt="arrowRight" />
                       </a>
                     </a>
-              })
+                  );
-              }
+                })}
             </div>
           </div>
-          }
+        )}
       </div>
       <Footer />
     </div>
-  )
+  );
 };
-