From 8c702214bb572bc91e95231df643ead72da92f69 Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com> Date: Thu, 6 Jun 2024 19:15:43 +0400 Subject: [PATCH] fix: add title (#104) --- .../FullPageMobileWrapper.scss | 2 +- .../screens/Advertiser/Advertiser.scss | 4 +-- .../screens/BuySellTable/BuySellTable.scss | 2 +- src/pages/my-ads/screens/MyAds/MyAds.tsx | 2 +- .../components/ChatMessages/ChatMessages.scss | 2 +- .../screens/OrderDetails/OrderDetails.scss | 4 +-- .../OrdersChatSection/OrdersChatSection.scss | 4 +-- .../OrdersChatSection/OrdersChatSection.tsx | 2 +- src/routes/AppContent/index.scss | 28 +++++++++++-------- src/routes/AppContent/index.tsx | 16 +++++++++-- 10 files changed, 41 insertions(+), 25 deletions(-) diff --git a/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss index 3a9238c2..992c8670 100644 --- 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 index 0ff92f65..2f3a7db7 100644 --- 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 index 51441a5d..2eea2b01 100644 --- 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 index bbba4c90..98a26151 100644 --- 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 ; return ( -
+
{isAdvertiserBarred && }
diff --git a/src/pages/orders/components/ChatMessages/ChatMessages.scss b/src/pages/orders/components/ChatMessages/ChatMessages.scss index be28e170..28ea7af5 100644 --- 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 index e45c3cae..f4cdcde4 100644 --- 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 index 224297a4..00c2464d 100644 --- 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 index 0f76119c..0b5ceece 100644 --- 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 ( -
+
{isChatLoading ? ( ) : ( diff --git a/src/routes/AppContent/index.scss b/src/routes/AppContent/index.scss index a1375fae..183410db 100644 --- 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 index 01ecc539..d98b4c34 100644 --- 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 = () => { }} >
+ + Deriv P2P + {(isLoadingActiveAccount || !activeAccountData) && !isEndpointRoute ? ( ) : ( - <> +
{ ))} - +
)}