edits

mate-academy · Jul 19, 2023 · d0f992e · d0f992e
1 parent 8be1483
commit d0f992e
Show file tree

Hide file tree

Showing 24 changed files with 72 additions and 53 deletions.
diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx
@@ -20,7 +20,9 @@ export const Categories:React.FC<Props> = memo(({ itemsLength }) => {
               key={categorie}
             >
               <img src={`img/${categorie}.png`} alt={`${categorie} foto`} />
-              <div className="categories__item--title">{categorie}</div>
+              <div className="categories__item--title">
+                {categorie[0].toUpperCase() + categorie.slice(1)}
+              </div>
               <div className="categories__item--total-amount">
                 {`${categorie === categories[0] ? itemsLength : 0} models` }
               </div>

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -24,13 +24,13 @@ export const Nav:React.FC<Props> = ({ items }) => {
             className={
               classnames(
                 'nav__item', {
-                  'nav__item--active': item === pathname.slice(1)
+                  'nav__item--active': item.toLowerCase() === pathname.slice(1)
                   || (item === 'home' && pathname === '/'),
                 },
               )
             }
           >
-            <Link to={`${linkPath(item)}`}>{item}</Link>
+            <Link to={`${linkPath(item.toLowerCase())}`}>{item}</Link>
           </li>
         ))}
       </ul>

diff --git a/src/components/PageNavigation.tsx b/src/components/PageNavigation.tsx
@@ -26,20 +26,20 @@ export const PageNavigation = () => {
               />
             </div>
             {item === pathNames[pathNames.length - 1]
-              ? <span key={item}>{item}</span>
+              ? <span key={item}>{item[0].toUpperCase() + item.slice(1)}</span>
               : (
                 <Link
                   to={`/${pathNames.slice(0, pathNames.indexOf(item) + 1).join('/')}`}
                 >
-                  {item}
+                  {item[0].toUpperCase() + item.slice(1)}
                 </Link>
               )}
           </>
         ))}
       </div>
       <Link to={prevPath || '/'} className="page__navigation--go-back">
         <img src="assests/images/Arrow-left.svg" alt="icon-left" />
-        <span data-cy="backButton">back</span>
+        <span data-cy="backButton">Back</span>
       </Link>
     </nav>
   );

diff --git a/src/components/TopActions.tsx b/src/components/TopActions.tsx
@@ -7,20 +7,20 @@ export const TopActions = () => {
 
   return (
     <div className="top-actions">
-      <div className="icon icon-info">
+      <Link to="/favourites" className="icon icon-info">
         {favourites.length > 0
         && <div className="icon-info__info">{favourites.length}</div>}
-        <Link to="/favourites">
-          <img src="assests/images/Favourites.svg" alt="heart icon" />
-        </Link>
-      </div>
-      <div className="icon icon-info">
+
+        <img src="assests/images/Favourites.svg" alt="heart icon" />
+      </Link>
+
+      <Link to="/cart" className="icon icon-info">
         {cartList.length > 0
         && <div className="icon-info__info">{cartList.length}</div>}
-        <Link to="/cart">
-          <img src="assests/images/Cart.svg" alt="cart icon" />
-        </Link>
-      </div>
+
+        <img src="assests/images/Cart.svg" alt="cart icon" />
+      </Link>
+
     </div>
   );
 };
