From d482db06b854850b6290c8bd81db5f79b5772159 Mon Sep 17 00:00:00 2001
From: Tsuni <akamitsunami@gmail.com>
Date: Mon, 28 Oct 2024 16:27:47 -0500
Subject: [PATCH] Adjust autocomplete and login styles

---
 src/components/AutocompleteSearch.tsx |  8 ++++--
 src/components/Login.tsx              | 40 +++++++++++++++++----------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/AutocompleteSearch.tsx b/src/components/AutocompleteSearch.tsx
index 523f381..3470fd8 100644
--- a/src/components/AutocompleteSearch.tsx
+++ b/src/components/AutocompleteSearch.tsx
@@ -113,10 +113,14 @@ const AutocompleteSearch: React.FC<HomeProps> = ({ layers, setStringValue, setBo
       {localStrVal && <p className="absolute right-2 top-1 text-xl text-[#00ad2b]">✓</p>}
       {isLoading && <p className="text-center">Loading...</p>}
       {!isLoading && options.length != 0 && (
-        <ul className="mt-1 max-h-20 w-full overflow-y-scroll rounded-md bg-white p-2">
+        <ul className="mt-1 max-h-32 w-full overflow-y-scroll rounded-md bg-white/70">
           {options.map((option) => {
             return (
-              <li key={option.properties?.gid} onClick={() => handleSelect(option)} className="hover:cursor-pointer hover:bg-tint-02">
+              <li
+                key={option.properties?.gid}
+                onClick={() => handleSelect(option)}
+                className="not-last:border-b border-gray-500 p-2 hover:cursor-pointer hover:bg-white"
+              >
                 {getName(option)}
               </li>
             )
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index edfdf89..eb9fef8 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -32,21 +32,31 @@ const Login: React.FC<LoginProps> = ({ auth }) => {
   }
 
   return (
-    <div className="p-20 text-center">
-      <h2 className="bold text-3xl">Admin Sign In</h2>
-      <form onSubmit={handleSignin} className="m-10">
-        <label className="m-2 block">
-          Password:
-          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
-        </label>
-        <div className="m-5 flex justify-center">
-          <button type="submit" className="rounded-sm border-0 bg-harvard-putty pb-1 pl-2 pr-2 pt-1 hover:bg-harvard-slate">
-            Sign In
-          </button>
-        </div>
-      </form>
-      {error && <p className="text-center text-red-dark">{error}</p>}
-      <LoadingOverlay isVisible={isLoading} color={'#888888'} />
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="rounded-lg border border-gray-500 p-10 text-center">
+        <img src="banner.png" alt="Red CORAL logo" className="mb-10 w-80" />
+        <h2 className="mb-10 text-3xl font-bold">Admin Login</h2>
+        <form onSubmit={handleSignin} className="w-full text-left">
+          <label htmlFor="password" className="mb-1 block text-sm">
+            Password
+          </label>
+          <div className="mb-2 flex justify-between gap-2">
+            <input
+              type="password"
+              className="flex-grow rounded-md border border-gray-500 px-2 py-1"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              id="password"
+            />
+            <button type="submit" className="rounded-md border-0 bg-harvard-putty px-2 py-1 hover:bg-harvard-slate">
+              Sign In
+            </button>
+          </div>
+        </form>
+        {error && <p className="text-center text-red-dark">{error}</p>}
+        <LoadingOverlay isVisible={isLoading} color={'#888888'} />
+      </div>
     </div>
   )
 }