Made checkboxes design

public/html/settings.html

@@ -56,9 +56,13 @@
 
                 <br>
 
-                <h3>Discord RPC</h3>
+                <div class="checkbox" id="discord-rpc">
+                    Discord RPC
 
-                <input type="checkbox" id="drpc" name="drpc">
+                    <div class="checkbox-mark">
+                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
+                    </div>
+                </div>
                 
                 <br>
             </div>

src/sass/settings.sass

@@ -112,4 +112,49 @@ body
     background-color: #f1f4f9
 
     font-size: 18px
-    cursor: pointer
+    cursor: pointer
+
+.checkbox
+    display: inline-flex
+    align-items: center
+
+    font-size: larger
+
+    width: calc(100% - 24px)
+    height: 48px
+    padding: 0 12px
+
+    border-radius: 12px
+
+    cursor: pointer
+
+    &:hover
+        background-color: #eff2ff
+
+    .checkbox-mark
+        display: flex
+
+        background-color: #e1e7ff
+
+        border-radius: 16px
+        margin-left: auto
+        padding: 8px 16px
+
+        &:hover
+            background-color: #657ef8
+
+            svg
+                filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
+
+        svg
+            height: 12px
+            width: 12px
+
+.checkbox-active
+    background-color: #eff2ff
+
+    .checkbox-mark
+        background-color: #657ef8
+
+        svg
+            filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)

src/ts/settings.ts

@@ -29,16 +29,25 @@ $(() => {
         $(`.menu-item[anchor=${anchor}]`).addClass('menu-item-active');
     });
 
+    $('.checkbox').on('click', (e) => {
+        let item = $(e.target);
+
+        while (!item.hasClass('checkbox'))
+            item = item.parent();
+
+        item.toggleClass('checkbox-active').trigger('classChange');
+    });
+
     // Select the saved options in launcher.json on load
     $(`#voice-list option[value="${Genshinlib.lang.voice}"]`).prop('selected', true);
     $(`#language-list option[value="${Genshinlib.lang.launcher}"]`).prop('selected', true);
 
     if (Genshinlib.getConfig('rpc'))
-        $('#drpc').prop('checked', true);
+        $('#discord-rpc').addClass('checkbox-active');
 
-    $('#drpc').on('change', () => {
+    $('#discord-rpc').on('classChange', () => {
         Genshinlib.updateConfig({
-            rpc: $('#drpc').prop('checked')
+            rpc: $('#discord-rpc').hasClass('checkbox-active')
         });
 
         ipcRenderer.send('rpc-toggle');