diff options
Diffstat (limited to 'packages/website/ts/components')
4 files changed, 12 insertions, 5 deletions
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"> diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 7360d26ae..cfce70b84 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/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> ); diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx index 6e6a74a06..0039aa545 100644 --- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx +++ b/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> ); diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx index b88d5fc1b..f157e3052 100644 --- a/packages/website/ts/components/ui/island.tsx +++ b/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: {}, }; |