fix: hero cropping issue (#6315)

* fix: hero cropping issue * fix: hide deriv-go-qr in mobile * fix: padding top to market pages with old layout * fix: padding top to crypto layout
binary-com · Dec 21, 2023 · 3469914 · 3469914 · vercel · Dec 21, 2023
1 parent 6c51262
commit 3469914
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 20 deletions.
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
@@ -50,7 +50,7 @@ export type ModalPayloadType = {
 }
 
 const Main = styled.main<MainType>`
-    padding-top: ${({ padding_top }) => (padding_top && `${padding_top}rem`) || '0rem'};
+    padding-top: ${({ padding_top }) => (padding_top && `${padding_top}rem`) || '8rem'};
     background: var(--color-white);
     height: 100%;
     position: relative;

diff --git a/src/features/components/templates/footer/banner-and-awards.tsx b/src/features/components/templates/footer/banner-and-awards.tsx
@@ -28,18 +28,19 @@ export const DerivGoBannerAndAwards = () => {
                                 <Localize translate_text="_t_Trade multipliers on our mobile app._t_" />
                             </Text>
                         </div>
-
-                        <div className="flex items-center gap-gap-md rounded-[8px] border-solid border-xs border-opacity-black-100 p-general-sm max-sm:hidden">
-                            <StaticImage
-                                src="../../../../images/common/migration/footer/deriv-go-qr.png"
-                                alt={localize('_t_download deriv-go_t_')}
-                                height={64}
-                                width={64}
-                                placeholder="none"
-                            />
-                            <CaptionText className="text-typography-default">
-                                <Localize translate_text="_t_Scan to download_t_" />
-                            </CaptionText>
+                        <div className="block max-sm:hidden">
+                            <div className="flex items-center gap-gap-md rounded-[8px] border-solid border-xs border-opacity-black-100 p-general-sm">
+                                <StaticImage
+                                    src="../../../../images/common/migration/footer/deriv-go-qr.png"
+                                    alt={localize('_t_download deriv-go_t_')}
+                                    height={64}
+                                    width={64}
+                                    placeholder="none"
+                                />
+                                <CaptionText className="text-typography-default">
+                                    <Localize translate_text="_t_Scan to download_t_" />
+                                </CaptionText>
+                            </div>
                         </div>
                     </div>
                     <DownloadBadges />

diff --git a/src/pages/markets/basket-indices/index.tsx b/src/pages/markets/basket-indices/index.tsx
@@ -10,7 +10,7 @@ import { SEO } from 'components/containers'
 import { TGatsbyHead } from 'features/types'
 
 const BasketPage = () => (
-    <Layout type="noNav">
+    <Layout type="noNav" padding_top="0">
         <DerivedFXHero
             title="_t_Derived_t_"
             description="_t_Trade on asset prices derived from real-world or simulated markets. Manage your exposure by selecting the volatility level to suit your risk appetite. Choose from our 24/7 synthetics, derived FX, and baskets._t_"

diff --git a/src/pages/markets/commodities/index.tsx b/src/pages/markets/commodities/index.tsx
@@ -17,7 +17,7 @@ const CommoditiesPage = () => {
         : '_t_Trade popular assets in the commodities market such as silver, gold, oil, and more without owning the underlying asset. Speculate on the price movements and benefit from our competitive spreads._t_'
 
     return (
-        <Layout type="noNav">
+        <Layout type="noNav" padding_top="0">
             <DerivedFXHero
                 title="_t_Commodities_t_"
                 description={hero_description}

diff --git a/src/pages/markets/cryptocurrencies/index.tsx b/src/pages/markets/cryptocurrencies/index.tsx
@@ -10,7 +10,7 @@ import { TGatsbyHead } from 'features/types'
 
 const CryptocurrenciesPage = () => {
     return (
-        <Layout type="noNav">
+        <Layout type="noNav" padding_top="0">
             <DerivedFXHero
                 title="_t_Cryptocurrencies_t_"
                 description="_t_Take advantage of a highly liquid market with round-the-clock trading. Profit from correctly predicting the movement of the world's most popular cryptocurrencies._t_"

diff --git a/src/pages/markets/derived-fx/index.tsx b/src/pages/markets/derived-fx/index.tsx
@@ -18,7 +18,7 @@ const DerivedFxPage = () => {
         '_t_Trade on asset prices derived from real-world or simulated markets. Manage your exposure by selecting the volatility level to suit your risk appetite. Choose from our 24/7 synthetics, derived FX, and baskets._t_'
 
     return (
-        <Layout type="noNav">
+        <Layout type="noNav" padding_top="0">
             <DerivedFXHero
                 title="_t_Derived_t_"
                 description={is_eu ? description_eu : description_row}

diff --git a/src/pages/markets/forex/index.tsx b/src/pages/markets/forex/index.tsx
@@ -10,7 +10,7 @@ import { TGatsbyHead } from 'features/types'
 
 const ForexPage = () => {
     return (
-        <Layout type="noNav">
+        <Layout type="noNav" padding_top="0">
             <DerivedFXHero
                 title="_t_Forex_t_"
                 description="_t_Benefit from round-the-clock trading hours (Monday to Friday), high liquidity, low barriers to entry, a wide range of offerings, and opportunities to trade on world events._t_"

diff --git a/src/pages/markets/stock/index.tsx b/src/pages/markets/stock/index.tsx
@@ -10,7 +10,7 @@ import { TGatsbyHead } from 'features/types'
 
 const StocksAndIndicesPage = () => {
     return (
-        <Layout type="noNav">
+        <Layout type="noNav" padding_top="0">
             <DerivedFXHero
                 title="_t_Stocks & indices_t_"
                 description="_t_Trade global stocks of your favourite household brands and international stock market indices on Deriv. Expand your trading opportunities with access to a wide range of stocks and indices at competitive prices, and the convenience to trade indices beyond standard market hours._t_"

diff --git a/src/pages/markets/synthetic/index.tsx b/src/pages/markets/synthetic/index.tsx
@@ -21,7 +21,7 @@ const Markets = () => {
         '_t_Trade on asset prices derived from real-world or simulated markets. Manage your exposure by selecting the volatility level to suit your risk appetite. Choose from our 24/7 synthetics, derived FX, and baskets._t_'
 
     return (
-        <Layout type="noNav">
+        <Layout type="noNav" padding_top="0">
             <DerivedFXHero
                 title="_t_Derived indices_t_"
                 description={is_eu ? description_eu : description_row}