diff --git a/public/html/settings.html b/public/html/settings.html
index 4aef602..f3cebfb 100644
--- a/public/html/settings.html
+++ b/public/html/settings.html
@@ -56,9 +56,13 @@
-
Discord RPC
+
diff --git a/src/sass/settings.sass b/src/sass/settings.sass
index 6b81faa..fd655ab 100644
--- a/src/sass/settings.sass
+++ b/src/sass/settings.sass
@@ -112,4 +112,49 @@ body
background-color: #f1f4f9
font-size: 18px
- cursor: pointer
\ No newline at end of file
+ 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%)
diff --git a/src/ts/settings.ts b/src/ts/settings.ts
index b06f498..e2f1f5b 100644
--- a/src/ts/settings.ts
+++ b/src/ts/settings.ts
@@ -31,15 +31,24 @@ $(() => {
$(`.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.getConfig('lang.voice')}"]`).prop('selected', true);
$(`#language-list option[value="${Genshinlib.getConfig('lang.launcher')}"]`).prop('selected', true);
if (Genshinlib.getConfig('rpc'))
- $('#drpc').prop('checked', true);
+ $('#discord-rpc').addClass('checkbox-active');
- $('#drpc').on('change', () => {
- Genshinlib.updateConfig('rpc', $('#drpc').prop('checked'));
+ $('#discord-rpc').on('classChange', () => {
+ Genshinlib.updateConfig('rpc', $('#discord-rpc').hasClass('checkbox-active'));
ipcRenderer.send('rpc-toggle');
});