fix: add title (#104)

deriv-com · Jun 6, 2024 · 8c70221 · 8c70221
1 parent d994802
commit 8c70221
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 25 deletions.
diff --git a/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss
@@ -1,6 +1,6 @@
 .mobile-wrapper {
     @include mobile {
-        height: calc(100vh - 4rem);
+        height: calc(100vh - 8rem);
         width: 100vw;
         border-radius: 0;
         display: grid;

diff --git a/src/pages/advertiser/screens/Advertiser/Advertiser.scss b/src/pages/advertiser/screens/Advertiser/Advertiser.scss
@@ -1,11 +1,11 @@
 .advertiser {
     position: absolute;
-    top: 8rem;
+    top: 12rem;
     background-color: #fff;
     width: 95.2rem;
 
     @include mobile {
-        top: 4rem;
+        top: 8rem;
         overflow: overlay;
         height: calc(100vh - 4rem);
         width: 100%;

diff --git a/src/pages/buy-sell/screens/BuySellTable/BuySellTable.scss b/src/pages/buy-sell/screens/BuySellTable/BuySellTable.scss
@@ -11,7 +11,7 @@
 
             @include mobile {
                 // stylelint-disable-next-line declaration-no-important
-                height: calc(100vh - 21rem) !important;
+                height: calc(100vh - 25rem) !important;
             }
         }
     }

diff --git a/src/pages/my-ads/screens/MyAds/MyAds.tsx b/src/pages/my-ads/screens/MyAds/MyAds.tsx
@@ -13,7 +13,7 @@ const MyAds = () => {
     if (!isPoaVerified || !isPoiVerified) return <Verification />;
 
     return (
-        <div className={clsx('flex flex-col', isMobile ? 'h-[calc(100vh-8rem)]' : 'h-full')}>
+        <div className={clsx('flex flex-col', isMobile ? 'h-[calc(100vh-12rem)]' : 'h-full')}>
             {isAdvertiserBarred && <TemporarilyBarredHint />}
             <MyAdsTable />
         </div>

diff --git a/src/pages/orders/components/ChatMessages/ChatMessages.scss b/src/pages/orders/components/ChatMessages/ChatMessages.scss
@@ -2,7 +2,7 @@
     background-color: #ffffff;
     margin-top: auto;
     margin-right: 0.8rem;
-    height: calc(70vh - 16rem);
+    height: calc(60vh - 16rem);
     overflow-y: auto;
 
     @include mobile {

diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.scss b/src/pages/orders/screens/OrderDetails/OrderDetails.scss
@@ -4,8 +4,8 @@
 
     @include mobile {
         position: absolute;
-        top: 4rem;
-        height: calc(100vh - 3.5rem);
+        top: 8rem;
+        height: calc(100vh - 8rem);
 
         & .mobile-wrapper {
             &__header {

diff --git a/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss b/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss
@@ -10,10 +10,10 @@
 
     &__full-page {
         position: absolute;
-        top: 5rem;
+        top: 8rem;
         left: 0;
         z-index: 1;
-        height: calc(100vh - 6rem);
+        height: calc(100vh - 9rem);
 
         & .mobile-wrapper {
             &__body {

diff --git a/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx b/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx
@@ -57,7 +57,7 @@ const OrdersChatSection = ({ isInactive, onReturn, otherUserDetails, ...sendBird
         );
     }
     return (
-        <div className='orders-chat-section flex flex-col justify-center items-center h-[70vh]'>
+        <div className='orders-chat-section flex flex-col justify-center items-center h-[60vh]'>
             {isChatLoading ? (
                 <Loader isFullScreen={false} />
             ) : (

diff --git a/src/routes/AppContent/index.scss b/src/routes/AppContent/index.scss
@@ -1,17 +1,19 @@
 .app-content {
-    overflow: hidden;
-    height: calc(100vh - 10rem);
+    &__body {
+        overflow: hidden;
+        height: calc(100vh - 10rem);
 
-    @include desktop {
-        max-width: 952px;
-        min-width: 672px;
-        margin: 2rem auto;
-        margin-bottom: 0;
-    }
+        @include desktop {
+            max-width: 952px;
+            min-width: 672px;
+            margin: 2rem auto 0;
+            margin-bottom: 0;
+        }
 
-    @include mobile {
-        width: 100vw;
-        height: 100vh;
+        @include mobile {
+            width: 100vw;
+            height: 100vh;
+        }
     }
 
     &__tabs {
@@ -29,4 +31,8 @@
             }
         }
     }
+
+    &__title {
+        border-bottom: 1px solid #f2f3f4;
+    }
 }
diff --git a/src/routes/AppContent/index.tsx b/src/routes/AppContent/index.tsx
@@ -4,7 +4,7 @@ import { BUY_SELL_URL } from '@/constants';
 import { api } from '@/hooks';
 import { AdvertiserInfoStateProvider } from '@/providers/AdvertiserInfoStateProvider';
 import { getCurrentRoute } from '@/utils';
-import { Loader, Tab, Tabs } from '@deriv-com/ui';
+import { Loader, Tab, Tabs, Text, useDevice } from '@deriv-com/ui';
 import Router from '../Router';
 import { routes } from '../routes-config';
 import './index.scss';
@@ -16,6 +16,7 @@ const tabRoutesConfiguration = routes.filter(
 const AppContent = () => {
     const history = useHistory();
     const location = useLocation();
+    const { isDesktop } = useDevice();
     const { data: activeAccountData, isLoading: isLoadingActiveAccount } = api.account.useActiveAccount();
 
     const getActiveTab = (pathname: string) => {
@@ -70,10 +71,19 @@ const AppContent = () => {
             }}
         >
             <div className='app-content'>
+                <Text
+                    align='center'
+                    as='div'
+                    className='app-content__title p-2'
+                    size={isDesktop ? 'xl' : 'lg'}
+                    weight='bold'
+                >
+                    Deriv P2P
+                </Text>
                 {(isLoadingActiveAccount || !activeAccountData) && !isEndpointRoute ? (
                     <Loader />
                 ) : (
-                    <>
+                    <div className='app-content__body'>
                         <Tabs
                             activeTab={activeTab}
                             className='app-content__tabs'
@@ -88,7 +98,7 @@ const AppContent = () => {
                             ))}
                         </Tabs>
                         <Router />
-                    </>
+                    </div>
                 )}
             </div>
         </AdvertiserInfoStateProvider>