style swap setting margin switch

components/forms/Switch.tsx

@@ -4,7 +4,7 @@ interface SwitchProps {
   checked: boolean
   className?: string
   onChange: (x: boolean) => void
-  children: ReactNode
+  children?: ReactNode
   disabled?: boolean
 }
 

components/swap/SwapSettings.tsx

@@ -40,7 +40,7 @@ const SwapSettings = ({ onClose }: { onClose: () => void }) => {
       </IconButton>
 
       <div className="mt-4">
-        <div className="my-2">Slippage</div>
+        <p className="mb-2 text-th-fgd-1">{t('trade:slippage')}</p>
         {showCustomSlippageForm ? (
           <Input
             type="text"
@@ -59,14 +59,13 @@ const SwapSettings = ({ onClose }: { onClose: () => void }) => {
           />
         )}
       </div>
-      <div className="mt-8">
+      <div className="mt-6 flex items-center justify-between rounded-md bg-th-bkg-3 p-3">
+        <p className="text-th-fgd-1">{t('trade:use-margin')}</p>
         <Switch
           className="text-th-fgd-3"
           checked={margin}
           onChange={handleSetMargin}
-        >
-          {t('margin')}
-        </Switch>
+        />
       </div>
     </>
   )

public/locales/en/trade.json

@@ -6,5 +6,6 @@
     "minimum-received": "Minimum Received",
     "rate": "Rate",
     "review-trade": "Review Trade",
-    "slippage": "Slippage"
+    "slippage": "Slippage",
+    "use-margin": "Allow Margin"
 }

public/locales/es/trade.json

@@ -6,5 +6,6 @@
     "minimum-received": "Minimum Received",
     "rate": "Rate",
     "review-trade": "Review Trade",
-    "slippage": "Slippage"
+    "slippage": "Slippage",
+    "use-margin": "Allow Margin"
 }

public/locales/zh/trade.json

@@ -6,5 +6,6 @@
     "minimum-received": "Minimum Received",
     "rate": "Rate",
     "review-trade": "Review Trade",
-    "slippage": "Slippage"
+    "slippage": "Slippage",
+    "use-margin": "Allow Margin"
 }

public/locales/zh_tw/trade.json

@@ -6,5 +6,6 @@
     "minimum-received": "Minimum Received",
     "rate": "Rate",
     "review-trade": "Review Trade",
-    "slippage": "Slippage"
+    "slippage": "Slippage",
+    "use-margin": "Allow Margin"
 }