From 85daaa37e9dc2b4652076b089ccdcb9e6dcbd79c Mon Sep 17 00:00:00 2001
From: Aly Raffauf <aly@aly.codes>
Date: Thu, 29 Jan 2026 20:18:55 -0500
Subject: [PATCH] make pretty

---
 src/App.tsx                    | 10 +++++-----
 src/Layout.tsx                 |  2 +-
 src/components/HackerNews.tsx  |  2 +-
 src/components/SearchBar.tsx   | 12 ++++++++----
 src/components/ServiceGrid.tsx |  2 +-
 src/components/Weather.tsx     |  2 +-
 src/index.css                  |  4 ++++
 7 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f9de999..2e2c2b1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,26 +17,26 @@ export function App() {
       <div className="grid gap-4 md:grid-cols-2">
         <div>
           {" "}
-          <h2 className="text-2xl font-semibold text-zinc-400 mb-4">Weather</h2>
+          <h2 className="text-2xl font-semibold text-white/70 mb-4">Weather</h2>
           <Weather />
         </div>
 
         <div>
-          <h2 className="text-2xl font-semibold text-zinc-400 mb-4">
+          <h2 className="text-2xl font-semibold text-white/70 mb-4">
             Hacker News
           </h2>
           <HackerNews />
         </div>
       </div>
-      <h2 className="text-2xl font-semibold text-zinc-400 mt-8 mb-4">
+      <h2 className="text-2xl font-semibold text-white/70 mt-8 mb-4">
         Websites
       </h2>
       <ServiceGrid services={websites} columns={2} />
-      <h2 className="text-2xl font-semibold text-zinc-400 mt-8 mb-4">
+      <h2 className="text-2xl font-semibold text-white/70 mt-8 mb-4">
         Public Apps
       </h2>
       <ServiceGrid services={apps} columns={4} />
-      <h2 className="text-2xl font-semibold text-zinc-400 mt-8 mb-4">
+      <h2 className="text-2xl font-semibold text-white/70 mt-8 mb-4">
         Tailnet Apps
       </h2>
       <ServiceGrid services={privateApps} columns={4} />
diff --git a/src/Layout.tsx b/src/Layout.tsx
index c75672f..7889d1f 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -2,7 +2,7 @@ import "./index.css";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <main className="min-h-screen p-8 max-w-6xl mx-auto">
+    <main className="min-h-screen p-8 max-w-6xl mx-auto bg-zinc-900">
       {/*<header className="mb-12">
         <h1 className="text-4xl font-bold">cute.haus</h1>
       </header>*/}
diff --git a/src/components/HackerNews.tsx b/src/components/HackerNews.tsx
index e38f957..a651be7 100644
--- a/src/components/HackerNews.tsx
+++ b/src/components/HackerNews.tsx
@@ -20,7 +20,7 @@ export function HackerNews() {
   }
 
   return (
-    <div className="p-4 bg-zinc-800 border border-zinc-700 rounded-lg">
+    <div className="p-4 rounded-xl bg-white/5 border border-rose-400/20">
       <ul className="space-y-2">
         {stories.map((story) => (
           <li key={story.id} className="flex gap-3 text-sm">
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 1d02bd1..1abad21 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -14,7 +14,7 @@ export function SearchBar() {
 
   return (
     <form
-      className="p-4 bg-zinc-800 border border-zinc-700 rounded-lg"
+      className="p-4 rounded-xl bg-white/5 border border-rose-400/20"
       onSubmit={(e) => {
         e.preventDefault();
         if (query.trim()) {
@@ -28,10 +28,14 @@ export function SearchBar() {
           onChange={(e) =>
             setEngine(engines.find((eng) => eng.name === e.target.value)!)
           }
-          className="px-3 py-2 bg-zinc-900 border border-zinc-600 rounded text-white focus:outline-none focus:border-zinc-500"
+          className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-white/40"
         >
           {engines.map((eng) => (
-            <option key={eng.name} value={eng.name}>
+            <option
+              key={eng.name}
+              value={eng.name}
+              className="bg-zinc-900 text-white"
+            >
               {eng.name}
             </option>
           ))}
@@ -41,7 +45,7 @@ export function SearchBar() {
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           placeholder="Search..."
-          className="flex-1 px-3 py-2 bg-zinc-900 border border-zinc-600 rounded text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-500"
+          className="flex-1 px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-white/40"
         />
       </div>
     </form>
diff --git a/src/components/ServiceGrid.tsx b/src/components/ServiceGrid.tsx
index f650535..74347b0 100644
--- a/src/components/ServiceGrid.tsx
+++ b/src/components/ServiceGrid.tsx
@@ -49,7 +49,7 @@ export default function ServiceGrid({
         <a
           key={service.name}
           href={service.url}
-          className="block p-4 bg-zinc-800 border border-zinc-700 rounded-lg hover:bg-zinc-750 hover:border-zinc-600 hover:scale-105 transition-all"
+          className="block p-4 rounded-xl bg-white/5 border border-rose-400/20 hover:border-rose-400/40 hover:scale-105 transition-all"
         >
           <div className="flex items-center gap-3">
             {service.icon && (
diff --git a/src/components/Weather.tsx b/src/components/Weather.tsx
index b526eb6..a23a286 100644
--- a/src/components/Weather.tsx
+++ b/src/components/Weather.tsx
@@ -65,7 +65,7 @@ export function Weather() {
   }
 
   return (
-    <div className="p-4 bg-zinc-800 border border-zinc-700 rounded-lg">
+    <div className="p-4 rounded-xl bg-white/5 border border-rose-400/20">
       <div className="flex items-center gap-4">
         {getWeatherIcon(weather.shortForecast, "w-12 h-12 text-zinc-300")}
         <div>
diff --git a/src/index.css b/src/index.css
index f1d8c73..f6ead4a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,5 @@
 @import "tailwindcss";
+
+body {
+    background: #18181b;
+}
-- 
2.51.2