intechstudio · elsoazemelet · Feb 21, 2024 · Feb 15, 2024
diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
@@ -43,7 +43,9 @@
 
   import SendFeedback from "../main/user-interface/SendFeedback.svelte";
 
-  import { appSettings } from "../runtime/app-helper.store";
+  import MoltenPushButton, {
+    ButtonStyle,
+  } from "../main/panels/preferences/MoltenPushButton.svelte";
   import { monaco_store } from "../main/modals/Monaco.store";
   import { monaco_elementtype } from "../lib/CustomMonaco";
 
@@ -171,11 +173,11 @@
       />
     </div>
 
-    <button
+    <MoltenPushButton
       on:click={open_monaco}
-      class="bg-commit hover:bg-commit-saturate-20 text-white rounded px-2 py-0.5 text-sm focus:outline-none"
-      >Edit Code</button
-    >
+      text={"Edit Code"}
+      style={ButtonStyle.ACCEPT}
+    />
   </div>
 
   <div class="flex flex-row mt-4">

diff --git a/src/renderer/config-blocks/Macro.svelte b/src/renderer/config-blocks/Macro.svelte
@@ -60,6 +60,10 @@
   import * as keyMap_hu from "../../external/macro/map-hu.json";
   import * as keyMap_de from "../../external/macro/map-de.json";
 
+  import MoltenPushButton, {
+    ButtonStyle,
+  } from "../main/panels/preferences/MoltenPushButton.svelte";
+
   const layouts = [
     { name: "En", lookup: keyMap_en.default },
     { name: "Hu", lookup: keyMap_hu.default },
@@ -542,11 +546,11 @@
       {/each}
     </select>
 
-    <button
+    <MoltenPushButton
       on:click={addKey}
-      class="text-center rounded bg-commit hover:bg-commit-saturate-20 text-white px-2 py-1 truncate"
-      >Add Key</button
-    >
+      text={"Add Key"}
+      style={ButtonStyle.ACCEPT}
+    />
 
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -598,12 +602,12 @@
         max="4000"
         class="bg-secondary flex flex-grow text-white focus:outline-none border-select px-2 py-1"
       />
-      <button
+
+      <MoltenPushButton
         on:click={addDelay}
-        class="text-center rounded bg-commit hover:bg-commit-saturate-20 text-white px-2 py-1 truncate"
-      >
-        Add Delay
-      </button>
+        text={"Add Delay"}
+        style={ButtonStyle.ACCEPT}
+      />
     </div>
   </div>
   <div class="flex flex-col">
@@ -621,12 +625,11 @@
     />
   </div>
 
-  <button
+  <MoltenPushButton
     on:click={clearMacro}
-    class="text-center rounded bg-select hover:bg-red-500 text-white px-2 py-1 my-2"
-  >
-    Clear All
-  </button>
+    text={"Clear All"}
+    style={ButtonStyle.ACCEPT}
+  />
 </div>
 
 <style>

diff --git a/src/renderer/config-blocks/MidiSysEx.svelte b/src/renderer/config-blocks/MidiSysEx.svelte
@@ -49,6 +49,9 @@
 
   import TabButton from "../main/user-interface/TabButton.svelte";
   import SendFeedback from "../main/user-interface/SendFeedback.svelte";
+  import MoltenPushButton, {
+    ButtonStyle,
+  } from "../main/panels/preferences/MoltenPushButton.svelte";
 
   export let config;
   export let index;
@@ -80,7 +83,7 @@
     loaded = false;
   });
 
