General UI Refinements (#1678)

Does the following:
- Adjusts the shade of red buttons and banners to increase readability
and reduce eye strain

![image](https://github.com/user-attachments/assets/7f741a9e-dc1e-4394-b87d-580e189245b1)

![image](https://github.com/user-attachments/assets/b23202f1-4cf6-46c1-aca5-2455a09259cd)

- Cleans up factory reset and camera deletion modals

![image](https://github.com/user-attachments/assets/e6564732-d578-43da-bc83-729ec6fdbc5e)

![image](https://github.com/user-attachments/assets/9c5a1cba-f4fd-47ea-811c-abbabe5fa3a4)

- Removes matchCamerasOnlyByPath as it is no longer used and throws
errors in the console

![image](https://github.com/user-attachments/assets/77043993-26a2-4de4-8e98-702e7f285dc6)

- Limits the criteria to flag a camera mismatch in Camera Matching to
only what is necessary based on camera type and highlights differences
in table properties (testing on this is appreciated)

![image](https://github.com/user-attachments/assets/cfbd96c1-09dd-414a-8177-693fc054b26f)

- Only displays both saved vs. current info in camera matching if there
is a difference between the two

![image](https://github.com/user-attachments/assets/6223ffc8-4cff-464f-8b54-720c3222a5d5)

- Some general code cleanup (reduced unnecessary padding/margin/row-col
statements, style="display:flex;" -> class="d-flex", etc.
- Moves Compact Mode button to the bottom away from all the menu items
(cleaner imo, open to thoughts)
- Establishes a general spacing format for cards and pages and applies
this to existing cards and pages to create a consistent look and feel to
the UI (e.g. keeping things in line and less erratic spacing/placement
of UI elements)

![image](https://github.com/user-attachments/assets/1ab0ca4b-303e-436d-97b3-da72d46c4fcb)

![image](https://github.com/user-attachments/assets/82ba9e53-f854-4309-bc00-7b5d0bad58b7)

![image](https://github.com/user-attachments/assets/18aa6ca4-e6fa-4125-8a0a-e6a007a0337d)

![image](https://github.com/user-attachments/assets/77043993-26a2-4de4-8e98-702e7f285dc6)


- Delete protection for camera matching modules
- Anti-backend-spam for activate/deactivate/delete modules to hopefully
prevent any odd behavior from button spamming
- Enforces a common camera stream size on camera matching view (NEEDS
MORE TESTING)

![image](https://github.com/user-attachments/assets/9032783d-1edf-4c6e-ba7b-00e5f20280df)

https://private-user-images.githubusercontent.com/29715865/400783758-dc99c151-b8a7-4367-a173-74c2fc5b2666.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzYyNTc3NzEsIm5iZiI6MTczNjI1NzQ3MSwicGF0aCI6Ii8yOTcxNTg2NS80MDA3ODM3NTgtZGM5OWMxNTEtYjhhNy00MzY3LWExNzMtNzRjMmZjNWIyNjY2Lm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAxMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMTA3VDEzNDQzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMwOWM1MDc2ZTVlOWZhM2MxYjAwZjAyZTc2MTYyZTk1ZTVmOGFhZmVkMzlmODRlZTk1ODVlOTk2ZGQzZmM0Y2EmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ovtRnObwbkEfljr9d5fqaory0nH91LWJSSkmrUUe_4Y

photon-client/src/components/dashboard/tabs/InputTab.vue

@@ -66,13 +66,21 @@ const handleStreamResolutionChange = (value: number) => {
 const interactiveCols = computed(() =>
   (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) &&
   (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)
-    ? 9
-    : 8
+    ? 8
+    : 7
 );
 </script>
 
 <template>
   <div>
+    <pv-switch
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
+      class="pt-2"
+      label="Auto Exposure"
+      :switch-cols="interactiveCols === 8 ? 9 : interactiveCols"
+      tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
+      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraAutoExposure: args }, false)"
+    />
     <pv-slider
       v-model="useCameraSettingsStore().currentPipelineSettings.cameraExposureRaw"
       :disabled="useCameraSettingsStore().currentCameraSettings.pipelineSettings.cameraAutoExposure"
@@ -92,14 +100,6 @@ const interactiveCols = computed(() =>
       :slider-cols="interactiveCols"
       @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraBrightness: args }, false)"
     />
-    <pv-switch
-      v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
-      class="pt-2"
-      label="Auto Exposure"
-      :switch-cols="interactiveCols"
-      tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
-      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraAutoExposure: args }, false)"
-    />
     <pv-slider
       v-if="useCameraSettingsStore().currentPipelineSettings.cameraGain >= 0"
       v-model="useCameraSettingsStore().currentPipelineSettings.cameraGain"
@@ -130,12 +130,11 @@ const interactiveCols = computed(() =>
       tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
       @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraBlueGain: args }, false)"
     />
-
     <pv-switch
       v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoWhiteBalance"
       class="pt-2"
       label="Auto White Balance"
-      :switch-cols="interactiveCols"
+      :switch-cols="interactiveCols === 8 ? 9 : interactiveCols"
       tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
       @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraAutoWhiteBalance: args }, false)"
     />
@@ -148,13 +147,12 @@ const interactiveCols = computed(() =>
       :slider-cols="interactiveCols"
       @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraWhiteBalanceTemp: args }, false)"
     />
-
     <pv-select
       v-model="useCameraSettingsStore().currentPipelineSettings.inputImageRotationMode"
       label="Orientation"
       tooltip="Rotates the camera stream. Rotation not available when camera has been calibrated."
       :items="cameraRotations"
-      :select-cols="interactiveCols"
+      :select-cols="interactiveCols === 8 ? 9 : interactiveCols"
       @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ inputImageRotationMode: args }, false)"
     />
     <pv-select
@@ -162,7 +160,7 @@ const interactiveCols = computed(() =>
       label="Resolution"
       tooltip="Resolution and FPS the camera should directly capture at"
       :items="cameraResolutions"
-      :select-cols="interactiveCols"
+      :select-cols="interactiveCols === 8 ? 9 : interactiveCols"
       @input="(args) => handleResolutionChange(args)"
     />
     <pv-select
@@ -170,7 +168,7 @@ const interactiveCols = computed(() =>
       label="Stream Resolution"
       tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
       :items="streamResolutions"
-      :select-cols="interactiveCols"
+      :select-cols="interactiveCols === 8 ? 9 : interactiveCols"
       @input="(args) => handleStreamResolutionChange(args)"
     />
   </div>