From c6de68c4c4bda3edcf6cf012bd98adea3baf866b Mon Sep 17 00:00:00 2001
From: ManeraKai <manerakai@protonmail.com>
Date: Thu, 25 Jul 2024 15:17:57 +0300
Subject: Migrating popup to svelte

---
 src/pages/components/Input.svelte | 41 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/pages/components/Input.svelte

(limited to 'src/pages/components/Input.svelte')

diff --git a/src/pages/components/Input.svelte b/src/pages/components/Input.svelte
new file mode 100644
index 00000000..d963233c
--- /dev/null
+++ b/src/pages/components/Input.svelte
@@ -0,0 +1,41 @@
+<script>
+  export let value
+</script>
+
+<input
+  {...$$props}
+  bind:value
+  on:blur
+  on:change
+  on:click
+  on:contextmenu
+  on:focus
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:paste
+  on:input
+/>
+
+<style>
+  input {
+    font-weight: bold;
+    box-sizing: border-box;
+    color: var(--text);
+    font-size: 16px;
+    padding: 8px;
+    background-color: var(--bg-secondary);
+    border: none;
+    margin: 0;
+    width: 400px;
+    border-radius: 3px;
+    outline-color: var(--active);
+  }
+
+  input:focus {
+    outline-color: var(--active);
+  }
+</style>
-- 
cgit v1.3.1


From 2cb60e91cd33ea63dc43b7afb2ce7a261bce6512 Mon Sep 17 00:00:00 2001
From: ManeraKai <manerakai@protonmail.com>
Date: Fri, 26 Jul 2024 17:39:22 +0300
Subject: Added mobile support in Svelte

---
 package.json                                       |   2 +-
 src/assets/javascripts/utils.js                    |   8 --
 src/pages/components/Input.svelte                  |   5 ++
 src/pages/components/RowCheckbox.svelte            |  14 ----
 src/pages/components/RowSelect.svelte              |  19 -----
 src/pages/fonts/Inter-VariableFont_slnt,wght.ttf   | Bin 0 -> 803384 bytes
 src/pages/fonts/Vazirmatn-VariableFont_wght.ttf    | Bin 0 -> 285620 bytes
 src/pages/fonts/styles.css                         |  13 +++
 src/pages/options/index.html                       |   1 +
 src/pages/options_src/App.svelte                   |  20 ++++-
 src/pages/options_src/General/General.svelte       |  89 ++++++++++++---------
 src/pages/options_src/Services/Instances.svelte    |   5 +-
 src/pages/options_src/Services/RedirectType.svelte |  23 +++---
 src/pages/options_src/Services/Services.svelte     |  71 ++++++++--------
 src/pages/options_src/Sidebar.svelte               |  14 ++++
 src/pages/popup/index.html                         |   2 +-
 .../stylesheets/Inter-VariableFont_slnt,wght.ttf   | Bin 803384 -> 0 bytes
 .../stylesheets/Vazirmatn-VariableFont_wght.ttf    | Bin 285620 -> 0 bytes
 src/pages/stylesheets/styles.css                   |  88 --------------------
 19 files changed, 157 insertions(+), 217 deletions(-)
 delete mode 100644 src/pages/components/RowCheckbox.svelte
 delete mode 100644 src/pages/components/RowSelect.svelte
 create mode 100644 src/pages/fonts/Inter-VariableFont_slnt,wght.ttf
 create mode 100644 src/pages/fonts/Vazirmatn-VariableFont_wght.ttf
 create mode 100644 src/pages/fonts/styles.css
 delete mode 100644 src/pages/stylesheets/Inter-VariableFont_slnt,wght.ttf
 delete mode 100644 src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf
 delete mode 100644 src/pages/stylesheets/styles.css

(limited to 'src/pages/components/Input.svelte')

