chore(pml-mobile): update mobile LaunchMarket page (#1234)

dydxprotocol · Oct 30, 2024 · ef79a7c · ef79a7c
1 parent ff38647
commit ef79a7c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/pages/LaunchMarket.tsx b/src/pages/LaunchMarket.tsx
@@ -42,10 +42,10 @@ const $Page = styled.div`
 
   @media ${breakpoints.tablet} {
     --stickyArea-topHeight: var(--page-header-height-mobile);
-    padding: 0 1rem 1rem;
+    padding: 0;
 
     > * {
-      max-width: calc(100vw - 2rem);
+      max-width: 100vw;
       width: 100%;
     }
   }
@@ -61,7 +61,7 @@ const $Content = styled.div`
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    margin: 0 auto;
+    margin: 0;
   }
 `;
 
@@ -75,6 +75,7 @@ const $FormContainer = styled.div`
   @media ${breakpoints.tablet} {
     width: 100%;
     min-width: unset;
+    border-radius: 0;
   }
 `;
 

diff --git a/src/pages/trade/TradeHeaderMobile.tsx b/src/pages/trade/TradeHeaderMobile.tsx
@@ -38,7 +38,7 @@ export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?:
       <img
         src={launchableAsset.logo}
         alt={launchableAsset.name}
-        tw="h-[2.5rem] w-[2.5rem] border-r-[50%]"
+        tw="h-[2.5rem] w-[2.5rem] rounded-[50%]"
       />
       <$Name>
         <h3>{launchableAsset.name}</h3>

diff --git a/src/views/charts/LaunchableMarketChart.tsx b/src/views/charts/LaunchableMarketChart.tsx
@@ -21,6 +21,7 @@ import {
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { LinkOutIcon } from '@/icons';
+import breakpoints from '@/styles/breakpoints';
 
 import { Details } from '@/components/Details';
 import { Icon, IconName } from '@/components/Icon';
@@ -265,7 +266,14 @@ export const LaunchableMarketChart = ({
   );
 };
 
-const $LaunchableMarketChartContainer = tw.div`flex h-fit w-[25rem] flex-col gap-1 rounded-[1rem] border-[length:--border-width] border-color-border p-1.5 [border-style:solid]`;
+const $LaunchableMarketChartContainer = styled.div`
+  ${tw`flex h-fit w-[25rem] flex-col gap-1 rounded-[1rem] border-[length:--border-width] border-color-border p-1.5 [border-style:solid]`}
+
+  @media ${breakpoints.tablet} {
+    ${tw`w-full`}
+    border: none;
+  }
+`;
 
 const $ChartContainerHeader = tw.div`flex flex-row items-center justify-between`;