769 fix visual styling in params page

gcs/src/components/params/paramsToolbar.jsx

@@ -7,15 +7,7 @@ rebooting the autopilot
 
 // 3rd party imports
 import { Button, TextInput, Tooltip } from "@mantine/core"
-import {
-  IconDownload,
-  IconEye,
-  IconPencil,
-  IconPower,
-  IconRefresh,
-  IconTool,
-  IconUpload,
-} from "@tabler/icons-react"
+import { IconEye, IconTool } from "@tabler/icons-react"
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
@@ -25,68 +17,21 @@ const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 // Redux
 import { useDispatch, useSelector } from "react-redux"
 import {
-  emitExportParamsToFile,
-  emitRebootAutopilot,
-  emitRefreshParams,
-  emitSetMultipleParams,
-  resetParamState,
   selectModifiedParams,
   selectParamSearchValue,
   selectShowModifiedParams,
-  setAutoPilotRebootModalOpen,
-  setFetchingVars,
-  setModifiedParams,
-  setParams,
   setParamSearchValue,
-  setShownParams,
   toggleShowModifiedParams,
 } from "../../redux/slices/paramsSlice.js"
 
-export default function ParamsToolbar({ loadParamsFromFile }) {
+export default function ParamsToolbar() {
   const dispatch = useDispatch()
+  const searchValue = useSelector(selectParamSearchValue)
   const modifiedParams = useSelector(selectModifiedParams)
   const showModifiedParams = useSelector(selectShowModifiedParams)
-  const searchValue = useSelector(selectParamSearchValue)
-
-  function refreshCallback() {
-    dispatch(setParams([]))
-    dispatch(setModifiedParams([]))
-    dispatch(setShownParams([]))
-    dispatch(emitRefreshParams())
-    dispatch(setFetchingVars(true))
-  }
-
-  function rebootCallback() {
-    dispatch(emitRebootAutopilot())
-    dispatch(setAutoPilotRebootModalOpen(true))
-    dispatch(resetParamState())
-  }
-
-  async function saveParamsToFile() {
-    const options = {
-      title: "Save parameters to a file",
-      filters: [
-        { name: "Param File", extensions: ["param"] },
-        { name: "All Files", extensions: ["*"] },
-      ],
-    }
-
-    const result = await window.ipcRenderer.invoke(
-      "app:get-save-file-path",
-      options,
-    )
-
-    if (!result.canceled) {
-      dispatch(
-        emitExportParamsToFile({
-          filePath: result.filePath,
-        }),
-      )
-    }
-  }
 
   return (
-    <div className="flex justify-center space-x-4">
+    <div className="flex items-center gap-4 m-4">
       <Tooltip
         label={showModifiedParams ? "Show all params" : "Show modified params"}
         position="bottom"
@@ -95,11 +40,11 @@ export default function ParamsToolbar({ loadParamsFromFile }) {
           size="sm"
           onClick={() => dispatch(toggleShowModifiedParams())}
           color={tailwindColors.orange[600]}
+          disabled={modifiedParams.length === 0}
         >
           {showModifiedParams ? <IconEye size={14} /> : <IconTool size={14} />}
         </Button>
       </Tooltip>
-
       <TextInput
         className="w-1/3"
         placeholder="Search by parameter name"
@@ -108,52 +53,6 @@ export default function ParamsToolbar({ loadParamsFromFile }) {
           dispatch(setParamSearchValue(event.currentTarget.value))
         }
       />
-
-      <Button
-        size="sm"
-        rightSection={<IconPencil size={14} />}
-        disabled={!modifiedParams.length}
-        onClick={() => dispatch(emitSetMultipleParams(modifiedParams))}
-        color={tailwindColors.green[600]}
-      >
-        Write params
-      </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconRefresh size={14} />}
-        onClick={refreshCallback}
-        color={tailwindColors.blue[600]}
-      >
-        Refresh params
-      </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconPower size={14} />}
-        onClick={rebootCallback}
-        color={tailwindColors.red[600]}
-      >
-        Reboot FC
-      </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconDownload size={14} />}
-        onClick={saveParamsToFile}
-        color={tailwindColors.blue[600]}
-      >
-        Save params to file
-      </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconUpload size={14} />}
-        onClick={loadParamsFromFile}
-        color={tailwindColors.blue[600]}
-      >
-        Load params from file
-      </Button>
     </div>
   )
 }

gcs/src/components/params/rowItem.jsx

@@ -59,15 +59,17 @@ const RowItem = memo(({ index, style }) => {
   }, [aircraftType, param])
 
   return (
-    <div style={style} className="flex flex-row items-center space-x-4">
-      <div className="flex flex-row w-2/12 gap-x-2">
+    <div
+      style={style}
+      className="flex items-center px-8 gap-6 border-t border-neutral-700"
+    >
+      <div className="flex items-center w-2/12 gap-x-2">
         <Tooltip label={paramDef?.DisplayName ?? null} position="top-start">
           <p>{param.param_id}</p>
         </Tooltip>
 
         {paramDef?.Values && paramDef?.Range && (
           <Tooltip
-            className="self-center"
             label={
               <div className="text-wrap max-w-80">
                 {Object.keys(paramDef?.Values).map((key) => {

gcs/src/components/params/valueInput.jsx

@@ -76,12 +76,14 @@ export default function ValueInput({ index, paramDef, className }) {
     } else {
       // Otherwise add it to modified params
       dispatch(
-        appendModifiedParams({
-          param_id: param.param_id,
-          param_value: value,
-          param_type: param.param_type,
-          initial_value: param.param_value,
-        }),
+        appendModifiedParams([
+          {
+            param_id: param.param_id,
+            param_value: value,
+            param_type: param.param_type,
+            initial_value: param.param_value,
+          },
+        ]),
       )
     }
   }