Browse Source
Disable slider instead of read-only
Disabled UI elements make it clear to the user that they cannot
change them.
new-http-api
Thomas Eizinger
3 years ago
No known key found for this signature in database
GPG Key ID: 651AC83A6C6C8B96
1 changed files with
13 additions and
10 deletions
-
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> |
|
|
|
|
