changes to the theme toggle button

ui/package.json

@@ -26,7 +26,6 @@
     "@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",

ui/src/app/app.component.html

@@ -12,12 +12,9 @@
     </ul>
   </div>
   -->
-  <div>
-    <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>
+  <div class="ml-auto">
+    <button class="btn btn-outline-light button-toggle-theme" aria-label="Toggle theme" (click)="themeChanged()">
+      <fa-icon [icon]="darkMode ? faSun : faMoon"></fa-icon>
     </button>
   </div>
 </nav>

ui/src/app/app.component.sass

@@ -1,3 +1,7 @@
+.button-toggle-theme:focus, .button-toggle-theme:active
+    box-shadow: none
+    outline: 0px
+
 .add-url-box
     max-width: 720px
     margin: 4rem auto

ui/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { faTrashAlt, faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons';
-import { faRedoAlt } from '@fortawesome/free-solid-svg-icons';
+import { faRedoAlt, faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
 
 import { DownloadsService, Status } from './downloads.service';
@@ -32,6 +32,8 @@ export class AppComponent implements AfterViewInit {
   faCheckCircle = faCheckCircle;
   faTimesCircle = faTimesCircle;
   faRedoAlt = faRedoAlt;
+  faSun = faSun;
+  faMoon = faMoon;
 
   constructor(public downloads: DownloadsService, private cookieService: CookieService) {
     this.format = cookieService.get('metube_format') || 'any';

ui/src/styles.sass

@@ -2,4 +2,3 @@
 
 /* Importing Bootstrap SCSS file. */
 @import '~bootstrap/scss/bootstrap'
-@import '~bootstrap-icons/font/bootstrap-icons.css'