From 25532256515ed4ced020ac282cda1141a8b85acc Mon Sep 17 00:00:00 2001
From: TJ Maynes <tj@tjmaynes.com>
Date: Tue, 25 Jun 2024 14:38:54 -0500
Subject: [PATCH] chore: add header and footer styling

---
 e2e/home.spec.ts                    | 10 +++++++++
 src/App.tsx                         | 33 ++++++++++++++++++++++-------
 src/components/SimpleJsonEditor.tsx |  6 +++---
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts
index 521faa4..a6c0b37 100644
--- a/e2e/home.spec.ts
+++ b/e2e/home.spec.ts
@@ -10,6 +10,16 @@ test.describe('when a user navigates to the homepage', () => {
     await expect(page).toHaveTitle(/JSON Validator/)
   })
 
+  test('has heading', async ({ page }) => {
+    await page.getByText('JSON Validator').click()
+    await expect(page).toHaveURL('https://github.com/tjmaynes/json-validator')
+  })
+
+  test('has footer', async ({ page }) => {
+    await page.getByText('TJ Maynes').click()
+    await expect(page).toHaveURL('https://tjmaynes.com/')
+  })
+
   test('has initial state set', async ({ page }) => {
     await expect(page.getByText('🤘')).toBeVisible()
     await expect(page.getByText('👍')).not.toBeVisible()
diff --git a/src/App.tsx b/src/App.tsx
index 3304208..d7d422b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,30 @@
 import { SimpleJsonEditor } from '@/components'
 
-const App = () => {
-  return (
-    <div className="grid grid-flow-row">
-      <header>JSON Validator</header>
+const App = () => (
+  <div className="font-mono grid grid-flow-row bg-amber-200">
+    <header className="text-center pl-0 mt-3 sm:text-left sm:pl-4">
+      <a
+        href="https://github.com/tjmaynes/json-validator"
+        className="text-2xl font-bold text-blue-600 dark:text-blue-500"
+      >
+        JSON Validator
+      </a>
+    </header>
+    <section className="p-7">
       <SimpleJsonEditor />
-      <footer>TJ Maynes</footer>
-    </div>
-  )
-}
+    </section>
+    <footer className="pl-0 mb-4 sm:pl-4">
+      <p className="text-sm text-center sm:text-left">
+        Built for fun & learning by{' '}
+        <a
+          href="https://tjmaynes.com/"
+          className="text-blue-600 dark:text-blue-500"
+        >
+          TJ Maynes
+        </a>
+      </p>
+    </footer>
+  </div>
+)
 
 export default App
diff --git a/src/components/SimpleJsonEditor.tsx b/src/components/SimpleJsonEditor.tsx
index 643f668..941e63f 100644
--- a/src/components/SimpleJsonEditor.tsx
+++ b/src/components/SimpleJsonEditor.tsx
@@ -126,7 +126,7 @@ export const SimpleJsonEditor = () => {
   const onCopyButtonClickedHandler = useCallback(() => {
     navigator.clipboard.writeText(state.value)
 
-    toast('Copied to clipboard!', { icon: '✍' })
+    toast('Copied to clipboard!', { icon: '🐾' })
   }, [state])
 
   const onClearButtonClickedHandler = useCallback(() => {
@@ -138,8 +138,8 @@ export const SimpleJsonEditor = () => {
   }, [])
 
   return (
-    <div className="flex flex-col w-full h-full bg-amber-200 p-10">
-      <p className="mb-7 text-center text-7xl">{emoji}</p>
+    <div className="flex flex-col w-full h-full">
+      <p className="mb-8 text-center text-7xl">{emoji}</p>
       <JsonEditor
         placeholder="Type or paste your json here..."
         value={state.value}