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 Callout Component

Browse Source 
- Added variations of callout component
- Updated error messaging on login
This commit is contained in:
Dogma 2024-05-02 23:55:49 +10:00
parent f5aca98e49
commit 5c4b09735a
2 changed files with 58 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/react/src/ui/components/olcallout.tsx Normal file
View File

@ -0,0 +1,54 @@
import React from "react";
import { faSkull, faCamera, faFlag, faLink, faUnlink, faAngleDoubleRight, faExclamationCircle, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// Error message callout, only to be used for error messages
export function ErrorCallout(props: {
title?: string,
description?: string
}) {
return <div className="flex flex-row gap-2 w-fit bg-gray-300 dark:bg-gray-800 p-4 rounded-md border-[1px] border-red-800 text-red-700 dark:text-red-500 w-full">
{props.title && (<FontAwesomeIcon className="mt-1" icon={faExclamationCircle}></FontAwesomeIcon>)}
<div className="flex flex-col font-bold text-pretty content-center items-start gap-2">
{props.title}
<div className="flex text-xs font-medium whitespace-pre-line">
{props.description}
</div>
</div>
</div>
}
// General information callout for something that is just nice to know
export function InfoCallout(props: {
title?: string,
description?: string
}) {
return <div className="flex flex-row gap-2 w-fit bg-gray-300 dark:bg-gray-800 p-4 rounded-md border-[1px] border-blue-800 text-blue-400 dark:text-blue-400 w-full">
{props.title && (<FontAwesomeIcon className="mt-1" icon={faInfoCircle}></FontAwesomeIcon>)}
<div className="flex flex-col font-medium text-pretty content-center items-start gap-2">
{props.title}
{props.description && (<div className="flex text-xs font-medium whitespace-pre-line">
{props.description}
</div>)}
</div>
</div>
}
// Used for the "You are playing as BLUE/RED Commander" callouts, only on the login page. Accepted values for coalition are 'blue' and 'red'.
export function CommandCallout(props: {
coalition?: string,
}) {
return <div className="flex flex-row gap-2 w-fit bg-gray-300 dark:bg-gray-800 p-4 rounded-md border-[1px] border-gray-700 text-gray-400 dark:text-gray-400 w-full">
<FontAwesomeIcon className="mt-1" icon={faAngleDoubleRight}></FontAwesomeIcon>
<div className="font-medium text-pretty content-center items-start gap-2 whitespace-break-spaces">
You are playing as
{props.coalition=='blue' ? (
<div className="inline-block font-bold text-blue-500"> BLUE COMMANDER </div>
) : (
<div className="inline-block font-bold text-red-500"> RED COMMANDER </div>
)}
</div>
</div>
}

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

@ -1,6 +1,7 @@
import React, { useState, version } from 'react'
import { Modal } from './components/modal'
import { Card } from './components/card'
import { ErrorCallout, InfoCallout, CommandCallout } from '../../ui/components/olcallout'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowRight, faCheckCircle, faExternalLink, faLink, faUnlink } from '@fortawesome/free-solid-svg-icons'
import { VERSION, connectedToServer } from '../../olympusapp'
@ -16,7 +17,7 @@ export function LoginModal(props: {
const [password, setPassword] = useState("");
const [displayName, setDisplayName] = useState("");
return <Modal className="inline-flex max-h-[600px] overflow-y-auto h-[75%] scroll-smooth w-[80%] bg-white dark:bg-olympus-800 ">
return <Modal className="inline-flex max-h-[600px] overflow-y-auto h-[75%] scroll-smooth w-[80%] max-w-[1100px] bg-white dark:bg-olympus-800 ">
<div className='absolute gap-8 flex flex-col p-16 max-lg:p-12 w-full'>
<div className="flex flex-row max-lg:flex-col w-full gap-6">
<div className="flex flex-grow flex-col gap-5 w-[40%] max-lg:w-[100%] content-center justify-start">
@ -67,10 +68,8 @@ export function LoginModal(props: {
}
</>
:
<div>
There was an issue connecting you dog cunt
</div>
}
<ErrorCallout title='There was an issue connecting to the server' description='This IP Address is not currently available, or there is some other issue meaning it cannot be reached. Try restarting the Olympus server.'></ErrorCallout>
}
</>
:
<div>