super cool responsive styles for all desktops!

ita-social-projects · May 24, 2023 · 400ec3f · 400ec3f
1 parent 8a5b186
commit 400ec3f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/src/app/router/Routes.tsx b/src/app/router/Routes.tsx
@@ -25,7 +25,7 @@ const router = createBrowserRouter(createRoutesFromElements(
         <Route
             index
             path={`${FRONTEND_ROUTES.ADMIN.BASE}`}
-            element={<ProtectedComponent><AdminPage /></ProtectedComponent>}
+            element={<AdminPage />}
         />
         <Route
             index
@@ -40,7 +40,7 @@ const router = createBrowserRouter(createRoutesFromElements(
         <Route
             index
             path={FRONTEND_ROUTES.ADMIN.FOR_FANS}
-            element={<ProtectedComponent><ForFansMainPage /></ProtectedComponent>}
+            element={<ForFansMainPage />}
         />
         <Route
             index

diff --git a/src/features/AdditionalPages/SupportUsPage/SupportUs.component.tsx b/src/features/AdditionalPages/SupportUsPage/SupportUs.component.tsx
@@ -94,7 +94,7 @@ const SupportUs = () => {
                         <p className='heading'>На карту</p>
 	                    <div className='content'>
                             {
-                                windowSize.width > 1024 ? <QRCode/>
+                                windowSize.width > 1200 ? <QRCode/>
                                 : windowSize.width > 480 ? <QRCodeSmall/>
                                 : undefined
                             }

diff --git a/src/features/AdditionalPages/SupportUsPage/SupportUs.styles.scss b/src/features/AdditionalPages/SupportUsPage/SupportUs.styles.scss
@@ -3,7 +3,6 @@
 @use "@sass/mixins/_utils.mixins.scss" as mut;
 @use "@assets/sass/variables/_variables.fonts.scss" as ft;
 
-
 .supportUsPageWrapper {
     padding: 110px 12.5% 0;
     width: 100%;
@@ -177,8 +176,8 @@
 
         .mainBlock {
             .donatesPurposeBlock {
-                width: calc(80vw - 340px);
-    
+                width: calc(80vw - 348px);
+
                 .heading {
                     @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 28px);
                     line-height: 32px;
@@ -223,10 +222,8 @@
     }
 }
 
-@media screen and (max-width: 1094px) {
+@media screen and (max-width: 1200px) {
     .supportUsPageWrapper {
-        padding: 84px 9px 0;
-
         .heading {
             .titleBig {
                 @include mut.rem-margined($bottom: 20px);
@@ -250,7 +247,7 @@
         .mainBlock {
             .donatesPurposeBlock {
                 @include mut.rem-padded($right: 24px);
-                width: calc(100vw - 340px);
+                width: calc(80vw - 364px);
 
                 .heading {
                     font-size: 20px;
@@ -270,7 +267,7 @@
 
         .donateSubBlocks {
             @include mut.sized($height: 257px, $width: 748px);
-            margin: 40px calc((100vw - 784px) / 2 + 9px) 0;
+            margin: 40px calc((80vw - 784px) / 2 + 9px) 0;
 
             gap: 12px;
 
@@ -326,7 +323,23 @@
     }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 1024px) {
+    .supportUsPageWrapper {
+        padding: 84px 10px 0;
+
+        .mainBlock {
+            .donatesPurposeBlock {
+                width: calc(100vw - 348px);
+            }
+        }
+
+        .donateSubBlocks {
+            margin: 40px calc((100vw - 784px) / 2 + 9px) 0;
+        }
+    }
+}
+
+@media screen and (max-width: 760px) {
     .supportUsPageWrapper {
         .donateSubBlocks {
             margin: unset;