From 61900a7ba8b11beb2125f31072abe8bcd1d6a10c Mon Sep 17 00:00:00 2001
From: asuyou <asuyou@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:35:43 +0200
Subject: Theme button is now material button

---
 ui/src/app/app.component.html | 8 ++++++--
 ui/src/styles.sass            | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'ui/src')

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 248ea76..3fc9bd2 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -13,8 +13,12 @@
   </div>
   -->
   <div>
-    <span class="text-white">Toggle Theme</span>
-    <input style="margin: 1rem;" type="checkbox" [ngModel]="this.darkMode" aria-label="Toggle theme" (change)="themeChanged()">
+    <button class="btn btn-secondary" aria-label="Toggle theme" (click)="themeChanged()">
+      <i *ngIf="darkMode; else sunIcon" class="bi bi-sun-fill"></i>
+      <ng-template #sunIcon>
+        <i class="bi bi-moon-stars-fill"></i>
+      </ng-template>
+    </button>
   </div>
 </nav>
 
diff --git a/ui/src/styles.sass b/ui/src/styles.sass
index 5d54ecb..d4e5b6e 100644
--- a/ui/src/styles.sass
+++ b/ui/src/styles.sass
@@ -2,3 +2,4 @@
 
 /* Importing Bootstrap SCSS file. */
 @import '~bootstrap/scss/bootstrap'
+@import '~bootstrap-icons/font/bootstrap-icons.css'
-- 
cgit