diff --git a/src/index.css b/src/index.css index ec2585e..884ad95 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,13 @@ +@font-face { + font-family: 'PTMono'; + src: url('assets/fonts/PTMono-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + font-family: 'PTMono', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 38675de..150d22b 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,7 +1,13 @@ import { useState } from 'react'; import styled from 'styled-components'; + import colors from 'styles/colors'; +import Heading from 'components/Form/Heading'; import Input from 'components/Form/Input' +import Button from 'components/Form/Button'; +import FancyBackground from 'components/misc/FancyBackground'; + +import { determineAddressType } from 'utils/address-type-checker'; const HomeContainer = styled.section` display: flex; @@ -9,28 +15,44 @@ const HomeContainer = styled.section` justify-content: center; align-items: center; height: 100%; + font-family: 'PTMono'; `; const UserInputMain = styled.div` background: ${colors.backgroundLighter}; + box-shadow: 4px 4px 0px ${colors.bgShadowColor}; border-radius: 8px; padding: 1rem; + z-index: 5; + min-height: 25vh; + min-width: 50vw; + margin: 1rem; `; const Home = (): JSX.Element => { const [userInput, setUserInput] = useState(''); + + const submit = () => { + // TODO - Submit form, using the following data: + console.log('Will Submit with: ', userInput); + console.log('Address Type: ', determineAddressType(userInput)); + }; + return ( + + Web Check setUserInput(e.target.value)} /> -

{ userInput }

+
);