weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated UI of Login Screen

Browse Source 
- Fixed styling
- Added first layer of responsive design
This commit is contained in:
Dogma 2024-05-01 21:46:10 +10:00
parent c4e484706a
commit e622067230
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/react/src/ui/modals/login.tsx
View File

@ -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 >