From 4108ef50f55143368f015b8025dc0463253fd7b6 Mon Sep 17 00:00:00 2001
From: Daniel <daniel.jank@protonmail.com>
Date: Tue, 9 May 2023 21:29:23 +0200
Subject: [PATCH] settings: Redesign

---
 css/dark.css |  6 -----
 css/main.css | 67 +++++++++++++++++++++++++++++++++++-----------------
 index.html   | 12 ++++++++--
 3 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/css/dark.css b/css/dark.css
index 20b03de..81aae30 100644
--- a/css/dark.css
+++ b/css/dark.css
@@ -9,12 +9,6 @@ html {
 	background: hsl(var(--color), 100%, 80%);
 	color: hsl(var(--color), 100%, 28%);
 }
-.setting:hover {
-	background: #2228;
-}
-.setting.checked {
-	background: #36F;
-}
 .hostedby {
 	color: #FFF7;
 }
diff --git a/css/main.css b/css/main.css
index d1ed8a9..ce502c8 100644
--- a/css/main.css
+++ b/css/main.css
@@ -349,36 +349,59 @@ a.box {
 }
 
 .settings {
-	margin: 4px 8px 24px;
-	display: flex;
-	justify-content: center;
+	margin: 12px auto 32px;
+	max-width: 800px;
 }
 .setting {
 	background: var(--bg2);
-	max-width: 192px;
-	width: 100%;
-	border-radius: 16px;
-	margin: 8px;
-	padding: 12px;
-	text-align: left;
+	margin: 8px 0;
+	padding: 20px;
+	display: flex;
 	cursor: pointer;
-	transition: background .2s, box-shadow .2s, color .2s;
-}
-.setting:hover {
-	background: #DDD8;
-}
-.setting div {
-	display: block;
-	text-align: center;
+	border-radius: 16px;
+	align-items: center;
+	text-align: left;
+	transition: background .4s;
 }
 .setting .icon {
-	margin: 12px;
-	font-size: 36px;
+	margin-right: 14px;
+	font-size: 28px;
 }
-.setting.checked {
-	color: #EEE;
-	background: #56F;
+.setting .name {
+	font-size: 16px;
 }
+.setting .desc {
+	opacity: .6;
+}
+.setting .switch {
+	position: relative;
+	width: 44px;
+	height: 24px;
+	background: #8886;
+	border-radius: 100px;
+	margin: 0 4px 0 auto;
+	transition: border .4s, background .4s;
+}
+.setting .switch:after {
+	content: "";
+	position: absolute;
+	width: 16px;
+	height: 16px;
+	background: var(--color);
+	left: 4px;
+	top: 50%;
+	border-radius: 10px;
+	transform: translateY(-50%);
+	transition: left .2s, background .4s;
+}
+.setting.checked .switch {
+	background-color: #68F;
+	border-color: #68F;
+}
+.setting.checked .switch:after {
+	left: calc(100% - 20px);
+}
+
 .hostedby {
 	font-size: 13px;
 	color: #0007;
diff --git a/index.html b/index.html
index 0333401..4976420 100644
--- a/index.html
+++ b/index.html
@@ -92,11 +92,19 @@
 						<div class="settings">
 							<div class="setting" onclick="switch_theme()" id="setting-theme">
 								<div class="icon">dark_mode</div>
-								<div class="name">Dark mode</div>
+								<div class="text">
+									<div class="name">Dark mode</div>
+									<div class="desc">Make the colors more appropriate for low-light environments</div>
+								</div>
+								<div class="switch"></div>
 							</div>
 							<div class="setting" onclick="new_tab_toggle()" id="setting-newtab">
 								<div class="icon">open_in_new</div>
-								<div class="name">Open in new tab</div>
+								<div class="text">
+									<div class="name">Open in new tab</div>
+									<div class="desc">Clicking on application will open it in a new browser tab</div>
+								</div>
+								<div class="switch"></div>
 							</div>
 						</div>
 					</div>