From 86220bb2371abc8be434ee0e24f4d6306b0b1cf9 Mon Sep 17 00:00:00 2001
From: Jamie Rees <jamie.rees@myairops.com>
Date: Thu, 5 Nov 2020 21:14:53 +0000
Subject: [PATCH] Improved the user profile section

---
 .../src/app/my-nav/my-nav.component.html      | 43 ++++++++++++-------
 .../src/app/my-nav/my-nav.component.scss      |  6 +++
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
index 7fdcc62b0..a7ac5b737 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
@@ -3,14 +3,17 @@
         [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
         [opened]="!(isHandset$ | async)">
         <mat-toolbar>{{applicationName}}</mat-toolbar>
-        <div class="profile-img-container">
-            <div class="profile-img">
-            <img src="https://www.gravatar.com/avatar/{{emailHash}}?d=https://raw.githubusercontent.com/tidusjar/Ombi/gh-pages/img/android-chrome-512x512.png" />
-        </div>
-        <div class="profile-info">
-            <h3>{{username}}</h3>
-            <p>{{welcomeText | translate}}</p>
-        </div>
+        <div class="outer-profile">
+            <div class="profile-img-container">
+                <div class="profile-img">
+                    <img
+                        src="https://www.gravatar.com/avatar/{{emailHash}}?d=https://raw.githubusercontent.com/tidusjar/Ombi/gh-pages/img/android-chrome-512x512.png" />
+                </div>
+                <div class="profile-info">
+                    <h3>{{username}}</h3>
+                    <p>{{welcomeText | translate}}</p>
+                </div>
+            </div>
         </div>
         <mat-nav-list>
             <span *ngFor="let nav of navItems">
@@ -67,13 +70,23 @@
                 </span>
             </div>
             <div class="col-2">
-                <button mat-icon-button [matMenuTriggerFor]="filterMenu"><mat-icon>filter_alt</mat-icon></button>
-                <mat-menu #filterMenu="matMenu"  yPosition="below" class="smaller-panel">
-                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.movies" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Movie)">{{ 'NavigationBar.Filter.Movies' | translate}}</mat-slide-toggle>
-                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.tvShows" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.TvShow)">{{ 'NavigationBar.Filter.TvShows' | translate}}</mat-slide-toggle>
-                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.music" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Music)">{{ 'NavigationBar.Filter.Music' | translate}}</mat-slide-toggle>
-                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.people" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.People)">{{ 'NavigationBar.Filter.People' | translate}}</mat-slide-toggle>
-                  </mat-menu>
+                <button mat-icon-button [matMenuTriggerFor]="filterMenu">
+                    <mat-icon>filter_alt</mat-icon>
+                </button>
+                <mat-menu #filterMenu="matMenu" yPosition="below" class="smaller-panel">
+                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.movies"
+                        (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Movie)">
+                        {{ 'NavigationBar.Filter.Movies' | translate}}</mat-slide-toggle>
+                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.tvShows"
+                        (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.TvShow)">
+                        {{ 'NavigationBar.Filter.TvShows' | translate}}</mat-slide-toggle>
+                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.music"
+                        (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Music)">
+                        {{ 'NavigationBar.Filter.Music' | translate}}</mat-slide-toggle>
+                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.people"
+                        (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.People)">
+                        {{ 'NavigationBar.Filter.People' | translate}}</mat-slide-toggle>
+                </mat-menu>
             </div>
 
         </mat-toolbar>
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
index 86dc17f8d..761b96620 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
@@ -120,4 +120,10 @@
     border-radius: 6px;
     box-shadow: 4px 3px 6px 0 rgba(0,0,0,.2);
     width: 45px;
+}
+
+.outer-profile {
+    background-color: #303030;
+    box-shadow: inset 0 0 3px #000000;
+    padding: 1px;
 }
\ No newline at end of file