adding design for Welcome screen (#14)

Author: piyalbasu

src/popup/App.tsx

@@ -10,13 +10,11 @@ import { reducer as auth } from "popup/ducks/authServices";
 import Router from "./Router";
 
 const GlobalStyle = createGlobalStyle`
-html, body, #root {
-  height: 100%;
-}
   body {
     background: ${COLOR_PALETTE.background};
     overscroll-behavior: none;
     font-family: 'Muli', sans-serif;
+    font-size: 100%;
     margin: 0;
   }
 `;

src/popup/components/Layout/Fullscreen.tsx

@@ -13,7 +13,7 @@ const HeaderEl = styled.h1`
   max-width: 21rem;
 `;
 
-const Screen = styled.div`
+export const Screen = styled.div`
   align-content: center;
   align-items: center;
   display: flex;

src/popup/styles/index.tsx

@@ -3,4 +3,5 @@ export const COLOR_PALETTE = {
   text: "#060E1A",
   primary: "#391EDA",
   primaryGradient: "linear-gradient(90deg, #391EDA 100%, #5339ED 0%)",
+  secondary: "#654CF7",
 };

src/popup/views/Welcome/index.tsx

@@ -1,28 +1,121 @@
 import React from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
+import Header from "popup/components/Layout/Header";
+import { Screen } from "popup/components/Layout/Fullscreen";
+import { COLOR_PALETTE } from "popup/styles";
 
-const FormUl = styled.ul`
-  list-style-type: none;
+const HalfScreen = styled.div`
+  padding: 0 1.6rem;
+  width: 23rem;
+`;
+
+const Box = styled.div`
+  border-radius: 1.875rem;
+  color: #fff;
+  padding: 2.6rem 2.3rem;
+  position: relative;
+`;
+
+const CreateBox = styled(Box)`
+  background: ${COLOR_PALETTE.primaryGradient};
+  color: #fff;
+`;
+
+const ImportBox = styled(Box)`
+  border: 1px solid ${COLOR_PALETTE.primary};
+  color: ${COLOR_PALETTE.primary};
+`;
+
+const BoxHeader = styled.div`
+  color: ${COLOR_PALETTE.text};
+  font-size: 2.4rem;
+  font-weight: 200;
+  height: 7.5rem;
+  line-height: 3.75rem;
+  margin-bottom: 2.9rem;
+
+  strong {
+    color: ${COLOR_PALETTE.primary};
+  }
+`;
+
+const BoxHeaderEl = styled.h3`
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2rem;
+  margin: 0.75rem 0;
+`;
+
+const BoxIcon = styled.div`
+  font-size: 2.8rem;
+  position: absolute;
+  top: 1.5rem;
+  right: 1.6rem;
+`;
+
+const LinkButtonWrapper = styled.div`
+  text-align: center;
+`;
+
+const LinkButton = styled(Link)`
+  border-radius: 1rem;
+  color: #fff;
+  display: inline-block;
+  font-weight: 800;
+  margin: 3.4rem auto 0;
+  padding: 1.25rem 2rem;
+  text-align: center;
+  text-decoration: none;
+`;
+
+const CreateButton = styled(LinkButton)`
+  background: ${COLOR_PALETTE.secondary};
+`;
+
+const ImportButton = styled(LinkButton)`
+  background: ${COLOR_PALETTE.primaryGradient};
 `;
 
 const Welcome = () => (
-  <nav>
-    <FormUl>
-      <>
-        <li>
-          <h1>
-            <Link to="/create-password">I'm new!</Link>
-          </h1>
-        </li>
-        <li>
-          <h1>
-            <Link to="/recover-account">I've done this before</Link>
-          </h1>
-        </li>
-      </>
-    </FormUl>
-  </nav>
+  <>
+    <Header />
+    <Screen>
+      <HalfScreen>
+        <BoxHeader>
+          Welcome, <br />
+          are you new to <strong>Lyra?</strong>
+        </BoxHeader>
+        <CreateBox>
+          <BoxIcon>
+            <span role="img" aria-label="Waving hand">
+              👋
+            </span>
+          </BoxIcon>
+          <BoxHeaderEl>I’m new!</BoxHeaderEl>
+          <p>I’m going to need a seed phrase</p>
+          <LinkButtonWrapper>
+            <CreateButton to="/create-password">Create wallet</CreateButton>
+          </LinkButtonWrapper>
+        </CreateBox>
+      </HalfScreen>
+      <HalfScreen>
+        <BoxHeader />
+        <ImportBox>
+          <BoxIcon>
+            <span role="img" aria-label="Seedling">
+              🌱
+            </span>
+          </BoxIcon>
+          <BoxHeaderEl>I’ve done this before</BoxHeaderEl>
+          <p>I have my 12 word seed phrase</p>
+          <LinkButtonWrapper>
+            <ImportButton to="/recover-account">Import wallet</ImportButton>
+          </LinkButtonWrapper>
+        </ImportBox>
+      </HalfScreen>
+    </Screen>
+  </>
 );
 
 export default Welcome;