Theme button is now material button

4 files changed, 39 insertions, 19 deletions

diff --git a/ui/package-lock.json b/ui/package-lock.json
index a759d85..1b2f61b 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -23,6 +23,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@ng-bootstrap/ng-bootstrap": "^10.0.0",
         "bootstrap": "^4.5.0",
+        "bootstrap-icons": "^1.7.2",
         "ngx-cookie-service": "^12.0.3",
         "ngx-socket-io": "^4.1.0",
         "rxjs": "~6.6.0",
@@ -3759,6 +3760,14 @@
         "popper.js": "^1.16.1"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
+      "integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8709,9 +8718,9 @@
       "dev": true
     },
     "node_modules/json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
       "dev": true
     },
     "node_modules/json-schema-traverse": {
@@ -8771,18 +8780,18 @@
       ]
     },
     "node_modules/jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
       "dev": true,
-      "engines": [
-        "node >=0.6.0"
-      ],
       "dependencies": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
+        "json-schema": "0.4.0",
         "verror": "1.10.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
       }
     },
     "node_modules/jszip": {
@@ -20239,6 +20248,11 @@
       "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
       "requires": {}
     },
+    "bootstrap-icons": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
+      "integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -24056,9 +24070,9 @@
       "dev": true
     },
     "json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
       "dev": true
     },
     "json-schema-traverse": {
@@ -24109,14 +24123,14 @@
       "dev": true
     },
     "jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
       "dev": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
+        "json-schema": "0.4.0",
         "verror": "1.10.0"
       }
     },
diff --git a/ui/package.json b/ui/package.json
index b01925b..8831a41 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -26,6 +26,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "bootstrap": "^4.5.0",
+    "bootstrap-icons": "^1.7.2",
     "ngx-cookie-service": "^12.0.3",
     "ngx-socket-io": "^4.1.0",
     "rxjs": "~6.6.0",
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'