1 files changed, 32 insertions, 28 deletions
diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
index 176240f2e..d76cee58f 100644
--- a/packages/website/ts/pages/instant/fee_percentage_slider.tsx
+++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
@@ -1,23 +1,52 @@
 import Slider from 'rc-slider';
-//import 'rc-slider/assets/index.css';
+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%;
+        }
+    }
+    .rc-slider-disabled {
+        background-color: inherit !important;
+    }
+`;
 
 export interface FeePercentageSliderProps {
     value: number;
+    isDisabled: boolean;
     onChange: (value: number) => void;
 }
 
 export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> {
     public render(): React.ReactNode {
         return (
-            <StyledSlider
+            <SliderWithTooltip
+                disabled={this.props.isDisabled}
                 min={0}
                 max={0.05}
                 step={0.0025}
@@ -46,28 +75,3 @@ 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%;
-        }
-    }
-`;