Basic onboarding flow infrastructure set up

2 files changed, 49 insertions, 0 deletions

diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
new file mode 100644
index 000000000..7565dd1ae
--- /dev/null
+++ b/packages/website/ts/components/ui/container.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface ContainerProps {
+    marginTop?: string | number;
+    marginBottom?: string | number;
+    marginRight?: string | number;
+    marginLeft?: string | number;
+    children?: React.ReactNode;
+}
+
+export const Container: React.StatelessComponent<ContainerProps> = (props: ContainerProps) => {
+    const { children, ...style } = props;
+    return <div style={style}>{children}</div>;
+};
+
+Container.displayName = 'Container';
diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
new file mode 100644
index 000000000..da3602c3e
--- /dev/null
+++ b/packages/website/ts/components/ui/island.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Styleable } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+
+export interface IslandProps {
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    className?: string;
+    Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
+}
+
+const defaultStyle: React.CSSProperties = {
+    backgroundColor: colors.white,
+    borderBottomRightRadius: 10,
+    borderBottomLeftRadius: 10,
+    borderTopRightRadius: 10,
+    borderTopLeftRadius: 10,
+    boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
+    overflow: 'hidden',
+};
+
+export const Island: React.StatelessComponent<IslandProps> = (props: IslandProps) => (
+    <props.Component style={{...defaultStyle, ...props.style}} className={props.className}>
+        {props.children}
+    </props.Component>
+);
+
+Island.defaultProps = {
+    Component: 'div',
+    style: {},
+};
+
+Island.displayName = 'Island';