Revert "Revert "Initial solution""

This reverts commit 0d437cb.
intechstudio · May 14, 2024 · 0d72b37 · 0d72b37
1 parent 0d437cb
commit 0d72b37
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 19 deletions.
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
@@ -120,11 +120,7 @@
               class:icon-corner-cut-l={isLeftCut}
               class:scale-50={elementNumber == 255}
             >
-              <SvgIcon
-                class="text-white"
-                iconPath={loaded ? "tick" : "download"}
-                displayMode={"static"}
-              />
+              <SvgIcon fill="#FFF" iconPath={loaded ? "tick" : "download"} />
             </button>
           {/if}
         </div>

diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
@@ -72,24 +72,20 @@
               {#if loadedState === 0}
                 <span class="text-white mr-2">Load Profile</span>
                 <SvgIcon
-                  class="text-white"
+                  fill="#FFF"
                   iconPath={"download"}
                   displayMode={"static"}
                 />
               {:else if loadedState === 1}
                 <span class="text-white mr-2">Loading...</span>
                 <SvgIcon
-                  class="text-white"
+                  fill="#FFF"
                   iconPath={"download"}
                   displayMode={"static"}
                 />
               {:else if loadedState === 2}
                 <span class="text-white">Loaded!</span>
-                <SvgIcon
-                  class="text-white"
-                  iconPath={"tick"}
-                  displayMode={"static"}
-                />
+                <SvgIcon fill="#FFF" iconPath={"tick"} displayMode={"static"} />
               {/if}
             </button>
           {/key}

diff --git a/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte b/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
@@ -289,10 +289,10 @@
                   <div class="flex items-center">
                     {#if message.data.direction == "REPORT"}
                       <span>RX</span>
-                      <SvgIcon class="scale-75" iconPath="arrow_left" />
+                      <SvgIcon fill="#FFF" iconPath="arrow_left" />
                     {:else}
                       <span>TX</span>
-                      <SvgIcon class="scale-75" iconPath="arrow_right" />
+                      <SvgIcon fill="#FFF" iconPath="arrow_right" />
                     {/if}
                   </div>
                 </div>
@@ -316,9 +316,9 @@
                   <div class="flex flex-row text-white">
                     <span>{midi.device.name}</span>
                     {#if midi.data.direction == "REPORT"}
-                      <SvgIcon class="scale-75" iconPath="arrow_left" />
+                      <SvgIcon fill="#FFF" iconPath="arrow_left" />
                     {:else}
-                      <SvgIcon class="scale-75" iconPath="arrow_right" />
+                      <SvgIcon fill="#FFF" iconPath="arrow_right" />
                     {/if}
                   </div>
                   <span>Ch: {midi.data.channel}</span>
@@ -384,9 +384,9 @@
                     <div class="flex flex-row text-white">
                       <span>{sysex.device.name}</span>
                       {#if sysex.data.direction == "REPORT"}
-                        <SvgIcon class="scale-75" iconPath="arrow_left" />
+                        <SvgIcon fill="#FFF" iconPath="arrow_left" />
                       {:else}
-                        <SvgIcon class="scale-75" iconPath="arrow_right" />
+                        <SvgIcon fill="#FFF" iconPath="arrow_right" />
                       {/if}
                     </div>
 

diff --git a/src/renderer/main/user-interface/SvgIcon.svelte b/src/renderer/main/user-interface/SvgIcon.svelte
@@ -2,6 +2,7 @@
   export let iconPath: string = "";
   export let width: number = 15;
   export let height: number = 15;
+  export let fill: string | undefined = undefined;
 
   let rawSvg: string;
 
@@ -14,7 +15,7 @@
   }
 </script>
 
-<svg style="width: {width}px; height: {height}px;">
+<svg style="width: {width}px; height: {height}px; fill: {fill};">
   <g>
     {@html rawSvg}
   </g>