Welcome screen styling

packages/extension-ui/src/Popup/Welcome.tsx

@@ -4,7 +4,21 @@
 
 import React, { useContext } from 'react';
 
-import { ActionContext, Box, Button, Header } from '../components';
+import { ActionContext, Box, Button, ButtonArea, Header, List, VerticalSpace } from '../components';
+import styled from 'styled-components';
+
+const WelcomeLabel = styled.div.attrs(() => ({
+  children: 'Welcome'
+}))`
+  margin: 30px auto 40px auto;
+  font-size: 24px;
+  line-height: 33px;
+`;
+
+const Note = styled.p`
+  margin-bottom: 6px;
+  margin-top: 0;
+`;
 
 type Props = {};
 
@@ -17,21 +31,25 @@ export default function Welcome (): React.ReactElement<Props> {
   };
 
   return (
-    <div>
+    <>
       <Header label='welcome' />
+      <WelcomeLabel/>
+      <Note>Before we start, just a couple of notes regarding use:</Note>
       <Box>
-        Before we start, just a couple of notes regarding use -
-        <ul>
+        <List>
           <li>We do not send any clicks, pageviews or events to a central server</li>
           <li>We do not use any trackers or analytics</li>
           <li>We don&apos;t collect keys, addresses or any information - your information never leaves this machine</li>
-        </ul>
-        ... we are not in the information collection business (even anonymized).
+        </List>
+      </Box>
+      <Note>... we are not in the information collection business (even anonymized).</Note>
+      <VerticalSpace/>
+      <ButtonArea>
         <Button
           label='Understood, let me continue'
           onClick={_onClick}
         />
-      </Box>
-    </div>
+      </ButtonArea>
+    </>
   );
 }

packages/extension-ui/src/components/Box.tsx

@@ -21,15 +21,15 @@ function Box ({ banner, children, className }: Props): React.ReactElement<Props>
 }
 
 export default styled(Box)`
-  background: ${({ theme }): string => theme.background};
+  background: ${({ theme }): string => theme.readonlyInputBackground};
   border: ${({ theme }): string => theme.boxBorder};
   border-radius: ${({ theme }): string => theme.borderRadius};
   box-shadow: ${({ theme }): string => theme.boxShadow};
   color: ${({ theme }): string => theme.color};
   font-family: ${({ theme }): string => theme.fontFamily};
   font-size: ${({ theme }): string => theme.fontSize};
   margin: ${({ theme }): string => theme.boxMargin};
-  padding: 0.75rem 1rem;
+  padding: ${({ theme }): string => theme.boxPadding};
   position: relative;
 
   .banner {

packages/extension-ui/src/components/Button.tsx

@@ -50,9 +50,10 @@ export default styled(Button)`
     color: ${({ isDanger, theme }): string => isDanger ? theme.btnColorDanger : theme.btnColor};
     cursor: pointer;
     display: block;
-    font-size: ${({ theme }): string => theme.fontSize};
+    font-size: 15px;
     font-weight: 600;
     height: 48px;
+    line-height: 20px;
     padding: ${({ theme }): string => theme.btnPadding};
     text-align: center;
     width: 100%;

packages/extension-ui/src/components/List.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export default styled.ul`
+  list-style: none;
+  padding-inline-start: 10px;
+  text-indent: -22px;
+  margin-left: 21px;  
+
+  li {
+    margin-bottom: 8px;
+  }
+
+  li::before {
+    content: '\\2022';
+    color: ${({ theme }): string => theme.primaryColor};
+    font-size: 30px;
+    font-weight: bold; 
+    margin-right: 10px;
+    vertical-align: -20%;
+  }
+`;

packages/extension-ui/src/components/TextInputs.ts

@@ -26,10 +26,10 @@ const TextInput = css<Props>`
   font-size: ${({ theme }): string => theme.fontSize};
   resize: none;
   width: 100%;
-  ${({ withError }): typeof ErroredTextInputColors => (withError ? ErroredTextInputColors : DefaultTextInputColors)}
+  ${({ withError }): typeof ErroredTextInputColors => (withError ? ErroredTextInputColors : DefaultTextInputColors)};
 
   &:read-only {
-    background: ${({ theme }): string => theme.readonlyInputBackground}
+    background: ${({ theme }): string => theme.readonlyInputBackground};
     box-shadow: none;
     outline: none;
   }

packages/extension-ui/src/components/View.tsx

@@ -29,7 +29,7 @@ export default styled(View)`
   height: 100%;
   //padding: 0 1rem;
 
-  > div {
+  > * {
     margin-left: 1rem;
     margin-right: 1rem;
   }

packages/extension-ui/src/components/index.ts

@@ -18,6 +18,7 @@ export { default as IconBox } from './IconBox';
 export { default as Identicon } from './Identicon';
 export { default as InputWithLabel } from './InputWithLabel';
 export { default as Link } from './Link';
+export { default as List } from './List';
 export { default as Loading } from './Loading';
 export { default as MnemonicSeed } from './MnemonicSeed';
 export { default as TextAreaWithLabel } from './TextAreaWithLabel';

packages/extension-ui/src/components/themes.ts

@@ -41,7 +41,7 @@ export const defaultTheme = {
   lineHeight: '26px',
   linkColor: LINK_COLOR,
   linkColorDanger: DANGER_COLOR,
-  primaryColor: '#FF8301',
+  primaryColor: '#FF7D01',
   box: {
     error: {
       background: '#ffe6e6',