From 85773bd7af431c2a15b01853eb712ff4f8c4e5c8 Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Wed, 2 Aug 2023 23:20:53 +0300
Subject: [PATCH] adaptive

---
 src/components/AuthBlock/authBlock.scss       |  43 +++--
 .../Common/ModalLayout/modalLayout.scss       |   4 +
 .../Tracker/ModalTicket/modalTicket.scss      |   2 +-
 src/pages/TrackerAuth/trackerAuth.scss        |  18 ++
 src/pages/TrackerIntro/trackerIntro.scss      | 154 ++++++++++++++++++
 .../TrackerRegistration.js                    |   8 +-
 .../trackerRegistration.scss                  |  46 ++++++
 7 files changed, 260 insertions(+), 15 deletions(-)

diff --git a/src/components/AuthBlock/authBlock.scss b/src/components/AuthBlock/authBlock.scss
index dff8e5c5..a223d69f 100644
--- a/src/components/AuthBlock/authBlock.scss
+++ b/src/components/AuthBlock/authBlock.scss
@@ -7,18 +7,20 @@
     display: flex;
     position: relative;
 
-    @media (max-width: 1024px) {
-      margin-top: 100px;
-    }
-
-    @media (max-width: 870px) {
+    @media (max-width: 1000px) {
       flex-direction: column;
       padding: 25px;
+      margin-top: 0;
+      padding: 0;
     }
   }
 
   &__info {
     margin-right: 115px;
+
+    @media (max-width: 1000px) {
+      order: 3;
+    }
     h3 {
       font-weight: 500;
       font-size: 30px;
@@ -33,14 +35,21 @@
       font-size: 16px;
       line-height: 30px;
 
-      @media (max-width: 870px) {
+      @media (max-width: 1000px) {
         max-width: none;
-        margin-bottom: 15px;
+        margin: 15px 25px;
+      }
+
+      @media (max-width: 600px) {
+        font-size: 14px;
+        line-height: 22px;
       }
     }
 
-    @media (max-width: 870px) {
+    @media (max-width: 1000px) {
       margin-right: 0;
+      display: flex;
+      align-items: center;
     }
   }
 
@@ -61,8 +70,8 @@
       font-size: 15px;
       line-height: 18px;
 
-      @media (max-width: 870px) {
-        max-width: 350px;
+      @media (max-width: 1000px) {
+        max-width: 550px;
       }
     }
 
@@ -99,11 +108,25 @@
         font-weight: 500;
       }
     }
+
+    @media (max-width: 1000px) {
+      order: 2;
+      margin-bottom: 55px;
+    }
   }
 
   &__img {
     position: absolute;
     right: 48px;
     top: -90px;
+
+    @media (max-width: 1000px) {
+      order: 1;
+      position: inherit;
+      right: inherit;
+      top: inherit;
+      max-width: 115px;
+      margin-bottom: 35px;
+    }
   }
 }
diff --git a/src/components/Common/ModalLayout/modalLayout.scss b/src/components/Common/ModalLayout/modalLayout.scss
index f69ea676..3382e64e 100644
--- a/src/components/Common/ModalLayout/modalLayout.scss
+++ b/src/components/Common/ModalLayout/modalLayout.scss
@@ -70,6 +70,10 @@
       padding: 39px 10px 29px 10px;
     }
   }
+
+  .ck-editor {
+    width: 100%;
+  }
 }
 
 .modal-layout.active {
diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
index eaa6ae6d..600e219e 100644
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -720,7 +720,7 @@
         }
         span {
           font-size: 12px;
-          color: #1458DD;
+          color: #343a40;
           margin-left: 10px;
           font-weight: 500;
         }
diff --git a/src/pages/TrackerAuth/trackerAuth.scss b/src/pages/TrackerAuth/trackerAuth.scss
index 45dec641..e8043782 100644
--- a/src/pages/TrackerAuth/trackerAuth.scss
+++ b/src/pages/TrackerAuth/trackerAuth.scss
@@ -10,6 +10,10 @@
       padding-top: 100px;
     }
 
+    @media (max-width: 1000px) {
+      background-color: white;
+    }
+
     .container {
       padding-bottom: 30px;
     }
@@ -29,7 +33,21 @@
         right: 10px;
         max-width: 300px;
 
+        @media (max-width: 600px) {
+          max-width: 257px;
+          right: 0;
+        }
+
+        @media (max-width: 483px) {
+          max-width: 160px;
+          left: -175px;
+        }
       }
     }
