enhancement_338_sidebar_menu_modal

Studio-Yandex-Practicum · May 3, 2024 · 6afab16 · 6afab16
1 parent 449db55
commit 6afab16
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 13 deletions.
diff --git a/src/assets/images/sideBarMenu/IconArrowDown.svg b/src/assets/images/sideBarMenu/IconArrowDown.svg
diff --git a/src/entities/SideBarButton/ui/SideBarButton.module.scss b/src/entities/SideBarButton/ui/SideBarButton.module.scss
@@ -15,6 +15,6 @@
 }
 
 .sideBarButton:hover {
-  color: var.$theme-secondary-color;
-  fill: var.$theme-secondary-color;
+  color: var.$header-color;
+  fill: var.$header-color;
 }
diff --git a/src/features/SideBar/ui/SideBar.module.scss b/src/features/SideBar/ui/SideBar.module.scss
@@ -16,15 +16,16 @@
     border-radius: 6px;
     padding: 10px 10px 10px 15px;
     cursor: pointer;
+    transition: 0.25s;
   }
 
   &__headerText {
-    color: var.$body-color;
     transition: 0.25s;
   }
 
   &__headerArrow {
-    transition: transform 0.25s;
+    fill: var.$body-color;
+    transition: 0.25s;
   }
 
   &__headerArrow_active {

diff --git a/src/features/SideBarMenuModal/SideBarLink/SideBarLink.module.scss b/src/features/SideBarMenuModal/SideBarLink/SideBarLink.module.scss
@@ -8,15 +8,19 @@
   background: var.$body-bg;
   min-height: 45px;
   border-radius: 5px;
+  font-size: 15px;
+  color: var.$body-color;
+  fill: var.$body-color;
   padding: 10px 15px;
   cursor: pointer;
-
-  &__paragraph {
-    font-size: 15px;
-    color: var.$body-color;
-  }
+  transition: 0.25s;
 
   &__arrow {
     transform: rotate(270deg);
   }
 }
+
+.sideBarLink:hover {
+  color: var.$header-color;
+  fill: var.$header-color;
+}
diff --git a/src/features/SideBarMenuModal/SideBarLink/SideBarLink.tsx b/src/features/SideBarMenuModal/SideBarLink/SideBarLink.tsx
@@ -1,7 +1,6 @@
 import { KeyboardEventHandler, FC } from 'react'
 
 import ArrowIcon from '@/assets/images/sideBarMenu/IconArrowDown.svg'
-import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 
 import styles from './SideBarLink.module.scss'
 
@@ -23,7 +22,7 @@ export interface ISideBarLink {
 const SideBarLink: FC<ISideBarLink> = ({ isVisible, onKeyUp, onClick, title }) => {
   return (
     <div tabIndex={0} role="button" onKeyUp={onKeyUp} className={styles.sideBarLink} onClick={onClick}>
-      <Paragraph className={styles.sideBarLink__paragraph}>{title}</Paragraph>
+      {title}
       {isVisible && <ArrowIcon className={styles.sideBarLink__arrow} />}
     </div>
   )

diff --git a/src/features/SideBarMenuModal/SideBarSublinks/SideBarSublinks.module.scss b/src/features/SideBarMenuModal/SideBarSublinks/SideBarSublinks.module.scss
@@ -37,5 +37,11 @@
     font-size: 15px;
     color: var.$body-color;
     padding: 10px 10px 10px 15px;
+    cursor: pointer;
+    transition: 0.25s;
+  }
+
+  &__route:hover {
+    color: var.$header-color;
   }
 }
diff --git a/src/features/SideBarMenuModal/ui/SideBarMenuModal.module.scss b/src/features/SideBarMenuModal/ui/SideBarMenuModal.module.scss
@@ -32,7 +32,14 @@
     background: var.$white;
     border-radius: 10px;
     font-size: 15px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
     color: var.$body-color;
     padding: 10px 20px;
+    transition: 0.25s;
+  }
+
+  &__button:hover {
+    color: var.$header-color;
   }
 }