clean up

dydxprotocol · Oct 3, 2024 · 3d4e71a · 3d4e71a
1 parent 2d0a8d7
commit 3d4e71a
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 40 deletions.
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
@@ -424,6 +424,7 @@ const $StackedHeaderTopRow = styled.div<{ $withBorder: boolean; $withBlur: boole
 
 const $Content = styled.div`
   flex: 1;
+  min-height: 1px;
 
   ${layoutMixins.column}
 

diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
@@ -172,6 +172,7 @@ const $Root = styled(Root)<{
 
   /* Variants */
   --tabs-currentHeight: var(--tabs-height);
+
   @media ${breakpoints.tablet} {
     --tabs-currentHeight: var(--tabs-height-mobile);
   }

diff --git a/src/styles/layoutMixins.ts b/src/styles/layoutMixins.ts
@@ -44,6 +44,7 @@ const scrollAreaFade = css`
 
   /* Rules */
   position: relative;
+  overflow: hidden;
 
   &:before {
     content: '';

diff --git a/src/views/TradeBoxOrderView.tsx b/src/views/TradeBoxOrderView.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import { TradeInputField } from '@/constants/abacus';
 import { OnboardingState } from '@/constants/account';
@@ -36,8 +36,8 @@ export const TradeBoxOrderView = () => {
   return (
     <TradeSideTabs
       sharedContent={
-        <div tw="flex min-h-full flex-col gap-0.25">
-          <MarginAndLeverageButtons openInTradeBox />
+        <div tw="flex min-h-full flex-col">
+          <$MarginAndLeverageButtons openInTradeBox />
           <$OrderTypeTabs
             value={selectedTradeType}
             items={tradeTypeItems}
@@ -60,16 +60,16 @@ const $Container = styled.div`
   ${layoutMixins.scrollArea}
 `;
 
-const tabsStyle = css`
-  --trigger-active-underline-size: 2px;
-  overflow: hidden;
-  > header {
-    justify-content: space-around;
-  }
+const $MarginAndLeverageButtons = styled(MarginAndLeverageButtons)`
+  padding: 0.75rem 1rem;
+  box-shadow: inset 0 calc(-1 * var(--border-width)) var(--border-color);
 `;
 
 const $OrderTypeTabs = styled(Tabs)`
-  ${tabsStyle}
   --tabs-height: 2.125rem;
   --trigger-active-backgroundColor: var(--trigger-backgroundColor);
+
+  > header {
+    justify-content: space-around;
+  }
 ` as typeof Tabs;
diff --git a/src/views/TradeSideTabs.tsx b/src/views/TradeSideTabs.tsx
@@ -56,18 +56,9 @@ export const TradeSideTabs = ({ sharedContent }: { sharedContent: React.ReactNod
   );
 };
 
-const tabsStyle = css`
-  --trigger-active-underline-size: 2px;
-  overflow: hidden;
-  > header {
-    justify-content: space-around;
-  }
-`;
-
 const tradeSideTabsType = getSimpleStyledOutputType(Tabs, {} as { activeTab: OrderSide });
 
 const $TradeSideTabs = styled(Tabs)<{ activeTab: OrderSide }>`
-  ${tabsStyle}
   ${({ activeTab }) =>
     activeTab === OrderSide.BUY
       ? css`

diff --git a/src/views/dialogs/TradeDialog.tsx b/src/views/dialogs/TradeDialog.tsx
@@ -16,7 +16,6 @@ import { Ring } from '@/components/Ring';
 import { TradeForm } from '@/views/forms/TradeForm';
 
 import { TradeSideTabs } from '../TradeSideTabs';
-import { MarginAndLeverageButtons } from '../forms/TradeForm/MarginAndLeverageButtons';
 
 export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: DialogProps<TradeDialogProps>) => {
   const { isMobile } = useBreakpoints();
@@ -75,14 +74,11 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: DialogProps<Trad
       {MobilePlaceOrderSteps.EditOrder ? (
         <TradeSideTabs
           sharedContent={
-            <>
-              <MarginAndLeverageButtons openInTradeBox={false} />
-              <$TradeForm
-                currentStep={currentStep}
-                setCurrentStep={setCurrentStep}
-                onConfirm={onCloseDialog}
-              />
-            </>
+            <$TradeForm
+              currentStep={currentStep}
+              setCurrentStep={setCurrentStep}
+              onConfirm={onCloseDialog}
+            />
           }
         />
       ) : (

diff --git a/src/views/forms/TradeForm.tsx b/src/views/forms/TradeForm.tsx
@@ -54,6 +54,7 @@ import { getSelectedOrderSide, getTradeInputAlert } from '@/lib/tradeData';
 
 import { CanvasOrderbook } from '../CanvasOrderbook/CanvasOrderbook';
 import { AdvancedTradeOptions } from './TradeForm/AdvancedTradeOptions';
+import { MarginAndLeverageButtons } from './TradeForm/MarginAndLeverageButtons';
 import { PlaceOrderButtonAndReceipt } from './TradeForm/PlaceOrderButtonAndReceipt';
 import { PositionPreview } from './TradeForm/PositionPreview';
 import { TradeFormInfoMessages } from './TradeForm/TradeFormInfoMessages';
@@ -253,11 +254,13 @@ export const TradeForm = ({
         {/* TODO[TRCL-1411]: add orderbook scale functionality */}
       </div>
 
-      <$ToggleGroup
-        items={allTradeTypeItems}
-        value={selectedTradeType}
-        onValueChange={onTradeTypeChange}
-      />
+      <$FadeContainer>
+        <$ToggleGroup
+          items={allTradeTypeItems}
+          value={selectedTradeType}
+          onValueChange={onTradeTypeChange}
+        />
+      </$FadeContainer>
     </$TopActionsRow>
   );
 
@@ -345,6 +348,7 @@ export const TradeForm = ({
         </>
       ) : (
         <>
+          <MarginAndLeverageButtons openInTradeBox={false} />
           {tabletActionsRow}
           {orderbookAndInputs}
         </>
@@ -452,9 +456,13 @@ const $OrderbookAndInputs = styled.div<{ showOrderbook: boolean }>`
   }
 `;
 
-const $ToggleGroup = styled(ToggleGroup)`
-  overflow-x: auto;
+const $FadeContainer = styled.div`
+  ${layoutMixins.scrollAreaFade}
+  display: flex;
+  align-items: center;
+`;
 
+const $ToggleGroup = styled(ToggleGroup)`
   button[data-state='off'] {
     gap: 0;
 

diff --git a/src/views/forms/TradeForm/MarginAndLeverageButtons.tsx b/src/views/forms/TradeForm/MarginAndLeverageButtons.tsx
@@ -5,8 +5,14 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { MarginModeSelector } from '@/views/forms/TradeForm/MarginModeSelector';
 import { TargetLeverageButton } from '@/views/forms/TradeForm/TargetLeverageButton';
 
-export const MarginAndLeverageButtons = ({ openInTradeBox }: { openInTradeBox: boolean }) => (
-  <$MarginAndLeverageButtons>
+export const MarginAndLeverageButtons = ({
+  openInTradeBox,
+  className,
+}: {
+  openInTradeBox: boolean;
+  className?: string;
+}) => (
+  <$MarginAndLeverageButtons className={className}>
     <MarginModeSelector openInTradeBox={openInTradeBox} />
     <TargetLeverageButton />
   </$MarginAndLeverageButtons>
@@ -15,9 +21,6 @@ export const MarginAndLeverageButtons = ({ openInTradeBox }: { openInTradeBox: b
 const $MarginAndLeverageButtons = styled.div`
   display: flex;
   gap: 0.5rem;
-  padding: 0.75rem 1rem;
-
-  border-bottom: var(--border);
 
   abbr,
   button {