diff --git a/src/components/pages/CartPage.tsx b/src/components/pages/CartPage.tsx
@@ -35,7 +35,7 @@ export const CartPage: React.FC = () => {
       <div className="cart__total">
         <div className="cart__total--amount">
           <h1>{`$${totalAmount}`}</h1>
-          <p>{`Total for ${cartList.length} items`}</p>
+          <p>{`Total for ${cartList.reduce((acum, { quantity }) => acum + quantity, 0)} items`}</p>
         </div>
         {cartList.length > 0 && (
           <button

diff --git a/src/scss/categories/categories-item.scss b/src/scss/categories/categories-item.scss
@@ -17,7 +17,7 @@
     }
 
     &--title {
-      @include text(20px, 600, $primary-dark-color);
+      @include text(20px, 500, $primary-dark-color);
       text-decoration: none;
     }
 

diff --git a/src/scss/categories/categories.scss b/src/scss/categories/categories.scss
@@ -8,6 +8,7 @@
 
   &__title {
     @include text (32px, 700, $primary-dark-color);
+    font-style: normal;
   }
 
   &__items {

diff --git a/src/scss/characteristic-item.scss b/src/scss/characteristic-item.scss
@@ -8,12 +8,12 @@
     margin-bottom: 8px;
 
     &--name {
-      @include text(12px, 600, $primary-gray-color);
+      @include text(12px, 500, $primary-gray-color);
     }
 
     &--characteristic {
       position: relative;
-      @include text(12px, 600, $primary-dark-color);
+      @include text(12px, 500, $primary-dark-color);
       bottom: 0;
     }
   }

diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: "Mont";
+  src: url("../fonts/Mont-Regular.otf");
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Mont";
+  src: url("../fonts/Mont-Bold.otf");
+  font-style: normal;
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Mont";
+  src: url("../fonts/Mont-SemiBold.otf");
+  font-style: normal;
+  font-weight: 500;
+}
diff --git a/src/scss/footer/footer-actions.scss b/src/scss/footer/footer-actions.scss
@@ -14,7 +14,7 @@
     }
 
     &--description {
-      @include text(12px, 600, $primary-gray-color);
+      @include text(12px, 500, $primary-gray-color);
       @include onPhone {
         font-size: 14px;
       }

diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -23,13 +23,7 @@
 @import "./utils/reset.scss";
 @import "./error.scss";
 @import "./characteristic-item.scss";
-
-@font-face {
-  font-family: "Mont";
-  src: local("Mont-Regular"), url("../fonts/Mont-Regular.otf") format("woff");
-  src: local("Mont-Bold"), url("../fonts/Mont-Bold.otf") format("woff");
-  src: local("Mont-SemiBold"), url("../fonts/Mont-SemiBold.otf") format("woff");
-}
+@import "./fonts.scss";
 
 .App {
   min-height: 100vh;

diff --git a/src/scss/logo.scss b/src/scss/logo.scss
@@ -4,6 +4,5 @@
 
 .logo {
   @extend .flex-center;
-  @include text(150%, 900, $primary-dark-color);
   z-index: 1;
 }
diff --git a/src/scss/nav/nav-item.scss b/src/scss/nav/nav-item.scss
@@ -1,16 +1,25 @@
 @import "../utils/variables";
 @import "../utils/mixins";
+@import "../utils/extends";
 
 .nav {
   &__item {
+    position: relative;
+    top: 3px;
     display: inline-block;
     align-items: center;
+    height: 86%;
     width: fit-content;
+    border-bottom: 3px solid transparent;
 
     & a {
-      @include text(12px, 700, $primary-gray-color); 
+      @extend .flex-center;
+      align-items: center;
+      @include text(12px, 700, $primary-gray-color);
+      letter-spacing: 0.48px;
       transition: color 0.1s;
       text-transform: uppercase;
+      height: 100%;
 
       &:hover {
         opacity: 0.5;
@@ -21,15 +30,7 @@
     }
 
     &--active {
-      &:after {
-        position: relative;
-        top: 21px;
-        content: "";
-        display: block;
-        height: 3px;
-        background: $primary-dark-color;
-        border-radius: 2px;
-      }
+      border-color: $primary-dark-color;
     }
   }
 }
diff --git a/src/scss/page-navigation.scss b/src/scss/page-navigation.scss
@@ -16,20 +16,20 @@
     }
 
     & span {
-      @include text (12px, 600, $primary-gray-color);
+      @include text (12px, 500, $primary-gray-color);
     }
   }
 
   &--text {
-    @include text(12px, 600, $primary-gray-color);
+    @include text(12px, 500, $primary-gray-color);
   }
 
   &--go-back {
     display: flex;
     gap: 8px;
 
     & span {
-      @include text(12px, 600, $primary-gray-color);
+      @include text(12px, 500, $primary-gray-color);
     }
   }
 }
