diff options
Diffstat (limited to 'packages/website/ts')
| -rw-r--r-- | packages/website/ts/pages/documentation/docs_home.tsx | 8 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/fee_percentage_slider.tsx | 60 | ||||
| -rw-r--r-- | packages/website/ts/types.ts | 2 |
3 files changed, 42 insertions, 28 deletions
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index f68d2892f..9dc779e96 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -44,6 +44,14 @@ const TUTORIALS: TutorialInfo[] = [ to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, }, + { + iconUrl: '/images/developers/tutorials/integrate_0x_instant.svg', + description: Key.Integrate0xInstantDescription, + link: { + title: Key.Integrate0xInstant, + to: `${WebsitePaths.Wiki}#Get-Started-With-Instant`, + }, + }, ]; const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = { 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%; - } - } -`; diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index a668681d5..73e248713 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -480,6 +480,8 @@ export enum Key { OrderBasicsDescription = 'ORDER_BASICS_DESCRIPTION', UseNetworkedLiquidity = 'USE_NETWORKED_LIQUIDITY', UseNetworkedLiquidityDescription = 'USE_NETWORKED_LIQUIDITY_DESCRIPTION', + Integrate0xInstant = 'INTEGRATE_0X_INSTANT', + Integrate0xInstantDescription = 'INTEGRATE_0X_INSTANT_DESCRIPTION', ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', Sandbox = 'SANDBOX', Github = 'GITHUB', |