From 67c564fb5fc7228d159ff4c3f861d9ce9a332de2 Mon Sep 17 00:00:00 2001
From: ManeraKai <manerakai@protonmail.com>
Date: Thu, 19 Sep 2024 22:59:14 +0300
Subject: [PATCH] Added margin to popup buttons

---
 src/pages/components/Label.svelte  |  2 +-
 src/pages/popup_src/Buttons.svelte | 25 +++++++++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/pages/components/Label.svelte b/src/pages/components/Label.svelte
index 39930cd..d59b943 100644
--- a/src/pages/components/Label.svelte
+++ b/src/pages/components/Label.svelte
@@ -1,4 +1,4 @@
-<span>
+<span {...$$restProps}>
   <slot></slot>
 </span>
 
diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte
index 55d40dd..992ed8e 100644
--- a/src/pages/popup_src/Buttons.svelte
+++ b/src/pages/popup_src/Buttons.svelte
@@ -106,7 +106,7 @@
         })
       }}
     >
-      <Label>{browser.i18n.getMessage("redirect") || "Redirect"}</Label>
+      <Label class="margin">{browser.i18n.getMessage("redirect") || "Redirect"}</Label>
       <RedirectIcon />
     </Row>
   {/if}
@@ -121,12 +121,12 @@
               window.close()
             })}
         >
-          <Label>{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label>
+          <Label class="margin">{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label>
           <SwitchInstanceIcon />
         </Row>
       {/if}
       <Row class="interactive" on:click={removeInstance}>
-        <Label>
+        <Label class="margin">
           {browser.i18n.getMessage("remove") || "Remove"}
           +
           {browser.i18n.getMessage("switchInstance") || "Switch Instance"}
@@ -135,7 +135,7 @@
       </Row>
     {:else}
       <Row class={"interactive " + (autoPicking ? "disabled" : "")} on:click={removeAndAutoPickInstance}>
-        <Label>
+        <Label class="margin">
           {browser.i18n.getMessage("remove") || "Remove"}
           +
           {browser.i18n.getMessage("autoPickInstance") || "Auto Pick Instance"}
@@ -143,7 +143,7 @@
         <AutoPickIcon />
       </Row>
       <Row class={"interactive " + (autoPicking ? "disabled" : "")} on:click={addAutoPickInstance}>
-        <Label>
+        <Label class="margin">
           {browser.i18n.getMessage("autoPickInstance") || "Auto Pick Instance"}
         </Label>
         <AutoPickIcon />
@@ -153,7 +153,7 @@
 
   {#if redirectToOriginal}
     <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}>
-      <Label>{browser.i18n.getMessage("copyOriginal") || "Copy Original"}</Label>
+      <Label class="margin">{browser.i18n.getMessage("copyOriginal") || "Copy Original"}</Label>
       <CopyIcon />
     </Row>
     <Row
@@ -166,7 +166,7 @@
         })
       }}
     >
-      <Label>{browser.i18n.getMessage("redirectToOriginal" || "Redirect to Original")}</Label>
+      <Label class="margin">{browser.i18n.getMessage("redirectToOriginal" || "Redirect to Original")}</Label>
       <RedirectToOriginalIcon />
     </Row>
   {/if}
@@ -195,7 +195,7 @@
         window.close()
       })}
   >
-    <Label>{browser.i18n.getMessage("settings")}</Label>
+    <Label class="margin">{browser.i18n.getMessage("settings")}</Label>
     <SettingsIcon />
   </Row>
 </div>
@@ -238,4 +238,13 @@
     margin-right: 0;
     margin-left: 5px;
   }
+
+  :global(.margin) {
+    margin-right: 5px;
+    margin-left: 0;
+  }
+  :global(.margin_rtl) {
+    margin-right: 0;
+    margin-left: 5px;
+  }
 </style>