change save button styling

resolves #49

src/i18n/de/index.ts

@@ -6,8 +6,7 @@ const de = {
   saveActions: {
     UNDO: "Rückgängig (<kbd class='icon'>shift</kbd> halten um alle Änderungen rückgängig zu machen)",
     REDO: "Wiederholen",
-    APPLY: "Anwenden",
-    SAVE: "Änderungen auf das Gerät schreiben",
+    SAVE: "Speichern",
   },
   sync: {
     TITLE_READ: "Neueste Änderungen werden abgerufen",

src/i18n/en/index.ts

@@ -6,8 +6,7 @@ const en = {
   saveActions: {
     UNDO: "Undo (hold <kbd class='icon'>shift</kbd> to undo all changes)",
     REDO: "Redo",
-    APPLY: "Apply",
-    SAVE: "Burn changes to your device",
+    SAVE: "Save",
   },
   backup: {
     TITLE: "Local Backup",

src/routes/EditActions.svelte

@@ -132,19 +132,30 @@
   on:click={redo}>redo</button
 >
 {#if $changes.length !== 0}
-  <div transition:slide class="separator" />
   <button
     transition:fly={{x: 10}}
     use:action={{title: $LL.saveActions.SAVE(), shortcut: "ctrl+shift+s"}}
     on:click={save}
-    class="icon">save</button
+    class="click-me"><span class="icon">save</span>{$LL.saveActions.SAVE()}</button
   >
 {/if}
 
 <style lang="scss">
-  .separator {
-    width: 1px;
-    height: 24px;
-    background: var(--md-sys-color-outline-variant);
+  .click-me {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: fit-content;
+    margin-inline: 8px;
+    padding-block: 2px;
+    padding-inline-start: 8px;
+    padding-inline-end: 12px;
+    font-family: inherit;
+    font-weight: bold;
+    color: var(--md-sys-color-primary);
+    border: 2px solid var(--md-sys-color-primary);
+    border-radius: 18px;
+    outline: 2px dashed var(--md-sys-color-primary);
+    outline-offset: 2px;
   }
 </style>