From ceab1a605cfd893e40407fa3b9cf2d1185376a97 Mon Sep 17 00:00:00 2001
From: brian <brian@grug.dev>
Date: Mon, 11 Mar 2024 05:21:20 -0400
Subject: [PATCH] Design changes

---
 README.md                  | 1 +
 components/Error.tsx       | 2 +-
 components/Loading.tsx     | 2 +-
 components/RouteCards.tsx  | 2 +-
 components/RouteDialog.tsx | 2 +-
 5 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index b0e043b..a4dde59 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ This project provides a user-friendly web interface for managing a Caddy reverse
 
 ## TODO
 
+- [ ] More than just reverse_proxy directive
 - [ ] Authentication 
 - [ ] Persistant storage
 
diff --git a/components/Error.tsx b/components/Error.tsx
index 5e748f8..a2da1ee 100644
--- a/components/Error.tsx
+++ b/components/Error.tsx
@@ -11,7 +11,7 @@ export default function Error() {
 
     return (
         <div className='flex justify-center'>
-            <div className="flex justify-center items-center min-h-screen h-[90vh]">
+            <div className="flex justify-center items-center h-[80vh]">
                 <Card>
                     <CardHeader>
                         <CardTitle>Error</CardTitle>
diff --git a/components/Loading.tsx b/components/Loading.tsx
index 5a8c074..31dad6b 100644
--- a/components/Loading.tsx
+++ b/components/Loading.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 export default function Loading() {
     return (
         <div className='flex justify-center'>
-            <div className="flex items-center min-h-screen h-[90vh]">
+            <div className="flex items-center h-[70vh]">
                 <Image src="/loading.svg" alt="Loading" width={25} height={25} />
                 <p className='p-2'>Loading</p>
             </div>
diff --git a/components/RouteCards.tsx b/components/RouteCards.tsx
index b7f680c..38cf038 100644
--- a/components/RouteCards.tsx
+++ b/components/RouteCards.tsx
@@ -69,7 +69,7 @@ export default function RouteCards() {
                                     </div>
                                     <div>
                                         <p className="text-sm font-medium leading-none">
-                                            Tunneling to
+                                            Destination
                                         </p>
                                         <p className="text-sm text-muted-foreground">{getRouteUpstreams(route)?.map((upstream => upstream.dial))}</p>
                                     </div>
diff --git a/components/RouteDialog.tsx b/components/RouteDialog.tsx
index 42ce5a3..7afe13d 100644
--- a/components/RouteDialog.tsx
+++ b/components/RouteDialog.tsx
@@ -15,7 +15,7 @@ import { DialogClose } from "@radix-ui/react-dialog";
 export function RouteDialog({ route, routesMap, open, onOpenChange }: { route: Route, routesMap: Route[], open: boolean, onOpenChange: (open: boolean) => void }) {
     let index = routesMap.indexOf(route);
 
-    const [modifiedRoute, setRoute] = useState(route);
+    const [modifiedRoute, setRoute] = useState<Route>(route);