Fixed various dialog issues

+ (Shortcuts) Icon colors in shortcuts menu

src/@fuse/components/shortcuts/shortcuts.component.html

@@ -52,37 +52,60 @@
 
                 <mat-list-item *ngFor="let shortcutItem of shortcutItems"
                                (click)="toggleShortcut($event, shortcutItem)">
+
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
+
+                        <mat-icon mat-list-icon class="mr-8 secondary-text" *ngIf="shortcutItem.icon">
+                            {{shortcutItem.icon}}
+                        </mat-icon>
+
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
+
                         <p matLine fxFlex>{{shortcutItem.title}}</p>
-                        <mat-icon class="ml-8">star</mat-icon>
+
+                        <mat-icon class="ml-8 amber-fg">star</mat-icon>
+
                     </div>
+
                 </mat-list-item>
+
                 <mat-list-item *ngIf="shortcutItems.length === 0">
                     <p>
                         <small>No shortcuts yet!</small>
                     </p>
                 </mat-list-item>
+
             </mat-nav-list>
 
             <mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+
                 <mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
                                (click)="toggleShortcut($event, navigationItem)">
+
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
+
+                        <mat-icon mat-list-icon class="mr-8 secondary-text" *ngIf="navigationItem.icon">
+                            {{navigationItem.icon}}
+                        </mat-icon>
+
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
                             {{navigationItem.title.substr(0, 1).toUpperCase()}}
                         </span>
+
                         <p matLine fxFlex>{{navigationItem.title}}</p>
-                        <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
+
+                        <mat-icon class="ml-8 amber-fg" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
+
                     </div>
+
                 </mat-list-item>
+
             </mat-nav-list>
+
         </mat-menu>
 
     </div>

src/app/main/content/apps/calendar/event-form/event-form.component.html

@@ -1,11 +1,11 @@
 <div class="dialog-content-wrapper">
     <mat-toolbar class="mat-accent m-0">
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <mat-toolbar-row fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">{{dialogTitle}}</span>
             <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                 <mat-icon>close</mat-icon>
             </button>
-        </div>
+        </mat-toolbar-row>
     </mat-toolbar>
 
     <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>

src/app/main/content/apps/contacts/contact-form/contact-form.component.html

@@ -19,56 +19,57 @@
         <form [formGroup]="contactForm">
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">account_circle</mat-icon>
                 <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
                     <input name="name" formControlName="name" placeholder="Name" matInput required>
                 </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12"></mat-icon>
                 <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
                     <input name="lastName" formControlName="lastName" placeholder="Lastname" matInput>
                 </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">star</mat-icon>
                 <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">star</mat-icon>
                     <input name="nickname" formControlName="nickname" matInput placeholder="Nickname">
                 </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">phone</mat-icon>
                 <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">phone</mat-icon>
                     <input formControlName="phone" matInput placeholder="Phone number">
                 </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">email</mat-icon>
                 <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">email</mat-icon>
                     <input name="email" formControlName="email" matInput type="email" placeholder="Email">
                 </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">domain</mat-icon>
                 <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">domain</mat-icon>
                     <input name="company" formControlName="company" matInput placeholder="Company">
                 </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">work</mat-icon>
                 <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">work</mat-icon>
                     <input name="jobTitle" formControlName="jobTitle" matInput placeholder="Job title">
                 </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
                 <mat-form-field class="mr-24" fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">cake</mat-icon>
                     <input matInput [matDatepicker]="birthdayDatePicker" placeholder="Birthday">
                     <mat-datepicker-toggle matSuffix [for]="birthdayDatePicker"></mat-datepicker-toggle>
                     <mat-datepicker #birthdayDatePicker></mat-datepicker>
@@ -76,16 +77,16 @@
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">home</mat-icon>
                 <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">home</mat-icon>
                     <input name="address" formControlName="address" matInput placeholder="Address">
                 </mat-form-field>
             </div>
 
             <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">note</mat-icon>
                 <mat-form-field fxFlex>
-                    <textarea name="notes" formControlName="notes" placeholder="Notes" matInput type="text" max-rows="4"></textarea>
+                    <textarea name="notes" formControlName="notes" placeholder="Notes" matInput type="text"
+                              max-rows="4"></textarea>
                 </mat-form-field>
             </div>
 

src/app/main/content/apps/contacts/contact-form/contact-form.component.scss

@@ -12,7 +12,6 @@
 
     .mat-dialog-container {
         padding: 0;
-        overflow: hidden;
 
         .mat-toolbar {
             flex: 1 0 auto;

src/app/main/content/apps/dashboards/analytics/analytics.component.html

@@ -265,7 +265,7 @@
             <div fxLayout="row wrap" fxLayout.gt-md="column">
 
                 <!-- Widget 7 -->
-                <div class="mb-48" [ngClass.lt-lg]="'mr-32'">
+                <div class="mb-48" [ngClass.lt-lg]="'mr-32'" [ngClass.xs]="'mr-0'">
 
                     <div class="pb-24 font-size-18 font-weight-300">
                         What are your top devices?
@@ -337,7 +337,7 @@
                 <!-- / Widget 7 -->
 
                 <!-- Widget 8 -->
-                <div class="mb-48" [ngClass.lt-lg]="'mr-32'">
+                <div class="mb-48" [ngClass.lt-lg]="'mr-32'" [ngClass.xs]="'mr-0'">
 
                     <div class="pb-24 font-size-18 font-weight-300">
                         How are your sales?
@@ -439,7 +439,7 @@
                 <!-- / Widget 8 -->
 
                 <!-- Widget 9 -->
-                <div class="mb-48" [ngClass.lt-lg]="'mr-32'">
+                <div class="mb-48" [ngClass.lt-lg]="'mr-32'" [ngClass.xs]="'mr-0'">
 
                     <div class="pb-24 font-size-18 font-weight-300" [ngClass.lt-lg]="'pt-0'">
                         What are your top campaigns?

src/app/main/content/apps/dashboards/analytics/analytics.component.scss

@@ -43,6 +43,15 @@
                 min-width: 0;
                 max-width: none;
             }
+
+            .fuse-card {
+
+                @include media-breakpoint-down('md') {
+                    width: 100%;
+                    min-width: 0;
+                    max-width: none;
+                }
+            }
         }
     }
 

src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.html

@@ -1,11 +1,11 @@
 <div class="dialog-content-wrapper">
     <mat-toolbar class="mat-accent m-0">
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <mat-toolbar-row fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">New Message</span>
             <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                 <mat-icon>close</mat-icon>
             </button>
-        </div>
+        </mat-toolbar-row>
     </mat-toolbar>
 
     <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>

src/app/main/content/apps/mail/dialogs/compose/compose.component.html

@@ -1,11 +1,11 @@
 <div class="dialog-content-wrapper">
     <mat-toolbar class="mat-accent m-0">
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <mat-toolbar-row fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">New Message</span>
             <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                 <mat-icon>close</mat-icon>
             </button>
-        </div>
+        </mat-toolbar-row>
     </mat-toolbar>
 
     <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>

src/app/main/content/apps/todo/todo-details/todo-details.component.html

@@ -1,9 +1,9 @@
 <div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <mat-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom
+    <mat-icon class="s-120 mb-12 select-todo-icon hint-text" *fuseIfOnDom
               [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box
     </mat-icon>
-    <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select
+    <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">
-        a todo
+        Select a todo
     </span>
 </div>