Merge pull request #121 from apuc/tracker-tasks

Tracker tasks
2023-08-07 15:53:59 +03:00 · 2023-08-07 15:53:59 +03:00 · 3908b139bf
commit 3908b139bf
parent 4c9e87eb0b 03071a7f91
13 changed files with 572 additions and 49 deletions
--- 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;
+    }
  }
 }
--- 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 {
--- 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;
        }
--- a/src/components/ProjectTiket/projectTiket.scss
+++ b/src/components/ProjectTiket/projectTiket.scss
@ -21,10 +21,6 @@
    width: 100%;
  }

-  @media (max-width: 430px) {
-    padding: 8px 13px 8px;
-  }
-
  a {
    font-weight: 700;
    font-size: 18px;
@ -47,10 +43,6 @@
    align-items: center;
    position: relative;

-    @media (max-width: 430px) {
-      justify-content: space-between;
-    }
-
    p {
      color: #6f6f6f;
      font-weight: 500;
@ -90,10 +82,6 @@
      color: #6f6f6f;
      right: 0;
      top: -35%;
-
-      @media (max-width: 430px) {
-        display: none;
-      }
    }
  }
 }
--- a/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx
+++ b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx
@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+
+import { moveProjectTask } from "@redux/projectsTrackerSlice";
+
+import arrowDown from "assets/icons/arrows/selectArrow.png";
+
+import "./trackerSelectColumn.scss";
+
+export const TrackerSelectColumn = ({ columns, task, currentColumn }) => {
+  const dispatch = useDispatch();
+  const [openSelect, setOpenSelect] = useState(false);
+  return (
+    <div
+      className="trackerSelectColumn"
+      onClick={() => setOpenSelect(!openSelect)}
+    >
+      <p>Выберите колонку</p>
+      <img className={openSelect ? "open" : ""} src={arrowDown} alt="arrow" />
+      {openSelect && (
+        <div className="trackerSelectColumn__dropDown">
+          {columns.map((column) => {
+            return (
+              <p
+                key={column.id}
+                onClick={() => {
+                  dispatch(
+                    moveProjectTask({
+                      startWrapperIndex: { index: currentColumn, task },
+                      columnId: column.id,
+                    })
+                  );
+                }}
+              >
+                {column.title}
+              </p>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TrackerSelectColumn;
--- a/src/components/TrackerSelectColumn/trackerSelectColumn.scss
+++ b/src/components/TrackerSelectColumn/trackerSelectColumn.scss
@ -0,0 +1,51 @@
+.trackerSelectColumn {
+  display: none;
+
+  @media (max-width: 900px) {
+    display: flex;
+    width: 100%;
+    margin: 10px 0;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2px 6px;
+    cursor: pointer;
+    border: 1px solid #e3e2e2;;
+    border-radius: 8px;
+    position: relative;
+
+    p {
+      color: #252c32;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+    }
+
+    img {
+      transition: all 0.3s ease;
+    }
+
+    .open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__dropDown {
+    position: absolute;
+    top: -110px;
+    background: white;
+    border-radius: 8px;
+    padding: 10px 10px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    width: 100%;
+    z-index: 100;
+    border: 1px solid #c7c7c7;
+    left: 0;
+
+    p {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@ -35,6 +35,7 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
+import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";

 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
@ -193,6 +194,9 @@ export const ProjectTracker = () => {
  }

  function openTicket(e, task) {
+    if (window.innerWidth < 900) {
+      return;
+    }
    setSelectedTicket(task);
    setModalActiveTicket(true);
  }
@ -298,7 +302,7 @@ export const ProjectTracker = () => {
        <div className="tracker__tabs__head">
          <Link
            to="/profile/tracker"
-            className="tab active-tab tab"
+            className="tab active-tab tab projectsTab"
            onClick={() => dispatch(setToggleTab(1))}
          >
            <img src={project} alt="img" />
@ -306,7 +310,7 @@ export const ProjectTracker = () => {
          </Link>
          <Link
            to="/profile/tracker"
-            className="tab"
+            className="tab tasksTab"
            onClick={() => dispatch(setToggleTab(2))}
          >
            <img src={tasks} alt="img" />
@ -314,7 +318,7 @@ export const ProjectTracker = () => {
          </Link>
          <Link
            to="/profile/tracker"
-            className="tab"
+            className="tab archiveTab"
            onClick={() => dispatch(setToggleTab(3))}
          >
            <img src={archive} alt="img" />
@ -682,6 +686,13 @@ export const ProjectTracker = () => {
                                  </span>
                                </div>
                              </div>
+                              <TrackerSelectColumn
+                                columns={projectBoard.columns.filter(
+                                  (item) => item.id !== column.id
+                                )}
+                                currentColumn={column.id}
+                                task={task}
+                              />
                            </div>
                          );
                        })}
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@ -44,6 +44,7 @@ export const Tracker = () => {
  const [allCompletedTasks, setAllCompletedTasks] = useState([]);

  const [modalCreateProject, setModalCreateProject] = useState(false);
+  const tabs = ["projectsTab", "tasksTab", "archiveTab"];

  useEffect(() => {
    setLoader(true);
@ -135,28 +136,32 @@ export const Tracker = () => {
      <div className="tracker__tabs">
        <div className="tracker__tabs__head">
          <div
-            className={tab === 1 ? "tab active-tab" : "tab"}
+            className={
+              tab === 1 ? "tab active-tab projectsTab" : "tab projectsTab"
+            }
            onClick={() => toggleTabs(1)}
          >
            <img src={project} alt="img" />
            <p>Проекты </p>
          </div>
          <div
-            className={tab === 2 ? "tab active-tab" : "tab"}
+            className={tab === 2 ? "tab active-tab tasksTab" : "tab tasksTab"}
            onClick={() => toggleTabs(2)}
          >
            <img src={tasks} alt="img" />
            <p>Все мои задачи</p>
          </div>
          <div
-            className={tab === 3 ? "tab active-tab" : "tab"}
+            className={
+              tab === 3 ? "tab active-tab archiveTab" : "tab archiveTab"
+            }
            onClick={() => toggleTabs(3)}
          >
            <img src={archive} alt="img" />
            <p>Архив</p>
          </div>
        </div>
-        <div className="tracker__tabs__content">
+        <div className={`tracker__tabs__content ${tabs[tab - 1]}`}>
          <div
            className={
              tab === 1
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@ -46,6 +46,15 @@
      margin: 0 auto;
      position: relative;
      height: 60px;
+
+      @media (max-width: 650px) {
+        padding: 0 15px;
+        background: none;
+        justify-content: space-between;
+        position: relative;
+        top: 15px;
+        height: auto;
+      }
    }

    .tab {
@ -79,6 +88,19 @@
          white-space: nowrap;
        }
      }
+
+      @media (max-width: 650px) {
+        border-radius: 10px;
+        flex-direction: column;
+        padding: 20px;
+        align-items: start;
+        row-gap: 20px;
+        height: auto !important;
+
+        p {
+          margin-left: 0;
+        }
+      }
    }

    .active-tab {
@ -98,6 +120,12 @@
        filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg)
          brightness(118%) contrast(119%);
      }
+
+      @media (max-width: 650px) {
+        border-radius: 10px;
+        align-items: start;
+        top: 0;
+      }
    }

    &__content {
@ -119,11 +147,12 @@
        align-items: center;

        @media (max-width: 785px) {
+          row-gap: 25px;
          justify-content: center;
        }

        @media (max-width: 460px) {
-          padding: 15px;
+          padding: 0 15px;
        }

        .no-projects {
@ -172,17 +201,17 @@
            font-weight: 700;
            font-size: 18px;
          }
+
+          @media (max-width: 650px) {
+            height: 40px;
+            font-size: 12px;
+          }
        }

        .create-newProject {
          display: flex;
          align-items: center;

-          @media (max-width: 450px) {
-            flex-direction: column;
-            row-gap: 15px;
-          }
-
          p {
            margin-left: 32px;
            font-weight: 400;
@ -192,8 +221,6 @@

            @media (max-width: 450px) {
              max-width: none;
-              margin-left: 0;
-              text-align: center;
            }
          }
        }
@ -204,6 +231,10 @@
        background: #ffffff;
        border-radius: 12px;
        flex-direction: column;
+
+        @media (max-width: 650px) {
+          border-radius: 0;
+        }
      }

      .tasks {
@ -211,6 +242,14 @@
          border-bottom: 1px solid #dde2e4;
          padding: 0 35px 15px;

+          @media (max-width: 1000px) {
+            padding: 0 15px 15px;
+          }
+
+          @media (max-width: 650px) {
+            background-color: #DFF1FF;
+          }
+
          &__wrapper {
            display: flex;
            max-width: 1280px;
@ -223,6 +262,13 @@
            &__fullScreen {
              max-width: 1160px;
            }
+
+            @media (max-width: 1350px) {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 10px;
+              padding: 0px;
+            }
          }

          h5 {
@ -236,6 +282,11 @@
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
+
+            @media (max-width: 1350px) {
+              width: 100%;
+              max-width: none;
+            }
          }

          &__add {
@ -260,6 +311,14 @@
              display: flex;
              align-items: center;
            }
+
+            @media (max-width: 1350px) {
+              margin-left: 0;
+            }
+
+            @media (max-width: 700px) {
+              width: 100%;
+            }
          }

          &__persons {
@ -267,6 +326,14 @@
            display: flex;
            align-items: center;

+            @media (max-width: 700px) {
+              right: -15px;
+            }
+
+            @media (max-width: 465px) {
+              width: 100%;
+            }
+
            .projectPersons {
              display: flex;
              position: relative;
@ -469,6 +536,10 @@
            display: flex;
            align-items: center;

+            @media (max-width: 650px) {
+              margin: 0;
+            }
+
            span {
              color: #252c32;
              font-weight: 400;
@ -506,6 +577,16 @@
            max-width: 220px;
            width: 100%;

+            @media (max-width: 915px) {
+              margin-right: 0;
+              width: 100%;
+              max-width: none;
+            }
+
+            @media (max-width: 650px) {
+              border-color: gray;
+            }
+
            &Selected {
              display: flex;
              align-items: center;
@ -619,6 +700,10 @@
                font-weight: 500;
              }
            }
+
+            @media (max-width: 1150px) {
+              display: none;
+            }
          }
        }

@ -646,6 +731,13 @@
            background: #c5c0c6;
            border-radius: 20px;
          }
+
+          @media (max-width: 900px) {
+            padding: 15px;
+            flex-direction: column;
+            row-gap: 25px;
+            transform: none;
+          }
        }

        &__board {
@ -663,10 +755,15 @@
          height: fit-content;
          position: relative;
          transition: all 0.3s ease;
-          //max-height: 500px;
-          //overflow-y: auto;
          transform: scaleY(-1);

+          @media (max-width: 900px) {
+            min-width: auto;
+            width: 100%;
+            max-width: none;
+            transform: scaleX(1);
+          }
+
          &::-webkit-scrollbar {
            width: 3px;
            border-radius: 10px;
@ -712,6 +809,14 @@
              transition: 0.3s;
            }

+            @media (max-width: 900px) {
+              width: 100%;
+
+              &:hover {
+                transform: none;
+              }
+            }
+
            &__hide {
              opacity: 0;
            }
@ -1104,13 +1209,22 @@
              &__info {
                display: flex;
                flex-direction: column;
-                max-width: 730px;
+                max-width: 535px;
+
+                @media (max-width: 820px) {
+                  text-align: center;
+                  max-width: none;
+                }

                h5 {
                  font-weight: 700;
                  font-size: 20px;
                  line-height: 24px;
                  margin-bottom: 0;
+
+                  @media (max-width: 820px) {
+                    font-size: 19px;
+                  }
                }

                p {
@ -1130,6 +1244,10 @@
                img {
                  width: 40px;
                }
+
+                @media (max-width: 820px) {
+                  justify-content: center;
+                }
              }

              &__project {
@ -1146,6 +1264,19 @@
                  font-size: 14px;
                }
              }
+
+              @media (max-width: 820px) {
+                row-gap: 10px;
+                flex-direction: column;
+              }
+
+              @media (max-width: 650px) {
+                background-color: white;
+              }
+
+              @media (max-width: 450px) {
+                padding: 12px 15px;
+              }
            }
          }
        }
@ -1158,7 +1289,7 @@
        display: flex;
        column-gap: 28px;

-        @media (max-width: 880px) {
+        @media (max-width: 1100px) {
          flex-direction: column;
          row-gap: 20px;
        }
@ -1191,6 +1322,10 @@
                font-size: 15px;
              }
            }
+
+            @media (max-width: 450px) {
+              flex-wrap: wrap;
+            }
          }

          &__tasksWrapper {
@ -1234,7 +1369,6 @@
            background: #f1f1f1;
            border-radius: 12px;
            padding: 12px 42px 7px 32px;
-            transition: 0.4s;

            &:hover {
              transform: scale(0.99);
@ -1294,6 +1428,15 @@
                }
              }
            }
+
+            @media (max-width: 740px) {
+              flex-direction: column;
+              padding: 10px 20px;
+            }
+
+            @media (max-width: 650px) {
+              background-color: white;
+            }
          }

          &__tasks {
@ -1303,7 +1446,7 @@
            width: 65%;
            overflow: hidden;

-            @media (max-width: 880px) {
+            @media (max-width: 1100px) {
              width: 100%;
            }

@ -1331,6 +1474,11 @@
                max-width: 150px;
              }

+              @media (max-width: 450px) {
+                margin-left: 0;
+                max-width: none;
+              }
+
              input {
                width: 100%;
                padding-left: 10px;
@ -1356,8 +1504,9 @@
            max-height: 450px;
            padding-right: 15px;

-            @media (max-width: 880px) {
+            @media (max-width: 1100px) {
              width: 100%;
+              min-height: auto;
            }
          }

@ -1373,9 +1522,38 @@
              color: #111112;
              text-align: center;
            }
+
+            @media (max-width: 650px) {
+              background-color: white;
+            }
          }
        }
      }
    }
+
+    @media (max-width: 650px) {
+
+      &__content {
+        padding: 28px 0 0;
+        background-color: #DFF1FF;
+
+        .project {
+          background-color: white;
+          max-width: 394px;
+        }
+      }
+
+      .projectsTab {
+        background-color: #DFF1FF;
+      }
+
+      .tasksTab {
+        background-color: #E8FFEB;
+      }
+
+      .archiveTab {
+        background-color: #FFECEF;
+      }
+    }
  }
 }
--- 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;
+    }
  }
 }
--- 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;
+        }
      }
    }
  }
--- 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="Повторите пароль" />
--- 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;
+    }
  }
 }