add hovers and themeswitcher icons

src/modules/shared/Header/Header.module.scss

@@ -54,6 +54,11 @@
     text-transform: uppercase;
     font-weight: 800;
     font-size: 12px;
+    transition: all 0.3s;
+
+    &:hover {
+      color: $color__primary;
+    }
 
     &::after {
       content: '';
@@ -86,11 +91,17 @@
     justify-content: center;
 
     border-left: 1px solid $color__elements;
+
+    transition: all 0.3s;
+
+    &:hover {
+      box-shadow: -1px 1px 5px inset rgba(0, 0, 0, 0.4);
+    }
   }
 
   &__themeSwitch {
     position: relative;
-    width: 60px;
+    padding: 0 20px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -105,17 +116,22 @@
         background-color: $color__secondary;
 
         & span::after {
-          transform: translate3d(22px, 0, 0);
-          background-color: $color__white;
+          transform: translate3d(25px, 0, 0);
+          background: center / cover $color__primary url(../../../static/icons/moon.svg);
+        }
+
+        & span::before {
+          transform: translate3d(-25px, 0, 0);
+          background: center / cover url(../../../static/icons/sun.svg);
         }
       }
     }
 
     &_label {
       position: relative;
       transition: background-color 200ms ease-in-out;
-      width: 38px;
-      height: 16px;
+      width: 46px;
+      height: 21px;
       border-radius: 50px;
       text-align: center;
       background-color: $color__white;
@@ -136,17 +152,27 @@
         left: 0;
         width: 100%;
 
+        &::before,
         &::after {
+          width: 17px;
+          height: 17px;
+          content: '';
           position: absolute;
           top: calc(100% + 12px);
-          left: 2px;
-          width: 12px;
-          height: 12px;
-          content: '';
           border-radius: 50%;
-          background-color: $color__secondary;
           transition: transform 200ms, background-color 200ms;
+        }
+
+        &::after {
+          left: 2px;
+          background-color: $color__secondary;
           box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.4);
+          background: center / cover #FFA500 url(../../../static/icons/sun.svg);
+        }
+
+        &:before {
+          background: center / cover url(../../../static/icons/moon.svg);
+          right: 2px;
         }
       }
     }
@@ -247,6 +273,10 @@
   & .header__link {
     color: $color__dark-theme__secondary;
 
+    &:hover {
+      color: $color__dark-theme__white;
+    }
+
     &__ISACTIVE {
       color: $color__dark-theme__white;
     }
@@ -258,7 +288,10 @@
 
   & .header__icon {
     border-left: 1px solid $color__dark-theme__surface-2;
-    ;
+
+    &:hover {
+      box-shadow: -1px 1px 5px inset rgba(255, 255, 255, 0.4);
+    }
   }
 
   & .header__burger_icon {