From 59ea6520452c6cbb14d23353cfb1696c24fbb384 Mon Sep 17 00:00:00 2001
From: Ty Morris <tirey@traveljoy.com>
Date: Wed, 1 May 2024 15:48:06 -0500
Subject: [PATCH] update colors

---
 public/styles/uno.css      | 17 ++++++++---------
 src/components/Button.tsx  |  2 +-
 src/components/Layout.tsx  |  8 ++++----
 src/components/Nav.tsx     |  7 ++-----
 src/components/NavItem.tsx |  5 ++---
 5 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/public/styles/uno.css b/public/styles/uno.css
index e2773d6..c29b94e 100644
--- a/public/styles/uno.css
+++ b/public/styles/uno.css
@@ -58,24 +58,23 @@
 .gap-8{gap:2rem;}
 .border{border-width:1px;}
 .border-b-1{border-bottom-width:1px;}
-.border-amber-300{--un-border-opacity:1;border-color:rgb(252 211 77 / var(--un-border-opacity));}
+.border-blue-300{--un-border-opacity:1;border-color:rgb(147 197 253 / var(--un-border-opacity));}
 .border-gray-2{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));}
 .focus\:border-blue-200:focus{--un-border-opacity:1;border-color:rgb(191 219 254 / var(--un-border-opacity));}
 .rounded-md{border-radius:0.375rem;}
 .border-none{border-style:none;}
 .border-solid{border-style:solid;}
 .border-b-solid{border-bottom-style:solid;}
-.bg-amber-200{--un-bg-opacity:1;background-color:rgb(253 230 138 / var(--un-bg-opacity));}
-.bg-amber-300{--un-bg-opacity:1;background-color:rgb(252 211 77 / var(--un-bg-opacity));}
-.bg-amber-50{--un-bg-opacity:1;background-color:rgb(255 251 235 / var(--un-bg-opacity));}
-.bg-amber-900{--un-bg-opacity:1;background-color:rgb(120 53 15 / var(--un-bg-opacity));}
 .bg-blue-100{--un-bg-opacity:1;background-color:rgb(219 234 254 / var(--un-bg-opacity));}
-.bg-slate-700{--un-bg-opacity:1;background-color:rgb(51 65 85 / var(--un-bg-opacity));}
+.bg-blue-200{--un-bg-opacity:1;background-color:rgb(191 219 254 / var(--un-bg-opacity));}
+.bg-blue-300{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));}
+.bg-blue-50{--un-bg-opacity:1;background-color:rgb(239 246 255 / var(--un-bg-opacity));}
+.bg-blue-700{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity));}
+.bg-blue-900{--un-bg-opacity:1;background-color:rgb(30 58 138 / var(--un-bg-opacity));}
 .bg-transparent{background-color:transparent;}
 .bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));}
-.hover\:bg-amber-300:hover{--un-bg-opacity:1;background-color:rgb(252 211 77 / var(--un-bg-opacity));}
-.hover\:bg-amber-400:hover{--un-bg-opacity:1;background-color:rgb(251 191 36 / var(--un-bg-opacity));}
-.hover\:bg-slate-700:hover{--un-bg-opacity:1;background-color:rgb(51 65 85 / var(--un-bg-opacity));}
+.hover\:bg-blue-400:hover{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity));}
+.hover\:bg-blue-700:hover{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity));}
 .fill-neutral-500{--un-fill-opacity:1;fill:rgb(115 115 115 / var(--un-fill-opacity));}
 .fill-white{--un-fill-opacity:1;fill:rgb(255 255 255 / var(--un-fill-opacity));}
 .p-0{padding:0;}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 8add3a2..b278911 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -11,7 +11,7 @@ export default function PinkButton({
 }: Props) {
   return (
     <button
-      class={`flex cursor-pointer items-center justify-center gap-3 rounded-md border-none px-4 py-2 text-base font-bold shadow-md  bg-amber-300 text-brown-800 hover:bg-amber-400  ${className}`}
+      class={`flex cursor-pointer items-center justify-center gap-3 rounded-md border-none px-4 py-2 text-base font-bold shadow-md  bg-blue-300 text-brown-800 hover:bg-blue-400  ${className}`}
       {...rest}
     >
       {children}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 1b88d0d..a55f7ea 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -18,7 +18,7 @@ export default function Layout({ title, children, currentPath }: Props) {
         <title>{title}</title>
         <link
           rel="icon"
-          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🥞</text></svg>"
+          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌊</text></svg>"
         />
         <script src="https://unpkg.com/htmx.org@1.9.9" />
         <link rel="stylesheet" href="/styles/uno.css" />
@@ -28,8 +28,8 @@ export default function Layout({ title, children, currentPath }: Props) {
 
       <style>{`* { box-sizing: border-box; margin: 0; outline: none; color: unset; }`}</style>
 
-      <body class="font-lato m-0 bg-amber-50 text-base">
-        <header class="border-b-solid border-b-1 fixed sticky flex w-full gap-4 border-amber-300 bg-amber-200 py-3 px-4 leading-5">
+      <body class="font-lato m-0 bg-blue-50 text-base">
+        <header class="border-b-solid border-b-1 fixed sticky flex w-full gap-4 border-blue-300 bg-blue-200 py-3 px-4 leading-5">
           <a
             href="/"
             class="no-underline text-brown-800"
@@ -46,7 +46,7 @@ export default function Layout({ title, children, currentPath }: Props) {
 
         <Nav currentPath={currentPath} />
 
-        <main class="m-auto flex flex-col justify-center gap-8 py-4 pl-20 md:pl-60 md:pr-10 bg-cream-200">
+        <main class="m-auto flex flex-col justify-center gap-8 py-4 pl-20 md:pl-60 md:pr-10">
           {children}
         </main>
       </body>
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 365b48b..3c230e1 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -4,7 +4,7 @@ import { routes } from "../routes";
 
 export default function Nav({ currentPath }: { currentPath: string }) {
   return (
-    <aside class="transition-width group fixed top-14 block h-full w-16 bg-amber-900 leading-5 duration-200 hover:w-56 md:w-56 text-cream-100">
+    <aside class="transition-width group fixed top-14 block h-full w-16 bg-blue-900 leading-5 duration-200 hover:w-56 md:w-56 text-cream-100">
       <nav>
         <ul class="m-0 flex w-full flex-col items-center p-0">
           <Button class="items-start! justify-start! my-4 w-5/6 pl-5 ">
@@ -17,10 +17,7 @@ export default function Nav({ currentPath }: { currentPath: string }) {
             <NavItem
               currentPath={currentPath}
               route={route}
-              style="bg-amber-200 hover:bg-amber-300 text-brown-900 hover:text-brown-700"
-            >
-              {route.label}
-            </NavItem>
+            />
           ))}
         </ul>
       </nav>
diff --git a/src/components/NavItem.tsx b/src/components/NavItem.tsx
index b29017a..bedd862 100644
--- a/src/components/NavItem.tsx
+++ b/src/components/NavItem.tsx
@@ -8,9 +8,8 @@ type NavItemProps = {
 export default function NavItem({ currentPath, route }: NavItemProps) {
   return (
     <li
-      class={`m-0 w-full list-none pl-6 text-slate-400 hover:bg-slate-700 hover:text-white ${
-        currentPath === route.link && "bg-slate-700 text-white"
-      }`}
+      class={`m-0 w-full list-none pl-6 text-slate-400 hover:bg-blue-700 hover:text-white ${currentPath === route.link && "bg-blue-700 text-white"
+        }`}
     >
       <a
         href={route.link}