From 959e1a5f5c239cd7f525a9db59e2ab47bde4ef3c Mon Sep 17 00:00:00 2001
From: Nazar <nazar378378379379@gmail.com>
Date: Tue, 25 Jul 2023 14:31:42 +0300
Subject: [PATCH] The latest version before fixing the counts in the shopping
 cart

---
 src/App.scss                                  |   1 -
 src/Components/Footer/Footer.scss             | 153 ++++++++----------
 src/Components/Footer/Footer.tsx              |   4 +-
 src/Components/Header/Header.scss             |  48 +++---
 src/Components/Header/Header.tsx              |  25 +--
 src/Components/Header/HeaderSearch.scss       |  54 +++----
 .../PhonesPageInfo/PhonesPageInfo.scss        |  55 +++----
 7 files changed, 151 insertions(+), 189 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index d388512e05..71bc413aad 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,2 +1 @@
 // not empty
-
diff --git a/src/Components/Footer/Footer.scss b/src/Components/Footer/Footer.scss
index 4e76e480e2..abb947aa78 100644
--- a/src/Components/Footer/Footer.scss
+++ b/src/Components/Footer/Footer.scss
@@ -11,84 +11,68 @@ html {
 
 .footer {
   height: 96px;
-  box-shadow: 0px -1px 0px 0px #E2E6E9;
-  background: #FFFFFF;
+  box-shadow: 0 -1px 0 0 #e2e6e9;
+  background: #fff;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 90px;
+}
+
+.footer__FirstChild {
+  display: flex;
+  align-items: center;
+  gap: 64px;
+}
+
+.footer__FirstChild-nav-list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style: none;
+  font-size: 12px;
+  font-family: "Mont-Regular", sans-serif;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.5;
+  letter-spacing: 0.48;
+  word-wrap: break-word;
+  overflow: hidden;
+}
+
+.footer__FirstChild-nav-link {
+  display: flex;
+  position: relative;
+  text-decoration: none;
+  color: #89939a;
+  transition: 0.3s;
+}
+
+.footer__FirstChild-nav-link:hover {
+  color: #313237;
+}
 