diff --git a/package.json b/package.json
index d0669a69..0f89cbdb 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   "scripts": {
     "start": "web-ext run",
     "nightly": "web-ext run --firefox=/home/esmail/software/firefox_nightly/firefox",
-    "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix",
+    "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix ",
     "build": "web-ext build",
     "test": "web-ext lint",
     "html": "rollup -c --config-popup && rollup -c --config-options"
diff --git a/src/assets/javascripts/utils.js b/src/assets/javascripts/utils.js
index 439826dd..18168e90 100644
--- a/src/assets/javascripts/utils.js
+++ b/src/assets/javascripts/utils.js
@@ -20,13 +20,6 @@ function getNextInstance(currentInstanceUrl, instances) {
   return instances[nextInstanceIndex]
 }
 
-/**
- * @param {string} str
- */
-function camelCase(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
 /**
  * @param {URL} url
  */
@@ -178,7 +171,6 @@ export default {
   protocolHost,
   getList,
   getBlacklist,
-  camelCase,
   getConfig,
   getOptions,
   getPingCache,
diff --git a/src/pages/components/Input.svelte b/src/pages/components/Input.svelte
index d963233c..97a47e6d 100644
--- a/src/pages/components/Input.svelte
+++ b/src/pages/components/Input.svelte
@@ -38,4 +38,9 @@
   input:focus {
     outline-color: var(--active);
   }
+  @media (max-width: 715px) {
+    input {
+      width: 200px;
+    }
+  }
 </style>
diff --git a/src/pages/components/RowCheckbox.svelte b/src/pages/components/RowCheckbox.svelte
deleted file mode 100644
index b7ccab93..00000000
--- a/src/pages/components/RowCheckbox.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import Row from "./Row.svelte"
-  import Checkbox from "./Checkbox.svelte"
-  import Label from "./Label.svelte"
-
-  export let label
-  export let checked
-  export let onChange
-</script>
-
-<Row>
-  <Label>{label}</Label>
-  <Checkbox bind:checked {onChange} />
-</Row>
diff --git a/src/pages/components/RowSelect.svelte b/src/pages/components/RowSelect.svelte
deleted file mode 100644
index d685803e..00000000
--- a/src/pages/components/RowSelect.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-  import Row from "./Row.svelte"
-  import Select from "./Select.svelte"
-  import Label from "./Label.svelte"
-
-  export let label
-  export let values
-  export let value
-  export let onChange
-  export let ariaLabel
-</script>
-
-<Row>
-  <Label>{label}</Label>
-  <Select {value} {values} {onChange} {ariaLabel} />
-</Row>
-
-<style>
-</style>
diff --git a/src/pages/fonts/Inter-VariableFont_slnt,wght.ttf b/src/pages/fonts/Inter-VariableFont_slnt,wght.ttf
new file mode 100644
index 00000000..969a990f
Binary files /dev/null and b/src/pages/fonts/Inter-VariableFont_slnt,wght.ttf differ
diff --git a/src/pages/fonts/Vazirmatn-VariableFont_wght.ttf b/src/pages/fonts/Vazirmatn-VariableFont_wght.ttf
new file mode 100644
index 00000000..f4b97c01
Binary files /dev/null and b/src/pages/fonts/Vazirmatn-VariableFont_wght.ttf differ
diff --git a/src/pages/fonts/styles.css b/src/pages/fonts/styles.css
new file mode 100644
index 00000000..754543b1
--- /dev/null
+++ b/src/pages/fonts/styles.css
@@ -0,0 +1,13 @@
+@font-face {
+  font-family: "Inter";
+  src: url("Inter-VariableFont_slnt,wght.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url("Vazirmatn-VariableFont_wght.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file
diff --git a/src/pages/options/index.html b/src/pages/options/index.html
index c3dcff71..b197d4a7 100644
--- a/src/pages/options/index.html
+++ b/src/pages/options/index.html
@@ -7,6 +7,7 @@
 	<link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg">
 	<title>Settings</title>
 	<link rel='stylesheet' href='build/bundle.css'>
+	<link rel='stylesheet' href='../fonts/styles.css'>
 	<script defer src='build/bundle.js'></script>
 </head>
 
diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte
index 6bbacb9b..8b0d3c54 100644
--- a/src/pages/options_src/App.svelte
+++ b/src/pages/options_src/App.svelte
@@ -93,7 +93,6 @@
 {/if}
 
 <style>
- 
   :global(body) {
     width: 100vw;
     height: 100vh;
@@ -115,4 +114,23 @@
     color: var(--text);
     overflow: scroll;
   }
+
+  @media (max-width: 1250px) {
+    div {
+      grid-template-columns: auto;
+      grid-template-rows: min-content auto;
+      padding-left: 5vw;
+      padding-right: 5vw;
+    }
+  }
+
+  @media (max-width: 715px) {
+    div {
+      font-size: 14px;
+      grid-template-columns: auto;
+      grid-template-rows: min-content auto;
+      padding-left: 5vw;
+      padding-right: 5vw;
+    }
+  }
 </style>
diff --git a/src/pages/options_src/General/General.svelte b/src/pages/options_src/General/General.svelte
index d5b2dd59..2cf65285 100644
--- a/src/pages/options_src/General/General.svelte
+++ b/src/pages/options_src/General/General.svelte
@@ -3,10 +3,12 @@
 
   import Exceptions from "./Exceptions.svelte"
   import SettingsButtons from "./SettingsButtons.svelte"
-  import RowSelect from "../../components/RowSelect.svelte"
-  import Checkbox from "../../components/RowCheckbox.svelte"
   import { options } from "../stores"
   import { onDestroy } from "svelte"
+  import Row from "../../components/Row.svelte"
+  import Label from "../../components/Label.svelte"
+  import Select from "../../components/Select.svelte"
+  import Checkbox from "../../components/Checkbox.svelte"
 
   let _options
   const unsubscribe = options.subscribe(val => (_options = val))
@@ -23,46 +25,55 @@
 </script>
 
 <div>
-  <RowSelect
-    label="Theme"
-    values={[
-      { value: "detect", name: "Auto" },
-      { value: "light", name: "Light" },
-      { value: "dark", name: "Dark" },
-    ]}
-    value={_options.theme}
-    onChange={e => {
-      _options["theme"] = e.target.options[e.target.options.selectedIndex].value
-      options.set(_options)
-    }}
-    ariaLabel="select theme"
-  />
+  <Row>
+    <Label>Theme</Label>
+    <Select
+      values={[
+        { value: "detect", name: "Auto" },
+        { value: "light", name: "Light" },
+        { value: "dark", name: "Dark" },
+      ]}
+      value={_options.theme}
+      onChange={e => {
+        _options.theme = e.target.options[e.target.options.selectedIndex].value
+        options.set(_options)
+      }}
+      ariaLabel="select theme"
+    />
+  </Row>
 
-  <RowSelect
-    label="Fetch public instances"
-    value={_options.fetchInstances}
-    onChange={e => {
-      _options["fetchInstances"] = e.target.options[e.target.options.selectedIndex].value
-      options.set(_options)
-    }}
-    ariaLabel="Select fetch public instances"
-    values={[
-      { value: "github", name: "GitHub" },
-      { value: "codeberg", name: "Codeberg" },
-      { value: "disable", name: "Disable" },
-    ]}
-  />
+  <Row>
+    <Label>Fetch public instances</Label>
+    <Select
+      value={_options.fetchInstances}
+      values={[
+        { value: "github", name: "GitHub" },
+        { value: "codeberg", name: "Codeberg" },
+        { value: "disable", name: "Disable" },
+      ]}
+      onChange={e => {
+        _options.fetchInstances = e.target.options[e.target.options.selectedIndex].value
+        options.set(_options)
+      }}
+      ariaLabel={"Select fetch public instances"}
+    />
+  </Row>
 
-  <Checkbox
-    label="Redirect Only in Incognito"
-    checked={_options.redirectOnlyInIncognito}
-    onChange={e => {
-      _options["redirectOnlyInIncognito"] = e.target.checked
-      options.set(_options)
-    }}
-  />
+  <Row>
+    <Label>Redirect Only in Incognito</Label>
+    <Checkbox
+      checked={_options.redirectOnlyInIncognito}
+      onChange={e => {
+        _options.redirectOnlyInIncognito = e.target.checked
+        options.set(_options)
+      }}
+    />
+  </Row>
 
-  <Checkbox label="Bookmarks menu" bind:checked={bookmarksPermission} />
+  <Row>
+    <Label>Bookmarks menu</Label>
+    <Checkbox bind:checked={bookmarksPermission} />
+  </Row>
 
   <Exceptions opts={_options} />
 
diff --git a/src/pages/options_src/Services/Instances.svelte b/src/pages/options_src/Services/Instances.svelte
index 892e395b..e62d410d 100644
--- a/src/pages/options_src/Services/Instances.svelte
+++ b/src/pages/options_src/Services/Instances.svelte
@@ -63,10 +63,10 @@
       console.log("pinging...", instance)
       pingCache[instance] = { color: "lightblue", value: "pinging..." }
       const time = await utils.ping(instance)
-      pingCache[instance] = processTime(time)
+      pingCache[instance] = colorTime(time)
     }
   }
-  function processTime(time) {
+  function colorTime(time) {
     let value
     let color
     if (time < 5000) {
@@ -225,6 +225,7 @@
   a {
     color: var(--text);
     text-decoration: none;
+    word-wrap: anywhere;
   }
 
   a:hover {
diff --git a/src/pages/options_src/Services/RedirectType.svelte b/src/pages/options_src/Services/RedirectType.svelte
index 7f7a2843..11044080 100644
--- a/src/pages/options_src/Services/RedirectType.svelte
+++ b/src/pages/options_src/Services/RedirectType.svelte
@@ -1,12 +1,11 @@
 <script>
   import { onDestroy } from "svelte"
-
-  import RowSelect from "../../components/RowSelect.svelte"
   import SvelteSelect from "svelte-select"
   import { options, config } from "../stores"
   import Row from "../../components/Row.svelte"
   import Label from "../../components/Label.svelte"
   import FrontendIcon from "./FrontendIcon.svelte"
+  import Select from "../../components/Select.svelte"
 
   let _options
   let _config
@@ -63,15 +62,17 @@
   }
 </script>
 
-<RowSelect
-  label="Redirect Type"
-  value={serviceOptions.redirectType}
-  onChange={e => {
-    serviceOptions.redirectType = e.target.options[e.target.options.selectedIndex].value
-    options.set(_options)
-  }}
-  {values}
-/>
+<Row>
+  <Label>Redirect Type</Label>
+  <Select
+    value={serviceOptions.redirectType}
+    onChange={e => {
+      serviceOptions.redirectType = e.target.options[e.target.options.selectedIndex].value
+      options.set(_options)
+    }}
+    {values}
+  />
+</Row>
 
 {#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"}
   <Row>
diff --git a/src/pages/options_src/Services/Services.svelte b/src/pages/options_src/Services/Services.svelte
index cb1efacb..9c4e6c97 100644
--- a/src/pages/options_src/Services/Services.svelte
+++ b/src/pages/options_src/Services/Services.svelte
@@ -1,6 +1,4 @@
 <script>
-  import Checkbox from "../../components/RowCheckbox.svelte"
-  import RowSelect from "../../components/RowSelect.svelte"
   import Row from "../../components/Row.svelte"
   import Label from "../../components/Label.svelte"
   import Select from "../../components/Select.svelte"
@@ -11,6 +9,7 @@
   import SvelteSelect from "svelte-select"
   import ServiceIcon from "./ServiceIcon.svelte"
   import FrontendIcon from "./FrontendIcon.svelte"
+  import Checkbox from "../../components/Checkbox.svelte"
 
   let _options
   let _config
@@ -58,29 +57,33 @@
 
   <hr />
 
-  <Checkbox
-    label="Enable"
-    checked={serviceOptions.enabled}
-    onChange={e => {
-      serviceOptions.enabled = e.target.checked
-      options.set(_options)
-    }}
-  />
-
-  <div style={!serviceOptions.enabled && "pointer-events: none;opacity: 0.4;user-select: none;"}>
+  <Row>
+    <Label>Enable</Label>
     <Checkbox
-      label="Show in popup"
-      checked={_options.popupServices.includes(selectedService)}
+      checked={serviceOptions.enabled}
       onChange={e => {
-        if (e.target.checked && !_options.popupServices.includes(selectedService)) {
-          _options.popupServices.push(selectedService)
-        } else if (_options.popupServices.includes(selectedService)) {
-          const index = _options.popupServices.indexOf(selectedService)
-          if (index !== -1) _options.popupServices.splice(index, 1)
-        }
+        serviceOptions.enabled = e.target.checked
         options.set(_options)
       }}
     />
+  </Row>
+
+  <div style={!serviceOptions.enabled && "pointer-events: none;opacity: 0.4;user-select: none;"}>
+    <Row>
+      <Label>Show in popup</Label>
+      <Checkbox
+        checked={_options.popupServices.includes(selectedService)}
+        onChange={e => {
+          if (e.target.checked && !_options.popupServices.includes(selectedService)) {
+            _options.popupServices.push(selectedService)
+          } else if (_options.popupServices.includes(selectedService)) {
+            const index = _options.popupServices.indexOf(selectedService)
+            if (index !== -1) _options.popupServices.splice(index, 1)
+          }
+          options.set(_options)
+        }}
+      />
+    </Row>
 
     <Row>
       <Label>
@@ -118,18 +121,20 @@
 
     <RedirectType {selectedService} />
 
-    <RowSelect
-      label="Unsupported embeds handling"
-      value={serviceOptions.unsupportedUrls}
-      onChange={e => {
-        serviceOptions.unsupportedUrls = e.target.options[e.target.options.selectedIndex].value
-        options.set(_options)
-      }}
-      values={[
-        { value: "bypass", name: "Bypass" },
-        { value: "block", name: "Block" },
-      ]}
-    />
+    <Row>
+      <Label>Unsupported embeds handling</Label>
+      <Select
+        value={serviceOptions.unsupportedUrls}
+        onChange={e => {
+          serviceOptions.unsupportedUrls = e.target.options[e.target.options.selectedIndex].value
+          options.set(_options)
+        }}
+        values={[
+          { value: "bypass", name: "Bypass" },
+          { value: "block", name: "Block" },
+        ]}
+      />
+    </Row>
 
     {#if selectedService == "search"}
       <Row>
@@ -163,6 +168,7 @@
     --item-padding: 0 10px;
     --border: none;
     --border-hover: none;
+    --border-focused: none;
     --width: 210px;
     --background: var(--bg-secondary);
     --list-background: var(--bg-secondary);
@@ -178,7 +184,6 @@
     justify-content: start;
     align-items: center;
   }
-
   :global(.svelte_select img, .svelte_select svg) {
     margin-right: 10px;
     height: 26px;
diff --git a/src/pages/options_src/Sidebar.svelte b/src/pages/options_src/Sidebar.svelte
index ff44995f..4a808268 100644
--- a/src/pages/options_src/Sidebar.svelte
+++ b/src/pages/options_src/Sidebar.svelte
@@ -40,4 +40,18 @@
   a:hover {
     color: var(--active);
   }
+
+  @media (max-width: 1250px) {
+    div {
+      flex-direction: row;
+      justify-content: center;
+      margin: 0;
+    }
+  }
+
+  @media (max-width: 715px) {
+    a {
+      margin: 5px;
+    }
+  }
 </style>
diff --git a/src/pages/popup/index.html b/src/pages/popup/index.html
index 5c589bf7..b197d4a7 100644
--- a/src/pages/popup/index.html
+++ b/src/pages/popup/index.html
@@ -7,7 +7,7 @@
 	<link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg">
 	<title>Settings</title>
 	<link rel='stylesheet' href='build/bundle.css'>
-	<link rel='stylesheet' href='../stylesheets/styles.css'>
+	<link rel='stylesheet' href='../fonts/styles.css'>
 	<script defer src='build/bundle.js'></script>
 </head>
 
diff --git a/src/pages/stylesheets/Inter-VariableFont_slnt,wght.ttf b/src/pages/stylesheets/Inter-VariableFont_slnt,wght.ttf
deleted file mode 100644
index 969a990f..00000000
Binary files a/src/pages/stylesheets/Inter-VariableFont_slnt,wght.ttf and /dev/null differ
diff --git a/src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf b/src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf
deleted file mode 100644
index f4b97c01..00000000
Binary files a/src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf and /dev/null differ
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
deleted file mode 100644
index 9e8fedb3..00000000
--- a/src/pages/stylesheets/styles.css
+++ /dev/null
@@ -1,88 +0,0 @@
-@font-face {
-  font-family: "Inter";
-  src: url("Inter-VariableFont_slnt,wght.ttf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Vazirmatn";
-  src: url("Vazirmatn-VariableFont_wght.ttf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-/* 
-
-@media (max-width: 1250px) {
-  body.option {
-    flex-direction: column;
-    width: 95vw;
-    align-items: center;
-    padding: 40px 0px;
-  }
-
-  section.links {
-    flex-direction: row;
-    width: 95vw;
-    padding: 0 55px;
-  }
-
-  section.block-option {
-    width: 95vw;
-  }
-
-  div.checklist div x {
-    overflow: hidden;
-  }
-}
-
-html.mobile img,
-html.mobile svg {
-  margin-right: 10px;
-  height: 30px;
-  width: 30px;
-  color: var(--text);
-}
-
-html.mobile div.block {
-  padding: 0 15px;
-  justify-content: space-between;
-  display: flex;
-  align-items: center;
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-html.mobile div.block input[type="checkbox"] {
-  width: 58px;
-  height: 30px;
-}
-
-html.mobile div.block input[type="checkbox"]::before {
-  width: 24px;
-  height: 24px;
-  top: 3px;
-  left: 3.5px;
-}
-
-html.mobile div.block input[type="checkbox"]:checked::before {
-  left: 30px;
-}
-
-html.mobile body.option {
-  flex-direction: column;
-  width: 100%;
-  padding: 0;
-  align-items: center;
-}
-
-html.mobile section.links {
-  flex-direction: row;
-  width: 100%;
-  padding: 0 55px;
-}
-
-html.mobile section.block-option {
-  width: 100%;
-} */
\ No newline at end of file
-- 
cgit v1.3.1


From ed0c90ec3de1fa5fa8f7ebc138d62174eb07b363 Mon Sep 17 00:00:00 2001
From: ManeraKai <manerakai@protonmail.com>
Date: Sat, 27 Jul 2024 12:11:54 +0300
Subject: Cleaned code

---
 src/pages/components/Button.svelte                 |  2 +-
 src/pages/components/Input.svelte                  |  2 +-
 src/pages/components/Row.svelte                    |  2 +-
 src/pages/options_src/General/General.svelte       |  6 ++--
 .../options_src/General/SettingsButtons.svelte     | 34 +++++++---------------
 src/pages/options_src/Sidebar.svelte               |  6 ++--
 6 files changed, 18 insertions(+), 34 deletions(-)

(limited to 'src/pages/components/Input.svelte')

diff --git a/src/pages/components/Button.svelte b/src/pages/components/Button.svelte
index 3405c2ea..8836b47e 100644
--- a/src/pages/components/Button.svelte
+++ b/src/pages/components/Button.svelte
@@ -1,4 +1,4 @@
-<button on:click {...$$props}>
+<button {...$$restProps} on:click {...$$props}>
   <slot></slot>
 </button>
 
diff --git a/src/pages/components/Input.svelte b/src/pages/components/Input.svelte
index 97a47e6d..59e584db 100644
--- a/src/pages/components/Input.svelte
+++ b/src/pages/components/Input.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <input
-  {...$$props}
+  {...$$restProps}
   bind:value
   on:blur
   on:change
diff --git a/src/pages/components/Row.svelte b/src/pages/components/Row.svelte
index 68b528e3..09246d98 100644
--- a/src/pages/components/Row.svelte
+++ b/src/pages/components/Row.svelte
@@ -1,4 +1,4 @@
-<div {...$$props} on:click>
+<div {...$$restProps} on:click>
   <slot></slot>
 </div>
 
diff --git a/src/pages/options_src/General/General.svelte b/src/pages/options_src/General/General.svelte
index 732ad83b..37c38a0a 100644
--- a/src/pages/options_src/General/General.svelte
+++ b/src/pages/options_src/General/General.svelte
@@ -38,7 +38,6 @@
         _options.theme = e.target.options[e.target.options.selectedIndex].value
         options.set(_options)
       }}
-      ariaLabel="select theme"
     />
   </Row>
 
@@ -55,7 +54,6 @@
         _options.fetchInstances = e.target.options[e.target.options.selectedIndex].value
         options.set(_options)
       }}
-      ariaLabel={"Select fetch public instances"}
     />
   </Row>
 
@@ -75,7 +73,7 @@
     <Checkbox bind:checked={bookmarksPermission} />
   </Row>
 
-  <Exceptions opts={_options} />
+  <Exceptions />
 
-  <SettingsButtons opts={_options} />
+  <SettingsButtons />
 </div>
diff --git a/src/pages/options_src/General/SettingsButtons.svelte b/src/pages/options_src/General/SettingsButtons.svelte
index 3ea46a2d..2f574199 100644
--- a/src/pages/options_src/General/SettingsButtons.svelte
+++ b/src/pages/options_src/General/SettingsButtons.svelte
@@ -14,24 +14,18 @@
   const unsubscribe = options.subscribe(val => (_options = val))
   onDestroy(unsubscribe)
 
-  let disableButtons = false
-
   let importSettingsInput
   let importSettingsFiles
   $: if (importSettingsFiles) {
-    disableButtons = true
     const reader = new FileReader()
     reader.readAsText(importSettingsFiles[0])
     reader.onload = async () => {
       const data = JSON.parse(reader.result)
       if ("theme" in data && data.version == browser.runtime.getManifest().version) {
         browser.storage.local.clear(async () => {
-          console.log("clearing")
           options.set(data)
-          disableButtons = false
         })
       } else {
-        console.log("incompatible settings")
         alert("Incompatible settings")
       }
     }
@@ -42,26 +36,21 @@
   }
 
   async function exportSettings() {
-    disableButtons = true
     _options.version = browser.runtime.getManifest().version
     const resultString = JSON.stringify(_options, null, "  ")
     const anchor = document.createElement("a")
     anchor.href = "data:application/json;base64," + btoa(resultString)
     anchor.download = `libredirect-settings-v${_options.version}.json`
     anchor.click()
-    disableButtons = false
   }
 
   async function exportSettingsSync() {
-    disableButtons = true
     _options.version = browser.runtime.getManifest().version
     await servicesHelper.initDefaults()
     browser.storage.sync.set({ options: _options })
-    disableButtons = false
   }
 
   async function importSettingsSync() {
-    disableButtons = true
     browser.storage.sync.get({ options }, r => {
       const optionsSync = r.options
       if (optionsSync.version == browser.runtime.getManifest().version) {
@@ -69,24 +58,21 @@
       } else {
         alert("Error")
       }
-      disableButtons = false
     })
   }
 
   async function resetSettings() {
-    disableButtons = true
     browser.storage.local.clear(async () => {
       await servicesHelper.initDefaults()
       options.set(await utils.getOptions())
-      disableButtons = false
     })
   }
 </script>
 
 <div class="buttons">
-  <Button on:click={() => importSettingsInput.click()} disabled={disableButtons}>
+  <Button on:click={() => importSettingsInput.click()}>
     <ImportIcon class="margin margin_{document.body.dir}" />
-    <x data-localise="__MSG_importSettings__">{browser.i18n.getMessage("importSettings") || "Import Settings"}</x>
+    {browser.i18n.getMessage("importSettings") || "Import Settings"}
   </Button>
   <input
     type="file"
@@ -96,24 +82,24 @@
     bind:files={importSettingsFiles}
   />
 
-  <Button on:click={exportSettings} disabled={disableButtons}>
+  <Button on:click={exportSettings}>
     <ExportIcon class="margin margin_{document.body.dir}" />
-    <x data-localise="__MSG_exportSettings__">{browser.i18n.getMessage("exportSettings") || "Export Settings"}</x>
+    {browser.i18n.getMessage("exportSettings") || "Export Settings"}
   </Button>
 
-  <Button on:click={exportSettingsSync} disabled={disableButtons}>
+  <Button on:click={exportSettingsSync}>
     <ExportIcon class="margin margin_{document.body.dir}" />
-    <x>Export Settings to Sync</x>
+    {browser.i18n.getMessage("exportSettingsToSync") || "Export Settings to Sync"}
   </Button>
 
-  <Button on:click={importSettingsSync} disabled={disableButtons}>
+  <Button on:click={importSettingsSync}>
     <ImportIcon class="margin margin_{document.body.dir}" />
-    <x>{browser.i18n.getMessage("importSettingsFromSync") || "Import Settings from Sync"}</x>
+    {browser.i18n.getMessage("importSettingsFromSync") || "Import Settings from Sync"}
   </Button>
 
-  <Button on:click={resetSettings} disabled={disableButtons}>
+  <Button on:click={resetSettings}>
     <ResetIcon class="margin margin_{document.body.dir}" />
-    <x>{browser.i18n.getMessage("resetSettings") || "Reset Settings"}</x>
+    {browser.i18n.getMessage("resetSettings") || "Reset Settings"}
   </Button>
 </div>
 
diff --git a/src/pages/options_src/Sidebar.svelte b/src/pages/options_src/Sidebar.svelte
index fb515f53..97780b15 100644
--- a/src/pages/options_src/Sidebar.svelte
+++ b/src/pages/options_src/Sidebar.svelte
@@ -10,15 +10,15 @@
 <div>
   <a href="#general" on:click={() => page.set("general")} style={$page == "general" && "color: var(--active);"}>
     <GeneralIcon class="margin margin_{document.body.dir}" />
-    <span data-localise="__MSG_general__">{browser.i18n.getMessage("general") || "General"}</span>
+    {browser.i18n.getMessage("general") || "General"}
   </a>
   <a href="#services" on:click={() => page.set("services")} style={$page == "services" && "color: var(--active);"}>
     <ServicesIcon class="margin margin_{document.body.dir}" />
-    <span data-localise="__MSG_services__">{browser.i18n.getMessage("general") || "Services"}</span>
+    {browser.i18n.getMessage("general") || "Services"}
   </a>
   <a href="https://libredirect.github.io" target="_blank" rel="noopener noreferrer">
     <AboutIcon class="margin margin_{document.body.dir}" />
-    <span data-localise="__MSG_about__">{browser.i18n.getMessage("about") || "About"}</span>
+    {browser.i18n.getMessage("about") || "About"}
   </a>
 </div>
 
-- 
cgit v1.3.1

