aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-25 10:03:52 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-25 10:09:02 +0800
commit490fed622868d594f0e8ff790b2dda277c117a48 (patch)
treeb92a7213d45f118ce5193ba22c1751c23640e52e
parent9c81692d48fed4942fe6482949d6eed3629d4037 (diff)
downloaddexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar.gz
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar.bz2
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar.lz
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar.xz
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar.zst
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.zip
Make a non-jank Spinner component and use it
-rw-r--r--packages/website/ts/components/ui/allowance_state_view.tsx9
-rw-r--r--packages/website/ts/components/ui/spinner.tsx54
-rw-r--r--packages/website/ts/style/keyframes.ts22
-rw-r--r--yarn.lock2
4 files changed, 84 insertions, 3 deletions
diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx
index c9a96859c..4e7a4cdf2 100644
--- a/packages/website/ts/components/ui/allowance_state_view.tsx
+++ b/packages/website/ts/components/ui/allowance_state_view.tsx
@@ -1,5 +1,6 @@
-import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Spinner } from 'ts/components/ui/spinner';
export enum AllowanceState {
Locked,
@@ -18,7 +19,11 @@ export const AllowanceStateView: React.StatelessComponent<AllowanceStateViewProp
case AllowanceState.Unlocked:
return renderCheck();
case AllowanceState.Loading:
- return <CircularProgress size={16} thickness={2} />;
+ return (
+ <Container position="relative" top="3px" left="5px">
+ <Spinner size={18} strokeSize={2} />
+ </Container>
+ );
default:
return null;
}
diff --git a/packages/website/ts/components/ui/spinner.tsx b/packages/website/ts/components/ui/spinner.tsx
new file mode 100644
index 000000000..e8670cc3e
--- /dev/null
+++ b/packages/website/ts/components/ui/spinner.tsx
@@ -0,0 +1,54 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+import { styled } from 'ts/style/theme';
+
+import { dash, rotate } from 'ts/style/keyframes';
+
+interface SpinnerSvgProps {
+ color: string;
+ size: number;
+ viewBox?: string;
+}
+
+const SpinnerSvg: React.StatelessComponent<SpinnerSvgProps> = props => <svg {...props} />;
+
+const StyledSpinner = styled(SpinnerSvg)`
+ animation: ${rotate} 3s linear infinite;
+ margin: ${props => `-${props.size / 2}px 0 0 -${props.size / 2}px`};
+ margin-top: ${props => `-${props.size / 2}px`};
+ margin-left: ${props => `-${props.size / 2}px`};
+ margin-bottom: 0px;
+ margin-right: 0px;
+ size: ${props => `${props.size}px`};
+ height: ${props => `${props.size}px`};
+
+ & .path {
+ stroke: ${props => props.color};
+ stroke-linecap: round;
+ animation: ${dash} 2.5s ease-in-out infinite;
+ }
+`;
+
+export interface SpinnerProps {
+ size?: number;
+ strokeSize?: number;
+ color?: string;
+}
+
+export const Spinner: React.StatelessComponent<SpinnerProps> = ({ size, strokeSize, color }) => {
+ const c = size / 2;
+ const r = c - strokeSize;
+ return (
+ <StyledSpinner color={color} size={size} viewBox={`0 0 ${size} ${size}`}>
+ <circle className="path" cx={c} cy={c} r={r} fill="none" strokeWidth={strokeSize} />
+ </StyledSpinner>
+ );
+};
+
+Spinner.defaultProps = {
+ size: 50,
+ color: colors.mediumBlue,
+ strokeSize: 4,
+};
+
+Spinner.displayName = 'Spinner';
diff --git a/packages/website/ts/style/keyframes.ts b/packages/website/ts/style/keyframes.ts
new file mode 100644
index 000000000..28ea50247
--- /dev/null
+++ b/packages/website/ts/style/keyframes.ts
@@ -0,0 +1,22 @@
+import { keyframes } from 'ts/style/theme';
+
+export const rotate = keyframes`
+ 100% {
+ transform: rotate(360deg);
+ }
+`;
+
+export const dash = keyframes`
+ 0% {
+ stroke-dasharray: 1, 150;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -35;
+ }
+ 100% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -124;
+ }
+`;
diff --git a/yarn.lock b/yarn.lock
index c026a52c3..df44f4e4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9733,7 +9733,7 @@ polished@^1.9.2:
version "1.9.2"
resolved "https://registry.npmjs.org/polished/-/polished-1.9.2.tgz#d705cac66f3a3ed1bd38aad863e2c1e269baf6b6"
-popper.js@^1.14.1:
+popper.js@1.14.3, popper.js@^1.14.1:
version "1.14.3"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"