UPD: Refactor images

src/App.vue

@@ -28,7 +28,7 @@ onMounted(() => {
     <div class="flex-1 min-h-0 flex flex-row">
       <ProfileManager
         class="basis-1/3 min-w-80 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
-      <DevicePreview class="basis-1/3 flex-col flex border-solid border-0 border-r" />
+      <DevicePreview class="basis-1/3 flex-col flex-1 flex border-solid border-0 border-r" />
       <ConfigPane
         class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
     </div>

src/assets/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/components/config/pages/HapticConfig.vue

@@ -47,10 +47,10 @@ import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import SteppedSlider from '@/components/config/SteppedSlider.vue'
 import { ref } from 'vue'
-import FdIcon from '@/assets/icons/ico-fd.svg'
+import FdIcon from '@/assets/icons/iconFineDetents.svg'
-import CdIcon from '@/assets/icons/ico-cd.svg'
+import CdIcon from '@/assets/icons/iconCoarseDetents.svg'
-import VfIcon from '@/assets/icons/ico-vf.svg'
+import VfIcon from '@/assets/icons/iconViscousRotation.svg'
-import RcIcon from '@/assets/icons/ico-rc.svg'
+import RcIcon from '@/assets/icons/iconReturnToCenter.svg'
 import FeedbackTypeButton from '@/components/config/FeedbackTypeButton.vue'
 
 const feedbackType = ref('fineDetents') // TODO: replace with actual value

src/components/config/pages/MappingConfig.vue

@@ -140,10 +140,10 @@ import {
 import { Slider } from '@/components/ui/slider/index.js'
 import { KeyboardMusic, Squircle, Keyboard, GaugeCircle, Play, Pause } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
-import KeyO from '@/assets/icons/ico-key-o.svg'
+import KeyO from '@/assets/icons/iconKeyOrange.svg'
-import Key from '@/assets/icons/ico-key.svg'
+import Key from '@/assets/icons/iconKeyWhite.svg'
-import KeyG from '@/assets/icons/ico-key-g.svg'
+import KeyG from '@/assets/icons/iconKeyGrey.svg'
-import KeyD from '@/assets/icons/ico-key-d.svg'
+import KeyD from '@/assets/icons/iconKeyDark.svg'
 import { ref } from 'vue'
 import KeySelectButton from '@/components/config/KeySelectButton.vue'
 

src/components/config/pages/ProfileConfig.vue

@@ -32,8 +32,8 @@ import { Cable, Replace, Type } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import { Separator } from '@/components/ui/separator/index.js'
 import { ref } from 'vue'
-import UsbIcon from '@/assets/icons/ico-usb-logo.svg'
+import UsbIcon from '@/assets/logos/logoUsb.svg'
-import MidiIcon from '@/assets/icons/ico-midi-logo.svg'
+import MidiIcon from '@/assets/logos/logoMidi.svg'
 import ConnectionTypeButton from '@/components/config/ConnectionTypeButton.vue'
 import { Badge } from '@/components/ui/badge'
 import WIP from '@/components/WIP.vue'

src/components/device/DevicePreview.vue

@@ -1,31 +1,9 @@
 <template>
-  <div>
+  <div style="background-image: url(../../assets/images/renderNano.png)">
-    <div class="flex px-4 pt-5 pb-3 items-baseline font-heading">
+    <div class="flex px-4 pt-5 pb-3 items-baseline font-heading text-lg">
-      <span class="text-lg">{{ $t('preview.title') }}</span>
+      {{ $t('preview.title') }}
-      &nbsp;
-      <span class="text-zinc-600">(Nano_D++)</span>
-    </div>
-    <div class="flex justify-center">
-      <div
-        class="flex bg-cover mb-6 w-72 aspect-square"
-        style="background-image: url(src/assets/icons/xl-bg-ico.svg)">
-        <div class="flex flex-col w-full justify-center m-9 rounded-full overflow-hidden">
-          <div class="self-center w-8 mb-1 opacity-50">
-            <img src="@/assets/icons/ico-midi-logo.svg" alt="midi-logo">
-          </div>
-          <h2 class="self-center font-pixellg text-5xl ">1337</h2>
-          <div class="self-center font-pixelsm text-md pt-1 pb-2">Profile name</div>
-          <DeviceBar class="self-center" />
-          <span
-            class="self-center text-center w-48 font-pixelsm text-xs text-muted-foreground">
-            Profile description will go here! And hopefully it will be a long one! Much longer than this one! Actually, this is probably long enough. I don't think we need to make it any longer...
-          </span>
-        </div>
-      </div>
     </div>
   </div>
 </template>
 <script setup>
-import DeviceBar from '@/components/device/DeviceBar.vue'
-import DeviceBackground from '@/assets/icons/xl-bg-ico.svg'
 </script>

src/components/old/DevicePreviewOld.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div class="flex px-4 pt-5 pb-3 items-baseline font-heading">
+      <span class="text-lg">{{ $t('preview.title') }}</span>
+      &nbsp;
+      <span class="text-zinc-600">(Nano_D++)</span>
+    </div>
+    <div class="flex justify-center">
+      <div
+        class="flex bg-cover mb-6 w-72 aspect-square"
+        style="background-image: url(../../assets/icons/xl-bg-ico.svg)">
+        <div class="flex flex-col w-full justify-center m-9 rounded-full overflow-hidden">
+          <div class="self-center w-8 mb-1 opacity-50">
+            <img src="../../assets/logos/logoMidi.svg" alt="midi-logo">
+          </div>
+          <h2 class="self-center font-pixellg text-5xl ">1337</h2>
+          <div class="self-center font-pixelsm text-md pt-1 pb-2">Profile name</div>
+          <DeviceBar class="self-center" />
+          <span
+            class="self-center text-center w-48 font-pixelsm text-xs text-muted-foreground">
+            Profile description will go here! And hopefully it will be a long one! Much longer than this one! Actually, this is probably long enough. I don't think we need to make it any longer...
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import DeviceBar from '@/components/device/DeviceBar.vue'
+import DeviceBackground from '@/assets/icons/xl-bg-ico.svg'
+</script>