Merge pull request deriv-com#4 from utkarsha-deriv/utkarsha/tablet-vi…

…ew-self-exclusion Utkarsha/tablet view self exclusion
Dhruv-deriv · May 20, 2024 · 5b8039c · 5b8039c
2 parents 99d0ff3 + 4fe4d81
commit 5b8039c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/packages/account/src/Components/article/article.scss b/packages/account/src/Components/article/article.scss
@@ -5,15 +5,11 @@
     height: fit-content;
     border-radius: 8px;
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
         width: calc(100% - 3.2rem);
         margin: 1.6rem;
     }
 
-    @include tablet-up {
-        margin-left: 1.2rem;
-    }
-
     &__header {
         margin-bottom: 0.8rem;
     }

diff --git a/packages/account/src/Components/self-exclusion/self-exclusion-wrapper.tsx b/packages/account/src/Components/self-exclusion/self-exclusion-wrapper.tsx
@@ -4,9 +4,11 @@ import { isDesktop, isMobile } from '@deriv/shared';
 import { Div100vhContainer, ThemedScrollbars } from '@deriv/components';
 import SelfExclusionArticle from './self-exclusion-article';
 import SelfExclusionContext from './self-exclusion-context';
+import { useDevice } from '@deriv-com/ui';
 
 const SelfExclusionWrapper = ({ children }: { children?: React.ReactNode }) => {
     const { is_app_settings, is_wrapper_bypassed, state } = React.useContext(SelfExclusionContext);
+    const { isDesktop } = useDevice();
 
     // "is_wrapper_bypassed" is currently used for a <AppSettings> hosted <SelfExclusion>.
     // It only features the <SelfExclusionArticle> for mobile views, as the <AppSettings> footer
@@ -19,7 +21,7 @@ const SelfExclusionWrapper = ({ children }: { children?: React.ReactNode }) => {
                     'da-self-exclusion--app-settings': is_app_settings,
                 })}
             >
-                {isMobile() && <SelfExclusionArticle />}
+                {!isDesktop && <SelfExclusionArticle />}
                 {children}
             </section>
         );
@@ -30,14 +32,14 @@ const SelfExclusionWrapper = ({ children }: { children?: React.ReactNode }) => {
             className={classNames('da-self-exclusion__wrapper', {
                 'da-self-exclusion__wrapper--show-article': state?.show_article,
             })}
-            is_disabled={isDesktop()}
+            is_disabled={isDesktop}
             height_offset='80px'
         >
-            <ThemedScrollbars className='da-self-exclusion__scrollbars' is_bypassed={isMobile()}>
-                {isMobile() && <SelfExclusionArticle />}
+            <ThemedScrollbars className='da-self-exclusion__scrollbars' is_bypassed={!isDesktop}>
+                {!isDesktop && <SelfExclusionArticle />}
                 {children}
             </ThemedScrollbars>
-            {isDesktop() && <SelfExclusionArticle />}
+            {isDesktop && <SelfExclusionArticle />}
         </Div100vhContainer>
     );
 };

diff --git a/packages/account/src/Components/self-exclusion/self-exclusion.scss b/packages/account/src/Components/self-exclusion/self-exclusion.scss
@@ -23,15 +23,15 @@
     }
     &-article {
         &__content {
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin: 1.6rem;
             }
 
             &--is-in-modal {
                 max-width: 440px;
                 margin: 2.4rem;
 
-                @include mobile {
+                @include mobile-screen {
                     max-height: 480px;
                     margin: 1.6rem;
                 }
@@ -73,7 +73,7 @@
             }
 
             > :last-child {
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     padding-bottom: 2.4rem;
                 }
             }
@@ -110,17 +110,13 @@
             margin-top: 1.6rem;
             @include typeface(--paragraph-center-bold-red, none);
         }
-        @include mobile {
-            width: 300px;
-            height: 272px;
-        }
     }
     &__wrapper {
         display: flex;
         width: 100%;
         height: 100%;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             &:not(&--show-article) {
                 max-height: calc(100% - 72px);
             }
@@ -139,7 +135,7 @@
         justify-content: center;
         align-items: center;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             padding: 1.6rem;
         }
 
@@ -180,7 +176,7 @@
         margin-right: 1rem;
         height: 100%;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             margin: 1.6rem;
             padding-bottom: 1.6rem;
         }
@@ -221,10 +217,10 @@
             grid-template-columns: 1fr 1fr 1fr;
             grid-gap: 1.6rem;
 
-            @media (max-width: 1024px) {
-                grid-template-columns: 1fr;
+            @include tablet-screen {
+                grid-template-columns: 2fr 2fr;
             }
-            @include mobile {
+            @include mobile-screen {
                 grid-template-columns: 1fr;
             }
         }
@@ -245,6 +241,9 @@
         flex: 1;
     }
     &__button {
+        @include mobile-or-tablet-screen {
+            width: 100%;
+        }
         &-wrapper {
             position: sticky;
             bottom: 0;
@@ -259,9 +258,12 @@
             justify-content: flex-end;
             margin-top: 2.4rem;
 
-            @include mobile {
+            @include mobile-screen {
                 position: absolute;
             }
+            @include tablet-screen {
+                padding: 0;
+            }
         }
     }
     &__warning {