fix: Error in admin panel inputs fixed, plus improvements to modal panels

frontend/react/src/ui/modals/adminmodal.tsx

@@ -76,11 +76,11 @@ export function AdminModal(props: { open: boolean }) {
 
 
   return (
-    <Modal open={props.open}>
-      <div className="flex w-full gap-4">
-        <div className="w-[40%]">
+    <Modal open={props.open} size={"full"}>
+      <div className="flex flex-col lg:flex-row w-full gap-4">
+        <div className="lg:w-[40%]">
           <div className="text-white">Groups:</div>
-          <div className="flex max-h-[300px] flex-col gap-1 overflow-auto p-2">
+          <div className="flex max-h-[calc(100vh-280px)] flex-col gap-1 overflow-auto p-2">
             {configs.groups &&
               Object.keys(configs.groups).map((group: any) => {
                 return (
@@ -142,7 +142,7 @@ export function AdminModal(props: { open: boolean }) {
               type="text"
               autoComplete="new-password"
               onChange={(ev) => {
-                setNewUserName(ev.currentTarget.value);
+                setNewGroupName(ev.currentTarget.value);
               }}
               className={`
                 rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm
@@ -173,9 +173,9 @@ export function AdminModal(props: { open: boolean }) {
             </div>
           </div>
         </div>
-        <div className="flex w-[58%] flex-col gap-2">
+        <div className="flex lg:w-[58%] flex-col gap-2">
           <div className="text-white">Users:</div>
-          <div className={`flex max-h-[300px] flex-col gap-1 overflow-auto p-2`}>
+          <div className={`flex max-h-[calc(100vh-280px)] flex-col gap-1 overflow-auto p-2`}>
             {configs.users &&
               Object.keys(configs.users).map((user: any) => {
                 return (

frontend/react/src/ui/modals/components/modal.tsx

@@ -4,7 +4,7 @@ import { FaXmark } from "react-icons/fa6";
 import { getApp, OlympusApp } from "../../../olympusapp";
 import { OlympusState } from "../../../constants/constants";
 
-export function Modal(props: { open: boolean; children?: JSX.Element | JSX.Element[]; className?: string }) {
+export function Modal(props: { open: boolean; children?: JSX.Element | JSX.Element[]; className?: string; size?: "sm" | "md" | "lg" | "full" }) {
   const [splash, setSplash] = useState(Math.ceil(Math.random() * 7));
 
   useEffect(() => {
@@ -18,19 +18,18 @@ export function Modal(props: { open: boolean; children?: JSX.Element | JSX.Eleme
           <div className={`fixed left-0 top-0 z-30 h-full w-full bg-[#111111]/95`}></div>
           <div
             className={`
-              fixed left-[50%] top-[50%] z-40 inline-flex h-[75%] max-h-[600px]
-              w-[80%] max-w-[1100px] translate-x-[-50%] translate-y-[-50%]
-              overflow-y-auto scroll-smooth rounded-xl border-[1px] border-solid
-              border-gray-700 bg-white drop-shadow-md
-              dark:bg-olympus-800
-              max-md:h-full max-md:max-h-full max-md:w-full max-md:rounded-none
-              max-md:border-none
+              fixed left-[50%] top-[50%] z-40 inline-flex translate-x-[-50%] translate-y-[-50%]
+              overflow-y-auto scroll-smooth 
+              bg-olympus-800
+              max-md:rounded-none
+              max-md:border-none rounded-xl border-[1px] border-solid border-gray-700 drop-shadow-md
+              ${props.size === "lg" ? "h-[600px] w-[1100px] max-md:h-full max-md:w-full" : ""}
+              ${props.size === "md" ? "h-[600px] w-[950px] max-md:h-full max-md:w-full" : ""}
+              ${props.size === "sm" ? "h-[500px] w-[800px] max-md:h-full max-md:w-full" : ""}
+              ${props.size === "full" ? "h-full w-full" : ""}
             `}
           >
-            <img
-              src={`images/splash/${splash}.jpg`}
-              className={`contents-center w-full object-cover opacity-[7%]`}
-            ></img>
+            <img src={`images/splash/${splash}.jpg`} className={`contents-center w-full object-cover opacity-[4%]`}></img>
             <div className="fixed left-0 top-0 h-full w-full">
               <div
                 className={`

frontend/react/src/ui/modals/importexportmodal.tsx

@@ -96,6 +96,7 @@ export function ImportExportModal(props: { open: boolean }) {
 
   return (
     <Modal open={props.open} className={``}>
+      <div className="flex h-full w-full flex-col justify-between">
       <div className={`flex flex-col justify-between gap-2`}>
         <span
           className={`
@@ -353,6 +354,7 @@ export function ImportExportModal(props: { open: boolean }) {
           Back
         </button>
       </div>
+      </div>
     </Modal>
   );
 }

frontend/react/src/ui/modals/keybindmodal.tsx

@@ -61,7 +61,8 @@ export function KeybindModal(props: { open: boolean }) {
   }
 
   return (
-    <Modal open={props.open}>
+    <Modal open={props.open} size={"sm"}>
+      <div className="flex flex-col gap-4 h-full w-full">
       <div className={`flex flex-col gap-2`}>
         <span
           className={`
@@ -104,7 +105,7 @@ export function KeybindModal(props: { open: boolean }) {
           </div>
         )}
       </div>
-      <div className="flex justify-end">
+      <div className="flex justify-end mt-auto ">
         {shortcut && (
           <button
             type="button"
@@ -147,6 +148,7 @@ export function KeybindModal(props: { open: boolean }) {
           Back
         </button>
       </div>
+      </div>
     </Modal>
   );
 }

frontend/react/src/ui/modals/protectionpromptmodal.tsx

@@ -10,6 +10,7 @@ export function ProtectionPromptModal(props: { open: boolean }) {
   return (
     <Modal
       open={props.open}
+      size={"sm"}
     >
       <div className="flex h-full w-full flex-col justify-between gap-12">
         <div className={`flex flex-col items-start gap-2`}>

frontend/react/src/ui/modals/warningmodal.tsx

@@ -46,19 +46,12 @@ export function WarningModal(props: { open: boolean }) {
         );
         break;
       case WarningSubstate.NOT_SECURE:
-      case WarningSubstate.NOT_CHROME:
         warningText = (
           <div className="flex flex-col gap-2 text-gray-400">
             <span>Your connection to DCS Olympus is not secure.</span>
             <span>To protect your personal data some advanced DCS Olympus features like the camera plugin or the audio backend have been disabled.</span>
             <span>
-              To solve this issue, DCS Olympus should be served using the{" "}
-              <span
-                className={`italic`}
-              >
-                https
-              </span>{" "}
-              protocol.
+              To solve this issue, DCS Olympus should be served using the <span className={`italic`}>https</span> protocol.
             </span>
             <span>To do so, we suggest using a dedicated server and a reverse proxy with SSL enabled.</span>
             <div className="mt-5 flex gap-4">
@@ -73,27 +66,26 @@ export function WarningModal(props: { open: boolean }) {
           </div>
         );
         break;
-        case WarningSubstate.ERROR_UPLOADING_CONFIG:
-          warningText = (
-            <div className="flex flex-col gap-2 text-gray-400">
-              <span>An error has occurred uploading the admin configuration.</span>
-              <span></span>
-              
-            </div>
-          );
-          break;
+      case WarningSubstate.ERROR_UPLOADING_CONFIG:
+        warningText = (
+          <div className="flex flex-col gap-2 text-gray-400">
+            <span>An error has occurred uploading the admin configuration.</span>
+            <span></span>
+          </div>
+        );
+        break;
       default:
         break;
     }
   }
 
   return (
-    <Modal open={props.open}>
+    <Modal open={props.open} size={"sm"}>
       <div className="flex gap-2 text-xl text-white">
         <FaExclamationTriangle className={`my-auto text-4xl text-yellow-300`} />
         <div className="my-auto">Warning</div>
       </div>
-      <div className="mt-10 text-white">{warningText}</div>
+      <div className="text-white">{warningText}</div>
       <div className="ml-auto mt-auto flex">
         <button
           type="button"

frontend/react/src/ui/panels/header.tsx

@@ -106,6 +106,12 @@ export function Header() {
         align-center
         dark:border-gray-800 dark:bg-olympus-900
       `}
+      onWheel={(e) => {
+        if (scrollRef.current) {
+          if (e.deltaY > 0) (scrollRef.current as HTMLElement).scrollLeft += 100;
+          else (scrollRef.current as HTMLElement).scrollLeft -= 100;
+        }
+      }}
     >
       <img src="images/icon.png" className={`my-auto h-10 w-10 rounded-md p-0`}></img>
       {!scrolledLeft && (
@@ -149,21 +155,21 @@ export function Header() {
             </div>
           </div>
           <div className="w-8">
-          {savingSessionData ? (
-            <div className="text-white">
-              <FaSpinner className={`animate-spin text-2xl`} />
-            </div>
-          ) : (
-            <div className={`relative text-white`}>
-              <FaFloppyDisk className={`absolute -top-3 text-2xl`} />
-              <FaCheck
-                className={`
+            {savingSessionData ? (
+              <div className="text-white">
+                <FaSpinner className={`animate-spin text-2xl`} />
+              </div>
+            ) : (
+              <div className={`relative text-white`}>
+                <FaFloppyDisk className={`absolute -top-3 text-2xl`} />
+                <FaCheck
+                  className={`
                   absolute left-[9px] top-[-6px] text-2xl text-olympus-900
                 `}
-              />
-              <FaCheck className={`absolute left-3 top-0 text-green-500`} />
-            </div>
-          )}
+                />
+                <FaCheck className={`absolute left-3 top-0 text-green-500`} />
+              </div>
+            )}
           </div>
         </div>