From 603b1e5368ffee537d6c22f527139f9cb044c8c9 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sat, 24 Jul 2021 15:10:06 -0700
Subject: [PATCH] add styles

---
 src/App.tsx        | 10 +++++-----
 tailwind.config.js |  3 +++
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 69cdb38..3e52ed0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,8 +12,8 @@ const Greeter: React.FC<GreeterProps> = ({ name, setName }) => {
     <div>
       {name.length ? <>Hello </> : <>What is your name? </>}
       <input
-        autoComplete="false"
-        className="border-b focus:border-blue-400 border-gray-50 focus:outline-none text-center bg-transparent"
+        autoComplete="off"
+        className="border-b focus:border-lime-400 border-gray-50 focus:outline-none text-center bg-transparent"
         autoFocus
         type="text"
         style={{
@@ -30,10 +30,10 @@ function App() {
   const [count, setCount] = useState(0);
   const [name, setName] = useState("");
   return (
-    <div className="bg-regal-blue text-white bg-opacity-90 flex flex-col items-center justify-center h-screen">
+    <div className="bg-sky-800 bg-opacity-80 text-white flex flex-col items-center justify-center h-screen">
       <img
         src={logo}
-        className="w-1/2"
+        className="w-[300px] animate-spin"
         alt="logo"
         style={{
           animationDuration: `${20 / (name.length || 1)}s`,
@@ -43,7 +43,7 @@ function App() {
         <p className="text-3xl">Hello Vite + React!</p>
         <p>
           <button
-            className="text-xl shadow bg-blue-400 bg-opacity-60 hover:bg-blue-600 p-2 rounded m-2"
+            className="text-xl shadow hover:shadow-md transition-all bg-lime-500 bg-opacity-70 hover:bg-lime-600 p-2 rounded m-2"
             type="button"
             onClick={() => setCount((count) => count + 1)}
           >
diff --git a/tailwind.config.js b/tailwind.config.js
index cd91004..2f4b9d6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,4 @@
+const colors = require('tailwindcss/colors')
 module.exports = {
   mode: "jit",
   purge: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
@@ -6,6 +7,8 @@ module.exports = {
     extend: {
       colors: {
         "regal-blue": "#243c5a",
+        lime: colors.lime,
+        sky: colors.sky
       },
     },
   },