diff options
| -rw-r--r-- | ui/package-lock.json | 48 | ||||
| -rw-r--r-- | ui/package.json | 1 | ||||
| -rw-r--r-- | ui/src/app/app.component.html | 8 | ||||
| -rw-r--r-- | ui/src/styles.sass | 1 |
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' |