Merge pull request #59 from fs-mar24-codemafia/fix/dropdown-and-buttons

Added titles, fixed some styles
fs-mar24-codemafia · Jun 16, 2024 · 10599df · 10599df
2 parents c5e50e2 + 039d9d6
commit 10599df
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 32 deletions.
diff --git a/public/icons/svg/down-dark.svg b/public/icons/svg/down-dark.svg
diff --git a/src/components/AddToFavButton/AddToFavButton.scss b/src/components/AddToFavButton/AddToFavButton.scss
@@ -1,18 +1,25 @@
 @import '../../styles/utils/mixins';
 
-.iconFavour {
+.add-to-fav {
   height: 40px;
   width: 40px;
-  border: 1px solid var(--color-icons);
+  border: 1px solid var(--add-to-fav-borger);
   display: flex;
   justify-content: center;
+  background: transparent;
+  background-color: var(--add-to-fav-bg);
   align-items: center;
   cursor: pointer;
 
-  @include hover(border-color, var(--color-primary));
+  @include hover(border-color, var(--add-to-fav-borger-hover));
+  @include hover(background-color, var(--add-to-fav-bg-hover));
 
   &--added {
+    background-color: transparent;
     border: 1px solid var(--color-elements);
-    filter: var(--icon-filter); //new
   }
 }
+
+.icon-fav--added{
+  filter: var(--icon-filter);
+}
diff --git a/src/components/AddToFavButton/AddToFavButton.tsx b/src/components/AddToFavButton/AddToFavButton.tsx
@@ -27,12 +27,14 @@ export const AddToFavButton: React.FC<Props> = ({ product }) => {
   };
 
   return (
-    <div
-      className={cn('iconFavour', { 'iconFavour--added': isProductAdded })}
+    <button
+      className={cn('add-to-fav', { 'add-to-fav--added': isProductAdded })}
       title="Add to favourites"
       onClick={handleClick}
     >
-      <i className={cn('ico ico-fav', { 'ico-fav-red': isProductAdded })}></i>
-    </div>
+      <div className={cn('icon-fav', { 'icon-fav--added': isProductAdded })}>
+        <i className={cn('ico ico-fav', { 'ico-fav-red': isProductAdded })}></i>
+      </div>
+    </button>
   );
 };
