add little UX romm accent

.trunk/trunk.yaml

@@ -2,12 +2,12 @@
 # To learn more about the format of this file, see https://docs.trunk.io/reference/trunk-yaml
 version: 0.1
 cli:
-  version: 1.22.3
+  version: 1.22.4
 # Trunk provides extensibility via plugins. (https://docs.trunk.io/plugins)
 plugins:
   sources:
     - id: trunk
-      ref: v1.6.1
+      ref: v1.6.2
       uri: https://github.com/trunk-io/plugins
 # Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes)
 runtimes:
@@ -19,24 +19,24 @@ runtimes:
 lint:
   enabled:
     - markdownlint@0.41.0
-    - eslint@9.9.0
+    - eslint@9.9.1
     - actionlint@1.7.1
     - bandit@1.7.9
     - black@24.8.0
-    - checkov@3.2.228
+    - checkov@3.2.239
     - git-diff-check
     - isort@5.13.2
-    - mypy@1.11.1
-    - osv-scanner@1.8.3
+    - mypy@1.11.2
+    - osv-scanner@1.8.4
     - oxipng@9.1.2
     - prettier@3.3.3
-    - ruff@0.6.0
+    - ruff@0.6.3
     - shellcheck@0.10.0
     - shfmt@3.6.0
     - svgo@3.3.2
     - taplo@0.9.3
     - trivy@0.54.1
-    - trufflehog@3.81.9
+    - trufflehog@3.81.10
     - yamllint@1.35.1
   ignore:
     - linters: [ALL]

frontend/src/components/Gallery/AppBar/Platform/Base.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useDisplay } from "vuetify";
 import AdminMenu from "@/components/Gallery/AppBar/Platform/AdminMenu.vue";
-import FilterBtn from "@/components/Gallery/AppBar/common/FilterBtn.vue";
-import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.vue";
 import FirmwareBtn from "@/components/Gallery/AppBar/Platform/FirmwareBtn.vue";
+import FirmwareDrawer from "@/components/Gallery/AppBar/Platform/FirmwareDrawer.vue";
+import FilterBtn from "@/components/Gallery/AppBar/common/FilterBtn.vue";
+import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.vue";
+import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.vue";
 import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
 import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
-import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.vue";
-import FirmwareDrawer from "@/components/Gallery/AppBar/Platform/FirmwareDrawer.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import storeAuth from "@/stores/auth";
 import storeRoms from "@/stores/roms";
+import { storeToRefs } from "pinia";
+import { useDisplay } from "vuetify";
 
 const { xs } = useDisplay();
 const romsStore = storeRoms();
@@ -28,7 +28,7 @@ const auth = storeAuth();
       :slug="currentPlatform.slug"
       :name="currentPlatform.name"
       :size="36"
-      class="mx-2"
+      class="ml-3 mr-2 platform-icon"
     />
     <firmware-btn />
     <filter-btn />
@@ -60,4 +60,7 @@ const auth = storeAuth();
 #gallery-app-bar {
   z-index: 999 !important;
 }
+.platform-icon {
+  filter: drop-shadow(0px 0px 2px #a452fe);
+}
 </style>

frontend/src/components/common/UploadInProgress.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import storeUpload from "@/stores/upload";
 import { formatBytes } from "@/utils";
+import { storeToRefs } from "pinia";
 import { ref, watch } from "vue";
 import { useDisplay } from "vuetify";
-import { storeToRefs } from "pinia";
 
 const { xs } = useDisplay();
 const uploadStore = storeUpload();
@@ -49,8 +49,8 @@ watch(files, (newList) => {
           <v-list-item-title class="d-flex justify-space-between">
             {{ file.filename }}
             <v-icon
-              :icon="file.finished ? `mdi-check` : `mdi-loading mdi-spin`"
-              :color="file.finished ? `green` : `white`"
+              :icon="file.finished ? 'mdi-check' : 'mdi-loading mdi-spin'"
+              :color="file.finished ? 'green' : 'romm-accent-1'"
               class="mx-2"
             />
           </v-list-item-title>
@@ -58,7 +58,7 @@ watch(files, (newList) => {
             <v-progress-linear
               v-model="file.progress"
               height="4"
-              color="white"
+              color="romm-accent-1"
               class="mt-1"
             />
             <div class="upload-speeds d-flex justify-space-between mt-1">