From 09caab1e592132daf6ad9819b8f85fb01d5fef7d Mon Sep 17 00:00:00 2001
From: Lauchmelder <robert.altner11@gmail.com>
Date: Sun, 20 Mar 2022 16:25:50 +0100
Subject: [PATCH] add switches

---
 popup.html     |  39 +++++++++++-------
 src/popup.js   |   4 ++
 src/styles.css | 105 ++++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 132 insertions(+), 16 deletions(-)

diff --git a/popup.html b/popup.html
index 3f2182b..f3110a1 100644
--- a/popup.html
+++ b/popup.html
@@ -22,23 +22,32 @@
     </div>
     
     <div id="settings-area">
-        <label class="switch">
-            <input type="checkbox">
-            <span class="slider round"></span>
-            test 1
-        </label>
+        <div class="setting" id="setting-global">
+            <label class="switch">
+                <input type="checkbox">
+                <span class="slider round"></span>
+            </label>
 
-        <label class="switch">
-            <input type="checkbox">
-            <span class="slider round"></span>
-            test 2
-        </label>
+            <span class="description">Enable Furikani</span>
+        </div>
+        
+        <div class="setting" id="setting-vocabulary">
+            <label class="switch">
+                <input type="checkbox">
+                <span class="slider round"></span>
+            </label>
 
-        <label class="switch">
-            <input type="checkbox">
-            <span class="slider round"></span>
-            test 3
-        </label>
+            <span class="description">Use Vocabulary List</span>
+        </div>
+
+        <div class="setting" id="setting-kanji">
+            <label class="switch">
+                <input type="checkbox">
+                <span class="slider round"></span>
+            </label>
+
+            <span class="description">Use Kanji List</span>
+        </div>
     </div>
 
     <footer>
diff --git a/src/popup.js b/src/popup.js
index dbb359a..d8ee9af 100644
--- a/src/popup.js
+++ b/src/popup.js
@@ -3,6 +3,10 @@ const inputField = document.getElementById("token")
 const statusField = document.getElementById("token-status")
 const errorField = document.getElementById("error-text")
 
+const globalSetting = document.getElementById("setting-global")
+const vocabSetting = document.getElementById("setting-vocabulary")
+const kanjiSetting = document.getElementById("setting-kanji")
+
 // Set popup content
 chrome.storage.local.get(["level", "token"], (data) => {
     if(data.token === undefined)
diff --git a/src/styles.css b/src/styles.css
index a1c207f..50bb19c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3,6 +3,7 @@
     margin: 0px;
     padding: 0px;
     box-sizing: border-box;
+    border-radius: 0px;
 }
 
 body 
@@ -10,6 +11,7 @@ body
     display: grid;
     grid-template-rows: 1.5fr 1fr 3fr 2fr;
     width: 250px;
+    margin: 0.5rem;
 }
 
 header
@@ -22,11 +24,12 @@ header
 h1 
 {
     text-transform: uppercase;
+    font-size: 30pt;
 }
 
 h2
 {
-    font-size: 10pt;
+    font-size: 12pt;
 }
 
 #token-area
@@ -46,8 +49,108 @@ h2
     font-size: 1rem;
 }
 
+#token 
+{
+    border-width: 1px;
+}
+
+#submit-token
+{
+    border-width: 1px;
+    background-color: white;
+    font-size: 1rem;
+}
+
+#submit-token:hover
+{
+    background-color: grey;
+}
+
+#submit-token:host()
+{
+    background-color: rgb(85, 85, 85);
+}
+
 #settings-area
 {
     display: grid;
     grid-template-rows: repeat(3, 1fr);
+}
+
+.setting
+{
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    align-items: center;
+}
+
+.description
+{
+    display: flex;
+    align-items: center;
+}
+
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    align-items: center;
+    width: 60px;
+    height: 34px;
+    transform: scale(0.65);
+  }
+  
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
 }
\ No newline at end of file