Refactor a bunch of layouts into their own files

1 files changed, 41 insertions, 0 deletions

diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx
new file mode 100644
index 000000000..68934f88e
--- /dev/null
+++ b/packages/website/ts/components/portal/back_button.tsx
@@ -0,0 +1,41 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+export interface BackButtonProps {
+    to: string;
+    labelText: string;
+}
+
+const BACK_BUTTON_HEIGHT = 28;
+
+const styles: Styles = {
+    backButton: {
+        height: BACK_BUTTON_HEIGHT,
+        paddingTop: 10,
+        backgroundColor: colors.white,
+        borderRadius: BACK_BUTTON_HEIGHT,
+        boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
+    },
+    backButtonIcon: {
+        color: colors.mediumBlue,
+        fontSize: 20,
+    },
+};
+
+export const BackButton = (props: BackButtonProps) => {
+    return (
+        <div style={{ height: 65, paddingTop: 25 }}>
+            <Link to={props.to} style={{ textDecoration: 'none' }}>
+                <div className="flex right" style={styles.backButton}>
+                    <div style={{ marginLeft: 12 }}>
+                        <i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} />
+                    </div>
+                    <div style={{ marginLeft: 12, marginRight: 12 }}>
+                        <div style={{ fontSize: 16, color: colors.lightGrey }}>{props.labelText}</div>
+                    </div>
+                </div>
+            </Link>
+        </div>
+    );
+};