From 7689f7db70eaf22ae1ea3713db91a2fd68cae00c Mon Sep 17 00:00:00 2001
From: Thomas Eizinger <thomas@eizinger.io>
Date: Fri, 12 Nov 2021 09:53:39 +1100
Subject: [PATCH] Disable slider instead of read-only

Disabled UI elements make it clear to the user that they cannot
change them.
---
 taker-frontend/src/components/Trade.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/taker-frontend/src/components/Trade.tsx b/taker-frontend/src/components/Trade.tsx
index 9293d56..25c9e4d 100644
--- a/taker-frontend/src/components/Trade.tsx
+++ b/taker-frontend/src/components/Trade.tsx
@@ -33,6 +33,7 @@ import {
     Tbody,
     Td,
     Text,
+    Tooltip,
     Tr,
     useColorModeValue,
     useDisclosure,
@@ -245,16 +246,18 @@ interface LeverageProps {
 function Leverage({ leverage }: LeverageProps) {
     return (
         <FormControl id="leverage">
-            <FormLabel>Leverage (fixed to 2 atm)</FormLabel>
-            <Slider isReadOnly defaultValue={leverage} min={1} max={5} step={1}>
-                <SliderTrack>
-                    <Box position="relative" right={10} />
-                    <SliderFilledTrack />
-                </SliderTrack>
-                <SliderThumb boxSize={6}>
-                    <Text color="black">{leverage}</Text>
-                </SliderThumb>
-            </Slider>
+            <FormLabel>Leverage</FormLabel>
+            <Tooltip label="Configurable leverage is in the making." shouldWrapChildren hasArrow>
+                <Slider disabled value={leverage} min={1} max={5} step={1}>
+                    <SliderTrack>
+                        <Box position="relative" right={10} />
+                        <SliderFilledTrack />
+                    </SliderTrack>
+                    <SliderThumb boxSize={6}>
+                        <Text color="black">{leverage}</Text>
+                    </SliderThumb>
+                </Slider>
+            </Tooltip>
             <FormHelperText>
                 How much do you want to leverage your position?
             </FormHelperText>