From 25bc9e84e645e6955e8e4ddd98e658eb1dc79f7c Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Fri, 4 Oct 2024 13:01:14 -0400
Subject: [PATCH] clean up

---
 src/components/Tabs.tsx                         | 1 -
 src/components/Toolbar.tsx                      | 2 +-
 src/pages/trade/VerticalPanel.tsx               | 2 +-
 src/views/CanvasOrderbook/OrderbookControls.tsx | 8 ++++----
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index b434f1020..c39bd6911 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -176,7 +176,6 @@ const $Root = styled(Root)<{
     --tabs-currentHeight: var(--tabs-height-mobile);
   }
 
-  --toolbar-padding: 0 1rem;
   --toolbar-width: ;
 
   /* Rules */
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 519aa6d7f..00908b20f 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -45,5 +45,5 @@ const $Root = styled(Root)<{ layout?: 'column' | 'row' }>`
       row: layoutMixins.row,
     }[layout]}
 
-  padding: var(--toolbar-padding);
+  padding: var(--toolbar-padding, 0 1rem);
 `;
diff --git a/src/pages/trade/VerticalPanel.tsx b/src/pages/trade/VerticalPanel.tsx
index d571fc810..24396c67a 100644
--- a/src/pages/trade/VerticalPanel.tsx
+++ b/src/pages/trade/VerticalPanel.tsx
@@ -126,4 +126,4 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
 const $Tabs = styled(Tabs)`
   --toolbar-padding: 0;
   --toolbar-width: 50%;
-`;
+` as typeof Tabs;
diff --git a/src/views/CanvasOrderbook/OrderbookControls.tsx b/src/views/CanvasOrderbook/OrderbookControls.tsx
index ef3ef076a..ff85b7c3e 100644
--- a/src/views/CanvasOrderbook/OrderbookControls.tsx
+++ b/src/views/CanvasOrderbook/OrderbookControls.tsx
@@ -60,7 +60,7 @@ export const OrderbookControls = ({ className, assetId, grouping }: OrderbookCon
   );
 
   return (
-    <$OrderbookControlsContainer className={className} uiRefreshEnabled={uiRefresh}>
+    <$OrderbookControlsContainer className={className} $uiRefreshEnabled={uiRefresh}>
       <div tw="flex justify-between gap-0.5">
         <div tw="flex gap-0.5">
           <Output
@@ -101,7 +101,7 @@ export const OrderbookControls = ({ className, assetId, grouping }: OrderbookCon
   );
 };
 
-const $OrderbookControlsContainer = styled.div<{ uiRefreshEnabled: boolean }>`
+const $OrderbookControlsContainer = styled.div<{ $uiRefreshEnabled: boolean }>`
   color: var(--color-text-0);
   font: var(--font-small-book);
 
@@ -114,8 +114,8 @@ const $OrderbookControlsContainer = styled.div<{ uiRefreshEnabled: boolean }>`
     padding-bottom: 0.3rem;
   }
 
-  ${({ uiRefreshEnabled }) =>
-    !uiRefreshEnabled &&
+  ${({ $uiRefreshEnabled }) =>
+    !$uiRefreshEnabled &&
     css`
       flex-direction: column-reverse;
     `}