feat(profile): remake adaptive due to new template

Medical-Information-Portal-Stethoscope · Oct 23, 2023 · 461d4a6 · 461d4a6
1 parent fb03d74
commit 461d4a6
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 44 deletions.
diff --git a/src/components/user-profile/components/password-changing/password-changing.module.scss b/src/components/user-profile/components/password-changing/password-changing.module.scss
@@ -21,52 +21,37 @@
 
   &_title {
     @extend %heading-size-small;
-
-    @media screen and (max-width: calc($media-desktop-small - 1px)) {
-      font-size: calc-fluid-element(
-        calc($font-size-text-large * 10),
-        calc($font-size-heading-3 * 10),
-        $media-tablet-small,
-        $media-desktop-small
-      );
-    }
-
-    @media screen and (max-width: $media-tablet-large) {
-      font-weight: 700;
-      line-height: $font-line-height-text-large;
-      letter-spacing: normal;
-    }
-
-    @media screen and (max-width: $media-tablet-small) {
-      font-size: $font-size-text-large;
-    }
   }
 
   &_inputs {
     margin: 32px 0 28px;
 
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      margin: 26px 0 20px;
+    }
+
     > div {
       &:not(:first-child) {
         margin-top: 15px;
+
+        @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+          margin-top: 8px;
+        }
       }
     }
 
     @media screen and (max-width: $media-tablet-large) {
-      margin-bottom: 25px;
+      margin-bottom: 22px;
     }
 
     @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
-      margin-top: 24px;
-      margin-bottom: 21px;
+      margin-top: 18px;
+      margin-bottom: 18px;
     }
   }
 
   &_button {
     width: 100%;
-
-    @media screen and (max-width: $media-tablet-large) {
-      max-width: 335px;
-    }
   }
 
   &_nav {

diff --git a/src/components/user-profile/components/password-changing/password-changing.tsx b/src/components/user-profile/components/password-changing/password-changing.tsx
@@ -10,7 +10,7 @@ import {
   schemaPassword,
   schemaCurrentPassword,
 } from 'utils/data/validation/yup-schema';
-import { tabletAlbumOrientation } from 'utils/constants';
+import { desktopMedium } from 'utils/constants';
 import styles from './password-changing.module.scss';
 
 interface IPasswordChangingProps {
@@ -24,7 +24,7 @@ export const PasswordChanging: FC<IPasswordChangingProps> = ({
     current_password: string[];
   }>(null);
 
-  const isSmallScreenDevice = useWindowDimensions() <= tabletAlbumOrientation;
+  const isMediumScreenDevice = useWindowDimensions() <= desktopMedium;
 
   const formik = useFormik({
     initialValues: {
@@ -101,7 +101,7 @@ export const PasswordChanging: FC<IPasswordChangingProps> = ({
           extraClass={styles.userProfile_button}
           type="submit"
           label="Сохранить новый пароль"
-          size={isSmallScreenDevice ? 'small' : 'medium'}
+          size={isMediumScreenDevice ? 'small' : 'medium'}
           hasSpinner
           spinnerSize="small"
           spinnerColor="white"

diff --git a/src/components/user-profile/components/personal-data/personal-data.module.scss b/src/components/user-profile/components/personal-data/personal-data.module.scss
@@ -40,31 +40,38 @@
 
     @media screen and (max-width: calc($media-desktop-small - 1px)) {
       font-size: calc-fluid-element(
-        calc($font-size-text-large * 10),
+        calc($font-size-text-medium * 10),
         calc($font-size-heading-3 * 10),
         $media-tablet-small,
         $media-desktop-small
       );
     }
 
-    @media screen and (max-width: $media-desktop-large) {
-      font-weight: 700;
-      letter-spacing: normal;
-    }
-
     @media screen and (max-width: calc($media-tablet-small - 1px)) {
-      font-size: $font-size-text-large;
+      font-size: $font-size-text-medium;
     }
   }
 
   &_inputs {
-    margin: 28px 0 7px;
+    margin: 28px 0 6px;
 
-    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
-      margin-bottom: 2px;
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      margin: 20px 0 3px;
+    }
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-bottom: 6px;
     }
 
     > div {
+      &:not(:first-child) {
+        margin-top: 5px;
+
+        @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+          margin-top: 0;
+        }
+      }
+
       > div {
         background-color: $color-neutral-100;
         border-color: $color-neutral-150;
@@ -83,10 +90,6 @@
           }
         }
       }
-
-      &:not(:first-child) {
-        margin-top: 4px;
-      }
     }
   }
 

diff --git a/src/components/user-profile/user-profile.module.scss b/src/components/user-profile/user-profile.module.scss
@@ -22,6 +22,10 @@
           column-gap: 7px;
         }
       }
+
+      @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+        max-width: 470px;
+      }
     }
 
     @media screen and (max-width: $media-tablet-large) {
@@ -117,6 +121,10 @@
     @media screen and (max-width: $media-tablet-large) {
       margin-top: 30px;
     }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      margin-top: 32px;
+    }
   }
 
   &_button_password {

diff --git a/src/shared/input/input.module.scss b/src/shared/input/input.module.scss
@@ -23,6 +23,11 @@
     @extend %text-size-medium;
     color: $color-neutral-700;
 
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      font-size: $font-size-text-small;
+      line-height: $font-line-height-text-small;
+    }
+
     &--disabled {
       color: $color-neutral-400;
     }
@@ -41,7 +46,7 @@
     &--medium {
       padding: 19px 12px;
 
-      @media screen and (max-width: $media-tablet-large) {
+      @media screen and (max-width: calc($media-desktop-medium - 1px)) {
         padding-top: 11px;
         padding-bottom: 11px;
       }