Remove border radius, fix width issue for unlock step

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">

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

@@ -67,7 +67,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
         return (
-            <Container marginLeft="30px">
+            <Container marginLeft="30px" maxWidth={350}>
                 <OnboardingTooltip
                     title={step.title}
                     content={step.content}
@@ -101,6 +101,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     onClickBack={this._goToPrevStep.bind(this)}
                     continueButtonDisplay={step.continueButtonDisplay}
                     continueButtonText={step.continueButtonText}
+                    borderRadius="10px 10px 0px 0px"
                 />
             </Container>
         );

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

@@ -10,7 +10,7 @@ export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOn
             <Container marginTop="15px" marginBottom="15px">
                 <img src="/images/metamask_icon.png" height="50px" width="50px" />
             </Container>
-            <Text>Unlock your metamask extension to begin.</Text>
+            <Text center={true}>Unlock your metamask extension to get started.</Text>
         </div>
     </div>
 );

packages/website/ts/components/ui/island.tsx

@@ -6,19 +6,23 @@ export interface IslandProps {
     style?: React.CSSProperties;
     className?: string;
     Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
+    borderRadius?: string;
 }
 
-const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, ...rest }) => <Component {...rest} />;
+const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, borderRadius, ...rest }) => (
+    <Component {...rest} />
+);
 
 export const Island = styled(PlainIsland)`
     background-color: ${colors.white};
-    border-radius: 10px;
+    border-radius: ${props => props.borderRadius};
     box-shadow: 0px 4px 6px ${colors.walletBoxShadow};
     overflow: hidden;
 `;
 
 Island.defaultProps = {
     Component: 'div',
+    borderRadius: '10px',
     style: {},
 };