From 0a3ebec2686ee7e9cebce7090c80f96eed163c34 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 27 Jan 2024 19:37:42 -0800
Subject: [PATCH] (ui) ui cleanup

---
 .../src/components/enter_proxy_url.tsx        | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/enter_proxy_url.tsx b/ui/litellm-dashboard/src/components/enter_proxy_url.tsx
index 1d7ae2a804..ea43d46235 100644
--- a/ui/litellm-dashboard/src/components/enter_proxy_url.tsx
+++ b/ui/litellm-dashboard/src/components/enter_proxy_url.tsx
@@ -1,14 +1,14 @@
 "use client";
 
-import React, { useState } from "react";
-import { Button, TextInput } from "@tremor/react";
+import React, { useState, ChangeEvent } from "react";
+import { Button, Col, Grid, TextInput } from "@tremor/react";
 import { Card, Text } from "@tremor/react";
 
 const EnterProxyUrl: React.FC = () => {
   const [proxyUrl, setProxyUrl] = useState<string>("");
   const [isUrlSaved, setIsUrlSaved] = useState<boolean>(false);
 
-  const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
     setProxyUrl(event.target.value);
     // Reset the saved status when the URL changes
     setIsUrlSaved(false);
@@ -20,6 +20,9 @@ const EnterProxyUrl: React.FC = () => {
     setIsUrlSaved(true);
   };
 
+  // Construct the URL for clicking
+  const clickableUrl = `${window.location.href}?proxyBaseUrl=${proxyUrl}`;
+
   return (
     <div>
       <Card decoration="top" decorationColor="blue" style={{ width: '1000px' }}>
@@ -32,24 +35,27 @@ const EnterProxyUrl: React.FC = () => {
           onChange={handleUrlChange}
           placeholder="https://your-proxy-endpoint.com"
         />
-        <Button onClick={handleSaveClick}>Save</Button>
+        <Button onClick={handleSaveClick} className="gap-2">Save</Button>
         {/* Display message if the URL is saved */}
         {isUrlSaved && (
-        <div>
-
+          <div>
+            <Grid numItems={1} className="gap-2">
+            <Col>
             <p>
-            Save this URL: {window.location.href + "?proxyBaseUrl=" + proxyUrl}
+              Proxy Admin UI (Save this URL): {clickableUrl}
             </p>
+            </Col>
+            <Col>
             <p>
-            Go here 👉 
-            <a href={window.location.href + "?proxyBaseUrl=" + proxyUrl} target="_blank" rel="noopener noreferrer">
-            {window.location.href + "?proxyBaseUrl=" + proxyUrl}
-            </a>
+              Get Started with Proxy Admin UI  👉 
+              <a href={clickableUrl} target="_blank" rel="noopener noreferrer" style={{ color: 'blue', textDecoration: 'underline' }}>
+                {clickableUrl}
+              </a>
             </p>
-
-        </div>
+            </Col>
+            </Grid>
+          </div>
         )}
-
       </Card>
     </div>
   );