diff options
| -rw-r--r-- | packages/website/ts/pages/instant/fee_percentage_slider.tsx | 53 |
1 files changed, 27 insertions, 26 deletions
diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx index 4c92883cb..3fc6b381d 100644 --- a/packages/website/ts/pages/instant/fee_percentage_slider.tsx +++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx @@ -1,37 +1,13 @@ import Slider from 'rc-slider'; import 'rc-slider/assets/index.css'; import * as React from 'react'; +import styled from 'styled-components'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; -import { injectGlobal } from 'ts/style/theme'; const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); // tslint:disable-next-line:no-unused-expression -injectGlobal` - .rc-slider-tooltip-inner { - box-shadow: none !important; - background-color: ${colors.white} !important; - border-radius: 4px !important; - padding: 3px 12px !important; - height: auto !important; - position: relative; - top: 7px; - &: after { - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-width: 6px; - bottom: 100%; - left: 100%; - border-bottom-color: ${colors.white}; - margin-left: -60%; - } - } -`; export interface FeePercentageSliderProps { value: number; @@ -41,7 +17,7 @@ export interface FeePercentageSliderProps { export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> { public render(): React.ReactNode { return ( - <SliderWithTooltip + <StyledSlider min={0} max={0.05} step={0.0025} @@ -70,3 +46,28 @@ export class FeePercentageSlider extends React.Component<FeePercentageSliderProp return <Text fontColor={colors.black} fontSize="14px" fontWeight={700}>{`${(value * 100).toFixed(2)}%`}</Text>; }; } + +const StyledSlider = styled(SliderWithTooltip)` + .rc-slider-tooltip-inner { + box-shadow: none !important; + background-color: ${colors.white} !important; + border-radius: 4px !important; + padding: 3px 12px !important; + height: auto !important; + position: relative; + top: 7px; + &:after { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-width: 6px; + bottom: 100%; + left: 100%; + border-bottom-color: ${colors.white}; + margin-left: -60%; + } + } +`; |