fix: Spacing of new auth flow (#28)

* fix: Modal styling * fix: Modal size, Closes blockstack-app/issues/82 * fix: Retune vertical rhythm * fix: CheckList padding * fix: Icon alignment * fix: Use blue footer links in modal * fix: Fix sign in page header, Fixes leather-io/extension#79 * refactor: Remove all use of <Stack>, avoid implicit margins * fix: <Intro> component. Fixes leather-io/extension#73 * fix: Fixes leather-io/extension#84 * fix: How it works page * fix: Remove Stack component from <Screen/>
hirosystems · Feb 4, 2020 · e2cdda5 · e2cdda5
1 parent 1271875
commit e2cdda5
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 105 deletions.
diff --git a/src/popup.ts b/src/popup.ts
@@ -9,7 +9,7 @@ interface PopupOptions {
 // Ensures retina subpixel rounding
 // does not leave slightly blurry underlap
 const defaultWidth = 442;
-const defaultHeight = 635;
+const defaultHeight = 532;
 const defaultTitle = 'Continue with Data Vault';
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Window/open

diff --git a/src/react/components/checklist/index.tsx b/src/react/components/checklist/index.tsx
@@ -22,15 +22,15 @@ const CheckList: React.FC<CheckListProps> = ({ items }) => (
       return (
         <Flex
           px={6}
-          pb={3}
-          pt={key === 0 ? 0 : 3}
+          pb={5}
+          pt={5}
           borderBottom={items.length - 1 !== key ? '1px solid' : 'unset'}
           borderColor="inherit"
           align="center"
           textAlign="left"
           key={key}
         >
-          <Box color="blue" pr={3}>
+          <Box color="blue" alignSelf="stretch" mt={1} mr={4}>
             <Icon />
           </Box>
           <Item>{text}</Item>

diff --git a/src/react/components/checkmark.tsx b/src/react/components/checkmark.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const CheckmarkIcon = ({ size = 72 }: { size?: number }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="none" viewBox="0 0 72 72">
+    <circle cx="36" cy="36" r="34.5" fill="#fff" stroke="#00A73E" strokeWidth="3"></circle>
+    <path stroke="#00A73E" strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M21 37l10 10 20-22"></path>
+  </svg>
+);
diff --git a/src/react/components/link.tsx b/src/react/components/link.tsx
@@ -6,12 +6,10 @@ interface LinkProps extends BoxProps {
   _hover?: BoxProps;
 }
 
-const Link: React.FC<LinkProps> = ({ _hover = {}, children, ...rest }) => (
+export const Link: React.FC<LinkProps> = ({ _hover = {}, children, ...rest }) => (
   <Box {...rest}>
-    <Text _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }} fontWeight="medium">
+    <Text _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }} textStyle="caption.medium">
       {children}
     </Text>
   </Box>
 );
-
-export { Link };
diff --git a/src/react/components/modal/index.tsx b/src/react/components/modal/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Modal as BlockstackModal, ThemeProvider, theme, CSSReset, Flex, Box, Text } from '@blockstack/ui';
-import CloseIcon from 'mdi-react/CloseIcon';
 import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
 import { useHover } from 'use-events';
 import { Logo } from '../logo';
@@ -11,6 +10,17 @@ import { ContinueWithDataVault } from '../screens/sign-in';
 import { useConnect } from '../../hooks/useConnect';
 import { States } from '../connect/context';
 
