Make unlock metamask step look more like mock

1 files changed, 69 insertions, 45 deletions

diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index ba5b3d6ea..4e853719e 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import * as _ from 'lodash';
 import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
+import { Container, ContainerProps } 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';
@@ -12,6 +12,7 @@ export type ContinueButtonDisplay = 'enabled' | 'disabled';
 
 export interface OnboardingCardProps {
     title?: string;
+    shouldCenterTitle?: boolean;
     content: React.ReactNode;
     isLastStep: boolean;
     onClose: () => void;
@@ -23,10 +24,13 @@ export interface OnboardingCardProps {
     shouldHideNextButton?: boolean;
     continueButtonText?: string;
     borderRadius?: string;
+    // Used for super-custom content.
+    shouldRemoveExtraSpacing?: boolean;
 }
 
 export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
     title,
+    shouldCenterTitle,
     content,
     continueButtonDisplay,
     continueButtonText,
@@ -37,55 +41,75 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
     shouldHideBackButton,
     shouldHideNextButton,
     borderRadius,
-}) => (
-    <Island borderRadius={borderRadius}>
-        <Container paddingRight="30px" paddingLeft="30px" 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>
+    shouldRemoveExtraSpacing,
+}) => {
+    const padding = shouldRemoveExtraSpacing
+        ? {}
+        : {
+              paddingRight: '30px',
+              paddingLeft: '30px',
+              paddingTop: '15px',
+              paddingBottom: '15px',
+          };
+    const closeIconPositioning = shouldRemoveExtraSpacing
+        ? { right: '15px', bottom: '3px' }
+        : { bottom: '20px', left: '15px' };
+    return (
+        <Island borderRadius={borderRadius}>
+            <Container {...padding}>
+                <div className="flex flex-column">
+                    <Container className="flex justify-between">
+                        <Container width="100%">
+                            <Title center={shouldCenterTitle}>{title}</Title>
+                        </Container>
+                        <Container position="relative" {...closeIconPositioning}>
+                            <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
+                                Close
+                            </IconButton>
+                        </Container>
                     </Container>
+                    <Container marginBottom={shouldRemoveExtraSpacing ? undefined : '15px'}>
+                        <Text>{content}</Text>
+                    </Container>
+                    {continueButtonDisplay && (
+                        <Button
+                            isDisabled={continueButtonDisplay === 'disabled'}
+                            onClick={!_.isUndefined(onContinueButtonClick) ? onContinueButtonClick : onClickNext}
+                            fontColor={colors.white}
+                            fontSize="15px"
+                            backgroundColor={colors.mediumBlue}
+                        >
+                            {continueButtonText}
+                        </Button>
+                    )}
+                    {!(shouldHideBackButton && shouldHideNextButton) && (
+                        <Container className="clearfix" marginTop="15px">
+                            <div className="left">
+                                {!shouldHideBackButton && (
+                                    <Text fontColor={colors.grey} onClick={onClickBack}>
+                                        Back
+                                    </Text>
+                                )}
+                            </div>
+                            <div className="right">
+                                {!shouldHideNextButton && (
+                                    <Text fontColor={colors.grey} onClick={onClickNext}>
+                                        Skip
+                                    </Text>
+                                )}
+                            </div>
+                        </Container>
+                    )}
                 </div>
-                <Container marginBottom="15px">
-                    <Text>{content}</Text>
-                </Container>
-                {continueButtonDisplay && (
-                    <Button
-                        isDisabled={continueButtonDisplay === 'disabled'}
-                        onClick={!_.isUndefined(onContinueButtonClick) ? onContinueButtonClick : onClickNext}
-                        fontColor={colors.white}
-                        fontSize="15px"
-                        backgroundColor={colors.mediumBlue}
-                    >
-                        {continueButtonText}
-                    </Button>
-                )}
-                <Container className="clearfix" marginTop="15px">
-                    <div className="left">
-                        {!shouldHideBackButton && (
-                            <Text fontColor={colors.grey} onClick={onClickBack}>
-                                Back
-                            </Text>
-                        )}
-                    </div>
-                    <div className="right">
-                        {!shouldHideNextButton && (
-                            <Text fontColor={colors.grey} onClick={onClickNext}>
-                                Skip
-                            </Text>
-                        )}
-                    </div>
-                </Container>
-            </div>
-        </Container>
-    </Island>
-);
+            </Container>
+        </Island>
+    );
+};
 
 OnboardingCard.defaultProps = {
     continueButtonText: 'Continue',
+    shouldCenterTitle: false,
+    shouldRemoveExtraSpacing: false,
 };
 
 OnboardingCard.displayName = 'OnboardingCard';