From f9cdf70bdbc719b6649c1a7a8772987d42987cf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Wed, 29 Nov 2023 14:31:19 +0100
Subject: [PATCH] change save button styling

resolves #49
---
 src/i18n/de/index.ts          |  3 +--
 src/i18n/en/index.ts          |  3 +--
 src/routes/EditActions.svelte | 23 +++++++++++++++++------
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/i18n/de/index.ts b/src/i18n/de/index.ts
index 85ccf73f..801c678c 100644
--- a/src/i18n/de/index.ts
+++ b/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",
diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts
index c3b8a160..53a091c5 100644
--- a/src/i18n/en/index.ts
+++ b/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",
diff --git a/src/routes/EditActions.svelte b/src/routes/EditActions.svelte
index 32250fee..0f9d7909 100644
--- a/src/routes/EditActions.svelte
+++ b/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>