From 1e51af1d4b68bad9363411167fd4eb959e7a32dd Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 20 Jun 2018 15:51:17 -0700
Subject: Support mobile friendly onboarding flows

---
 .../ts/components/onboarding/onboarding_card.tsx   | 82 ++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 packages/website/ts/components/onboarding/onboarding_card.tsx

(limited to 'packages/website/ts/components/onboarding/onboarding_card.tsx')

diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
new file mode 100644
index 000000000..795a017e9
--- /dev/null
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -0,0 +1,82 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { IconButton } from 'ts/components/ui/icon_button';
+import { Island } from 'ts/components/ui/island';
+import { Text, Title } from 'ts/components/ui/text';
+
+export type ContinueButtonDisplay = 'enabled' | 'disabled';
+
+export interface OnboardingCardProps {
+    title?: string;
+    content: React.ReactNode;
+    isLastStep: boolean;
+    onClose: () => void;
+    onClickNext: () => void;
+    onClickBack: () => void;
+    continueButtonDisplay?: ContinueButtonDisplay;
+    shouldHideBackButton?: boolean;
+    shouldHideNextButton?: boolean;
+    continueButtonText?: string;
+}
+
+export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
+    title,
+    content,
+    continueButtonDisplay,
+    continueButtonText,
+    onClickNext,
+    onClickBack,
+    onClose,
+    shouldHideBackButton,
+    shouldHideNextButton,
+}) => (
+    <Island>
+        <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
+            <div className="flex flex-column">
+                <div className="flex justify-between">
+                    <Title>{title}</Title>
+                    <Container position="relative" bottom="20px" left="15px">
+                        <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
+                            Close
+                        </IconButton>
+                    </Container>
+                </div>
+                <Container marginBottom="15px">
+                    <Text>{content}</Text>
+                </Container>
+                {continueButtonDisplay && (
+                    <Button
+                        isDisabled={continueButtonDisplay === 'disabled'}
+                        onClick={onClickNext}
+                        fontColor={colors.white}
+                        fontSize="15px"
+                        backgroundColor={colors.mediumBlue}
+                    >
+                        {continueButtonText}
+                    </Button>
+                )}
+                <Container className="flex justify-between" marginTop="15px">
+                    {!shouldHideBackButton && (
+                        <Text fontColor={colors.grey} onClick={onClickBack}>
+                            Back
+                        </Text>
+                    )}
+                    {!shouldHideNextButton && (
+                        <Text fontColor={colors.grey} onClick={onClickNext}>
+                            Skip
+                        </Text>
+                    )}
+                </Container>
+            </div>
+        </Container>
+    </Island>
+);
+
+OnboardingCard.defaultProps = {
+    continueButtonText: 'Continue',
+};
+
+OnboardingCard.displayName = 'OnboardingCard';
-- 
cgit v1.2.3


From d963941be03596d9030dca8788ad26c09b98822d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 21 Jun 2018 11:33:47 -0700
Subject: Remove border radius, fix width issue for unlock step

---
 packages/website/ts/components/onboarding/onboarding_card.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/components/onboarding/onboarding_card.tsx')

diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index 795a017e9..bc83b8034 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -20,6 +20,7 @@ export interface OnboardingCardProps {
     shouldHideBackButton?: boolean;
     shouldHideNextButton?: boolean;
     continueButtonText?: string;
+    borderRadius?: string;
 }
 
 export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
@@ -32,8 +33,9 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
     onClose,
     shouldHideBackButton,
     shouldHideNextButton,
+    borderRadius,
 }) => (
-    <Island>
+    <Island borderRadius={borderRadius}>
         <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
             <div className="flex flex-column">
                 <div className="flex justify-between">
-- 
cgit v1.2.3