Final UI Tweaks

fission/src/ui/components/Modal.tsx

@@ -56,7 +56,7 @@ const Modal: React.FC<ModalProps> = ({
             <div
                 id={modalId}
                 key={modalId}
-                className={`${className} flex flex-col absolute max-w-[98vw] max-h-[90vh] w-fit h-fit left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background text-main-text m-auto border-5 rounded-2xl shadow-sm shadow-slate-800`}
+                className={`${className} flex flex-col absolute max-w-[50vw] max-h-[95vh] w-fit h-fit left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background text-main-text m-auto border-5 rounded-2xl shadow-sm shadow-slate-800`}
             >
                 {name && (
                     <div id="header" className="flex items-center gap-8 h-16">
@@ -78,7 +78,7 @@ const Modal: React.FC<ModalProps> = ({
                     id="content"
                     className={`${contentClassName || ""} ${
                         !contentClassName?.includes("mx") ? "mx-[2rem]" : ""
-                    } flex flex-col gap-4 max-h-75vh p-4`}
+                    } flex flex-col gap-4 max-h-[75vh]`}
                 >
                     {children}
                 </div>

fission/src/ui/components/StyledComponents.tsx

@@ -3,7 +3,6 @@ import Label, { LabelSize } from "./Label"
 import Button, { ButtonProps, ButtonSize } from "./Button"
 import { IoCheckmark, IoPencil, IoPeople, IoTrashBin } from "react-icons/io5"
 import { HiDownload } from "react-icons/hi"
-import { AiOutlinePlus } from "react-icons/ai"
 import { BiRefresh } from "react-icons/bi"
 import { AiFillWarning } from "react-icons/ai"
 import { BsCodeSquare } from "react-icons/bs"
@@ -58,7 +57,8 @@ export class SynthesisIcons {
     /** Large icons: used for icon buttons */
     public static DeleteLarge = (<IoTrashBin size={"1.25rem"} />)
     public static DownloadLarge = (<HiDownload size={"1.25rem"} />)
-    public static AddLarge = (<AiOutlinePlus size={"1.25rem"} />)
+    public static AddLarge = (<FaPlus size={"1.25rem"} />)
+    public static GearLarge = (<FaGear size={"1.25rem"} />)
     public static RefreshLarge = (<BiRefresh size={"1.25rem"} />)
     public static SelectLarge = (<IoCheckmark size={"1.25rem"} />)
     public static EditLarge = (<IoPencil size={"1.25rem"} />)

fission/src/ui/modals/configuring/SettingsModal.tsx

@@ -1,34 +1,38 @@
 import React, { useState } from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { FaGear } from "react-icons/fa6"
 import Label, { LabelSize } from "@/components/Label"
 import Dropdown from "@/components/Dropdown"
-import Slider from "@/components/Slider"
 import Checkbox from "@/components/Checkbox"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import { SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
 import { QualitySetting } from "@/systems/preferences/PreferenceTypes"
 import { Box } from "@mui/material"
-import { Spacer } from "@/ui/components/StyledComponents"
+import { Spacer, SynthesisIcons } from "@/ui/components/StyledComponents"
 import World from "@/systems/World"
 
 const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const [qualitySettings, setQualitySettings] = useState<string>(
         PreferencesSystem.getGlobalPreference<string>("QualitySettings")
     )
-    const [zoomSensitivity, setZoomSensitivity] = useState<number>(
+
+    // Disabled until camera settings are implemented
+    /* const [zoomSensitivity, setZoomSensitivity] = useState<number>(
         PreferencesSystem.getGlobalPreference<number>("ZoomSensitivity")
     )
     const [pitchSensitivity, setPitchSensitivity] = useState<number>(
         PreferencesSystem.getGlobalPreference<number>("PitchSensitivity")
     )
     const [yawSensitivity, setYawSensitivity] = useState<number>(
         PreferencesSystem.getGlobalPreference<number>("YawSensitivity")
-    )
+    ) */
+
     const [reportAnalytics, setReportAnalytics] = useState<boolean>(
         PreferencesSystem.getGlobalPreference<boolean>("ReportAnalytics")
     )
-    const [useMetric, setUseMetric] = useState<boolean>(PreferencesSystem.getGlobalPreference<boolean>("UseMetric"))
+
+    // Disabled until use metric is implemented
+    // const [useMetric, setUseMetric] = useState<boolean>(PreferencesSystem.getGlobalPreference<boolean>("UseMetric"))
+
     const [renderScoringZones, setRenderScoringZones] = useState<boolean>(
         PreferencesSystem.getGlobalPreference<boolean>("RenderScoringZones")
     )
@@ -44,29 +48,32 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
 
     const saveSettings = () => {
         PreferencesSystem.setGlobalPreference<string>("QualitySettings", qualitySettings)
-        PreferencesSystem.setGlobalPreference<number>("ZoomSensitivity", zoomSensitivity)
-        PreferencesSystem.setGlobalPreference<number>("PitchSensitivity", pitchSensitivity)
-        PreferencesSystem.setGlobalPreference<number>("YawSensitivity", yawSensitivity)
+
         PreferencesSystem.setGlobalPreference<boolean>("ReportAnalytics", reportAnalytics)
-        PreferencesSystem.setGlobalPreference<boolean>("UseMetric", useMetric)
         PreferencesSystem.setGlobalPreference<boolean>("RenderScoringZones", renderScoringZones)
         PreferencesSystem.setGlobalPreference<boolean>("RenderSceneTags", renderSceneTags)
         PreferencesSystem.setGlobalPreference<boolean>("RenderScoreboard", renderScoreboard)
         PreferencesSystem.setGlobalPreference<boolean>("SubsystemGravity", subsystemGravity)
 
+        // Disabled until these settings are implemented
+        /* PreferencesSystem.setGlobalPreference<number>("ZoomSensitivity", zoomSensitivity)
+        PreferencesSystem.setGlobalPreference<number>("PitchSensitivity", pitchSensitivity)
+        PreferencesSystem.setGlobalPreference<number>("YawSensitivity", yawSensitivity)
+        PreferencesSystem.setGlobalPreference<boolean>("UseMetric", useMetric) */
+
         PreferencesSystem.savePreferences()
     }
 
     return (
         <Modal
             name="Settings"
-            icon={<FaGear />}
+            icon={SynthesisIcons.GearLarge}
             modalId={modalId}
             onAccept={() => {
                 saveSettings()
             }}
         >
-            <div className="flex overflow-y-auto flex-col gap-2 bg-background-secondary rounded-md p-2 max-h-[60vh]">
+            <div className="flex overflow-y-auto flex-col gap-2 bg-background-secondary rounded-md p-2 max-h-[60vh] min-w-[350px]">
                 <Label size={LabelSize.Medium}>Screen Settings</Label>
                 <Dropdown
                     label="Quality Settings"
@@ -77,7 +84,9 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
                         World.SceneRenderer.ChangeLighting(selected)
                     }}
                 />
-                {Spacer(5)}
+
+                {/* Disabled until these settings are implemented */}
+                {/*   {Spacer(5)}
                 <Label size={LabelSize.Medium}>Camera Settings</Label>
                 <Slider
                     min={1}
@@ -106,7 +115,7 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
                     format={{ maximumFractionDigits: 2 }}
                     onChange={(_, value) => setYawSensitivity(value as number)}
                     tooltipText="Moving the camera left and right."
-                />
+                />*/}
                 {Spacer(20)}
                 <Label size={LabelSize.Medium}>Preferences</Label>
                 <Box display="flex" flexDirection={"column"}>
@@ -118,13 +127,15 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
                         }}
                         tooltipText="Record user data such as what robots are spawned and how they are configured. No personal data will be collected."
                     />
-                    <Checkbox
+                    {/* Disabled until this settings is implemented */}
+                    {/*  <Checkbox
                         label="Use Metric"
                         defaultState={PreferencesSystem.getGlobalPreference<boolean>("UseMetric")}
                         onClick={checked => {
                             setUseMetric(checked)
                         }}
-                    />
+                        tooltipText="Metric measurements. (ex: meters instead of feet)"
+                    /> */}
                     <Checkbox
                         label="Realistic Subsystem Gravity"
                         defaultState={PreferencesSystem.getGlobalPreference<boolean>("SubsystemGravity")}

fission/src/ui/modals/configuring/theme-editor/NewInputSchemeModal.tsx

@@ -16,7 +16,7 @@ const NewInputSchemeModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
         <Modal
             name="New Input Scheme"
-            icon={SynthesisIcons.Add}
+            icon={SynthesisIcons.AddLarge}
             modalId={modalId}
             onAccept={() => {
                 const scheme = DefaultInputs.newBlankScheme

fission/src/ui/panels/configuring/ChooseInputSchemePanel.tsx

@@ -73,7 +73,6 @@ const ChooseInputSchemePanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
             sidePadding={8}
             acceptEnabled={false}
             icon={SynthesisIcons.Gamepad}
-            cancelEnabled={selectedBrainIndexGlobal != undefined}
             cancelName="Close"
         >
             {/** A scroll view with buttons to select default and custom input schemes */}

fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureInputsInterface.tsx

@@ -77,10 +77,19 @@ const ConfigureInputsInterface = () => {
                     // Fetch current custom schemes
                     InputSchemeManager.saveSchemes()
                     InputSchemeManager.resetDefaultSchemes()
-                    const schemes = PreferencesSystem.getGlobalPreference<InputScheme[]>("InputSchemes")
 
-                    // Find and remove this input scheme
+                    // Find the scheme to remove in preferences
+                    const schemes = PreferencesSystem.getGlobalPreference<InputScheme[]>("InputSchemes")
                     const index = schemes.indexOf(val.scheme)
+
+                    // If currently bound to a robot, remove the binding
+                    for (const [key, value] of InputSystem.brainIndexSchemeMap.entries()) {
+                        if (value == schemes[index]) {
+                            InputSystem.brainIndexSchemeMap.delete(key)
+                        }
+                    }
+
+                    // Find and remove this input scheme from preferences
                     schemes.splice(index, 1)
 
                     // Save to preferences