Better looking checkboxes in settings modal

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;
 }

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>