From 2bc011281f1407c51787766d22c4014d3a6852ec Mon Sep 17 00:00:00 2001 From: bossbossk20 Date: Thu, 11 Mar 2021 01:29:55 +0700 Subject: [PATCH 1/3] =?UTF-8?q?feat(slider)=20add=20money=20slider=20?= =?UTF-8?q?=F0=9F=90=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/monkey/monkey1.svg | 33 +++++++++++++++ src/assets/svg/monkey/monkey2.svg | 33 +++++++++++++++ src/assets/svg/monkey/monkey3.svg | 31 ++++++++++++++ src/components/Slider/index.tsx | 67 ++++++++++++++++--------------- 4 files changed, 132 insertions(+), 32 deletions(-) create mode 100644 src/assets/svg/monkey/monkey1.svg create mode 100644 src/assets/svg/monkey/monkey2.svg create mode 100644 src/assets/svg/monkey/monkey3.svg diff --git a/src/assets/svg/monkey/monkey1.svg b/src/assets/svg/monkey/monkey1.svg new file mode 100644 index 00000000..832ce437 --- /dev/null +++ b/src/assets/svg/monkey/monkey1.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/monkey/monkey2.svg b/src/assets/svg/monkey/monkey2.svg new file mode 100644 index 00000000..dbd8444c --- /dev/null +++ b/src/assets/svg/monkey/monkey2.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/monkey/monkey3.svg b/src/assets/svg/monkey/monkey3.svg new file mode 100644 index 00000000..6e4d9a72 --- /dev/null +++ b/src/assets/svg/monkey/monkey3.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx index d3dc77e2..d731d63a 100644 --- a/src/components/Slider/index.tsx +++ b/src/components/Slider/index.tsx @@ -1,10 +1,26 @@ import React, { useCallback } from 'react' import styled from 'styled-components' -const StyledRangeInput = styled.input<{ size: number }>` +import monkey1 from '../../assets/svg/monkey/monkey1.svg' +import monkey2 from '../../assets/svg/monkey/monkey2.svg' +import monkey3 from '../../assets/svg/monkey/monkey3.svg' + +const getThumbIcon = (value: number) => { + let thumbIcon + if(value >= 0 && value < 34) { + thumbIcon = monkey1 + } else if (value > 34 && value < 64 ) { + thumbIcon = monkey2 + } else { + thumbIcon = monkey3 + } + return thumbIcon +} + +const StyledRangeInput = styled.input<{ size: number, thumbIcon: any }>` -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ - background: transparent; /* Otherwise white in Chrome */ + background: transparent; cursor: pointer; &:focus { @@ -17,48 +33,32 @@ const StyledRangeInput = styled.input<{ size: number }>` &::-webkit-slider-thumb { -webkit-appearance: none; - height: ${({ size }) => size}px; - width: ${({ size }) => size}px; - background-color: #565a69; - border-radius: 100%; - border: none; + height: 35px; + width: 35px; + background: transparent; + background-image: url(${({ thumbIcon }) => thumbIcon }); transform: translateY(-50%); color: ${({ theme }) => theme.colors.invertedContrast}; - &:hover, - &:focus { - box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06), - 0px 24px 32px rgba(0, 0, 0, 0.04); - } } &::-moz-range-thumb { - height: ${({ size }) => size}px; - width: ${({ size }) => size}px; - background-color: #565a69; - border-radius: 100%; - border: none; + height: 35px; + width: 35px; + background-image: url(${({ thumbIcon }) => thumbIcon }); color: ${({ theme }) => theme.colors.invertedContrast}; - - &:hover, - &:focus { - box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06), - 0px 24px 32px rgba(0, 0, 0, 0.04); - } + background-color: transparent; + border: none; } &::-ms-thumb { - height: ${({ size }) => size}px; - width: ${({ size }) => size}px; - background-color: #565a69; - border-radius: 100%; + height: 35px; + width: 35px; + background: transparent; + background-image: url(${({ thumbIcon }) => thumbIcon }); + transform: translateY(-50%); color: ${({ theme }) => theme.colors.invertedContrast}; - &:hover, - &:focus { - box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06), - 0px 24px 32px rgba(0, 0, 0, 0.04); - } } &::-webkit-slider-runnable-track { @@ -112,9 +112,12 @@ export default function Slider({ value, onChange, min = 0, step = 1, max = 100, [onChange] ) + const thumbIcon = getThumbIcon(value) + return ( Date: Thu, 11 Mar 2021 01:38:53 +0700 Subject: [PATCH 2/3] feat(slider) improve slider thumb for ms --- src/pages/RemoveLiquidity/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx index ba3db2d0..f739c585 100644 --- a/src/pages/RemoveLiquidity/index.tsx +++ b/src/pages/RemoveLiquidity/index.tsx @@ -628,7 +628,7 @@ export default function RemoveLiquidity({ )}
{!account ? ( - + ) : (