Make unlock metamask step look more like mock

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,
-}) => (
+    shouldRemoveExtraSpacing,
-    <Island borderRadius={borderRadius}>
+}) => {
-        <Container paddingRight="30px" paddingLeft="30px" paddingTop="15px" paddingBottom="15px">
+    const padding = shouldRemoveExtraSpacing
-            <div className="flex flex-column">
+        ? {}
-                <div className="flex justify-between">
+        : {
-                    <Title>{title}</Title>
+              paddingRight: '30px',
-                    <Container position="relative" bottom="20px" left="15px">
+              paddingLeft: '30px',
-                        <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
+              paddingTop: '15px',
-                            Close
+              paddingBottom: '15px',
-                        </IconButton>
+          };
+    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">
+            </Container>
-                    <Text>{content}</Text>
+        </Island>
-                </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>
-);
 
 OnboardingCard.defaultProps = {
     continueButtonText: 'Continue',
+    shouldCenterTitle: false,
+    shouldRemoveExtraSpacing: false,
 };
 
 OnboardingCard.displayName = 'OnboardingCard';

packages/website/ts/components/onboarding/onboarding_flow.tsx

@@ -31,12 +31,15 @@ export interface Step {
     // Provide either a CSS selector, or fixed position settings. Only applies to desktop.
     position: TargetPositionSettings | FixedPositionSettings;
     title?: string;
+    shouldCenterTitle?: boolean;
     content: React.ReactNode;
     shouldHideBackButton?: boolean;
     shouldHideNextButton?: boolean;
     continueButtonDisplay?: ContinueButtonDisplay;
     continueButtonText?: string;
     onContinueButtonClick?: () => void;
+    // Only used for very custom steps.
+    shouldRemoveExtraSpacing?: boolean;
 }
 
 export interface OnboardingFlowProps {
@@ -114,6 +117,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             <Container marginLeft="30px" width="400px">
                 <OnboardingTooltip
                     title={step.title}
+                    shouldCenterTitle={step.shouldCenterTitle}
                     content={step.content}
                     isLastStep={isLastStep}
                     shouldHideBackButton={step.shouldHideBackButton}
@@ -125,6 +129,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     continueButtonText={step.continueButtonText}
                     onContinueButtonClick={step.onContinueButtonClick}
                     pointerDisplay={tooltipPointerDisplay}
+                    shouldRemoveExtraSpacing={step.shouldRemoveExtraSpacing}
                 />
             </Container>
         );
@@ -138,6 +143,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             <Container position="relative" zIndex={1}>
                 <OnboardingCard
                     title={step.title}
+                    shouldCenterTitle={step.shouldCenterTitle}
                     content={step.content}
                     isLastStep={isLastStep}
                     shouldHideBackButton={step.shouldHideBackButton}
@@ -149,6 +155,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     continueButtonText={step.continueButtonText}
                     onContinueButtonClick={step.onContinueButtonClick}
                     borderRadius="10px 10px 0px 0px"
+                    shouldRemoveExtraSpacing={step.shouldRemoveExtraSpacing}
                 />
             </Container>
         );

packages/website/ts/components/onboarding/portal_onboarding_flow.tsx

@@ -91,8 +91,8 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         };
         const underMetamaskExtension: FixedPositionSettings = {
             type: 'fixed',
-            top: '5px',
+            top: '10px',
-            right: '5px',
+            right: '10px',
             tooltipPointerDisplay: 'none',
         };
         const steps: Step[] = [
@@ -109,6 +109,8 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 content: <UnlockWalletOnboardingStep />,
                 shouldHideBackButton: true,
                 shouldHideNextButton: true,
+                shouldCenterTitle: true,
+                shouldRemoveExtraSpacing: true,
             },
             {
                 position: nextToWalletPosition,

packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx

@@ -4,9 +4,5 @@ import { Image } from 'ts/components/ui/image';
 export interface UnlockWalletOnboardingStepProps {}
 
 export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOnboardingStepProps> = () => (
-    <div className="flex items-center flex-column">
+    <Image src="/images/unlock-mm.png" />
-        <div className="flex items-center flex-column">
-            <Image src="/images/unlock-mm.png" />
-        </div>
-    </div>
 );