diff --git a/src/GroundsForSupport.Client/src/App.css b/src/GroundsForSupport.Client/src/App.css index ef377c2..c4d5437 100644 --- a/src/GroundsForSupport.Client/src/App.css +++ b/src/GroundsForSupport.Client/src/App.css @@ -16,12 +16,22 @@ header img { width: 12rem; } +header .info { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; + max-width: 31.25rem; + text-align: center; +} + form { background-color: #181818; border-radius: 0.25rem; flex-direction: column; gap: 0.5rem; - width: 22.5rem; + width: 100%; + max-width: 31.25rem; padding: 1rem; display: flex; box-shadow: 0 4px 8px #0000001a; diff --git a/src/GroundsForSupport.Client/src/App.tsx b/src/GroundsForSupport.Client/src/App.tsx index fe0fb1a..01e704f 100644 --- a/src/GroundsForSupport.Client/src/App.tsx +++ b/src/GroundsForSupport.Client/src/App.tsx @@ -1,11 +1,6 @@ import '@/App.css'; import { useRef, useState } from 'react'; -// TODO: Maybe be good to require -// the user provide some sort of -// identifier so we can display -// that as part of the feed - function App() { const [amount, setAmount] = useState(''); const [email, setEmail] = useState(''); @@ -15,13 +10,13 @@ function App() { const emailInputRef = useRef(null); function handleAmountInput(event: React.ChangeEvent) { - errors.amount = undefined; + setErrors((prevErrors) => ({ ...prevErrors, amount: undefined })); const value = parseInt(event.target.value); setAmount(isNaN(value) ? '' : value); } function handleEmailInput(event: React.ChangeEvent) { - errors.email = undefined; + setErrors((prevErrors) => ({ ...prevErrors, email: undefined })); setEmail(event.target.value); } @@ -69,8 +64,17 @@ function App() { return ( <>
- Logo -

Some information about me

+ Profile picture of Stevan Freeborn +
+

Stevan Freeborn

+

+ I'm a dad of 2 who enjoys drinking coffee, lifting weights, and solving problems with + code. You really don't need to buy me a coffee. +

+