Updated colours (#862)

ProgramPhantom · web-flow · commit 92328bcc455f · 2025-11-25T14:49:47.000Z
* * Specified Mantine "red" colours to be falconred from tailwind
* Changed red and green colours to be Mantine "red" and "green" rather than directly accessing a tailwind colour. Hopefully I've got most things.

* Removed "color={tailwindColors...." etc and replaced with mantine colours
diff --git a/gcs/src/components/SingleRunWrapper.jsx b/gcs/src/components/SingleRunWrapper.jsx
@@ -123,12 +123,7 @@ export default function SingleRunWrapper({ children }) {
           fixes.
         </p>
         <div className="flex gap-x-2 mt-5">
-          <Button
-            component="a"
-            onClick={closeForever}
-            fullWidth
-            color={tailwindColors.red[600]}
-          >
+          <Button component="a" onClick={closeForever} fullWidth color={"red"}>
             Skip update
           </Button>
           <Button
diff --git a/gcs/src/components/config/gripper.jsx b/gcs/src/components/config/gripper.jsx
@@ -16,11 +16,6 @@ import {
   Tooltip,
 } from "@mantine/core"
 
-// Styling Imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../tailwind.config"
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
-
 // Data
 import apmParamDefsCopter from "../../../data/gen_apm_params_def_copter.json"
 import apmParamDefsPlane from "../../../data/gen_apm_params_def_plane.json"
@@ -148,16 +143,10 @@ export default function Gripper() {
         overlayProps={{ blur: 2 }}
       />
       <div className="flex flex-row gap-2">
-        <Button
-          onClick={() => setGripper("release")}
-          color={tailwindColors.falconred[800]}
-        >
+        <Button onClick={() => setGripper("release")} color={"red"}>
           Release Gripper
         </Button>
-        <Button
-          onClick={() => setGripper("grab")}
-          color={tailwindColors.falconred[800]}
-        >
+        <Button onClick={() => setGripper("grab")} color={"red"}>
           Grab Gripper
         </Button>
       </div>
diff --git a/gcs/src/components/config/motorTest.jsx b/gcs/src/components/config/motorTest.jsx
@@ -9,11 +9,6 @@ import { useEffect, useState } from "react"
 // 3rd Party Imports
 import { Button, Modal, NumberInput } from "@mantine/core"
 
-// Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../tailwind.config"
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
-
 // Custom helper function
 import { MOTOR_LETTER_LABELS } from "../../helpers/mavlinkConstants"
 
@@ -117,7 +112,7 @@ export default function MotorTestPanel() {
 
           <div className="mx-auto">
             <Button
-              color={tailwindColors.green[600]}
+              color={"green"}
               onClick={() => dispatch(setShowMotorTestWarningModal(false))}
             >
               Continue
@@ -155,7 +150,6 @@ export default function MotorTestPanel() {
               onClick={() => {
                 testOneMotor(index + 1)
               }}
-              color={tailwindColors.blue[600]}
             >
               Test motor {motor}
             </Button>
@@ -164,7 +158,7 @@ export default function MotorTestPanel() {
             onClick={() => {
               testMotorSequence()
             }}
-            color={tailwindColors.green[600]}
+            color={"green"}
             label="x"
           >
             Test motor sequence
@@ -173,7 +167,7 @@ export default function MotorTestPanel() {
             onClick={() => {
               testAllMotors()
             }}
-            color={tailwindColors.red[600]}
+            color={"red"}
           >
             Test all motors
           </Button>
diff --git a/gcs/src/components/customMantineTheme.jsx b/gcs/src/components/customMantineTheme.jsx
@@ -26,6 +26,18 @@ export const CustomMantineTheme = createTheme({
       tailwindColors.falcongrey[900],
       tailwindColors.falcongrey[950],
     ],
+    red: [
+      tailwindColors.falconred[100],
+      tailwindColors.falconred[200],
+      tailwindColors.falconred[300],
+      tailwindColors.falconred[400],
+      tailwindColors.falconred[500],
+      tailwindColors.falconred[600],
+      tailwindColors.falconred[700],
+      tailwindColors.falconred[800],
+      tailwindColors.falconred[900],
+      tailwindColors.falconred[950],
+    ],
   },
   cursorType: "pointer",
 })
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -13,9 +13,6 @@ import EditCheckList from "./checkListEdit.jsx"
 
 // Styling imports
 import { IconCheckbox, IconEdit, IconTrashX } from "@tabler/icons-react"
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../../tailwind.config.js"
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function CheckListArea({
   name,
@@ -182,14 +179,11 @@ export default function CheckListArea({
         withCloseButton={false}
       >
         <div className="flex w-full justify-between pt-4">
-          <Button
-            color={tailwindColors.red[600]}
-            onClick={() => setDeleteModal(false)}
-          >
+          <Button color={"red"} onClick={() => setDeleteModal(false)}>
             No, cancel
           </Button>
           <Button
-            color={tailwindColors.green[600]}
+            color={"green"}
             onClick={() => deleteChecklist()}
             data-autofocus
           >
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
@@ -10,11 +10,6 @@ import ListItem from "@tiptap/extension-list-item"
 import { RichTextEditor } from "@mantine/tiptap"
 import { Node } from "@tiptap/core"
 
-// Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../../tailwind.config.js"
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
-
 export default function EditCheckList({
   opened,
   close,
@@ -97,7 +92,7 @@ export default function EditCheckList({
             editor={editor}
             classNames={{ content: "!list-disc" }}
           >
-            {/* 
+            {/*
               Going to keep this for future use with code blocks, no need to delete.
               <RichTextEditor.Toolbar sticky stickyOffset={60}>
                 <RichTextEditor.ControlsGroup>
@@ -117,15 +112,11 @@ export default function EditCheckList({
                 generateCheckboxListString(true)
               }}
               variant="filled"
-              color={tailwindColors.red[600]}
+              color={"red"}
             >
               Cancel
             </Button>
-            <Button
-              type="submit"
-              variant="filled"
-              color={tailwindColors.green[600]}
-            >
+            <Button type="submit" variant="filled" color={"green"}>
               Save
             </Button>
           </div>
diff --git a/gcs/src/components/dashboard/tabsSectionTabs/actionTabsSection.jsx b/gcs/src/components/dashboard/tabsSectionTabs/actionTabsSection.jsx
@@ -10,11 +10,6 @@ import { useEffect, useMemo, useState } from "react"
 import { Button, NumberInput, Popover, Select, Tabs } from "@mantine/core"
 import { useLocalStorage } from "@mantine/hooks"
 
-// Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../../tailwind.config"
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
-
 // Mavlink
 import { getFlightModeMap } from "../../../helpers/mavlinkConstants"
 
@@ -174,11 +169,7 @@ const ArmTakeoffLandAction = () => {
         </Button>
 
         {/** Reboot Button */}
-        <Button
-          onClick={rebootCallback}
-          color={tailwindColors.red[600]}
-          className="grow"
-        >
+        <Button onClick={rebootCallback} color={"red"} className="grow">
           Reboot FC
         </Button>
       </div>
diff --git a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
@@ -17,10 +17,7 @@ import CheckListArea from "../preFlightChecklist/checkListArea.jsx"
 import { AddCommand } from "../../spotlight/commandHandler.js"
 
 // Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../../tailwind.config.js"
 import { showErrorNotification } from "../../../helpers/notification.js"
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function PreFlightChecklistTab({ tabPadding }) {
   const [preFlightChecklistItems, setPreFlightChecklistItems] = useLocalStorage(
@@ -142,16 +139,10 @@ export default function PreFlightChecklistTab({ tabPadding }) {
             </div>
 
             <div className="flex w-full justify-between pt-6">
-              <Button
-                color={tailwindColors.red[600]}
-                onClick={() => setNewChecklistModal(false)}
-              >
+              <Button color={"red"} onClick={() => setNewChecklistModal(false)}>
                 Cancel
               </Button>
-              <Button
-                color={tailwindColors.green[600]}
-                onClick={() => createNewChecklist()}
-              >
+              <Button color={"green"} onClick={() => createNewChecklist()}>
                 Create
               </Button>
             </div>
diff --git a/gcs/src/components/fla/chartDataCard.jsx b/gcs/src/components/fla/chartDataCard.jsx
@@ -20,12 +20,6 @@ import {
   setMessageFilters,
 } from "../../redux/slices/logAnalyserSlice.js"
 
-// Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../tailwind.config.js"
-
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
-
 function ChartDataCard({ item, unit, messageMeans }) {
   const dispatch = useDispatch()
   const messageFilters = useSelector(selectMessageFilters)
@@ -86,7 +80,7 @@ function ChartDataCard({ item, unit, messageMeans }) {
         </p>
         <ActionIcon
           variant="subtle"
-          color={tailwindColors.red[500]}
+          color={"red"}
           onClick={() => removeDataset(item.label)}
         >
           <IconTrash size={18} />
diff --git a/gcs/src/components/fla/graph.jsx b/gcs/src/components/fla/graph.jsx
@@ -444,7 +444,7 @@ export default function Graph({ data, openPresetModal }) {
         <MantineTooltip label="Clear Filters">
           <Button
             className="min-h-8 max-h-8"
-            color={tailwindColors.red[500]}
+            color={"red"}
             onClick={clearFilters}
           >
             Clear Filters
@@ -454,7 +454,7 @@ export default function Graph({ data, openPresetModal }) {
           <MantineTooltip label="Save Preset">
             <Button
               className="min-h-8 max-h-8"
-              color={tailwindColors.green[600]}
+              color={"green"}
               onClick={() => {
                 openPresetModal()
               }}
diff --git a/gcs/src/components/fla/presetAccordionItem.jsx b/gcs/src/components/fla/presetAccordionItem.jsx
@@ -14,10 +14,6 @@ import { IconInfoCircle, IconTrash } from "@tabler/icons-react"
 import _ from "lodash"
 import { colorPalette } from "./constants.js"
 
-// Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../tailwind.config"
-
 import { useMemo } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import {
@@ -35,8 +31,6 @@ import {
   setMessageFilters,
 } from "../../redux/slices/logAnalyserSlice.js"
 
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
-
 // Utility function to convert a string to title case
 function toTitleCase(str) {
   return str.replace(/\w\S*/g, (txt) => {
@@ -197,7 +191,7 @@ export default function PresetAccordionItem({ category, deleteCustomPreset }) {
                   <MantineTooltip label="Delete Preset">
                     <ActionIcon
                       variant="light"
-                      color={tailwindColors.red[500]}
+                      color={"red"}
                       onClick={() => handleDeleteCustomPreset(preset.name)}
                     >
                       <IconTrash size={18} />
diff --git a/gcs/src/components/fla/savePresetModal.jsx b/gcs/src/components/fla/savePresetModal.jsx
@@ -1,6 +1,3 @@
-// Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../tailwind.config.js"
 // Third party imports
 import { Button, Group, Modal, TextInput } from "@mantine/core"
 import { useState } from "react"
@@ -18,8 +15,6 @@ import {
   setCanSavePreset,
 } from "../../redux/slices/logAnalyserSlice.js"
 
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
-
 export default function SavePresetModal({
   isSavePresetModalOpen,
   closeSavePresetModal,
@@ -116,7 +111,7 @@ export default function SavePresetModal({
         <Group justify="space-between" className="pt-4">
           <Button
             variant="filled"
-            color={tailwindColors.red[500]}
+            color={"red"}
             onClick={() => {
               setPresetName("")
               closeSavePresetModal()
@@ -127,7 +122,7 @@ export default function SavePresetModal({
           <Button
             variant="filled"
             type="submit"
-            color={tailwindColors.green[600]}
+            color={"green"}
             disabled={!presetName.trim()}
           >
             Save
diff --git a/gcs/src/components/navbar.jsx b/gcs/src/components/navbar.jsx
@@ -76,10 +76,7 @@ import { selectIsConnectedToSocket } from "../redux/slices/socketSlice.js"
 // Styling imports
 import { useEffect } from "react"
 import { twMerge } from "tailwind-merge"
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../tailwind.config.js"
 import { showErrorNotification } from "../helpers/notification.js"
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function Navbar() {
   // Redux
@@ -309,7 +306,7 @@ export default function Navbar() {
           <Group justify="space-between" className="pt-4">
             <Button
               variant="filled"
-              color={tailwindColors.red[600]}
+              color={"red"}
               onClick={() => {
                 dispatch(setConnectionModal(false))
                 dispatch(setConnecting(false))
@@ -321,7 +318,7 @@ export default function Navbar() {
             <Button
               variant="filled"
               type="submit"
-              color={tailwindColors.green[600]}
+              color={"green"}
               disabled={
                 !connectedToSocket ||
                 (connectionType == ConnectionType.Serial &&
@@ -394,7 +391,7 @@ export default function Navbar() {
           <Button
             className="mt-8"
             variant="filled"
-            color={tailwindColors.red[600]}
+            color={"red"}
             onClick={() => {
               dispatch(emitStopForwarding())
             }}
@@ -405,7 +402,7 @@ export default function Navbar() {
           <Button
             className="mt-8"
             variant="filled"
-            color={tailwindColors.green[600]}
+            color={"green"}
             onClick={() => {
               dispatch(emitStartForwarding())
               dispatch(setForwardingAddressModalOpened(false))
@@ -509,11 +506,7 @@ export default function Navbar() {
           {connectedToSocket ? (
             <Button
               onClick={connectedToDrone ? disconnect : connectToDroneFromButton}
-              color={
-                connectedToDrone
-                  ? tailwindColors.falconred[800]
-                  : tailwindColors.green[600]
-              }
+              color={connectedToDrone ? "red.8" : "green"}
               radius="xs"
             >
               {connectedToDrone ? "Disconnect" : "Connect"}
diff --git a/gcs/src/components/params/autopilotRebootModal.jsx b/gcs/src/components/params/autopilotRebootModal.jsx
diff --git a/gcs/src/components/settingsModal.jsx b/gcs/src/components/settingsModal.jsx
diff --git a/gcs/src/config.jsx b/gcs/src/config.jsx
diff --git a/gcs/src/params.jsx b/gcs/src/params.jsx
diff --git a/gcs/tailwind.config.js b/gcs/tailwind.config.js