diff --git a/src/components/BreadCrumbs/BreadCrumbs.tsx b/src/components/BreadCrumbs/BreadCrumbs.tsx
@@ -8,7 +8,7 @@ export const BreadCrumbs: React.FC = () => {
 
   return (
     <div className="bread-crumbs">
-      <Link to="/">
+      <Link to="/" title='Return to the Homepage'>
         <i className="ico ico-home" />
       </Link>
       {pathnames.map((value, index) => {

diff --git a/src/components/NewHeader/DesktopHeader/DesktopHeader.tsx b/src/components/NewHeader/DesktopHeader/DesktopHeader.tsx
@@ -33,7 +33,7 @@ export const DesktopHeader: FC = () => {
       <nav className="nav">
         <ul className="nav__list">
           {links.map(link => (
-            <li className="nav__item" key={link.link}>
+            <li className="nav__item" key={link.title}>
               <NavLink to={link.link} className="nav__link">
                 {link.title}
               </NavLink>

diff --git a/src/components/NewHeader/MobileHeader/MobileHeader.tsx b/src/components/NewHeader/MobileHeader/MobileHeader.tsx
@@ -27,12 +27,8 @@ export const MobileHeader: FC = () => {
   return (
     <>
       <header className="header">
-        <NavLink to="/" className="header__logo-link">
-          <img
-            src={theme === 'light' ? 'icons/logo.svg' : 'icons/logo-dark.svg'}
-            alt="Nice Gadgets logo"
-            className="logo"
-          />
+        <NavLink to="/" className="header__logo-link" onClick={handleMenuClose}>
+          <img src={theme === 'light' ? 'icons/logo.svg' : 'icons/logo-dark.svg'} alt="Nice Gadgets logo" className="logo" />
         </NavLink>
 
         <div className="header__buttons">
@@ -45,7 +41,7 @@ export const MobileHeader: FC = () => {
           </div>
 
           <button className="menu-button" onClick={toggleMenuOpen}>
-            <div className={`ico ${isMenuOpen ? 'ico-close' : 'ico-menu'}`} />
+            <div className={`ico ${isMenuOpen ? 'ico-close-dark' : 'ico-menu'}`} />
           </button>
         </div>
       </header>
@@ -54,7 +50,7 @@ export const MobileHeader: FC = () => {
         <nav className="nav">
           <ul className="nav__list">
             {links.map(link => (
-              <li className="nav__item" key={link.link}>
+              <li className="nav__item" key={link.title}>
                 <NavLink
                   to={link.link}
                   className="nav__link"

diff --git a/src/pages/ProductsPage/DropDown/DropDown.scss b/src/pages/ProductsPage/DropDown/DropDown.scss
@@ -21,28 +21,33 @@
     align-items: center;
     justify-content: space-between;
     height: 40px;
-    border: 1px solid #b4bdc3;
+    background-color: var(--dropdown-mainbutton-bg-color);
+    border: 1px solid var(--dropdown-mainbutton-border-color);
 
     @include buttons-text;
 
     &:hover {
-      border: 1px solid #89939a;
+      border-color: var(--dropdown-mainbutton-border-hover);
     }
 
     &--active {
-      border: 1px solid #313237;
+      border-color: var(--dropdown-mainbutton-border-focused);
+
+      &:hover {
+        border-color: var(--dropdown-mainbutton-border-focused);
+      }
     }
   }
 
   &__bottom {
     min-width: 100%;
-    background-color: #fff;
+    background-color: var(--page-bg-color);
     position: absolute;
     top: 44px;
     padding-block: 8px;
     display: flex;
     flex-direction: column;
-    border: 1px solid #e2e6e9;
+    border: 1px solid var(--dropdown-options-border-color);
     box-shadow: 0px 2px 15px 0px #0000000d;
     opacity: 0;
     transform: translateY(-5);
@@ -53,6 +58,7 @@
       transform $effect-duration;
 
     &--active {
+      z-index: 1;
       opacity: 1;
       transform: translateY(0);
       pointer-events: all;
@@ -67,8 +73,8 @@
     color: var(--color-secondary);
 
     &:hover {
-      background: #fafbfc;
-      color: var(--dropdown-hover-color);
+      background: var(--dropdown-option-hover-color);
+      color: var(--color-primary);
     }
   }
 }
diff --git a/src/pages/ProductsPage/Pagination/Pagination.scss b/src/pages/ProductsPage/Pagination/Pagination.scss
@@ -36,8 +36,8 @@ $pageItem-size: 32px;
     justify-content: center;
     padding: 0;
     border: none;
-    background: none;
-    border: 1px solid var(--color-elements);
+    background-color: var( --pagin-number-bg-color);
+    border: 1px solid var(--pagin-number-border);
     box-sizing: border-box;
     height: $pageItem-size;
     width: $pageItem-size;
@@ -49,13 +49,14 @@ $pageItem-size: 32px;
     @include hover(border-color, var(--color-secondary));
 
     &--active {
-      background: var(--color-primary);
-      border-color: var(--color-primary);
-      color: #fff;
+      background: var(--pagin-number-bg-active);
+      border-color: var(--pagin-number-border-active);
+      color: var(--pagin-number-text-color-active);
     }
 
     &--arrow {
-      border: 1px solid #b4bdc3;
+      background-color: var(--pagin-button-bg);
+      border: 1px solid var(--pagin-button-border);
     }
   }
 

diff --git a/src/pages/ProductsPage/Pagination/Pagination.tsx b/src/pages/ProductsPage/Pagination/Pagination.tsx
@@ -113,6 +113,7 @@ export const Pagination: FC<Props> = ({
         <button
           className="pagination__page pagination__page--arrow"
           onClick={() => onPageChange(currentPage - 1)}
+          title='Go one page back'
         >
           <i className="ico ico-left-dark" />
         </button>
@@ -150,6 +151,7 @@ export const Pagination: FC<Props> = ({
         <button
           className="pagination__page pagination__page--arrow"
           onClick={() => onPageChange(currentPage + 1)}
+          title='Go one page forward'
         >
           <i className="ico ico-right-dark" />
         </button>

diff --git a/src/styles/utils/_icons.scss b/src/styles/utils/_icons.scss
@@ -53,7 +53,7 @@
   }
 
   &-down {
-    background-image: url('../../../public/icons/svg/down.svg');
+    background-image: url('../../../public/icons/svg/down-dark.svg');
   }
 
   &-close {

diff --git a/src/styles/utils/_theme-set.scss b/src/styles/utils/_theme-set.scss
@@ -33,6 +33,28 @@
   --product-card-bg-color: var(--color-white);
 
   --icon-filter: none;
+
+  --dropdown-mainbutton-bg-color: var(--page-bg-color);
+  --dropdown-mainbutton-border-color: var(--color-icons);
+  --dropdown-mainbutton-border-hover: var(--color-secondary);
+  --dropdown-mainbutton-border-focused: var(--color-primary);
+  --dropdown-options-border-color: var(--color-elements);
+  --dropdown-option-hover-color: var(--color-hover-background);
+
+  --add-to-fav-bg: var(--page-bg-color);
+  --add-to-fav-bg-hover: var(--page-bg-color);
+  --add-to-fav-borger: var(--color-icons);
+  --add-to-fav-borger-hover: var(--color-primary);
+
+  --pagin-number-bg-color: var(--page-bg-color);
+  --pagin-number-bg-active: var(--color-primary);
+  --pagin-number-border: var(--color-elements);
+  --pagin-number-border-active: var(--color-primary);
+  --pagin-number-text-color: var(--color-primary);
+  --pagin-number-text-color-active: var(--color-white);
+
+  --pagin-button-bg: var(--page-bg-color);
+  --pagin-button-border: var(--color-icons);
 }
 
 [theme='dark'] {
@@ -75,4 +97,29 @@
   --color-button-hover: #a378ff;
   --color-card-background: #161827;
   --color-element-selected: #323542;
+
+  //dropdown
+  --dropdown-mainbutton-bg-color: var(--color-element-selected);
+  --dropdown-mainbutton-border-color: var(--color-element-selected);
+  --dropdown-mainbutton-border-hover: var(--color-hover-background);
+  --dropdown-mainbutton-border-focused: var(--color-button);
+  --dropdown-options-border-color: var(--color-elements);
+  --dropdown-option-hover-color: var(--color-element-selected);
+
+  //add to fav
+  --add-to-fav-bg: var(--color-element-selected);
+  --add-to-fav-bg-hover: var(--color-hover-background);
+  --add-to-fav-borger: var(--color-element-selected);
+  --add-to-fav-borger-hover: var(--color-hover-background);
+
+  //pagination
+  --pagin-number-bg-color: var(--color-card-background);
+  --pagin-number-bg-active: var(--color-button);
+  --pagin-number-border: var(--color-card-background);
+  --pagin-number-border-active: var(--color-button);
+  --pagin-number-text-color: var(--color-primary);
+  --pagin-number-text-color-active: var(--color-primary);
+
+  --pagin-button-bg: var(--color-element-selected);
+  --pagin-button-border: var(--color-element-selected);
 }