aboutsummaryrefslogtreecommitdiff
path: root/ui/src
diff options
context:
space:
mode:
authorAlex Shnitman <alexta69@gmail.com>2021-12-17 19:30:20 +0200
committerAlex Shnitman <alexta69@gmail.com>2021-12-17 19:30:20 +0200
commit498e30c6335693436eb01edf99dd955562a324f6 (patch)
tree9a5aacb087f5db2bbbfe87c9760468246d49b427 /ui/src
parentTheme button is now material button (diff)
downloadmetube-498e30c6335693436eb01edf99dd955562a324f6.tar.gz
metube-498e30c6335693436eb01edf99dd955562a324f6.tar.bz2
metube-498e30c6335693436eb01edf99dd955562a324f6.zip
changes to the theme toggle button
Diffstat (limited to 'ui/src')
-rw-r--r--ui/src/app/app.component.html9
-rw-r--r--ui/src/app/app.component.sass4
-rw-r--r--ui/src/app/app.component.ts4
-rw-r--r--ui/src/styles.sass1
4 files changed, 10 insertions, 8 deletions
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 3fc9bd2..cebd97f 100644
--- a/ui/src/app/app.component.html
+++ b/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>
diff --git a/ui/src/app/app.component.sass b/ui/src/app/app.component.sass
index 2cc0ede..a084286 100644
--- a/ui/src/app/app.component.sass
+++ b/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
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 970aa74..8f7d965 100644
--- a/ui/src/app/app.component.ts
+++ b/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';
diff --git a/ui/src/styles.sass b/ui/src/styles.sass
index d4e5b6e..5d54ecb 100644
--- a/ui/src/styles.sass
+++ b/ui/src/styles.sass
@@ -2,4 +2,3 @@
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap'
-@import '~bootstrap-icons/font/bootstrap-icons.css'
bgstack15