+const CloseIcon = ({ size = 16 }) => (
+  <svg width={size} height={size} viewBox="0 0 16 16">
+    <path
+      fill="#C1C3CC"
+      fillRule="evenodd"
+      d="M4.817 3.403a1 1 0 00-1.414 1.414L6.586 8l-3.183 3.183a1 1 0 001.414 1.415L8 9.415l3.183 3.183a1 1 0 101.415-1.415L9.415 8l3.183-3.183a1.002 1.002 0 00-.325-1.631 1 1 0 00-1.09.217L8 6.586 4.817 3.403z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 interface HeaderTitleProps {
   title: string;
   hideIcon?: boolean;
@@ -19,7 +29,7 @@ interface HeaderTitleProps {
 const HeaderTitle: React.FC<HeaderTitleProps> = ({ hideIcon = false, title }) => (
   <Flex align="center">
     {hideIcon ? null : <Logo mr={2} />}
-    <Text fontWeight="bold" fontSize={'12px'}>
+    <Text fontWeight={500} fontSize={'12px'}>
       {title}
     </Text>
   </Flex>
@@ -32,13 +42,13 @@ interface ModalHeader {
   hideIcon?: boolean;
 }
 
-const ModalHeaderIconButton = (props: any) => {
+const ModalHeaderIconButton = ({ size, ...props }: any) => {
   const [hover, bind] = useHover();
   const Icon = props.icon;
 
   return (
-    <Box as="button" cursor={hover ? 'pointer' : 'unset'} opacity={hover ? 1 : 0.5} {...bind} {...props}>
-      <Icon size={20} />
+    <Box as="button" cursor={hover ? 'pointer' : 'unset'} {...bind} {...props}>
+      <Icon size={size} />
     </Box>
   );
 };
@@ -48,7 +58,7 @@ const ModalHeader = ({ title, back, hideIcon, close, ...rest }: ModalHeader) =>
 
   return (
     <Flex
-      p={[4, 5]}
+      p={4}
       borderRadius={['unset', '6px 6px 0 0']}
       bg="white"
       align="center"
@@ -58,11 +68,11 @@ const ModalHeader = ({ title, back, hideIcon, close, ...rest }: ModalHeader) =>
       borderBottomColor="inherit"
       {...rest}
     >
-      {back ? <ModalHeaderIconButton onClick={() => doChangeScreen(back)} icon={ChevronLeftIcon} /> : null}
+      {back ? <ModalHeaderIconButton onClick={() => doChangeScreen(back)} icon={ChevronLeftIcon} size={20} /> : null}
       <Flex align="center" mx={back ? 'auto' : 'unset'} transform={back ? 'translateX(-15px)' : 'unset'}>
         <HeaderTitle hideIcon={hideIcon} title={title} />
       </Flex>
-      {close ? <ModalHeaderIconButton icon={CloseIcon} onClick={doCloseDataVault} /> : null}
+      {close ? <ModalHeaderIconButton size={16} icon={CloseIcon} onClick={doCloseDataVault} /> : null}
     </Flex>
   );
 };

diff --git a/src/react/components/screen/screen-body.tsx b/src/react/components/screen/screen-body.tsx
@@ -1,23 +1,21 @@
 import React from 'react';
 
-import { Stack, BoxProps } from '@blockstack/ui';
+import { Flex, FlexProps } from '@blockstack/ui';
 import { Title, Body, Pretitle } from '../typography';
 
-export interface ScreenBodyProps extends BoxProps {
+export interface ScreenBodyProps extends FlexProps {
   title?: string;
   pretitle?: string | React.ElementType;
   body?: (string | JSX.Element)[];
   fullWidth?: boolean;
 }
 
-export const ScreenBody = ({ title, body, pretitle, fullWidth, ...rest }: ScreenBodyProps) => (
-  <Stack spacing={3} mx={fullWidth ? 0 : 6} {...rest}>
-    {pretitle && <Pretitle>{pretitle}</Pretitle>}
-    {title && <Title>{title}</Title>}
-    {body && (
-      <Stack spacing={[3, 4]}>
-        {body && body.length ? body.map((text, key) => <Body key={key}>{text}</Body>) : body}
-      </Stack>
-    )}
-  </Stack>
-);
+export const ScreenBody = ({ title, body, pretitle, fullWidth, ...rest }: ScreenBodyProps) => {
+  return (
+    <Flex mx={fullWidth ? 0 : 6} flexDirection="column" {...rest}>
+      {pretitle && <Pretitle>{pretitle}</Pretitle>}
+      {title && <Title>{title}</Title>}
+      {body && body.length ? body.map((text, key) => <Body key={key}>{text}</Body>) : body}
+    </Flex>
+  );
+};
diff --git a/src/react/components/screen/screen-header.tsx b/src/react/components/screen/screen-header.tsx
@@ -13,7 +13,7 @@ interface HeaderTitleProps {
 const HeaderTitle: React.FC<HeaderTitleProps> = ({ hideLogo, title }) => (
   <Flex align="center">
     {hideLogo ? null : <Logo mr={2} />}
-    <Text fontWeight="bold" fontSize={'12px'}>
+    <Text fontWeight={500} fontSize={'12px'}>
       {title}
     </Text>
   </Flex>
@@ -50,7 +50,7 @@ export const ScreenHeader = ({
   return (
     <Flex
       p={[4, 5]}
-      mb={6}
+      height="56px"
       borderBottom="1px solid"
       borderBottomColor="inherit"
       borderRadius={['unset', '6px 6px 0 0']}

diff --git a/src/react/components/screen/screen.tsx b/src/react/components/screen/screen.tsx
@@ -1,41 +1,25 @@
 import React from 'react';
 
-import { Stack, BoxProps, StackProps } from '@blockstack/ui';
+import { Flex, FlexProps } from '@blockstack/ui';
 import { ScreenLoader } from './screen-loader';
 
-interface ScreenBodyProps extends BoxProps, StackProps {
+interface ScreenBodyProps extends FlexProps {
   noMinHeight?: boolean;
   isLoading?: boolean;
 }
 
-export const Screen: React.FC<ScreenBodyProps> = ({
-  isInline,
-  spacing = 4,
-  align,
-  justify,
-  shouldWrapChildren,
-  noMinHeight,
-  isLoading,
-  children,
-  ...rest
-}) => (
+export const Screen: React.FC<ScreenBodyProps> = ({ noMinHeight, isLoading, children, ...rest }) => (
   <>
     <ScreenLoader isLoading={isLoading} />
-    <Stack
+    <Flex
       width="100%"
       flexDirection="column"
-      letterSpacing="tighter"
       minHeight={noMinHeight ? undefined : ['calc(100vh - 57px)', 'unset']}
       style={{ pointerEvents: isLoading ? 'none' : 'unset' }}
-      spacing={spacing}
-      isInline={isInline}
-      align={align}
-      justify={justify}
-      shouldWrapChildren={shouldWrapChildren}
       pb={6}
       {...rest}
     >
       {children}
-    </Stack>
+    </Flex>
   </>
 );
diff --git a/src/react/components/screens/finished.tsx b/src/react/components/screens/finished.tsx
@@ -1,24 +1,19 @@
 import React from 'react';
 import { Box, BoxProps, Button } from '@blockstack/ui';
 
-import { AppIcon } from '../app-icon';
-
 import { useConnect } from '../../hooks/useConnect';
-import { Logo } from '../logo';
 import { useAppDetails } from '../../hooks/useAppDetails';
 import { Screen, ScreenBody, ScreenActions } from '../screen';
+import { CheckmarkIcon } from '../checkmark';
 
 interface AppElementProps extends BoxProps {
   name: string;
   icon: string;
 }
 
-const AppElement = ({ name, icon, ...rest }: AppElementProps) => (
+const FinishedIcon = ({ ...rest }: AppElementProps) => (
   <Box mx="auto" size="70px" position="relative" {...rest}>
-    <Box position="absolute" top="-4px" right="-4px">
-      <Logo />
-    </Box>
-    <AppIcon size="64px" src={icon} alt={name} borderRadius="0" />
+    <CheckmarkIcon />
   </Box>
 );
 
@@ -28,13 +23,18 @@ export const Finished = () => {
 
   return (
     <Screen textAlign="center" noMinHeight>
-      <AppElement mt={5} name={name} icon={icon} />
+      <FinishedIcon mt={10} name={name} icon={icon} />
       <ScreenBody
         title={`${name} has been connected to your Data Vault`}
-        body={[`Everything you do in ${name} will be private, secure, and only accessible with your Secret Key.`]}
+        mt={4}
+        body={[
+          <Box mt={2}>
+            Everything you do in {name} will be private, secure, and only accessible with your Secret Key.
+          </Box>,
+        ]}
       />
       <ScreenActions>
-        <Button width="100%" onClick={() => doCloseDataVault()}>
+        <Button width="100%" mt={4} onClick={() => doCloseDataVault()}>
           Close
         </Button>
       </ScreenActions>

diff --git a/src/react/components/screens/how-it-works.tsx b/src/react/components/screens/how-it-works.tsx
@@ -1,16 +1,13 @@
 import React from 'react';
-import { Box, Text, Stack, Button } from '@blockstack/ui';
+import { Box, Text, Button } from '@blockstack/ui';
 
 import { useAppDetails } from '../../hooks/useAppDetails';
 import { BlockchainIcon, AppsIcon, EncryptionIcon } from '../vector';
 import { useConnect } from '../../hooks/useConnect';
 
 import { Screen, ScreenBody, ScreenActions } from '../screen/index';
 
-const howDataVaultWorks = (appName: string) => [
-  {
-    body: `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 ${appName} (and even Data Vault) can’t use it.`,
-  },
+const howDataVaultWorks = [
   {
     icon: <EncryptionIcon />,
     title: 'Encryption',
@@ -39,23 +36,32 @@ export const HowItWorks: React.FC = () => {
       <ScreenBody
         pretitle="How it works"
         title={`Data Vault keeps what you do in ${name} private`}
-        body={howDataVaultWorks(name).map(({ title, body, icon: Icon }, key) => (
-          <Box px={0} key={key}>
-            <Stack spacing={3}>
-              {Icon && (
+        body={[
+          <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) can’t use it.
+          </Text>,
+          <Box mt={2}>
+            {howDataVaultWorks.map(({ title, body, icon }, key) => (
+              <Box mt={8} key={key}>
                 <Box size="24px" color="blue" borderRadius="8px">
-                  {Icon && Icon}
+                  {icon}
                 </Box>
-              )}
-              {title && <Text fontWeight="semibold">{title}</Text>}
-              <Text pb={2}>{body}</Text>
-            </Stack>
-          </Box>
-        ))}
+                <Text mt={3} display="block" fontWeight="semibold">
+                  {title}
+                </Text>
+                <Text mt={2} display="block">
+                  {body}
+                </Text>
+              </Box>
+            ))}
+          </Box>,
+        ]}
       />
       <ScreenActions>
         <Button
           width="100%"
+          mt={6}
           onClick={() => {
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
             authenticate(authOptions);