+
+    @media (max-width: 600px) {
+      font-size: 24px;
+      margin-bottom: 25px;
+    }
   }
 }
diff --git a/src/pages/TrackerIntro/trackerIntro.scss b/src/pages/TrackerIntro/trackerIntro.scss
index 571b2b78..a11f2434 100644
--- a/src/pages/TrackerIntro/trackerIntro.scss
+++ b/src/pages/TrackerIntro/trackerIntro.scss
@@ -3,6 +3,14 @@
     font-family: "LabGrotesque", sans-serif;
     background-color: #f1f1f1;
     color: #000000;
+
+    @media (max-width: 1375px) {
+      padding-top: 80px;
+    }
+
+    @media (max-width: 1200px) {
+      background-color: white;
+    }
   }
 
   &__intro {
@@ -14,12 +22,33 @@
     &__img {
       max-width: 530px;
       max-height: 287px;
+
+      @media (max-width: 1100px) {
+        max-width: 35%;
+      }
+
+      @media (max-width: 800px) {
+        margin-top: 25px;
+        max-width: 350px;
+      }
+
+      @media (max-width: 450px) {
+        max-width: 280px;
+      }
     }
 
     &__info {
       display: flex;
       flex-direction: column;
       margin-right: 50px;
+
+      @media (max-width: 1100px) {
+        align-items: center;
+      }
+
+      @media (max-width: 800px) {
+        margin-right: 0;
+      }
     }
 
     &__suptitle {
@@ -31,6 +60,10 @@
         font-weight: 500;
         font-size: 16px;
       }
+
+      @media (max-width: 1100px) {
+        display: none;
+      }
     }
 
     &__title {
@@ -48,6 +81,30 @@
         bottom: -30px;
         right: 0;
         max-width: 405px;
+
+        @media (max-width: 1175px) {
+          max-width: none;
+          width: 100%;
+        }
+
+        @media (max-width: 800px) {
+          max-width: 250px;
+          left: 50%;
+          margin-left: -120px;
+        }
+      }
+
+      @media (max-width: 1100px) {
+        text-align: center;
+      }
+
+      @media (max-width: 800px) {
+        font-size: 28px;
+        display: block;
+      }
+
+      @media (max-width: 450px) {
+        margin-bottom: 55px;
       }
     }
 
@@ -55,6 +112,27 @@
       font-size: 17px;
       font-weight: 500;
       margin-bottom: 105px;
+
+      @media (max-width: 1100px) {
+        text-align: center;
+        margin-bottom: 50px;
+      }
+
+      @media (max-width: 500px) {
+        display: none;
+      }
+    }
+
+    @media (max-width: 1200px) {
+      align-items: center;
+    }
+
+    @media (max-width: 800px) {
+      flex-direction: column;
+    }
+
+    @media (max-width: 800px) {
+      padding: 40px 0;
     }
   }
 
@@ -87,10 +165,29 @@
       margin-bottom: 34px;
     }
 
+    .board {
+      width: 100%;
+    }
+
     .heard {
       position: absolute;
       bottom: -64px;
       left: 325px;
+
+      @media (max-width: 1320px) {
+        left: inherit;
+        right: 80px;
+        bottom: inherit;
+        top: 30px;
+      }
+
+      @media (max-width: 900px) {
+        max-width: 70px;
+      }
+
+      @media (max-width: 650px) {
+        display: none;
+      }
     }
 
     &__info {
@@ -103,7 +200,27 @@
         font-weight: 500;
         max-width: 695px;
         margin-bottom: 30px;
+
+        @media (max-width: 700px) {
+          font-size: 20px;
+        }
       }
+
+      @media (max-width: 880px) {
+        width: 100%;
+        padding: 0 30px;
+        align-items: center;
+
+        p {
+          text-align: center;
+          max-width: none;
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    @media (max-width: 1000px) {
+      margin-bottom: 60px;
     }
   }
 
@@ -132,6 +249,15 @@
         position: absolute;
         max-width: 311px;
         bottom: -28px;
+
+        @media (max-width: 650px) {
+          max-width: 196px;
+        }
+      }
+
+      @media (max-width: 650px) {
+        font-size: 24px;
+        margin-bottom: 65px;
       }
     }
 
@@ -139,6 +265,11 @@
       display: flex;
       justify-content: space-between;
       width: 100%;