diff --git a/src/scss/pages/cart-page/cart-total.scss b/src/scss/pages/cart-page/cart-total.scss
@@ -45,7 +45,7 @@
     & button {
       width: 100%;
       @extend .flex-center;
-      @include text(14px, 500, #fff);
+      @include text(14px, 600, #fff);
       padding: 14px;
       background: $primary-dark-color;
       color: #fff;
@@ -64,7 +64,7 @@
       }
 
       & span {
-        @include text (14px, 600, $primary-gray-color);
+        @include text (14px, 500, $primary-gray-color);
       }
     }
   }

diff --git a/src/scss/pages/product-details-page/details-about.scss b/src/scss/pages/product-details-page/details-about.scss
@@ -19,7 +19,7 @@
 
       &--title {
         margin-bottom: 16px;
-        @include text(20px, 600, $primary-dark-color);
+        @include text(20px, 500, $primary-dark-color);
       }
 
       &--description {

diff --git a/src/scss/pages/product-details-page/details-characteristics.scss b/src/scss/pages/product-details-page/details-characteristics.scss
@@ -25,7 +25,7 @@
         margin: 0;
         margin-bottom: 9px;
         padding: 0;
-        @include text(12px, 600, $primary-gray-color);
+        @include text(12px, 500, $primary-gray-color);
       }
 
       &--list {

diff --git a/src/scss/product-card/price.scss b/src/scss/product-card/price.scss
@@ -16,7 +16,7 @@
     }
 
     &--without-discont {
-      @include text(22px, 700, $primary-gray-color);
+      @include text(22px, 500, $primary-gray-color);
       margin-left: 8px;
       text-decoration-line: line-through;
     }

diff --git a/src/scss/product-card/title.scss b/src/scss/product-card/title.scss
@@ -6,6 +6,7 @@
     margin-bottom: 8px;
     @include text(14px, 500, $primary-dark-color);
     width: 100%;
+
 
     &:hover {
       opacity: 0.7;

diff --git a/src/scss/search.scss b/src/scss/search.scss
@@ -21,7 +21,7 @@
     width: 327px;
 
     &::placeholder {
-      @include text (14px, 600, $primary-gray-color);
+      @include text (14px, 500, $primary-gray-color);
     }
 
     @include onTab {

diff --git a/src/scss/select-block/item.scss b/src/scss/select-block/item.scss
@@ -3,7 +3,7 @@
 
 .filter {
   &__item {
-    @include text(14px, 600, $primary-gray-color );
+    @include text(14px, 500, $primary-gray-color );
     padding: 10px 16px;
     cursor: pointer;
     transition: box-shadow 0.2s ease;

diff --git a/src/scss/select-block/select-block.scss b/src/scss/select-block/select-block.scss
@@ -19,7 +19,7 @@
   }
 
   &__description {
-    @include text(12px, 600, $primary-gray-color);
+    @include text(12px, 500, $primary-gray-color);
     margin-bottom: 4px;
   }
 

diff --git a/src/scss/select-block/select.scss b/src/scss/select-block/select.scss
@@ -26,7 +26,7 @@
     }
 
     & span {
-      @include text(14px, 600, $primary-dark-color);
+      @include text(14px, 500, $primary-dark-color);
     }
   }
 }
diff --git a/src/scss/utils/_mixins.scss b/src/scss/utils/_mixins.scss
@@ -1,8 +1,9 @@
-@mixin text($size, $width, $color) {
+@mixin text($size, $weight, $color) {
   font-size: $size;
-  font-weight: $width;
+  font-weight: $weight;
   color: $color;
   font-family: "Mont", sans-serif;
+
 }
 
 @mixin onTab {