From 5c4b09735a8adc484c6c0c7a55934f3d0278c874 Mon Sep 17 00:00:00 2001
From: Dogma <103559271+ArtificialDogma@users.noreply.github.com>
Date: Thu, 2 May 2024 23:55:49 +1000
Subject: [PATCH] Updated Callout Component

- Added variations of callout component
- Updated error messaging on login
---
 .../react/src/ui/components/olcallout.tsx     | 54 +++++++++++++++++++
 frontend/react/src/ui/modals/login.tsx        |  9 ++--
 2 files changed, 58 insertions(+), 5 deletions(-)
 create mode 100644 frontend/react/src/ui/components/olcallout.tsx

diff --git a/frontend/react/src/ui/components/olcallout.tsx b/frontend/react/src/ui/components/olcallout.tsx
new file mode 100644
index 00000000..dcc9fd82
--- /dev/null
+++ b/frontend/react/src/ui/components/olcallout.tsx
@@ -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>
+}
diff --git a/frontend/react/src/ui/modals/login.tsx b/frontend/react/src/ui/modals/login.tsx
index 65c8e8c8..3533ac97 100644
--- a/frontend/react/src/ui/modals/login.tsx
+++ b/frontend/react/src/ui/modals/login.tsx
@@ -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>