+
+      @media (max-width: 850px) {
+        flex-direction: column;
+        row-gap: 50px;
+      }
     }
 
     &__item {
@@ -146,6 +277,10 @@
       flex-direction: column;
       max-width: 415px;
 
+      @media (max-width: 850px) {
+        max-width: none;
+      }
+
       &Head {
         display: flex;
         align-items: center;
@@ -161,6 +296,12 @@
           height: 71px;
           color: #FFFFFF;
           font-size: 30px;
+
+          @media (max-width: 650px) {
+            width: 50px;
+            height: 50px;
+            font-size: 24px;
+          }
         }
 
         h3 {
@@ -168,6 +309,15 @@
           font-size: 32px;
           font-weight: 500;
           margin-bottom: 0;
+
+          @media (max-width: 650px) {
+            margin-left: 26px;
+            font-size: 21px;
+          }
+        }
+
+        @media (max-width: 650px) {
+          margin-bottom: 26px;
         }
       }
 
@@ -175,6 +325,10 @@
         font-size: 19px;
         font-weight: 500;
         line-height: 32px;
+
+        @media (max-width: 650px) {
+          font-size: 16px;
+        }
       }
     }
   }
diff --git a/src/pages/TrackerRegistration/TrackerRegistration.js b/src/pages/TrackerRegistration/TrackerRegistration.js
index 68a51a01..d7038d28 100644
--- a/src/pages/TrackerRegistration/TrackerRegistration.js
+++ b/src/pages/TrackerRegistration/TrackerRegistration.js
@@ -34,14 +34,14 @@ export const TrackerRegistration = () => {
                 <span>Ваше имя *</span>
                 <input placeholder="Имя" />
               </div>
-              <div className="trackerRegistration__inputContainer">
-                <span>Придумайте пароль*</span>
-                <input placeholder="Пароль" />
-              </div>
               <div className="trackerRegistration__inputContainer">
                 <span>Ваш email *</span>
                 <input placeholder="Email" type="email" />
               </div>
+              <div className="trackerRegistration__inputContainer">
+                <span>Придумайте пароль*</span>
+                <input placeholder="Пароль" />
+              </div>
               <div className="trackerRegistration__inputContainer">
                 <span>Повторите пароль*</span>
                 <input placeholder="Повторите пароль" />
diff --git a/src/pages/TrackerRegistration/trackerRegistration.scss b/src/pages/TrackerRegistration/trackerRegistration.scss
index a857c569..e3d72bd0 100644
--- a/src/pages/TrackerRegistration/trackerRegistration.scss
+++ b/src/pages/TrackerRegistration/trackerRegistration.scss
@@ -21,12 +21,26 @@
     background: #FFF;
     padding: 59px 115px 70px 102px;
 
+    @media (max-width: 1000px) {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+    }
+
     &__inputs {
       display: flex;
       flex-wrap: wrap;
       max-width: 650px;
       row-gap: 25px;
       column-gap: 44px;
+
+      @media (max-width: 1000px) {
+        order: 2;
+      }
+
+      @media (max-width: 6755px) {
+        margin-bottom: 35px;
+      }
     }
 
     &__submit {
@@ -43,6 +57,16 @@
         border: none;
         margin-right: 165px;
       }
+
+      @media (max-width: 1000px) {
+        order: 3;
+      }
+
+      @media (max-width: 675px) {
+        flex-direction: column;
+        align-items: start;
+        row-gap: 35px;
+      }
     }
 
     &__info {
@@ -50,6 +74,10 @@
       align-items: center;
       img {
         margin-right: 31px;
+
+        @media (max-width: 675px) {
+          margin-right: 27px;
+        }
       }
 
       p {
@@ -58,6 +86,10 @@
         line-height: 22px;
         color: #000;
         max-width: 430px;
+
+        @media (max-width: 675px) {
+          font-size: 14px;
+        }
       }
     }
 
@@ -65,6 +97,15 @@
       position: absolute;
       top: -100px;
       right: 58px;
+
+      @media (max-width: 1000px) {
+        position: inherit;
+        order: 1;
+        top: inherit;
+        right: inherit;
+        max-width: 115px;
+        margin-bottom: 25px;
+      }
     }
   }
   &__inputContainer {
@@ -91,5 +132,10 @@
       font-size: 15px;
       color: #000;
     }
+
+    @media (max-width: 675px) {
+      margin-bottom: 0;
+      max-width: none;
+    }
   }
 }