-  &__FirstChild {
-    display: flex;
-    align-items: center;
-    gap: 64px;
-
-  }
-
-  &__FirstChild-nav {
-    &-list {
-      margin: 0;
-      padding: 0;
-      display: flex;
-      list-style: none;
-      font-size: 12px;
-      font-family: "Mont-Regular", sans-serif;
-      font-weight: 700;
-      text-transform: uppercase;
-      line-height: 5.5;
-      letter-spacing: 0.48;
-      word-wrap: break-word;
-      overflow: hidden;
-    }
-
-    &-link {
-      display: flex;
-      position: relative;
-      text-decoration: none;
-      color: #89939A;
-      transition: .3s;
-
-      &:hover {
-        color: #313237;
-      }
-    }
-  }
-
-  &__FirstChild-nav-item:not(:last-child) {
-
-    margin-right: 64px;
-  }
-
-  &__LastChild-arrow {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 32px;
-    height: 32px;
-    flex-shrink: 0;
-    background: #FFF;
-    border: 1px solid #B4BDC3;
-    transition: .3s;
-
-    &:hover {
-      box-shadow: 1px 0px 0px 0px #b7bcc0;
-      box-shadow: -1px 0px 0px 0px #b7bcc0;
-    }
-
-    &:focus {
-      box-shadow: 1px 0px 0px 0px #747779;
-      box-shadow: -1px 0px 0px 0px #747779;
-
-    }
-
-    &:active {
-      box-shadow: 1px 0px 0px 0px #000000;
-      box-shadow: -1px 0px 0px 0px #000000;
-
-
-    }
-
-  }
+.footer__FirstChild-nav-item:not(:last-child) {
+  margin-right: 64px;
+}
+
+.footer__LastChild-arrow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  background: #fff;
+  border: 1px solid #b4bdc3;
+  transition: 0.3s;
+}
+
+.footer__LastChild-arrow:hover,
+.footer__LastChild-arrow:focus,
+.footer__LastChild-arrow:active {
+  box-shadow: 1px 0 0 0 #747779;
+  box-shadow: -1px 0 0 0 #747779;
 }
 
 .arrow-svg {
@@ -110,33 +94,34 @@ html {
   height: 24px;
   width: 40px;
   background-repeat: no-repeat;
-  transition: .3s;
+  transition: 0.3s;
+}
 
-  &:hover {
-    height: 32px;
-    width: 48px;
-    cursor: pointer;
-  }
+.logoImage:hover {
+  height: 32px;
+  width: 48px;
+  cursor: pointer;
 }
 
 .footer__ThridChild {
-  display: flex;
   align-items: center;
   gap: 16px;
 }
 
 .footer-p {
-  color: #89939A;
+  color: #89939a;
   text-align: right;
   font-size: 12px;
   font-family: "Mont-Regular", sans-serif;
   font-weight: 600;
 }
 
-.is-activ {
+.is-active {
   display: flex;
   position: relative;
   text-decoration: none;
   color: #313237;
-  transition: .3s;
-}
\ No newline at end of file
+  transition: 0.3s;
+}
+
+$variable: 10px;
diff --git a/src/Components/Footer/Footer.tsx b/src/Components/Footer/Footer.tsx
index 6ecde9131e..b801fd0b21 100644
--- a/src/Components/Footer/Footer.tsx
+++ b/src/Components/Footer/Footer.tsx
@@ -42,7 +42,7 @@ export const Footer: FC = () => {
               <li className="footer__FirstChild-nav-item">
                 <Link
                   to="/contacts"
-                  className={`footer__FirstChild-nav-link ${location.pathname === '/contacts' ? 'is-activ' : ''}`}
+                  className={`footer__FirstChild-nav-link ${location.pathname === '/contacts' ? 'is-activee' : ''}`}
                 >
                   Contacts
                 </Link>
@@ -50,7 +50,7 @@ export const Footer: FC = () => {
               <li className="footer__FirstChild-nav-item">
                 <Link
                   to="/rights"
-                  className={`footer__FirstChild-nav-link ${location.pathname === '/rights' ? 'is-activ' : ''}`}
+                  className={`footer__FirstChild-nav-link ${location.pathname === '/rights' ? 'is-activee' : ''}`}
                 >
                   rights
                 </Link>
diff --git a/src/Components/Header/Header.scss b/src/Components/Header/Header.scss
index 785ad26177..fc48c419ca 100644
--- a/src/Components/Header/Header.scss
+++ b/src/Components/Header/Header.scss
@@ -4,8 +4,8 @@
   left: 0;
   right: 0;
   max-height: 65px;
-  box-shadow: 0px 1px 0px 0px #E2E6E9;
-  background: #FFFFFF;
+  box-shadow: 0px 1px 0px 0px #e2e6e9;
+  background: #ffffff;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -39,8 +39,8 @@
       display: flex;
       position: relative;
       text-decoration: none;
-      color: #89939A;
-      transition: .3s;
+      color: #89939a;
+      transition: 0.3s;
     }
 
     &-item:not(:last-child) {
@@ -77,11 +77,11 @@
     width: 64px;
     height: 64px;
     flex-shrink: 0;
-    background: #FFF;
-    box-shadow: -1px 0px 0px 0px #E2E6E9;
+    background: #fff;
+    box-shadow: -1px 0px 0px 0px #e2e6e9;
     min-width: 64px;
     min-height: 64px;
-    transition: .3s;
+    transition: 0.3s;
 
     &:hover {
       box-shadow: -1px 0px 0px 0px #b7bcc0;
@@ -99,7 +99,7 @@
       right: 0;
       background: #313237;
       height: 3px;
-      box-shadow: -1px 0px 0px 0px #000000;
+      box-shadow: -1px 0px 0px 0px #000;
     }
   }
 
@@ -119,21 +119,21 @@
     width: 64px;
     height: 64px;
     flex-shrink: 0;
-    background: #FFF;
-    box-shadow: -1px 0px 0px 0px #E2E6E9;
+    background: #fff;
+    box-shadow: -1px 0px 0px 0px #e2e6e9;
 
     &:hover {
       box-shadow: -1px 0px 0px 0px #b7bcc0;
     }
 
     &:focus,
-    .is-activ {
+    .is-active {
       box-shadow: -1px 0px 0px 0px #747779;
     }
   }
 }
 
-.is-activ::after {
+.is-active::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -141,7 +141,7 @@
   right: 0;
   background: #313237;
   height: 3px;
-  box-shadow: -1px 0px 0px 0px #000000;
+  box-shadow: -1px 0px 0px 0px #000;
 }
 
 .heart-svg {
@@ -157,7 +157,7 @@
 }
 
 .circle-for-header {
-  border: 1px solid #FFF;
+  border: 1px solid #fff;
   position: absolute;
   top: 12px;
   left: 35px;
@@ -171,7 +171,7 @@
 }
 
 .counter-for-header {
-  color: #FFF;
+  color: #fff;
   text-align: center;
   font-family: "Mont-Regular", sans-serif;
   font-size: 9px;
@@ -182,7 +182,6 @@
   text-decoration: none;
 }
 
-
 .basket-svg {
   background-size: cover;
   background-repeat: no-repeat;
@@ -198,7 +197,7 @@
   height: 24px;
   width: 40px;
   background-repeat: no-repeat;
-  transition: .3s;
+  transition: 0.3s;
 
   &:hover {
     height: 32px;
@@ -209,7 +208,6 @@
 
 .color-toggle {
   background-color: blue;
-  /* Цвет по умолчанию */
   color: white;
   padding: 10px;
   border: none;
@@ -218,7 +216,6 @@
 
 .color-toggle.gray {
   background-color: gray;
-  /* Цвет при выбранном состоянии */
 }
 
 .search-input {
@@ -227,7 +224,7 @@
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  color: var(--gray-icons-placeholders, #B4BDC3);
+  color: var(--gray-icons-placeholders, #b4bdc3);
 }
 
 .search-input:focus,
@@ -236,22 +233,15 @@
 }
 
 @keyframes bounce {
-
-  0%,
-  20%,
-  60%,
-  100% {
-    transform: translateY(0);
+  0%, 20%, 60%, 100% {
     transform: translateY(0);
   }
 
   40% {
     transform: translateY(-10px);
-    transform: translateY(-10px);
   }
 
   80% {
     transform: translateY(-5px);
-    transform: translateY(-5px);
   }
-}
\ No newline at end of file
+}
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 83da114b32..d6c4c82577 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -51,7 +51,10 @@ export const Header = ({ searchValue, setSearchValue }: HeaderProps) => {
             <img className={`logoImage ${isHomePage ? 'is-home-page' : ''}`} src={LogoImage} alt="Logo" />
           </NavLink>
         </div>
-        <nav className="header__FirstChild-nav">
+        <nav
+          data-cy="categoryLinksContainer"
+          className="header__FirstChild-nav"
+        >
           <ul className="header__FirstChild-nav-list">
             <li className="header__FirstChild-nav-item">
               <NavLink to="/" className={`header__FirstChild-nav-link ${isHomePage ? 'is-active' : ''}`}>
@@ -104,11 +107,11 @@ export const Header = ({ searchValue, setSearchValue }: HeaderProps) => {
           </NavLink>
 
           {favoritesLength >= 1
-              && (
-                <div className="circle-for-header">
-                  <p className="counter-for-header">{favoritesLength}</p>
-                </div>
-              )}
+            && (
+              <div className="circle-for-header">
+                <p className="counter-for-header">{favoritesLength}</p>
+              </div>
+            )}
 
         </div>
         <div className={`header__LastChild-basket ${location.pathname === '/cart' ? 'is-activ' : ''}`}>
@@ -117,11 +120,11 @@ export const Header = ({ searchValue, setSearchValue }: HeaderProps) => {
           </NavLink>
 
           {basketLength >= 1
-              && (
-                <div className="circle-for-header">
-                  <p className="counter-for-header">{basketLength}</p>
-                </div>
-              )}
+            && (
+              <div className="circle-for-header">
+                <p className="counter-for-header">{basketLength}</p>
+              </div>
+            )}
         </div>
       </div>
     </header>
diff --git a/src/Components/Header/HeaderSearch.scss b/src/Components/Header/HeaderSearch.scss
index 8bc97c54d7..80425f17e9 100644
--- a/src/Components/Header/HeaderSearch.scss
+++ b/src/Components/Header/HeaderSearch.scss
@@ -4,37 +4,37 @@
   justify-content: center;
   align-items: center;
   flex-grow: 1;
-  background: #FFF;
-  box-shadow: -1px 0px 0px 0px #E2E6E9;
+  background: #fff;
+  box-shadow: -1px 0px 0px 0px #e2e6e9;
   padding: 15px;
-  transition: .3s;
+  transition: 0.3s;
   width: 200px;
-}
-
-.header__LastChild-search-toggle.focused {
-  box-shadow: 0 0 0 2px #4285F4;
-}
 
-.header__LastChild-search-toggle input {
-  border: none;
-  outline: none;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  text-align: start;
-  font-size: 14px;
-  font-family: inherit;
-}
+  &.focused {
+    box-shadow: 0 0 0 2px #4285f4;
+  }
 
-.header__LastChild-search-toggle input::placeholder {
-  color: #999;
-}
+  input {
+    border: none;
+    outline: none;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    text-align: start;
+    font-size: 14px;
+    font-family: inherit;
+    
+    &::placeholder {
+      color: #999;
+    }
 
-.header__LastChild-search-toggle input:focus {
-  box-shadow: none;
-}
+    &:focus {
+      box-shadow: none;
+    }
+  }
 
-.header__LastChild-search-toggle img {
-  cursor: pointer;
-  margin-left: 10px;
+  img {
+    cursor: pointer;
+    margin-left: 10px;
+  }
 }
diff --git a/src/Components/PhonesPageInfo/PhonesPageInfo.scss b/src/Components/PhonesPageInfo/PhonesPageInfo.scss
index 4629c44f36..c202a22b60 100644
--- a/src/Components/PhonesPageInfo/PhonesPageInfo.scss
+++ b/src/Components/PhonesPageInfo/PhonesPageInfo.scss
@@ -36,7 +36,7 @@
 
   &-images {
     padding: 7px;
-    border: 1px solid #C4C4C4;
+    border: 1px solid #c4c4c4;
     height: 70px;
     width: 50px;
     object-position: center;
@@ -50,7 +50,7 @@
   margin-bottom: 17px;
   background-color: #fff;
   border: none;
-  transition: all .3s;
+  transition: all 0.3s;
   cursor: pointer;
 }
 
@@ -66,9 +66,7 @@
 .selected-image__img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
   object-fit: contain;
-
 }
 
 .page__Blocks-info-about-title {
@@ -79,13 +77,6 @@
   font-style: normal;
   font-weight: 700;
   line-height: 140%;
-
-  &::after {
-    content: "";
-    width: 570px;
-    height: 1px;
-    background: #E2E6E9;
-  }
 }
 
 .contant-title {
@@ -98,7 +89,7 @@
 }
 
 .contant-text {
-  color: #89939A;
+  color: #89939a;
   font-size: 14px;
   font-family: "Mont-Regular", sans-serif;
   font-weight: 500;
@@ -106,7 +97,7 @@
 }
 
 .por-left {
-  color: var(--gray-secondary, #89939A);
+  color: var(--gray-secondary, #89939a);
   font-size: 14px;
   font-family: "Mont-Regular", sans-serif;
   font-style: normal;
@@ -172,9 +163,9 @@
   box-sizing: border-box;
   width: 36px;
   height: 36px;
-  border: 1px solid #E2E6E9;
+  border: 1px solid #e2e6e9;
   border-radius: 50%;
-  transition: .3s;
+  transition: 0.3s;
   cursor: pointer;
 
   &__active {
@@ -182,7 +173,6 @@
   }
 }
 
-
 .color-option {
   cursor: pointer;
   position: absolute;
@@ -196,7 +186,7 @@
 }
 
 .page__Blocks-header-rigth__text {
-  color: var(--gray-secondary, #89939A);
+  color: var(--gray-secondary, #89939a);
   font-size: 12px;
   font-family: "Mont-Regular", sans-serif;
   font-style: normal;
@@ -207,24 +197,21 @@
 .glavBlockforInfoButton {
   display: flex;
   gap: 8px;
-
-
 }
 
 .containerForGlavBlock {
   margin-top: 26px;
 
   &::after {
-    content: '';
+    content: "";
     display: block;
     width: 320px;
     height: 1px;
-    background: #E2E6E9;
+    background: #e2e6e9;
     margin-top: 24px;
   }
 }
 
-
 .productsPriceButtons {
   margin-top: 16px;
   align-items: center;
@@ -241,7 +228,7 @@
 
   &__left {
     &-por {
-      color: var(--gray-secondary, #89939A);
+      color: var(--gray-secondary, #89939a);
       font-family: "Mont-Regular", sans-serif;
       font-size: 12px;
       font-style: normal;
@@ -265,7 +252,7 @@
 
 .block-for-id {
   &__text {
-    color: var(--gray-icons-placeholders, #B4BDC3);
+    color: var(--gray-icons-placeholders, #b4bdc3);
     font-family: "Mont-Regular", sans-serif;
     font-size: 12px;
     font-style: normal;
@@ -284,13 +271,12 @@
 }
 
 .block-for-page__Blocks-info-about-title {
-
   &::after {
-    content: '';
+    content: "";
     display: block;
     width: 560px;
     height: 1px;
-    background: #E2E6E9;
+    background: #e2e6e9;
   }
 }
 
@@ -303,16 +289,15 @@
   box-sizing: border-box;
   width: 64px;
   height: 32px;
-  border: 1px solid #B4BDC3;
+  border: 1px solid #b4bdc3;
 
   &__active {
     background: #313237;
-
   }
 }
 
 .GB-option {
-  background-color: #FFF;
+  background-color: #fff;
   color: var(--gray-primary, #313237);
   text-align: center;
   font-family: "Mont-Regular", sans-serif;
@@ -322,11 +307,11 @@
   line-height: 21px;
   border: none;
   cursor: pointer;
-  transition: .3s;
+  transition: 0.3s;
 
   &-active {
     background-color: #313237;
-    color: var(--gray-white, #FFF);
+    color: var(--gray-white, #fff);
     text-align: center;
     font-family: "Mont-Regular", sans-serif;
     font-size: 14px;
@@ -337,15 +322,15 @@
 }
 
 .block-forPageNotFound__text-1-1 {
-  color: var(--gray-secondary, #89939A);
+  color: var(--gray-secondary, #89939a);
   font-size: 12px;
   font-family: "Mont-Regular", sans-serif;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  transition: .3s;
+  transition: 0.3s;
 
   &:hover {
     color: #000000;
   }
-}
\ No newline at end of file
+}