diff --git a/popup.html b/popup.html
index 87cdda1..3f2182b 100644
--- a/popup.html
+++ b/popup.html
@@ -1,24 +1,50 @@
+
-
-
-
+
-
-
-
-
-
- Using WaniKani Level
-
+
-
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/popup.js b/popup.js
deleted file mode 100644
index 33a73e9..0000000
--- a/popup.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const submitButton = document.getElementById("submit-token")
-const inputField = document.getElementById("token");
-
-// Set the wanikani token
-submitButton.addEventListener( "click", () => {
- chrome.storage.local.set({"token": inputField.value})
-})
-
-// Sync local data with wanikani
-const downloadButton = document.getElementById("download")
-downloadButton.addEventListener("click", async () => {
- var loadingText = document.getElementById("loading")
- loadingText.innerHTML = "Loading..."
-
- chrome.runtime.sendMessage("", {type: "sync"}, response => {
- if(response.success)
- loadingText.innerHTML = "Done!"
- else
- loadingText.innerHTML = response.error
- })
-})
-
-// Display currently used wanikani level
-chrome.storage.local.get("level", (data) => {
- const levelSpan = document.getElementById("level")
- levelSpan.innerHTML = data.level
-})
diff --git a/src/popup.js b/src/popup.js
new file mode 100644
index 0000000..dbb359a
--- /dev/null
+++ b/src/popup.js
@@ -0,0 +1,63 @@
+const submitButton = document.getElementById("submit-token")
+const inputField = document.getElementById("token")
+const statusField = document.getElementById("token-status")
+const errorField = document.getElementById("error-text")
+
+// Set popup content
+chrome.storage.local.get(["level", "token"], (data) => {
+ if(data.token === undefined)
+ {
+ statusField.innerHTML = String.fromCodePoint(0x2757)
+ submitButton.innerHTML = String.fromCodePoint(0x2705)
+ submitButton.classList.add("no-token")
+ }
+ else
+ {
+ statusField.innerHTML = String.fromCodePoint(0x2705)
+ submitButton.innerHTML = String.fromCodePoint(0x1F501)
+ }
+
+ const levelSpan = document.getElementById("level")
+ levelSpan.innerHTML = data.level
+
+ inputField.addEventListener("input", () => {
+ if(inputField.value !== "" && inputField.value !== data.token)
+ {
+ submitButton.innerHTML = String.fromCodePoint(0x2705)
+ submitButton.classList.add("new-token")
+ }
+ else
+ {
+ submitButton.innerHTML = String.fromCodePoint(0x1F501)
+ submitButton.classList.remove("new-token")
+ }
+ })
+})
+
+// Set the wanikani token
+submitButton.addEventListener( "click", () => {
+ if(submitButton.classList.contains("new-token"))
+ {
+ chrome.storage.local.set({"token": inputField.value})
+ submitButton.classList.remove("new-token", "no-token")
+ inputField.value = ""
+ }
+
+ if(submitButton.classList.contains("no-token"))
+ return
+
+ statusField.innerHTML = String.fromCodePoint(0x23F1)
+
+ chrome.runtime.sendMessage("", {type: "sync"}, response => {
+ if(response.success)
+ {
+ statusField.innerHTML = String.fromCodePoint(0x2705)
+ errorField.innerHTML = ""
+ }
+ else
+ {
+ statusField.innerHTML = String.fromCodePoint(0x2757)
+ errorField.innerHTML = response.error
+ }
+ })
+})
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..a1c207f
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,53 @@
+*
+{
+ margin: 0px;
+ padding: 0px;
+ box-sizing: border-box;
+}
+
+body
+{
+ display: grid;
+ grid-template-rows: 1.5fr 1fr 3fr 2fr;
+ width: 250px;
+}
+
+header
+{
+ display: grid;
+ grid-template-columns: 8fr 1fr;
+ align-items: baseline;
+}
+
+h1
+{
+ text-transform: uppercase;
+}
+
+h2
+{
+ font-size: 10pt;
+}
+
+#token-area
+{
+ display: grid;
+ grid-template-rows: 1fr 1fr;
+}
+
+#input-area
+{
+ display: grid;
+ grid-template-columns: 1fr 8fr 1fr;
+}
+
+#token-status
+{
+ font-size: 1rem;
+}
+
+#settings-area
+{
+ display: grid;
+ grid-template-rows: repeat(3, 1fr);
+}
\ No newline at end of file