diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index aba7724..f8a0cc8 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -5,10 +5,20 @@ const icons = { cookie: ``, windows: ``, shield: ``, + logo: ``, }; + export type Icons = keyof typeof icons; export function Icon(props: { name: Icons }) { - // eslint-disable-next-line react/no-danger - return
; + return ( +
+ ); } diff --git a/src/components/SetupScreen.css b/src/components/SetupScreen.css index e69de29..8407b79 100644 --- a/src/components/SetupScreen.css +++ b/src/components/SetupScreen.css @@ -0,0 +1,41 @@ +.setup-screen .title { + font-size: 1.5rem; + color: white; +} + +.setup-screen .paragraph { + font-size: 1rem; + color: #666485; + max-width: 220px; +} + +.setup-screen .top { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1; +} + +.setup-screen { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + box-sizing: border-box; + padding: 2rem; + text-align: center; +} + +.setup-screen .icon { + background-color: #0b0b1b77; + color: #945DCC; + height: 40px; + font-size: 20px; + width: 40px; + border-radius: 9999px; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} diff --git a/src/components/SetupScreen.tsx b/src/components/SetupScreen.tsx index 3cc481a..7e658ae 100644 --- a/src/components/SetupScreen.tsx +++ b/src/components/SetupScreen.tsx @@ -3,6 +3,7 @@ import { useCallback } from 'react'; import { Button } from '~components/Button'; import './SetupScreen.css'; +import { Icon } from '~components/Icon'; export function SetupScreen() { const open = useCallback(() => { @@ -11,11 +12,16 @@ export function SetupScreen() { }, []); return ( -
-

Le's get this set up!

-

- To get started, we need to setup some things first. Click the button below to continue. -

+
+
+
+ +
+

Le's get this set up!

+

+ To get started, we need to setup some things first. Click the button below to continue. +

+