fix active nav link state

src/components/Common/AuthHeader/authHeader.scss

@@ -48,7 +48,7 @@
             text-decoration: none;
           }
 
-          a:focus {
+          a:focus, a.active {
             color: #000000;
           }
 

src/components/Navigation/Navigation.jsx

@@ -88,9 +88,9 @@ export const Navigation = () => {
   }, []);
 
   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
@@ -104,8 +104,8 @@ export const Navigation = () => {
           })}
         </nav>
 
-        <div className="profileHeader__personalInfo">
-          <h3 className="profileHeader__personalInfoName">
+        <div className="profile-header__personalInfo">
+          <h3 className="profile-header__personalInfoName">
             {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
           </h3>
           <NavLink end to={"/profile"}>
@@ -113,7 +113,7 @@ export const Navigation = () => {
               src={
                 profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
               }
-              className="profileHeader__personalInfoAvatar"
+              className="profile-header__personalInfoAvatar"
               alt="avatar"
             />
           </NavLink>

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -282,15 +282,15 @@ export const ProfileCalendarComponent = React.memo(
                 ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
                 : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
               : activePeriod
-              ? "Выберите диапазон на календаре"
-              : "Выбрать диапазон"}
+                ? "Выберите диапазон на календаре"
+                : "Выбрать диапазон"}
           </span>
           <span>
             {totalRangeHours
               ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
               : endDate
-              ? "0 часов"
-              : ""}
+                ? "0 часов"
+                : ""}
           </span>
           {endDate && (
             <BaseButton

src/components/ProfileHeader/ProfileHeader.jsx

@@ -20,19 +20,6 @@ export const ProfileHeader = () => {
 
   const [isLoggingOut, setIsLoggingOut] = useState(false);
 
-  // useEffect(() => {
-  //   if (Object.keys(profileInfo).length) {
-  //     return;
-  //   }
-  //   apiRequest(`/user/me`).then((profileInfo) => {
-  //     dispatch(
-  //       setProfileInfo(
-  //         profileInfo.userCard ? profileInfo.userCard : profileInfo
-  //       )
-  //     );
-  //   });
-  // }, [dispatch]);
-
   useEffect(() => {
     if (!Object.keys(profileInfo).length)
       apiRequest(`/user/me`).then((profileInfo) => {
@@ -54,16 +41,16 @@ export const ProfileHeader = () => {
   };
 
   return (
-    <header className="profileHeader">
-      <div className="profileHeader__head">
-        <div className="profileHeader__container">
-          <NavLink to={"/profile"} className="profileHeader__title">
+    <header className="profile-header">
+      <div className="profile-header__head">
+        <div className="profile-header__container">
+          <NavLink to={"/profile"} className="profile-header__title">
             itguild.
             <span>
               {user === "developer" ? "для разработчиков" : "для партнеров"}
             </span>
           </NavLink>
-          <button onClick={handler} className="profileHeader__logout">
+          <button onClick={handler} className="profile-header__logout">
             {isLoggingOut ? <Loader /> : "Выйти"}
           </button>
         </div>

src/components/ProfileHeader/profileHeader.scss

@@ -1,4 +1,4 @@
-.profileHeader {
+.profile-header {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -53,24 +53,24 @@
     flex-wrap: wrap;
     column-gap: 30px;
 
-    .active {
-      color: #000000 !important;
-    }
-
     a {
-      text-decoration: none !important;
+      text-decoration: none;
       cursor: pointer;
       font-weight: 700;
       font-size: 18px;
       line-height: 32px;
-      color: #807777 !important;
+      color: #807777;
       transition: all 0.3s ease;
 
       &:hover {
-        color: #261a1a !important;
+        color: #261a1a;
       }
     }
 
+    a.active {
+      color: #000000;
+    }
+
     @media (max-width: 800px) {
       column-gap: 15px;
 

src/pages/ActPage/ActPage.jsx

@@ -1,14 +0,0 @@
-import React from "react";
-
-import { ActContent } from "@components/features/bookkeeping/ActContent/ActContent";
-import { BookkeepingTemplete } from "@components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete";
-
-export const ActPage = () => {
-  return (
-    <div>
-      <BookkeepingTemplete showBreadcrumps nameBreeadcrumps="Создание акта">
-        <ActContent></ActContent>
-      </BookkeepingTemplete>
-    </div>
-  );
-};

src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss

@@ -15,7 +15,7 @@
   &__about {
     display: flex;
     align-items: center;
-    margin-bottom: 30px;
+    margin: 30px 0;
     @media (max-width: 600px) {
       flex-wrap: wrap;
       row-gap: 25px;