feat: update copy and branding

This commit is contained in:
Hank Stoever
2020-02-12 16:57:39 -08:00
parent cdc49b5f75
commit 4cc42076d2
16 changed files with 147 additions and 46 deletions

View File

@@ -1,6 +1,6 @@
{
"name": "@blockstack/connect",
"version": "0.3.5",
"version": "0.3.6-alpha.3",
"bundlesize": [
{
"path": "./dist/**/*.js",

View File

@@ -10,7 +10,7 @@ interface PopupOptions {
// does not leave slightly blurry underlap
const defaultWidth = 442;
const defaultHeight = 532;
const defaultTitle = 'Continue with Data Vault';
const defaultTitle = 'Continue with Secret Key';
// https://developer.mozilla.org/en-US/docs/Web/API/Window/open
export const popupCenter = ({ url, title = defaultTitle, w = defaultWidth, h = defaultHeight }: PopupOptions) => {

View File

@@ -6,9 +6,9 @@ interface LinkProps extends BoxProps {
_hover?: BoxProps;
}
export const Link: React.FC<LinkProps> = ({ _hover = {}, children, ...rest }) => (
export const Link: React.FC<LinkProps> = ({ _hover = {}, children, textStyle = 'caption.medium', ...rest }) => (
<Box {...rest}>
<Text _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }} textStyle="caption.medium">
<Text _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }} textStyle={textStyle}>
{children}
</Text>
</Box>

View File

@@ -107,14 +107,12 @@ export const Modal = () => {
<ModalHeader
close
back={screen === States.SCREENS_HOW_IT_WORKS ? States.SCREENS_INTRO : undefined}
title={screen === States.SCREENS_SIGN_IN ? 'Sign In' : 'Data Vault'}
title={screen === States.SCREENS_SIGN_IN ? 'Sign In' : 'Secret Key'}
/>
}
isOpen={isOpen}
>
<Box pb={6}>
<RenderScreen />
</Box>
<RenderScreen />
</BlockstackModal>
</ThemeProvider>
);

View File

@@ -0,0 +1,28 @@
import React from 'react';
import { Flex } from '@blockstack/ui';
import { BlockstackMini } from './vector';
import { Link } from './link';
export const PoweredBy: React.FC = () => (
<Flex
fontSize={['12px', '14px']}
justifyContent="center"
color="ink.600"
fontWeight="medium"
textAlign="center"
width="100%"
my={6}
>
<Link
mx="auto"
textAlign="center"
onClick={() => window.open('https://blockstack.org', '_blank')}
textStyle="caption"
alignSelf="flex-end"
>
Powered by
<BlockstackMini />
Blockstack
</Link>
</Flex>
);

View File

@@ -4,3 +4,4 @@ export * from './screen-body';
export * from './screen-footer';
export * from './screen-header';
export * from './screen-loader';
export * from '../powered-by';

View File

@@ -5,7 +5,15 @@ import { Flex, BoxProps } from '@blockstack/ui';
interface ScreenFooterProps extends BoxProps {}
export const ScreenFooter: React.FC<ScreenFooterProps> = ({ children, ...rest }) => (
<Flex mx={6} fontSize={['12px', '14px']} color="ink.600" fontWeight="medium" justify="space-between" {...rest}>
<Flex
mx={6}
flex={1}
fontSize={['12px', '14px']}
color="ink.600"
fontWeight="medium"
justify="space-between"
{...rest}
>
{children}
</Flex>
);

View File

@@ -31,7 +31,7 @@ export interface ScreenHeaderProps {
export const ScreenHeader = ({
appDetails,
title = 'Data Vault',
title = 'Secret Key',
hideIcon = false,
hideLogo = false,
...rest

View File

@@ -15,6 +15,7 @@ export const Screen: React.FC<ScreenBodyProps> = ({ noMinHeight, isLoading, chil
width="100%"
flexDirection="column"
minHeight={noMinHeight ? undefined : ['calc(100vh - 57px)', 'unset']}
flex={1}
style={{ pointerEvents: isLoading ? 'none' : 'unset' }}
{...rest}
>

View File

@@ -6,6 +6,8 @@ import { useAppDetails } from '../../hooks/useAppDetails';
import { Title } from '../typography';
import { Screen, ScreenBody, ScreenActions } from '../screen';
import { CheckmarkIcon } from '../checkmark';
import { PoweredBy } from '../powered-by';
import { ScreenFooter } from '../screen/screen-footer';
interface AppElementProps extends BoxProps {
name: string;
@@ -28,7 +30,7 @@ export const Finished = () => {
<ScreenBody
mt={4}
body={[
<Title>{name} has been connected to your Data Vault</Title>,
<Title>{name} has been connected to your Secret Key</Title>,
<Box mt={2}>
Everything you do in {name} will be private, secure, and only accessible with your Secret Key.
</Box>,
@@ -39,6 +41,9 @@ export const Finished = () => {
Close
</Button>
</ScreenActions>
<ScreenFooter>
<PoweredBy />
</ScreenFooter>
</Screen>
);
};

View File

@@ -2,29 +2,46 @@ import React from 'react';
import { Box, Text, Button } from '@blockstack/ui';
import { useAppDetails } from '../../hooks/useAppDetails';
import { BlockchainIcon, AppsIcon, EncryptionIcon } from '../vector';
import { useConnect } from '../../hooks/useConnect';
import { Title } from '../typography';
import { Screen, ScreenBody, ScreenActions } from '../screen/index';
import { Screen, ScreenBody, ScreenActions, ScreenFooter } from '../screen/index';
import { Link } from '../link';
import { PoweredBy } from '../powered-by';
const howDataVaultWorks = [
interface InfoSection {
title: string;
body: string | JSX.Element;
}
const howDataVaultWorks: InfoSection[] = [
{
title: 'What is Blockstack?',
body: (
<span>
Blockstack is the open-source technology that generates your Secret Key. There&apos;s no company that owns or
controls Blockstack, it is independent. Go to{' '}
<Link color="blue" display="inline-block" onClick={() => window.open('https://blockstack.org', '_blank')}>
blockstack.org
</Link>{' '}
to learn more.
</span>
),
},
{
icon: <EncryptionIcon />,
title: 'Encryption',
body:
'Data Vaults encryption locks your app data into codes that only you can open using a Secret Key that you control. This lock and key keeps everything you do private.',
'Encryption is always on. It locks everything you do in Messenger into useless codes. Because of this, Instagram cant see or track your activity. Your data can only be unlocked with the key that you own. No one else has this key, not even Messenger, so no one else can unlock your data.',
},
{
icon: <BlockchainIcon />,
title: 'Blockchain technology',
title: 'What is a Secret Key?',
body:
'The Secret Key to your Data Vault is made using a blockchain. The blockchain ensures that only you have the key and that no one can take it from you. Your data is private, for your own use, and safe from misuse by app creators.',
"Your Secret Key unlocks your data. It's created independently from Messenger to make sure that Messenger doesn't have it. An open-source protocol called Blockstack generates your Secret Key when you sign up. Nobody but you will have your Secret Key, to make sure that only you have access to your data.",
},
{
icon: <AppsIcon />,
title: 'Over 300 apps use Data Vault',
body: 'Data Vault is free to use with over 300 apps.',
title: 'When will I need my Secret Key?',
body:
'Youll need your Secret Key to prove its you when you use Instagram on a new device, such as a new phone or laptop. After that, your Secret Key will stay active to keep you safe and private in the apps you use on that device.',
},
];
@@ -37,17 +54,14 @@ export const HowItWorks: React.FC = () => {
<ScreenBody
pretitle="How it works"
body={[
<Title>Data Vault keeps what you do in {name} private</Title>,
<Title>{name} keeps everything you do private with Blockstack&apos;s Secret Key technology</Title>,
<Text mt={2} display="block">
Usually, apps store your data on their servers for their own use. Data Vault isolates your encrypted data
from use by others so that apps like {name} (and even Data Vault) cant use it.
Normally, apps keep your data for them to use. When you have a Secret Key, you no longer have to trust{' '}
{name} with your data because {name} won&apos;t have access.
</Text>,
<Box mt={2}>
{howDataVaultWorks.map(({ title, body, icon }, key) => (
{howDataVaultWorks.map(({ title, body }, key) => (
<Box mt={8} key={key}>
<Box size="24px" color="blue" borderRadius="8px">
{icon}
</Box>
<Text mt={3} display="block" fontWeight="semibold">
{title}
</Text>
@@ -61,9 +75,12 @@ export const HowItWorks: React.FC = () => {
/>
<ScreenActions>
<Button width="100%" size="md" mt={6} onClick={() => doAuth()}>
Create your Data Vault
Get Started
</Button>
</ScreenActions>
<ScreenFooter>
<PoweredBy />
</ScreenFooter>
</Screen>
);
};

View File

@@ -6,7 +6,7 @@ import { Link } from '../link';
import { AppIcon } from '../app-icon';
import { useConnect } from '../../hooks/useConnect';
import { useAppDetails } from '../../hooks/useAppDetails';
import { AppsIcon, EncryptionIcon } from '../vector';
import { EyeIcon, EncryptionIcon } from '../vector';
import { Title } from '../typography';
import { Screen, ScreenBody, ScreenActions, ScreenFooter } from '../screen';
import { UnionLine } from '../icons/union-line';
@@ -40,22 +40,18 @@ export const Intro = () => {
fullWidth
mt={4}
body={[
<Title>{name} works with Data Vault to guarantee your privacy</Title>,
<Title>{name} guarantees your privacy by encrypting everything</Title>,
<Box mt={4} mx="auto" width="100%" height="1px" bg="#E5E5EC" />,
<Box>
<CheckList
items={[
{
icon: () => <AppIcon alt={name} src={icon} />,
text: `You will use your Data Vault to sign into ${name} privately`,
},
{
icon: EncryptionIcon,
text: `Data Vault keeps what you do in ${name} private using encryption and blockchain`,
text: "You'll get a Secret Key that automatically encrypts everything you do",
},
{
icon: AppsIcon,
text: 'Data Vault is free to use with over 300 apps',
icon: EyeIcon,
text: `${name} won't be able to see, access, or track your activity`,
},
]}
/>
@@ -64,13 +60,13 @@ export const Intro = () => {
/>
<ScreenActions>
<Button width="100%" size="md" mt={2} onClick={() => doAuth()}>
Create Data Vault
Get Started
</Button>
</ScreenActions>
<ScreenFooter>
<Stack mt={5} spacing={4} isInline>
<Stack my={5} spacing={4} isInline>
<Link color="blue" onClick={() => doAuth({ sendToSignIn: true })}>
Sign in to Data Vault
I already have a Secret Key
</Link>
<Link
color="blue"
@@ -78,7 +74,7 @@ export const Intro = () => {
doGoToHowItWorksScreen();
}}
>
How Data Vault works
How it works
</Link>
</Stack>
</ScreenFooter>

View File

@@ -32,7 +32,7 @@ const ContinueWithDataVault: React.FC = props => {
{...props}
>
<Logo mr={2} />
<Text fontWeight={500}>Continue with Data Vault</Text>
<Text fontWeight={500}>Continue with Secret Key</Text>
</Flex>
);
};

View File

@@ -1,7 +1,9 @@
import React from 'react';
import { Text } from '@blockstack/ui';
const Title: React.FC = props => <Text width="100%" fontWeight="medium" fontSize="24px" lineHeight="32px" {...props} />;
const Title: React.FC = props => (
<Text width="95%" fontWeight="medium" fontSize="24px" lineHeight="32px" display="inline-block" {...props} />
);
const Pretitle: React.FC = props => (
<Text

View File

@@ -1,4 +1,5 @@
import React from 'react';
import Styled from 'styled-components';
const AppsIcon: React.FC = props => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
@@ -59,4 +60,47 @@ const BlockchainIcon: React.FC<{ color?: string }> = props => {
);
};
export { AppsIcon, BlockchainIcon, EncryptionIcon };
const PrivateIcon: React.FC = props => (
<svg width="18" height="24" viewBox="0 0 18 24" fill="none" {...props}>
<path
d="M15.5455 8.57143H14.7273V6C14.7273 4.4087 14.1239 2.88258 13.0498 1.75736C11.9757 0.632141 10.519 0 9 0C7.48103 0 6.02428 0.632141 4.95021 1.75736C3.87614 2.88258 3.27273 4.4087 3.27273 6V8.57143H2.45455C1.80378 8.57218 1.17987 8.84334 0.719709 9.32541C0.259547 9.80748 0.000714665 10.4611 0 11.1429V21.4286C0.000714665 22.1103 0.259547 22.7639 0.719709 23.246C1.17987 23.7281 1.80378 23.9993 2.45455 24H15.5455C16.1962 23.9993 16.8201 23.7281 17.2803 23.246C17.7405 22.7639 17.9993 22.1103 18 21.4286V11.1429C17.9993 10.4611 17.7405 9.80748 17.2803 9.32541C16.8201 8.84334 16.1962 8.57218 15.5455 8.57143ZM4.90909 6C4.90909 4.86336 5.3401 3.77327 6.10729 2.96954C6.87449 2.16582 7.91502 1.71429 9 1.71429C10.085 1.71429 11.1255 2.16582 11.8927 2.96954C12.6599 3.77327 13.0909 4.86336 13.0909 6V8.57143H4.90909V6Z"
fill="#5548FF"
/>
</svg>
);
const MiniSVG = Styled.svg`
margin-left: 4px;
margin-right: 4px;
display: inline;
position: relative;
top: -1px;
`;
const BlockstackMini: React.FC = props => (
<MiniSVG width="12" height="12" viewBox="0 0 12 12" fill="none" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.148042 1.08513C-5.58794e-08 1.42724 -3.80998e-08 1.86349 0 2.736L1.42713e-07 6L2.85387e-07 9.264C3.23525e-07 10.1365 0 10.5728 0.148042 10.9149C0.329866 11.335 0.664964 11.6701 1.08513 11.852C1.42724 12 1.86349 12 2.736 12H6H9.264C10.1365 12 10.5728 12 10.9149 11.852C11.335 11.6701 11.6701 11.335 11.852 10.9149C12 10.5728 12 10.1365 12 9.264V6V2.736C12 1.86349 12 1.42724 11.852 1.08513C11.6701 0.664963 11.335 0.329865 10.9149 0.148041C10.5728 -6.70552e-08 10.1365 -3.80998e-08 9.264 0L6 1.42713e-07L2.736 2.85387e-07C1.86349 3.23525e-07 1.40625 2.90573e-07 1.08513 0.148042C0.664964 0.329867 0.329866 0.664963 0.148042 1.08513ZM7.91566 5.16965C7.31682 5.16965 6.83125 4.68409 6.83125 4.08511C6.83125 3.48644 7.31682 3.00088 7.91566 3.00088C8.5145 3.00088 9.00007 3.48644 9.00007 4.08511C9.00007 4.68409 8.5145 5.16965 7.91566 5.16965ZM5.16787 4.085C5.16787 4.68358 4.68253 5.16893 4.08382 5.16893C3.48541 5.16893 3.00007 4.68358 3.00007 4.085C3.00007 3.48643 3.48541 3.00107 4.08382 3.00107C4.68253 3.00107 5.16787 3.48643 5.16787 4.085ZM7.91576 6.83459C7.31679 6.83459 6.83123 7.32016 6.83123 7.919C6.83123 8.51785 7.31679 9.00342 7.91576 9.00342C8.51444 9.00342 9 8.51785 9 7.919C9 7.32016 8.51444 6.83459 7.91576 6.83459ZM4.08392 6.83565C4.68248 6.83565 5.16783 7.32098 5.16783 7.91969C5.16783 8.51809 4.68248 9.00342 4.08392 9.00342C3.48535 9.00342 3 8.51809 3 7.91969C3 7.32098 3.48535 6.83565 4.08392 6.83565Z"
fill="#A1A7B3"
/>
</MiniSVG>
);
const EyeIcon: React.FC = props => (
<svg width="24" height="20" viewBox="0 0 24 20" fill="none" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19.695 0.351482C19.9032 0.135371 20.1868 0.00948757 20.4855 0.000511017C20.7171 -0.00642408 20.9454 0.057366 21.1405 0.183512C21.3356 0.309658 21.4883 0.492283 21.5786 0.707441C21.669 0.922599 21.6927 1.16026 21.6468 1.38926C21.6008 1.61827 21.4873 1.82793 21.3212 1.99078L4.3048 19.1469C4.19867 19.2575 4.07178 19.3456 3.93152 19.4062C3.79125 19.4668 3.64043 19.4987 3.48783 19.5C3.33523 19.5012 3.1839 19.4718 3.04268 19.4135C2.90146 19.3552 2.77316 19.2691 2.66526 19.1603C2.55735 19.0515 2.47201 18.9222 2.4142 18.7798C2.35639 18.6374 2.32727 18.4849 2.32854 18.331C2.3298 18.1771 2.36143 18.0251 2.42157 17.8837C2.48171 17.7423 2.56917 17.6143 2.67885 17.5074L19.695 0.351482ZM0.193655 8.95376C2.47935 4.5123 7.03523 1.71636 11.9982 1.71636C13.5143 1.71601 14.9919 1.97725 16.3789 2.46512L14.7583 4.09901C13.9263 3.68538 12.9904 3.45188 12 3.45188C8.55044 3.45188 5.754 6.27118 5.75403 9.74917C5.75404 10.7476 5.98562 11.6913 6.39588 12.5301L3.92169 15.0246C2.39514 13.8491 1.11258 12.3359 0.194802 10.5571C-0.0645738 10.0547 -0.0649106 9.45653 0.193655 8.95376ZM17.6041 6.96802L20.0781 4.47375C21.6047 5.64932 22.8874 7.16248 23.8052 8.94153C24.0646 9.44387 24.0649 10.042 23.8064 10.5448C21.5205 14.9863 16.9647 17.7818 12.0018 17.7818C10.4857 17.7821 9.00815 17.5209 7.62116 17.033L9.2415 15.3994C10.0735 15.813 11.0096 16.0465 12 16.0465C15.4496 16.0465 18.246 13.227 18.246 9.74917C18.246 8.75058 18.0145 7.80688 17.6041 6.96802ZM9.24284 6.96914C10.0042 6.20163 11.0022 5.81824 12 5.81824C12.3155 5.81824 12.6308 5.85684 12.9387 5.93349L8.2154 10.6956C7.89855 9.40286 8.24082 7.97945 9.24284 6.96914ZM11.0613 13.5647L15.7846 8.80249C16.1013 10.0952 15.7589 11.5184 14.7569 12.5285C13.755 13.5388 12.3434 13.8839 11.0613 13.5647Z"
fill="#5548FF"
/>
<path
d="M19.6951 0.351482C19.9034 0.135371 20.1869 0.00948757 20.4856 0.000511017C20.7173 -0.00642408 20.9456 0.057366 21.1406 0.183512C21.3357 0.309658 21.4884 0.492283 21.5787 0.707441C21.6691 0.922599 21.6928 1.16026 21.6469 1.38926C21.6009 1.61827 21.4874 1.82793 21.3213 1.99078L4.30491 19.1469C4.19879 19.2575 4.07189 19.3456 3.93163 19.4062C3.79137 19.4668 3.64054 19.4987 3.48794 19.5C3.33534 19.5012 3.18402 19.4718 3.0428 19.4135C2.90157 19.3552 2.77327 19.2691 2.66537 19.1603C2.55747 19.0515 2.47213 18.9222 2.41432 18.7798C2.35651 18.6374 2.32739 18.4849 2.32865 18.331C2.32992 18.1771 2.36154 18.0251 2.42169 17.8837C2.48183 17.7423 2.56929 17.6143 2.67896 17.5074L19.6951 0.351482Z"
fill="#5548FF"
/>
</svg>
);
export { AppsIcon, BlockchainIcon, EncryptionIcon, PrivateIcon, BlockstackMini, EyeIcon };

View File

@@ -1,4 +1,5 @@
export { Connect } from './components/connect';
export { useConnect } from './hooks/useConnect';
export * from './components/screen';
export * from './components/powered-by';
export { Title } from './components/typography';