From 040d942ed921c8b67b832684ebc5141e6a095119 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Wed, 17 Aug 2022 13:42:16 +1000
Subject: [PATCH] style slider

---
 components/TradeSimplePage.tsx     |  4 ++--
 components/swap/LeverageSlider.tsx |  8 +++++++-
 components/swap/Swap.tsx           |  2 +-
 styles/globals.css                 | 14 ++++++++++++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/components/TradeSimplePage.tsx b/components/TradeSimplePage.tsx
index 0894c901..5f9c045c 100644
--- a/components/TradeSimplePage.tsx
+++ b/components/TradeSimplePage.tsx
@@ -8,8 +8,8 @@ const TradeSimplePage = () => {
   const outputTokenInfo = mangoStore((s) => s.swap.outputTokenInfo)
 
   return (
-    <div className="grid grid-cols-12 gap-x-6 gap-y-8">
-      <div className="col-span-12 space-y-12 md:col-span-6 lg:col-span-8">
+    <div className="grid grid-cols-12 gap-x-6">
+      <div className="col-span-12 mb-8 md:col-span-6 md:mb-0 lg:col-span-8">
         <SwapTokenChart
           inputTokenId={inputTokenInfo?.extensions?.coingeckoId}
           outputTokenId={outputTokenInfo?.extensions?.coingeckoId}
diff --git a/components/swap/LeverageSlider.tsx b/components/swap/LeverageSlider.tsx
index dac78bf0..a60bc2c4 100644
--- a/components/swap/LeverageSlider.tsx
+++ b/components/swap/LeverageSlider.tsx
@@ -16,6 +16,12 @@ const LeverageSlider = ({
   onChange: (x: any) => any
 }) => {
   const handleSliderChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let target = e.target
+    const min = parseFloat(target.min)
+    const max = parseFloat(target.max)
+    const val = parseFloat(target.value)
+
+    target.style.backgroundSize = ((val - min) * 100) / (max - min) + '% 100%'
     onChange(e.target.value)
   }
 
@@ -28,7 +34,7 @@ const LeverageSlider = ({
         min="0"
         max={leverageMax}
         step={0.000001}
-        className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-th-bkg-4 hover:bg-gradient-to-r hover:from-gradient-start hover:via-gradient-mid hover:to-gradient-end"
+        className="w-full"
         onChange={handleSliderChange}
       ></input>
     </>
diff --git a/components/swap/Swap.tsx b/components/swap/Swap.tsx
index 79fd4cb2..89615b3e 100644
--- a/components/swap/Swap.tsx
+++ b/components/swap/Swap.tsx
@@ -280,7 +280,7 @@ const Swap = () => {
       </div>
       {useMargin ? (
         <>
-          <div className="mb-2 flex items-center justify-between">
+          <div className="mb-1 flex items-center justify-between">
             <p className="text-th-fgd-3">{t('leverage')}</p>
             <p className="text-th-fgd-1">0.00x</p>
           </div>
diff --git a/styles/globals.css b/styles/globals.css
index 26ccd1b5..fb97bde5 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -288,3 +288,17 @@ table p {
 .thin-scroll::-webkit-scrollbar-thumb:window-inactive {
   @apply bg-th-bkg-4;
 }
+
+/* slider */
+
+input[type='range'] {
+  @apply h-2 appearance-none rounded bg-th-bkg-4 bg-gradient-to-r from-gradient-start via-gradient-mid to-gradient-end bg-[length:70%_100%] bg-no-repeat;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  @apply h-5 w-5 cursor-ew-resize appearance-none rounded-full bg-th-primary;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  @apply appearance-none border-0 bg-transparent shadow-none;
+}