From 470205cd57bbe210920d712f055e89485b6a8ea4 Mon Sep 17 00:00:00 2001
From: Thomas Weber <weber_t@mailbox.org>
Date: Mon, 22 Mar 2021 15:58:00 -0500
Subject: [PATCH] Better looking checkboxes in settings modal

---
 src/components/tw-fancy-checkbox/checkbox.css | 27 ++++++++++++++++++-
 src/components/tw-fancy-checkbox/checkbox.svg |  2 ++
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/components/tw-fancy-checkbox/checkbox.svg

diff --git a/src/components/tw-fancy-checkbox/checkbox.css b/src/components/tw-fancy-checkbox/checkbox.css
index f8ae5c089..1057c4c5a 100644
--- a/src/components/tw-fancy-checkbox/checkbox.css
+++ b/src/components/tw-fancy-checkbox/checkbox.css
@@ -1,3 +1,28 @@
+@import "../../css/colors.css";
+
 .checkbox {
-    /* TODO */
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    transition: .2s;
+    background-color: white;
+    transition-property: background-color;
+    background-size: 100%;
+    border: 1px solid rgb(92, 92, 92);
+    outline: none;
+}
+.checkbox:hover {
+    border-color: $motion-primary;
+}
+.checkbox:focus, .checkbox:active {
+    border-color: black;
+    box-shadow: 0 0 0 3px $motion-transparent;
+}
+.checkbox:checked {
+    background-color: $motion-primary;
+    background-image: url("./checkbox.svg");
+}
+[theme="dark"] .checkbox {
+    border-color: transparent;
 }
diff --git a/src/components/tw-fancy-checkbox/checkbox.svg b/src/components/tw-fancy-checkbox/checkbox.svg
new file mode 100644
index 000000000..d2f65187a
--- /dev/null
+++ b/src/components/tw-fancy-checkbox/checkbox.svg
@@ -0,0 +1,2 @@
+<!-- https://akaricons.com/ -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M4 12l6 6L20 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
\ No newline at end of file