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,19 +41,34 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
     shouldHideBackButton,
     shouldHideNextButton,
     borderRadius,
-}) => (
+    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 paddingRight="30px" paddingLeft="30px" paddingTop="15px" paddingBottom="15px">
+            <Container {...padding}>
                 <div className="flex flex-column">
-                <div className="flex justify-between">
-                    <Title>{title}</Title>
-                    <Container position="relative" bottom="20px" left="15px">
+                    <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>
-                </div>
-                <Container marginBottom="15px">
+                    </Container>
+                    <Container marginBottom={shouldRemoveExtraSpacing ? undefined : '15px'}>
                         <Text>{content}</Text>
                     </Container>
                     {continueButtonDisplay && (
@@ -63,6 +82,7 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
                             {continueButtonText}
                         </Button>
                     )}
+                    {!(shouldHideBackButton && shouldHideNextButton) && (
                         <Container className="clearfix" marginTop="15px">
                             <div className="left">
                                 {!shouldHideBackButton && (
@@ -79,13 +99,17 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
                                 )}
                             </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',
-            right: '5px',
+            top: '10px',
+            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">
-        <div className="flex items-center flex-column">
     <Image src="/images/unlock-mm.png" />
-        </div>
-    </div>
 );