Design changes

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
 

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>

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>

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>

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);