From e6220672303d3f5dfc5a42edcfa8f361650c393b Mon Sep 17 00:00:00 2001
From: Dogma <103559271+ArtificialDogma@users.noreply.github.com>
Date: Wed, 1 May 2024 21:46:10 +1000
Subject: [PATCH] Updated UI of Login Screen

- Fixed styling
- Added first layer of responsive design
---
 frontend/react/src/ui/modals/login.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/react/src/ui/modals/login.tsx b/frontend/react/src/ui/modals/login.tsx
index 3bec25ff..702bff14 100644
--- a/frontend/react/src/ui/modals/login.tsx
+++ b/frontend/react/src/ui/modals/login.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, version } from 'react'
 import { Modal } from './components/modal'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowRight, faCheckCircle, faExternalLink, faLink, faUnlink } from '@fortawesome/free-solid-svg-icons'
@@ -12,32 +12,32 @@ export function LoginModal(props: {
     const [password, setPassword] = useState("");
 
     return <Modal className="h-[70%] w-[70%] overflow-hidden bg-olympus-800 flex">
-        <img src="/resources/theme/images/splash/1.jpg" className="w-full opacity-10 contents-center" />
-        <div className="absolute p-24 w-full flex h-full">
-            <div className="flex flex-col gap-5 w-[40%] h-full content-center justify-center">
+        <img src="/resources/theme/images/splash/1.jpg" className="w-full opacity-5 contents-center" />
+        <div className="absolute flex flex-row max-lg:flex-col p-24 max-lg:p-12 w-full h-full">
+            <div className="flex flex-col gap-5 w-[40%] max-lg:w-[100%] h-full content-center justify-start">
                 {
                     !props.checkingPassword ?
                         <>
                             <div className="flex flex-col items-start">
                                 <div className="pt-1 text-gray-800 dark:text-gray-400 text-xs">Connect to</div>
-                                <div className="flex text-gray-800 dark:text-gray-200 text-sm font-extrabold items-center justify-center gap-2"><div data-connected={connectedToServer} className="py-auto text-green-400 data-[connected='true']:dark:bg-green-400 dark:bg-red-500 w-4 h-4 rounded-full"></div> {window.location.toString()} </div>
+                                <div className="flex text-gray-800 dark:text-gray-200 text-md font-bold items-center justify-center gap-2"><div data-connected={connectedToServer} className="py-auto text-green-400 data-[connected='true']:dark:bg-green-400 dark:bg-red-500 w-3 h-3 rounded-full"></div> 120.34.546.60:3000 </div>
                             </div>
-                            <div className="flex flex-col items-start">
+                            <div className="flex flex-col items-start gap-2">
                                 <h1 className="text-4xl text-gray-800 dark:text-white font-bold">DCS Olympus</h1>
-                                <div className="flex gap-2 mb-2 select-none rounded-sm content-center text-green-700 dark:text-green-400 text-sm"><FontAwesomeIcon icon={faCheckCircle} className="my-auto" />Version {VERSION}</div>
+                                <div className="flex gap-2 mb-2 select-none rounded-sm content-center text-green-700 dark:text-green-400 text-sm font-semibold"><FontAwesomeIcon icon={faCheckCircle} className="my-auto" />Version {VERSION}</div>
                             </div>
                             {
                                 !props.loginError ?
                                     <>
-                                        <div className="flex flex-col items-start">
+                                        <div className="flex flex-col items-start gap-2">
                                             <label className=" text-gray-800 dark:text-white text-md">Password</label>
                                             <input type="text" onChange={(ev) => setPassword(ev.currentTarget.value)} className="w-80 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Enter password" required />
                                         </div>
                                         <div className='flex'>
-                                            <button type="button" onClick={() => props.onLogin(password)} className="flex contents-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm">
+                                            <button type="button" onClick={() => props.onLogin(password)} className="flex content-center items-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm">
                                                 Login <FontAwesomeIcon className="my-auto" icon={faArrowRight} />
                                             </button>
-                                            <button type="button" className="flex contents-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm dark:border-gray-600 border-[1px] dark:text-gray-400">
+                                            <button type="button" className="flex content-center items-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm dark:border-gray-600 border-[1px] dark:text-gray-400">
                                                 View Guide <FontAwesomeIcon className="my-auto" icon={faExternalLink} />
                                             </button>
                                         </div>
@@ -61,8 +61,8 @@ export function LoginModal(props: {
                         </div>
                 }
             </div>
-            <div>
-
+            <div className='flex grow'>
+                Test
             </div>
         </div>
     </Modal >