feat(favorites-page): make adaptive 375-1920

src/components/cards/article-preview/article-preview.module.scss

@@ -46,6 +46,12 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      padding: 16px;
+    }
+  }
+
   &--news,
   &--fullPageNews {
     max-width: 1208px;
@@ -79,6 +85,10 @@ $border: 1px solid
       row-gap: 16px;
     }
   }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    row-gap: 12px;
+  }
 }
 
 .imageWrapper {
@@ -157,6 +167,30 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-large - 1px)) {
+      height: calc-fluid-element(
+        180,
+        320,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+    }
+
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      > button {
+        &:last-child {
+          top: 7px;
+          right: 7px;
+        }
+      }
+    }
+
+    @media screen and (max-width: $media-desktop-small) {
+      height: 180px;
+    }
+  }
+
   &--fullPageNews,
   &--news {
     height: 292px;
@@ -243,6 +277,12 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      min-height: 148px;
+    }
+  }
+
   &--fullPageNews,
   &--news {
     min-height: 243px;
@@ -281,6 +321,15 @@ $border: 1px solid
   @media screen and (max-width: calc($media-tablet-small - 1px)) {
     font-size: $font-size-text-medium;
   }
+
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      font-size: $font-size-text-medium;
+      font-weight: 600;
+      line-height: $font-line-height-text-medium;
+      letter-spacing: $font-letter-spacing-main;
+    }
+  }
 }
 
 .text {
@@ -346,6 +395,15 @@ $border: 1px solid
     margin-top: 16px;
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      height: 64px;
+      font-size: $font-size-text-small;
+      line-height: $font-line-height-text-small;
+      letter-spacing: $font-letter-spacing-main;
+    }
+  }
+
   &--fullPageArticle {
     @media screen and (max-width: $media-tablet-large) {
       height: 48px;

src/components/cards/article-preview/article-preview.tsx

@@ -25,7 +25,13 @@ interface ICardArticlePreviewProps {
     } | null;
     views_count: number;
   };
-  type: 'media' | 'news' | 'fullPageArticle' | 'fullPageNews' | 'default';
+  type:
+    | 'media'
+    | 'news'
+    | 'favorites'
+    | 'fullPageArticle'
+    | 'fullPageNews'
+    | 'default';
   hasFavoriteButton?: boolean;
   extraClass?: string;
   route: string;
@@ -84,7 +90,14 @@ const CardArticlePreview: FC<ICardArticlePreviewProps> = ({
               )}
             >
               <div className={styles.title}>
-                <h3 className={styles.heading}>{title}</h3>
+                <h3
+                  className={classNames(
+                    styles.heading,
+                    styles[`heading--${type}`]
+                  )}
+                >
+                  {title}
+                </h3>
                 <p className={classNames(styles.text, styles[`text--${type}`])}>
                   {converMdToHTML(annotation, true)}
                 </p>

src/components/sidebar/sidebar.module.scss

@@ -85,19 +85,16 @@
     letter-spacing: $font-letter-spacing-main;
     padding-bottom: 16px;
 
-    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    @media screen and (max-width: $media-tablet-large) {
+      min-width: 100px;
+      padding-bottom: 0;
+      text-align: center;
       font-size: calc-fluid-element(
         calc($font-size-text-small-extra-extra * 10),
         calc($font-size-heading-3 * 10),
         $media-tablet-small,
         $media-desktop-small
       );
-    }
-
-    @media screen and (max-width: $media-tablet-large) {
-      min-width: 100px;
-      padding-bottom: 0;
-      text-align: center;
       font-weight: 500;
       letter-spacing: $font-letter-spacing-tablet;
     }

src/components/user-profile/components/personal-data/personal-data.module.scss

@@ -14,7 +14,6 @@
 
     > button {
       max-width: 224px;
-      min-width: max-content;
     }
 
     @media screen and (max-width: $media-tablet-large) {
@@ -26,7 +25,9 @@
     @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
       padding: 0;
       border: none;
+    }
 
+    @media screen and (max-width: calc($media-mobile-small - 1px)) {
       > button {
         max-width: 100%;
         width: 100%;

src/pages/creating-an-article/creating-an-article.tsx

@@ -2,14 +2,12 @@ import { ChangeEvent, useEffect, useState } from 'react';
 import { nanoid } from 'nanoid';
 import classNames from 'classnames';
 import { useWindowDimensions } from 'hooks/useWindowDimensions';
-import { useToggleButtonVisible } from 'hooks/useToggleButtonVisible';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import TextArea from 'shared/text-area/text-area';
 import { FileInput } from 'shared/file-input/file-input';
 import Button from 'shared/buttons/button/button';
 import ButtonWithIconTwo from 'shared/buttons/button-with-icon-two/button-with-icon-two';
-import { ButtonTopNavigation } from 'components/buttons/button-top-navigation/button-top-navigation';
 import { Icon } from 'shared/icons';
 import {
   schemaArticleTitle,
@@ -38,23 +36,12 @@ export const CreatingAnArticlePage = () => {
 
   const inputMinHeight = isSmallScreenDevice ? 48 : 64;
 
-  const { isButtonToTopVisible, toggleButtonVisible } =
-    useToggleButtonVisible();
-
   const [response, setResponse] = useState<undefined | boolean>(undefined);
   const [selectedImage, setSelectedImage] = useState<null | Blob>(null);
   const [selectedImagePreview, setSelectedImagePreview] = useState('');
   const [hasSelectedImageSizeError, setHasSelectedImageSizeError] =
     useState(false);
 
-  useEffect(() => {
-    window.addEventListener('scroll', toggleButtonVisible, false);
-
-    return () => {
-      window.removeEventListener('scroll', toggleButtonVisible, false);
-    };
-  }, []); // eslint-disable-line
-
   useEffect(() => {
     if (!selectedImage) {
       return setSelectedImagePreview('');
@@ -338,7 +325,6 @@ export const CreatingAnArticlePage = () => {
       <div className={styles.wrapper}>
         <h3 className={styles.heading}>Публикация статьи</h3>
         {renderContent()}
-        {isSmallScreenDevice && isButtonToTopVisible && <ButtonTopNavigation />}
       </div>
     </section>
   );

src/pages/favorites/favorites.module.scss

@@ -1,9 +1,19 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/functions';
 
 .section {
   width: 100%;
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    width: 92.45%;
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    width: 100%;
+  }
 }
 
 .emptyGallery {
@@ -14,22 +24,104 @@
 .heading {
   @extend %heading-size-medium;
   margin-bottom: 48px;
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    font-size: calc-fluid-element(
+      calc($font-size-heading-3 * 10),
+      calc($font-size-heading-2 * 10),
+      $media-tablet-small,
+      $media-desktop-small
+    );
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    margin-bottom: 32px;
+    font-weight: 700;
+    line-height: $font-line-height-heading-3;
+    letter-spacing: $font-letter-spacing-main;
+  }
+
+  @media screen and (max-width: $media-tablet-small) {
+    font-size: $font-size-heading-3;
+  }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    margin-bottom: 24px;
+  }
 }
 
 .gallery {
   display: grid;
   grid-template-columns: repeat(auto-fill, 438px);
   justify-content: space-around;
   gap: 24px;
+
+  @media screen and (max-width: calc($media-desktop-large - 1px)) {
+    grid-template-columns: repeat(
+      auto-fill,
+      calc-fluid-element(
+        349px,
+        438px,
+        $media-desktop-small,
+        $media-desktop-large
+      )
+    );
+  }
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    justify-content: space-between;
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    grid-template-columns: repeat(auto-fill, 348px);
+  }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    grid-template-columns: repeat(auto-fill, 335px);
+  }
+}
+
+.card {
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    padding: 16px;
+  }
 }
 
 .info {
-  margin-top: 56px;
+  max-width: 900px;
   @extend %text-size-large;
   color: $color-neutral-500;
 
   > p:nth-child(2) {
     margin-top: 40px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      max-width: 67%;
+      margin-top: 24px;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      max-width: 100%;
+      margin-top: 20px;
+    }
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    font-size: calc-fluid-element(
+      calc($font-size-text-medium * 10),
+      calc($font-size-text-large * 10),
+      $media-tablet-small,
+      $media-desktop-small
+    );
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    line-height: $font-line-height-text-medium;
+    letter-spacing: $font-letter-spacing-main;
+  }
+
+  @media screen and (max-width: $media-tablet-small) {
+    font-size: $font-size-text-medium;
   }
 }
 
@@ -38,6 +130,14 @@
   align-items: center;
   column-gap: 32px;
   margin: 32px 0 56px;
+
+  @media screen and (max-width: $media-tablet-large) {
+    margin: 20px 0 24px;
+  }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    margin-top: 17px;
+  }
 }
 
 .bookmarkIcon {
@@ -59,3 +159,9 @@
     }
   }
 }
+
+.button {
+  @media screen and (max-width: $media-tablet-large) {
+    min-width: 335px;
+  }
+}