crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make unlock metamask step look more like mock

Browse Source
This commit is contained in:
fragosti
2018-07-06 15:11:01 -07:00
parent b9e51d2fad
commit 824c331ea0
4 changed files with 81 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
packages/website/ts/components/onboarding/onboarding_card.tsx
View File

@@ -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';