Dark mode (#15)

gevulotnetwork · Mar 18, 2024 · 950d66e · 950d66e
1 parent 2a870ca
commit 950d66e
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 52 deletions.
diff --git a/api/assets/style.css b/api/assets/style.css
@@ -53,11 +53,17 @@
 body {
   text-transform: uppercase;
   margin: 0;
-  background-color: #ffffff;
+  background-color: white;
+  color: black;
   height: 100vh;
   min-height: 100vh;
 }
 
+body.dark {
+  background-color: black;
+  color: white;
+}
+
 #container {
   height: 100vh;
   display: flex;
@@ -100,34 +106,49 @@ body {
   outline: 0;
   background: transparent;
   border-bottom: 1px solid black;
+  color: black;
   width: 100%;
   text-transform: uppercase;
-  color: black;
   font-size: 15px;
   font-weight: 700;
   line-height: 18px;
   letter-spacing: 0em;
 }
 
-*::-webkit-input-placeholder {
-  color: black;
+body.dark #search > input {
+  border-bottom: 1px solid white;
+  color: white;
 }
-*:-moz-placeholder {
-  color: black;
-  opacity: 1;
+
+body.dark #search-input:-moz-placeholder,
+body.dark #search-input::-moz-placeholder,
+body.dark #search-input:-ms-input-placeholder,
+body.dark #search-input::-ms-input-placeholder,
+body.dark #search-input::placeholder,
+body.dark #search-input::-webkit-input-placeholder,
+body.dark #search-input:-moz-placeholder,
+body.dark #search-input::-moz-placeholder,
+body.dark #search-input:-ms-input-placeholder,
+body.dark #search-input::-ms-input-placeholder,
+body.dark #search-input::placeholder,
+body.dark #search-input::-webkit-input-placeholder {
+  color: white;
 }
-*::-moz-placeholder {
-  color: black;
+
+input:-moz-placeholder,
+input::-moz-placeholder {
   opacity: 1;
 }
-*:-ms-input-placeholder {
+
+#search-input:-moz-placeholder,
+#search-input::-moz-placeholder,
+#search-input:-ms-input-placeholder,
+#search-input::-ms-input-placeholder,
+#search-input::placeholder,
+#search-input::-webkit-input-placeholder {
+  color: black;
   color: black;
-}
-*::-ms-input-placeholder {
   color: black;
-}
-
-*::placeholder {
   color: black;
 }
 
@@ -184,6 +205,10 @@ body {
   padding: 20px;
 }
 
+body.dark .number-block {
+  background: #333333;
+}
+
 .number-block + .number-block {
   margin-left: 10px;
 }
@@ -236,6 +261,10 @@ body {
   scrollbar-width: 5px;
 }
 
+body.dark .tbody {
+  border: 1px solid #333333;
+}
+
 .left,
 .right {
   display: flex;
@@ -249,14 +278,19 @@ body {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 10px;
-  height: 23px;
+  padding: 9px;
+  height: 24px;
+  line-height: 24px;
 }
 
 .tr:nth-child(even) {
   background: #eeeeee;
 }
 
+body.dark .tr:nth-child(even) {
+  background: #333333;
+}
+
 .left > .th:nth-child(1),
 .left > .td:nth-child(1) {
   min-width: 106px;
@@ -318,7 +352,8 @@ body {
   border-color: #b556ff;
 }
 
-.datetime {
+.datetime,
+.provider-tag {
   border-radius: 40px;
   border-style: solid;
   border-width: 1px;
@@ -336,17 +371,26 @@ body {
 }
 
 #links > a {
-  color: #000000;
+  color: black;
   text-decoration: none;
   text-transform: none;
   padding: 0 10px;
 }
 
+body.dark #links > a {
+  color: white;
+}
+
 .switch {
   position: relative;
   display: inline-block;
   width: 32px;
   height: 18px;
+  color: black;
+}
+
+body.dark .switch {
+  color: white;
 }
 
 .switch input {
@@ -362,7 +406,7 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #000000;
+  background-color: black;
   -webkit-transition: 0.4s;
   transition: 0.4s;
   border-radius: 34px;
@@ -375,22 +419,22 @@ body {
   width: 10px;
   left: 4px;
   bottom: 4px;
-  background-color: #ffffff;
+  background-color: white;
   -webkit-transition: 0.4s;
   transition: 0.4s;
   border-radius: 50%;
 }
 
 input:checked + .slider {
-  background-color: #ffffff;
+  background-color: white;
 }
 
 input:focus + .slider {
   box-shadow: 0;
 }
 
 input:checked + .slider:before {
-  background-color: #000000;
+  background-color: black;
   -webkit-transform: translateX(14px);
   -ms-transform: translateX(14px);
   transform: translateX(14px);

diff --git a/api/templates/index.templ b/api/templates/index.templ
@@ -14,7 +14,7 @@ templ Index() {
 	<!DOCTYPE html>
 	<html lang="en">
 		@head()
-		<body>
+		<body class="">
 			<div id="container">
 				@header()
 				@Stats(model.Stats{}, time.Millisecond)
@@ -74,7 +74,12 @@ templ Row(e model.Event) {
 			<div class="td">{ e.TxID }</div>
 		</div>
 		<div class="right">
-			<div class="td">{ e.ProverID }</div>
+			<div class="td">
+				if e.Tag != "" {
+					<span class="provider-tag">#{ e.Tag }</span>
+				}
+				<span>{ e.ProverID }</span>
+			</div>
 			<div class="td"><span class="datetime">{ e.Timestamp.Format("03:04 PM, 02/01/06") }</span></div>
 			<div class="td">→</div>
 		</div>
@@ -129,10 +134,9 @@ templ header() {
 		<div id="mode">
 			<span>Light</span>
 			<label class="switch">
-				<input type="checkbox"/>
+				<input type="checkbox" hx-on:click="htmx.toggleClass(htmx.find('body'), 'dark');"/>
 				<span class="slider round"></span>
-			</label>
-			<span>Dark</span>
+			</label><span>Dark</span>
 		</div>
 		<div id="live">Live<span id="dot"></span></div>
 	</div>

diff --git a/api/templates/index_templ.go b/api/templates/index_templ.go