-  function sendData(e, index) {
+  function sendData(e) {
     commitState = 0;
 
     config.script = "gmss(" + textarea.innerText.toString() + ")";
@@ -142,14 +145,12 @@
         {commitState ? "Unsaved changes!" : "Synced with Grid!"}
       </div>
     {/key}
-    <button
+    <MoltenPushButton
       on:click={sendData}
       disabled={!commitState}
-      class="{commitState
-        ? 'opacity-100'
-        : 'opacity-50 pointer-events-none'} bg-commit hover:bg-commit-saturate-20 text-white rounded px-2 py-0.5 text-sm focus:outline-none"
-      >Commit</button
-    >
+      text={"Commit"}
+      style={ButtonStyle.ACCEPT}
+    />
   </div>
 
   <SendFeedback

diff --git a/src/renderer/config-blocks/VarGlobal.svelte b/src/renderer/config-blocks/VarGlobal.svelte
@@ -41,6 +41,9 @@
   export let access_tree;
 
   import LineEditor from "../main/user-interface/LineEditor.svelte";
+  import MoltenPushButton, {
+    ButtonStyle,
+  } from "../main/panels/preferences/MoltenPushButton.svelte";
 
   let sidebarWidth;
 
@@ -225,16 +228,12 @@
     {#if parenthesisError}
       <div class="text-sm text-red-500">Parenthesis must be closed!</div>
     {/if}
-    <button
-      on:click={() => {
-        sendData();
-      }}
-      disabled={!commitState && parenthesisError && variableNameError}
-      class="{commitState && !parenthesisError && !variableNameError
-        ? 'opacity-100'
-        : 'opacity-50 pointer-events-none'} bg-commit hover:bg-commit-saturate-20 text-white rounded px-2 py-0.5 text-sm focus:outline-none"
-      >Commit</button
-    >
+    <MoltenPushButton
+      on:click={sendData}
+      disabled={Boolean(!commitState && parenthesisError && variableNameError)}
+      text={"Commit"}
+      style={ButtonStyle.ACCEPT}
+    />
   </div>
 
   <div class="w-full flex flex-col p-2">

diff --git a/src/renderer/config-blocks/VarLocals.svelte b/src/renderer/config-blocks/VarLocals.svelte
@@ -41,6 +41,9 @@
   export let access_tree;
 
   import LineEditor from "../main/user-interface/LineEditor.svelte";
+  import MoltenPushButton, {
+    ButtonStyle,
+  } from "../main/panels/preferences/MoltenPushButton.svelte";
 
   let sidebarWidth;
 
@@ -228,16 +231,12 @@
     {#if parenthesisError}
       <div class="text-sm text-red-500">Parenthesis must be closed!</div>
     {/if}
-    <button
-      on:click={() => {
-        sendData();
-      }}
+    <MoltenPushButton
+      on:click={sendData}
       disabled={Boolean(!commitState && parenthesisError && variableNameError)}
-      class="{commitState && !parenthesisError && !variableNameError
-        ? 'opacity-100'
-        : 'opacity-50 pointer-events-none'} bg-commit hover:bg-commit-saturate-20 text-white rounded px-2 py-0.5 text-sm focus:outline-none"
-      >Commit</button
-    >
+      text={"Commit"}
+      style={ButtonStyle.ACCEPT}
+    />
   </div>
 
   <div class="w-full flex flex-col p-2">

diff --git a/src/renderer/config-blocks/VarSelf.svelte b/src/renderer/config-blocks/VarSelf.svelte
@@ -41,6 +41,9 @@
   export let access_tree;
 
   import LineEditor from "../main/user-interface/LineEditor.svelte";
+  import MoltenPushButton, {
+    ButtonStyle,
+  } from "../main/panels/preferences/MoltenPushButton.svelte";
 
   let sidebarWidth;
 
@@ -229,16 +232,12 @@
     {#if parenthesisError}
       <div class="text-sm text-red-500">Parenthesis must be closed!</div>
     {/if}
-    <button
-      on:click={() => {
-        sendData();
-      }}
-      disabled={!commitState && parenthesisError && variableNameError}
-      class="{commitState && !parenthesisError && !variableNameError
-        ? 'opacity-100'
-        : 'opacity-50 pointer-events-none'} bg-commit hover:bg-commit-saturate-20 text-white rounded px-2 py-0.5 text-sm focus:outline-none"
-      >Commit</button
-    >
+    <MoltenPushButton
+      on:click={sendData}
+      disabled={Boolean(!commitState && parenthesisError && variableNameError)}
+      text={"Commit"}
+      style={ButtonStyle.ACCEPT}
+    />
   </div>
 
   <div class="w-full flex flex-col p-2">

diff --git a/src/renderer/config-blocks/components/RawCode_SelectList.svelte b/src/renderer/config-blocks/components/RawCode_SelectList.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import { MeltSelect } from "@intechstudio/grid-uikit";
+  import MoltenPushButton, {
+    ButtonStyle,
+  } from "../../main/panels/preferences/MoltenPushButton.svelte";
 
   export let options = [];
 
@@ -23,13 +26,11 @@
     <MeltSelect bind:target={selection} {options} />
   {/if}
   <div class="flex flex-row gap-2">
-    <button
-      class="px-2 py-1 rounded bg-select text-white hover:bg-select-saturate-20 flex flex-grow justify-center"
-      on:click={handleCancel}>Cancel</button
-    >
-    <button
-      class="px-2 py-1 rounded bg-commit text-white hover:bg-commit-saturate-20 flex flex-grow justify-center"
-      on:click={handleReplace}>Replace</button
-    >
+    <MoltenPushButton text={"Cancel"} on:click={handleCancel} />
+    <MoltenPushButton
+      text={"Replace"}
+      style={ButtonStyle.ACCEPT}
+      on:click={handleReplace}
+    />
   </div>
 </div>
diff --git a/src/renderer/main/modals/Export.svelte b/src/renderer/main/modals/Export.svelte
@@ -53,9 +53,7 @@
     />
 
     <MoltenPushButton on:click={handleCopy} text="Copy" style="accept">
-      <div slot="popup">
-        <MoltenPopup text="Copied to clipboard!" />
-      </div>
+      <MoltenPopup slot="popup" text="Copied to clipboard!" />
     </MoltenPushButton>
   </div>
 </MoltenModal>
diff --git a/src/renderer/main/modals/Feedback.svelte b/src/renderer/main/modals/Feedback.svelte
@@ -6,6 +6,9 @@
   import { backOut } from "svelte/easing";
   import MoltenModal from "./MoltenModal.svelte";
   import { Analytics } from "../../runtime/analytics.js";
+  import MoltenPushButton, {
+    ButtonStyle,
+  } from "../panels/preferences/MoltenPushButton.svelte";
 
   let textArea = undefined;
   let inputField = undefined;
@@ -114,17 +117,12 @@
           {/if}
         </div>
       </div>
-      <button
+      <MoltenPushButton
         on:click={sendFeedback}
         id="close-btn"
-        class="py-2 px-8 w-fit rounded not-draggable
-        bg-secondary transition-colors duration-75"
-        class:hover:bg-commit={!feedbackSubmitted}
-        class:opacity-50={feedbackSubmitted}
-        class:cursor-default={feedbackSubmitted}
-      >
-        <span class="text-white">Submit Feedback!</span>
-      </button>
+        text={"Submit Feedback!"}
+        style={ButtonStyle.ACCEPT}
+      />
     </div>
 
     <div />

diff --git a/src/renderer/main/modals/Welcome.svelte b/src/renderer/main/modals/Welcome.svelte
@@ -3,6 +3,9 @@
   import { modal } from "./modal.store";
   import { onDestroy, onMount } from "svelte";
   import { appSettings } from "../../runtime/app-helper.store";
+  import MoltenPushButton, {
+    ButtonStyle,
+  } from "../panels/preferences/MoltenPushButton.svelte";
 
   const configuration = window.ctxProcess.configuration();
 
@@ -230,16 +233,14 @@
           </div>
         </div>
 
-        <button
+        <MoltenPushButton
           on:click={() => {
             modal.close();
           }}
           id="close-btn"
-          class="px-3 py-1 cursor-pointer rounded not-draggable
-          hover:bg-blue-700 bg-blue-500"
-        >
-          Close
-        </button>
+          text={"Close"}
+          style={ButtonStyle.NORMAL}
+        />
       </div>
     </div>
   </div>