From cb2b544526ae01cf1939a3487d16b00cd3bd8d15 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 22 Sep 2017 12:11:21 +0300
Subject: [PATCH 1/4] chat, todo & theme options tweaks

---
 .../theme-options.component.html              | 126 ++++++++----------
 .../theme-options.component.scss              |  28 +++-
 .../content/apps/chat/chat.component.scss     |   2 +-
 .../todo-details/todo-details.component.html  |  51 ++++---
 .../todo-details/todo-details.component.scss  |  72 +---------
 5 files changed, 119 insertions(+), 160 deletions(-)

diff --git a/src/app/core/components/theme-options/theme-options.component.html b/src/app/core/components/theme-options/theme-options.component.html
index bae52a49..e49e995b 100644
--- a/src/app/core/components/theme-options/theme-options.component.html
+++ b/src/app/core/components/theme-options/theme-options.component.html
@@ -4,107 +4,95 @@
 
 <div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
 
-<div #panel class="theme-options-panel md-white-bg mat-elevation-z8 p-16">
+<div #panel class="theme-options-panel md-white-bg mat-elevation-z8">
 
     <button md-icon-button class="close-button" (click)="closeBar()">
         <md-icon>close</md-icon>
     </button>
 
-    <md-list>
-        <h3 md-subheader>Navigation:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
-                            fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
-                <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+    <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
 
-        <h3 md-subheader>Toolbar:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+        <h3>Navigation:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+        </md-radio-group>
 
-        <h3 md-subheader>Footer:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+        <h3 class="mt-24">Toolbar:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+        </md-radio-group>
 
-        <h3 md-subheader>Layout Mode:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+        <h3 class="mt-24">Footer:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+        </md-radio-group>
+
+        <h3 class="mt-24">Layout Mode:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
+        </md-radio-group>
 
         <md-divider></md-divider>
 
-        <h3 md-subheader>Colors:</h3>
+        <h3>Colors:</h3>
+        <div class="colors">
 
-        <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mr-8">Toolbar Color</h4>
                 <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
                                             (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
-        </md-list-item>
 
-        <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mr-8">Navigation Bar Color</h4>
                 <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
                                             (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
-        </md-list-item>
 
-        <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mr-8">Footer Color</h4>
                 <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
                                             (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
-        </md-list-item>
+
+        </div>
 
         <md-divider></md-divider>
 
-        <h3 md-subheader>Animation:</h3>
+        <h3>Router Animation:</h3>
+        <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+            <md-option value="none">
+                None
+            </md-option>
+            <md-option value="slideUp">
+                Slide up
+            </md-option>
+            <md-option value="slideDown">
+                Slide down
+            </md-option>
+            <md-option value="slideRight">
+                Slide right
+            </md-option>
+            <md-option value="slideLeft">
+                Slide left
+            </md-option>
+            <md-option value="fadeIn">
+                Fade in
+            </md-option>
+        </md-select>
 
-        <md-list-item>
-            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4>Router Animation</h4>
-                <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
-                    <md-option value="none">
-                        None
-                    </md-option>
-                    <md-option value="slideUp">
-                        Slide up
-                    </md-option>
-                    <md-option value="slideDown">
-                        Slide down
-                    </md-option>
-                    <md-option value="slideRight">
-                        Slide right
-                    </md-option>
-                    <md-option value="slideLeft">
-                        Slide left
-                    </md-option>
-                    <md-option value="fadeIn">
-                        Fade in
-                    </md-option>
-                </md-select>
-            </div>
-        </md-list-item>
+    </div>
 
-    </md-list>
 </div>
diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/app/core/components/theme-options/theme-options.component.scss
index f2670861..950c472c 100644
--- a/src/app/core/components/theme-options/theme-options.component.scss
+++ b/src/app/core/components/theme-options/theme-options.component.scss
@@ -26,11 +26,14 @@
         width: 360px;
         transform: translate3d(100%, 0, 0);
         z-index: 999;
-        max-width: 80vw;
-        max-height: calc(100vh - 180px);
+        max-height: calc(100vh - 200px);
+        padding: 24px;
         overflow: auto;
 
         @include media-breakpoint-down('xs') {
+            top: -120px;
+            max-height: calc(100vh - 60px);
+            width: 90vw;
         }
 
         .close-button {
@@ -38,6 +41,23 @@
             top: 8px;
             right: 8px;
         }
+
+        h3 {
+            font-size: 14px;
+            font-weight: 500;
+            color: rgba(0, 0, 0, 0.54);
+        }
+
+        .mat-divider{
+            display: block !important;
+            width: 100%;
+            margin: 24px 0 16px 0;
+        }
+
+        .colors {
+            display: block !important;
+            width: 100%;
+        }
     }
 
     .theme-options-panel-overlay {
@@ -50,6 +70,10 @@
         bottom: 0;
         z-index: 998;
 
+        @include media-breakpoint-down('sm') {
+            background: rgba(0, 0, 0, 0.37);
+        }
+
         &.hidden {
             display: none;
         }
diff --git a/src/app/main/content/apps/chat/chat.component.scss b/src/app/main/content/apps/chat/chat.component.scss
index c7b2e19f..2d483473 100644
--- a/src/app/main/content/apps/chat/chat.component.scss
+++ b/src/app/main/content/apps/chat/chat.component.scss
@@ -28,7 +28,7 @@
                 > .mat-sidenav-content,
                 > .mat-drawer-content {
                     display: flex;
-                    flex: 1 0 auto;
+                    flex: 1 1 auto;
                     min-height: 100%;
                     height: auto;
                 }
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.html b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
index 9884527d..b16980c6 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.html
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
@@ -1,16 +1,21 @@
 <div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box</md-icon>
-    <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a todo</span>
+    <md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom
+             [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box
+    </md-icon>
+    <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select
+        a todo
+    </span>
 </div>
 
 <div *ngIf="todo">
 
     <div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center">
 
-        <button md-button class="mat-icon-button toggle-complete-button" (click)="toggleCompleted($event)"
+        <button md-button class="toggle-complete-button p-0" (click)="toggleCompleted($event)"
                 aria-label="Toggle completed" fxFlex="0 1 auto">
             <md-icon *ngIf="todo.completed">check_box</md-icon>
             <md-icon *ngIf="!todo.completed">check_box_outline_blank</md-icon>
+            <span>Mark as Done</span>
         </button>
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
@@ -49,14 +54,16 @@
         <form [formGroup]="todoForm" (submit)="addTodo()">
 
             <md-input-container class="title mt-8" floatPlaceholder="never" fxFill>
-                    <textarea mdInput
-                              #titleInput
-                              name="title"
-                              formControlName="title"
-                              placeholder="Title"
-                              mdTextareaAutosize
-                              required>
-                    </textarea>
+                <textarea mdInput
+                          #titleInput
+                          name="title"
+                          formControlName="title"
+                          placeholder="Title"
+                          mdTextareaAutosize
+                          mdAutosizeMinRows="1"
+                          mdAutosizeMaxRows="2"
+                          required>
+                </textarea>
             </md-input-container>
 
             <div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
@@ -68,9 +75,9 @@
                 </div>
             </div>
 
-            <div fxFlexFill fxLayout="row">
+            <div class="dates" fxFlexFill fxLayout="column" fxLayout.gt-xs="row">
 
-                <md-form-field class="mr-24" fxFlex>
+                <md-form-field class="mr-sm-24" fxFlex>
                     <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
                     <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
                     <md-datepicker #startDatePicker></md-datepicker>
@@ -85,14 +92,16 @@
             </div>
 
             <md-input-container class="" fxFill>
-                 <textarea mdInput
-                           name="notes"
-                           formControlName="notes"
-                           placeholder="Notes"
-                           md-maxlength="500"
-                           mdTextareaAutosize
-                           mdAutosizeMinRows="6">
-                 </textarea>
+                <textarea mdInput #notes
+                          name="notes"
+                          formControlName="notes"
+                          placeholder="Notes"
+                          maxlength="500"
+                          mdTextareaAutosize
+                          mdAutosizeMinRows="1"
+                          mdAutosizeMaxRows="6">
+                </textarea>
+                <md-hint align="end">{{notes.value.length}} / 500</md-hint>
             </md-input-container>
 
             <button *ngIf="formType === 'new'"
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
index 503982d1..d0162789 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
@@ -8,6 +8,8 @@
     padding: 24px;
 
     .todo-header {
+        padding-bottom: 24px;
+        margin-bottom: 8px;
         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
         .actions {
@@ -38,74 +40,10 @@
             }
         }
 
-        .to {
-            color: rgba(0, 0, 0, 0.54);
+        .dates {
 
-            .to-text {
-                margin-right: 4px;
-                text-transform: lowercase;
-            }
-        }
-
-        .info {
-            padding-bottom: 16px;
-
-            .avatar {
-                margin-right: 16px;
-                background-color: mat-color($accent);
-            }
-
-            .name {
-                margin-right: 8px;
-                font-weight: 500;
-            }
-
-            .toggle-details {
-                user-select: none;
-                text-decoration: underline;
-                padding-top: 16px;
-                cursor: pointer;
-                font-weight: 500;
-            }
-
-            .details {
-                padding-top: 8px;
-
-                .title {
-                    font-weight: 500;
-                    margin-right: 6px;
-                }
-
-                .detail {
-                    color: rgba(0, 0, 0, 0.54);
-                }
-            }
-
-        }
-    }
-
-    .todo-attachments {
-        padding: 24px 0;
-        border-top: 1px solid rgba(0, 0, 0, 0.12);
-
-        .title {
-            margin-bottom: 16px;
-            font-weight: 500;
-        }
-
-        .attachment {
-
-            .preview {
-                width: 100px;
-                margin: 0 16px 8px 0;
-            }
-
-            .link {
-                margin-bottom: 2px;
-            }
-
-            .size {
-                font-size: 11px;
+            .mat-form-field {
+                width: auto !important;
             }
         }
     }

From e6ee5d017e7024ec099d0bb309c415f7d2e10a22 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 22 Sep 2017 15:02:07 +0300
Subject: [PATCH 2/4] small tweaks and ng-* cleanups + Fixed: todo item action
 buttons shouldn't trigger "view todo" action + Fixed: contacts selected bar
 mobile issues

---
 .../theme-options.component.scss              |  2 +-
 .../apps/calendar/calendar.component.scss     |  8 ++++----
 .../event-form/event-form.component.html      |  4 ++--
 .../sidenavs/left/chats/chats.component.html  |  1 -
 .../apps/contacts/contacts.component.html     |  2 +-
 .../selected-bar/selected-bar.component.html  |  4 ++--
 .../sidenavs/main/main.component.scss         |  4 ++--
 .../dashboards/project/project.component.html | 12 +++++++----
 .../dialogs/compose/compose.component.html    |  2 +-
 .../mail-details/mail-details.component.html  |  2 +-
 .../board/dialogs/card/card.component.html    |  1 -
 .../todo-list-item.component.html             | 20 ++++++++-----------
 .../todo-list-item.component.ts               |  6 ------
 .../todo/todo-list/todo-list.component.scss   |  1 +
 .../content/apps/todo/todo.component.scss     |  4 ++++
 .../main/content/apps/todo/todo.service.ts    |  2 --
 .../components/widget/widget.component.html   |  4 ++--
 17 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/app/core/components/theme-options/theme-options.component.scss
index 950c472c..f01c54f4 100644
--- a/src/app/core/components/theme-options/theme-options.component.scss
+++ b/src/app/core/components/theme-options/theme-options.component.scss
@@ -32,7 +32,7 @@
 
         @include media-breakpoint-down('xs') {
             top: -120px;
-            max-height: calc(100vh - 60px);
+            max-height: calc(100vh - 100px);
             width: 90vw;
         }
 
diff --git a/src/app/main/content/apps/calendar/calendar.component.scss b/src/app/main/content/apps/calendar/calendar.component.scss
index 4fc3c6a2..19500ca3 100644
--- a/src/app/main/content/apps/calendar/calendar.component.scss
+++ b/src/app/main/content/apps/calendar/calendar.component.scss
@@ -26,8 +26,8 @@
     }
 
     .cal-open-day-events {
-        background: whitesmoke;
-        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
+        background: #455A64;
+        box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
         padding: 0;
         display: flex;
         flex-direction: column;
@@ -44,11 +44,11 @@
             transition: box-shadow 300ms ease;
 
             &:first-of-type {
-                margin-top: 24px;
+                margin-top: 16px;
             }
 
             &:last-of-type {
-                margin-bottom: 24px;
+                margin-bottom: 16px;
             }
 
             &:hover {
diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.html b/src/app/main/content/apps/calendar/event-form/event-form.component.html
index 3adb7c31..2bdc588a 100644
--- a/src/app/main/content/apps/calendar/event-form/event-form.component.html
+++ b/src/app/main/content/apps/calendar/event-form/event-form.component.html
@@ -66,7 +66,7 @@
                 </md-form-field>
 
                 <md-input-container class="no-errors-spacer" fxFlex md-no-float>
-                    <input mdInput ng-model="calendarEvent.startTime" placeholder="Start Time">
+                    <input mdInput placeholder="Start Time">
                 </md-input-container>
 
             </div>
@@ -80,7 +80,7 @@
                 </md-form-field>
 
                 <md-input-container class="no-errors-spacer" fxFlex md-no-float>
-                    <input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
+                    <input mdInput placeholder="End Time">
                 </md-input-container>
 
             </div>
diff --git a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
index a2df3ca7..c788af9e 100644
--- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
+++ b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
@@ -151,7 +151,6 @@
             </div>
 
             <button md-button class="contact"
-                    ng-show="chatSearch"
                     *ngFor="let contact of contacts| filter: searchText"
                     (click)="getChat(contact.id)"
                     [@animate]="{value:'*',params:{y:'100%'}}">
diff --git a/src/app/main/content/apps/contacts/contacts.component.html b/src/app/main/content/apps/contacts/contacts.component.html
index 070a1272..7dbf22c5 100644
--- a/src/app/main/content/apps/contacts/contacts.component.html
+++ b/src/app/main/content/apps/contacts/contacts.component.html
@@ -43,7 +43,7 @@
 
         <!-- SIDENAV -->
         <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
-                    fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-md">
+                    fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-sm">
 
             <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>
 
diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html
index 9f396060..4087740d 100644
--- a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html
+++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html
@@ -1,13 +1,13 @@
 <div fxFlex fxLayout="row" fxLayoutAlign="start center" class="p-24">
 
-    <div class="close-button-wrapper" fxFlex="220px" (click)="deselectAll()">
+    <div class="close-button-wrapper" fxFlex="0 1 auto" fxFlex.gt-sm="220px" (click)="deselectAll()">
         <button class="p-8" md-button fxLayout="row" fxLayoutAlign="start center">
             <md-icon class="mr-8">arrow_back</md-icon>
             <span class="text-uppercase">Back</span>
         </button>
     </div>
 
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutAlign.gt-sm="space-between center">
 
         <div>
             <span class="selected-contacts-count">
diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss b/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss
index 5c6b97f8..c239a34f 100644
--- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss
+++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss
@@ -11,7 +11,7 @@
         flex-direction: column;
         padding: 0;
 
-        @include media-breakpoint(gt-md) {
+        @include media-breakpoint(gt-sm) {
             padding: 24px 4px 24px 24px;
         }
 
@@ -21,7 +21,7 @@
             flex: 0 1 auto;
             padding: 0;
 
-            @include media-breakpoint(gt-md) {
+            @include media-breakpoint(gt-sm) {
                 @include mat-elevation(4);
             }
 
diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html
index 7d785fe9..6dc003d4 100644
--- a/src/app/main/content/apps/dashboards/project/project.component.html
+++ b/src/app/main/content/apps/dashboards/project/project.component.html
@@ -79,7 +79,8 @@
 
                                 <!-- Back -->
                                 <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                         <md-icon class="s-16">close</md-icon>
                                     </button>
 
@@ -121,7 +122,8 @@
 
                                 <!-- Back -->
                                 <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                         <md-icon class="s-16">close</md-icon>
                                     </button>
 
@@ -163,7 +165,8 @@
 
                                 <!-- Back -->
                                 <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                         <md-icon class="s-16">close</md-icon>
                                     </button>
 
@@ -204,7 +207,8 @@
 
                                 <!-- Back -->
                                 <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                         <md-icon class="s-16">close</md-icon>
                                     </button>
 
diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html b/src/app/main/content/apps/mail/dialogs/compose/compose.component.html
index aecdd630..ac423a74 100644
--- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html
+++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.html
@@ -21,7 +21,7 @@
                        type="email">
             </md-input-container>
 
-            <md-input-container ng-class="{'hidden-cc': vm.hiddenCC, 'hidden-bcc': vm.hiddenBCC}">
+            <md-input-container>
                 <input mdInput name="to"
                        placeholder="To"
                        formControlName="to"
diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.html b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
index 42df8292..ee29da61 100644
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.html
+++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
@@ -85,7 +85,7 @@
             </div>
 
             <button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    ng-click="$mdOpenMenu($event)">
+                    (click)="$event.stopPropagation()">
                 <md-icon>more_vert</md-icon>
             </button>
 
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
index 75e65ef5..2b7ca5d4 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
@@ -386,7 +386,6 @@
                     <div class="section-content">
                         <form name="cardCommentForm"
                               #newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)"
-                              ng-submit="vm.addNewComment(vm.newCommentText); vm.newCommentText =''"
                               class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate>
 
                             <div fxLayout="row">
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
index 3782a525..aaecb99b 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
+++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
@@ -1,18 +1,16 @@
 <div fxLayout="row" fxLayoutAlign="start center">
 
-    <md-icon class="handle mr-16" ngxDragHandle (click)="$event.stopPropagation()" fxFlex="0 1 auto" fxHide.xs>
+    <md-icon class="handle mr-16" ngxDragHandle fxFlex="0 1 auto" fxHide.xs>
         drag_handle
     </md-icon>
 
     <md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
-                 (click)="$event.stopPropagation()"
-                 class="mr-16"
-                 fxFlex="0 1 auto">
+                 class="mr-16" fxFlex="0 1 auto">
     </md-checkbox>
 
     <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
 
-        <div class="info" fxFlex FlexLayout="column">
+        <div class="info" fxFlex fxFlexLayout="column">
 
             <div class="title">
                 {{todo.title}}
@@ -25,9 +23,7 @@
             <div class="tags" fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
 
                 <div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
-
                     <div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
-
                     <div class="tag-label">{{tags | getById:tagId:'title'}}</div>
                 </div>
 
@@ -37,20 +33,20 @@
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
 
-            <button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important"
-                    fxHide.xs>
+            <button md-button class="mat-icon-button" (click)="toggleImportant($event)"
+                    aria-label="Toggle important" fxHide.xs>
                 <md-icon *ngIf="todo.important">error</md-icon>
                 <md-icon *ngIf="!todo.important">error_outline</md-icon>
             </button>
 
-            <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star"
-                    fxHide.xs>
+            <button md-button class="mat-icon-button" (click)="toggleStar($event)"
+                    aria-label="Toggle star" fxHide.xs>
                 <md-icon *ngIf="todo.starred">star</md-icon>
                 <md-icon *ngIf="!todo.starred">star_outline</md-icon>
             </button>
 
             <button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    ng-click="$mdOpenMenu($event)" fxHide.xs>
+                    (click)="$event.stopPropagation();" fxHide.xs>
                 <md-icon>more_vert</md-icon>
             </button>
 
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts
index 5a4c2c76..765db6ca 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts
+++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts
@@ -78,40 +78,34 @@ export class FuseTodoListItemComponent implements OnInit, OnDestroy
 
     /**
      * Toggle star
-     * @param event
      */
     toggleStar(event)
     {
         event.stopPropagation();
 
         this.todo.toggleStar();
-
         this.todoService.updateTodo(this.todo);
     }
 
     /**
      * Toggle Important
-     * @param event
      */
     toggleImportant(event)
     {
         event.stopPropagation();
 
         this.todo.toggleImportant();
-
         this.todoService.updateTodo(this.todo);
     }
 
     /**
      * Toggle Completed
-     * @param event
      */
     toggleCompleted(event)
     {
         event.stopPropagation();
 
         this.todo.toggleCompleted();
-
         this.todoService.updateTodo(this.todo);
     }
 }
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.scss b/src/app/main/content/apps/todo/todo-list/todo-list.component.scss
index 8fb43255..6c063deb 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list.component.scss
+++ b/src/app/main/content/apps/todo/todo-list/todo-list.component.scss
@@ -5,4 +5,5 @@
     overflow-y: auto;
     position: relative;
     padding: 0;
+    border-right: 1px solid rgba(0, 0, 0, .12);
 }
diff --git a/src/app/main/content/apps/todo/todo.component.scss b/src/app/main/content/apps/todo/todo.component.scss
index 903a75e5..b702ba18 100644
--- a/src/app/main/content/apps/todo/todo.component.scss
+++ b/src/app/main/content/apps/todo/todo.component.scss
@@ -39,6 +39,10 @@
 
             @include media-breakpoint-down(lg) {
 
+                fuse-todo-list {
+                    border-right: 0;
+                }
+
                 fuse-todo-list,
                 fuse-todo-details {
                     flex: 1 0 100%;
diff --git a/src/app/main/content/apps/todo/todo.service.ts b/src/app/main/content/apps/todo/todo.service.ts
index e91d84f1..bae4a873 100644
--- a/src/app/main/content/apps/todo/todo.service.ts
+++ b/src/app/main/content/apps/todo/todo.service.ts
@@ -381,8 +381,6 @@ export class TodoService implements Resolve<any>
 
                     this.getTodos().then(todos => {
 
-                        this.setCurrentTodo(todo.id);
-
                         resolve(todos);
 
                     }, reject);
diff --git a/src/app/main/content/components/widget/widget.component.html b/src/app/main/content/components/widget/widget.component.html
index bf6dc57b..46717337 100644
--- a/src/app/main/content/components/widget/widget.component.html
+++ b/src/app/main/content/components/widget/widget.component.html
@@ -45,7 +45,7 @@
                     <!-- Back -->
                     <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
                         <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
-                                ng-click="flipWidget()" aria-label="Flip widget">
+                                aria-label="Flip widget">
                             <md-icon class="s-16">close</md-icon>
                         </button>
 
@@ -86,7 +86,7 @@
                             <!-- Back -->
                             <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
                                 <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
-                                        ng-click="flipWidget()" aria-label="Flip widget">
+                                        aria-label="Flip widget">
                                     <md-icon class="s-16">close</md-icon>
                                 </button>
 

From 67476107717699c331def24aea4aa15166e36102 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 22 Sep 2017 16:04:59 +0300
Subject: [PATCH 3/4] Fixed: Fullwidth simple page layout doesn't scroll +
 Added: New logo to the various pages + Fixed: Mobile zoom is not disabled +
 Fixed: Profile timeline mobile order is not correct + Fixed: Quickpanel
 focusses to the form elements causing it to scroll on mobile devices when
 opened + Various demo page mobile fixes

---
 src/app/core/scss/partials/_page-layouts.scss     |  5 ++++-
 .../apps/scrumboard/scrumboard.component.scss     |  1 +
 .../forgot-password.component.html                |  2 +-
 .../forgot-password.component.scss                |  7 -------
 .../authentication/login-2/login-2.component.html |  4 +++-
 .../authentication/login-2/login-2.component.scss |  8 --------
 .../authentication/login/login.component.html     |  8 ++++++--
 .../authentication/login/login.component.scss     |  7 -------
 .../register-2/register-2.component.html          |  4 +++-
 .../register-2/register-2.component.scss          |  8 --------
 .../register/register.component.html              |  8 ++++++--
 .../register/register.component.scss              |  7 -------
 .../reset-password/reset-password.component.html  |  2 +-
 .../reset-password/reset-password.component.scss  |  7 -------
 .../pages/coming-soon/coming-soon.component.html  |  4 ++--
 .../pages/coming-soon/coming-soon.component.scss  |  7 -------
 .../pages/invoices/compact/compact.component.html |  8 ++++----
 .../pages/invoices/compact/compact.component.scss |  9 +--------
 .../pages/invoices/modern/modern.component.html   |  9 +++++----
 .../pages/invoices/modern/modern.component.scss   |  9 ---------
 .../pages/maintenance/maintenance.component.html  |  2 +-
 .../pages/maintenance/maintenance.component.scss  |  9 +--------
 .../profile/tabs/timeline/timeline.component.html |  6 ++----
 .../profile/tabs/timeline/timeline.component.scss |  2 +-
 .../main/content/ui/forms/forms.component.scss    |  1 +
 .../main/quick-panel/quick-panel.component.html   | 15 +++++++++------
 src/index.html                                    |  2 +-
 27 files changed, 53 insertions(+), 108 deletions(-)

diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss
index 5abc20e8..51595b0a 100644
--- a/src/app/core/scss/partials/_page-layouts.scss
+++ b/src/app/core/scss/partials/_page-layouts.scss
@@ -273,6 +273,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         }
 
         // Fullwidth
+        &.fullwidth {
+            overflow: auto;
+        }
+
         &.fullwidth,
         &.inner-sidenav {
             min-height: 100%;
@@ -445,7 +449,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.simple {
 
             &.fullwidth {
-                overflow: visible;
 
                 > .content {
                     flex: 1 0 auto;
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.scss b/src/app/main/content/apps/scrumboard/scrumboard.component.scss
index 23b5efdd..067b0ea0 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.component.scss
+++ b/src/app/main/content/apps/scrumboard/scrumboard.component.scss
@@ -5,6 +5,7 @@
 
     #boards {
         width: 100%;
+        overflow: auto;
 
         .board-list {
             padding: 32px 0;
diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html
index 1eb104b1..2e7cc32f 100644
--- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html
+++ b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html
@@ -5,7 +5,7 @@
         <div id="forgot-password-form">
 
             <div class="logo">
-                <span>F</span>
+                <img src="assets/images/logos/fuse.svg">
             </div>
 
             <div class="title">RECOVER YOUR PASSWORD</div>
diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss
index 12c789e0..f9038d5c 100644
--- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss
+++ b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss
@@ -31,14 +31,7 @@
 
                 .logo {
                     width: 128px;
-                    height: 128px;
-                    line-height: 128px;
-                    font-size: 86px;
-                    font-weight: 500;
                     margin: 32px auto;
-                    color: #FFFFFF;
-                    border-radius: 2px;
-                    background: mat-color($accent);
                 }
 
                 .title {
diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.html b/src/app/main/content/pages/authentication/login-2/login-2.component.html
index 8177b1bc..eb52f550 100644
--- a/src/app/main/content/pages/authentication/login-2/login-2.component.html
+++ b/src/app/main/content/pages/authentication/login-2/login-2.component.html
@@ -1,8 +1,9 @@
 <div id="login" fxLayout="row" fxLayoutAlign="start">
 
     <div id="login-intro" fxFlex fxHide fxShow.gt-xs>
+
         <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
-            <span>F</span>
+            <img src="assets/images/logos/fuse.svg">
         </div>
 
         <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
@@ -13,6 +14,7 @@
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
             vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
         </div>
+
     </div>
 
     <div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.scss b/src/app/main/content/pages/authentication/login-2/login-2.component.scss
index f63666af..5753222d 100644
--- a/src/app/main/content/pages/authentication/login-2/login-2.component.scss
+++ b/src/app/main/content/pages/authentication/login-2/login-2.component.scss
@@ -17,15 +17,7 @@
 
             .logo {
                 width: 128px;
-                height: 128px;
-                line-height: 128px;
-                font-size: 86px;
-                font-weight: 500;
                 margin-bottom: 32px;
-                color: #FFFFFF;
-                border-radius: 2px;
-                text-align: center;
-                background: mat-color($accent);
             }
 
             .title {
diff --git a/src/app/main/content/pages/authentication/login/login.component.html b/src/app/main/content/pages/authentication/login/login.component.html
index 4221ec98..e44e36a3 100644
--- a/src/app/main/content/pages/authentication/login/login.component.html
+++ b/src/app/main/content/pages/authentication/login/login.component.html
@@ -3,8 +3,9 @@
     <div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
         <div id="login-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
-            <div class="logo md-accent-bg">
-                <span>F</span>
+
+            <div class="logo">
+                <img src="assets/images/logos/fuse.svg">
             </div>
 
             <div class="title">LOGIN TO YOUR ACCOUNT</div>
@@ -62,6 +63,9 @@
                 <span class="text">Don't have an account?</span>
                 <a class="link" [routerLink]="'/pages/auth/register'">Create an account</a>
             </div>
+
         </div>
+
     </div>
+
 </div>
\ No newline at end of file
diff --git a/src/app/main/content/pages/authentication/login/login.component.scss b/src/app/main/content/pages/authentication/login/login.component.scss
index aab0e1dd..c02feb61 100644
--- a/src/app/main/content/pages/authentication/login/login.component.scss
+++ b/src/app/main/content/pages/authentication/login/login.component.scss
@@ -31,14 +31,7 @@
 
                 .logo {
                     width: 128px;
-                    height: 128px;
-                    line-height: 128px;
-                    font-size: 86px;
-                    font-weight: 500;
                     margin: 32px auto;
-                    color: #FFFFFF;
-                    border-radius: 2px;
-                    background: mat-color($accent);
                 }
 
                 .title {
diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.html b/src/app/main/content/pages/authentication/register-2/register-2.component.html
index 5092e6fe..4418defe 100644
--- a/src/app/main/content/pages/authentication/register-2/register-2.component.html
+++ b/src/app/main/content/pages/authentication/register-2/register-2.component.html
@@ -1,8 +1,9 @@
 <div id="register" fxLayout="row" fxLayoutAlign="start">
 
     <div id="register-intro" fxFlex fxHide fxShow.gt-xs>
+
         <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
-            <span>F</span>
+            <img src="assets/images/logos/fuse.svg">
         </div>
 
         <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
@@ -13,6 +14,7 @@
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
             vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
         </div>
+
     </div>
 
     <div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.scss b/src/app/main/content/pages/authentication/register-2/register-2.component.scss
index e583e60c..9d8943da 100644
--- a/src/app/main/content/pages/authentication/register-2/register-2.component.scss
+++ b/src/app/main/content/pages/authentication/register-2/register-2.component.scss
@@ -17,15 +17,7 @@
 
             .logo {
                 width: 128px;
-                height: 128px;
-                line-height: 128px;
-                font-size: 86px;
-                font-weight: 500;
                 margin-bottom: 32px;
-                color: #FFFFFF;
-                border-radius: 2px;
-                text-align: center;
-                background: mat-color($accent);
             }
 
             .title {
diff --git a/src/app/main/content/pages/authentication/register/register.component.html b/src/app/main/content/pages/authentication/register/register.component.html
index d38b333d..7f1a9f34 100644
--- a/src/app/main/content/pages/authentication/register/register.component.html
+++ b/src/app/main/content/pages/authentication/register/register.component.html
@@ -3,8 +3,9 @@
     <div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
         <div id="register-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
-            <div class="logo md-accent-bg">
-                <span>F</span>
+
+            <div class="logo">
+                <img src="assets/images/logos/fuse.svg">
             </div>
 
             <div class="title">CREATE AN ACCOUNT</div>
@@ -60,6 +61,9 @@
                 <span class="text">Already have an account?</span>
                 <a class="link" [routerLink]="'/pages/auth/login'">Login</a>
             </div>
+
         </div>
+
     </div>
+
 </div>
\ No newline at end of file
diff --git a/src/app/main/content/pages/authentication/register/register.component.scss b/src/app/main/content/pages/authentication/register/register.component.scss
index 4c170672..9527db41 100644
--- a/src/app/main/content/pages/authentication/register/register.component.scss
+++ b/src/app/main/content/pages/authentication/register/register.component.scss
@@ -31,14 +31,7 @@
 
                 .logo {
                     width: 128px;
-                    height: 128px;
-                    line-height: 128px;
-                    font-size: 86px;
-                    font-weight: 500;
                     margin: 32px auto;
-                    color: #FFFFFF;
-                    border-radius: 2px;
-                    background: mat-color($accent);
                 }
 
                 .title {
diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.html b/src/app/main/content/pages/authentication/reset-password/reset-password.component.html
index e9f2c27d..d0d118dc 100644
--- a/src/app/main/content/pages/authentication/reset-password/reset-password.component.html
+++ b/src/app/main/content/pages/authentication/reset-password/reset-password.component.html
@@ -6,7 +6,7 @@
         <div id="reset-password-form">
 
             <div class="logo">
-                <span>F</span>
+                <img src="assets/images/logos/fuse.svg">
             </div>
 
             <div class="title">RESET YOUR PASSWORD</div>
diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss b/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss
index 1bdee4f1..68beef6a 100644
--- a/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss
+++ b/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss
@@ -31,14 +31,7 @@
 
                 .logo {
                     width: 128px;
-                    height: 128px;
-                    line-height: 128px;
-                    font-size: 86px;
-                    font-weight: 500;
                     margin: 32px auto;
-                    color: #FFFFFF;
-                    border-radius: 2px;
-                    background: mat-color($accent);
                 }
 
                 .title {
diff --git a/src/app/main/content/pages/coming-soon/coming-soon.component.html b/src/app/main/content/pages/coming-soon/coming-soon.component.html
index fa19777e..06e7e5e4 100644
--- a/src/app/main/content/pages/coming-soon/coming-soon.component.html
+++ b/src/app/main/content/pages/coming-soon/coming-soon.component.html
@@ -6,8 +6,8 @@
 
             <div class="top">
 
-                <div class="logo md-accent-bg">
-                    <span>F</span>
+                <div class="logo">
+                    <img src="assets/images/logos/fuse.svg">
                 </div>
 
                 <div class="title">Hey! Thank you for checking out our app.</div>
diff --git a/src/app/main/content/pages/coming-soon/coming-soon.component.scss b/src/app/main/content/pages/coming-soon/coming-soon.component.scss
index 5f0b2533..a32f0ba2 100644
--- a/src/app/main/content/pages/coming-soon/coming-soon.component.scss
+++ b/src/app/main/content/pages/coming-soon/coming-soon.component.scss
@@ -37,14 +37,7 @@
 
                     .logo {
                         width: 128px;
-                        height: 128px;
-                        line-height: 128px;
-                        font-size: 86px;
-                        font-weight: 500;
                         margin: 32px auto;
-                        color: #FFFFFF;
-                        border-radius: 2px;
-                        background: mat-color($accent);
                     }
 
                     .title {
diff --git a/src/app/main/content/pages/invoices/compact/compact.component.html b/src/app/main/content/pages/invoices/compact/compact.component.html
index 526ecfa6..7aa864df 100644
--- a/src/app/main/content/pages/invoices/compact/compact.component.html
+++ b/src/app/main/content/pages/invoices/compact/compact.component.html
@@ -30,8 +30,8 @@
                     </div>
 
                     <div class="issuer md-accent-bg" fxLayout="row" fxLayoutAlign="start center">
-                        <div class="logo" fxLayout="row" fxLayoutAlign="center center">
-                            <span>F</span>
+                        <div class="logo">
+                            <img src="assets/images/logos/fuse.svg">
                         </div>
 
                         <div class="info">
@@ -124,8 +124,8 @@
             <div class="footer">
                 <div class="note">Please pay within 15 days. Thank you for your business.</div>
                 <div fxLayout="row" fxLayoutAlign="start start">
-                    <div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center">
-                        <div>F</div>
+                    <div class="logo">
+                        <img src="assets/images/logos/fuse.svg">
                     </div>
                     <div class="small-note">
                         In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque
diff --git a/src/app/main/content/pages/invoices/compact/compact.component.scss b/src/app/main/content/pages/invoices/compact/compact.component.scss
index e3743eb4..39ee0b4a 100644
--- a/src/app/main/content/pages/invoices/compact/compact.component.scss
+++ b/src/app/main/content/pages/invoices/compact/compact.component.scss
@@ -68,8 +68,7 @@
 
                             .logo {
                                 width: 96px;
-                                height: 96px;
-                                font-size: 72px;
+                                padding: 0 8px;
                                 border-right: 1px solid rgba(255, 255, 255, 0.7);
                             }
 
@@ -186,12 +185,7 @@
                         .logo {
                             width: 32px;
                             min-width: 32px;
-                            height: 32px;
-                            font-size: 17px;
-                            font-weight: 500;
                             margin-right: 24px;
-                            border-radius: 2px;
-                            overflow: hidden;
                         }
 
                         .small-note {
@@ -341,7 +335,6 @@
                             }
 
                             .logo {
-                                font-size: 14pt;
                                 margin-right: 8pt;
                             }
 
diff --git a/src/app/main/content/pages/invoices/modern/modern.component.html b/src/app/main/content/pages/invoices/modern/modern.component.html
index 5f20ecc5..4e903924 100644
--- a/src/app/main/content/pages/invoices/modern/modern.component.html
+++ b/src/app/main/content/pages/invoices/modern/modern.component.html
@@ -10,8 +10,9 @@
                 <div class="ids" fxLayout="column">
 
                     <div fxLayout="row" class="seller" fxLayoutAlign="start center">
-                        <div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center">
-                            <div>F</div>
+
+                        <div class="logo">
+                            <img src="assets/images/logos/fuse.svg">
                         </div>
 
                         <div class="divider"></div>
@@ -145,8 +146,8 @@
             <div class="footer">
                 <div class="note">Please pay within 15 days. Thank you for your business.</div>
                 <div fxLayout="row" fxLayoutAlign="start start">
-                    <div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center">
-                        <div>F</div>
+                    <div class="logo">
+                        <img src="assets/images/logos/fuse.svg">
                     </div>
                     <div class="small-note">
                         In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque
diff --git a/src/app/main/content/pages/invoices/modern/modern.component.scss b/src/app/main/content/pages/invoices/modern/modern.component.scss
index 2d8c84b6..473ebf19 100644
--- a/src/app/main/content/pages/invoices/modern/modern.component.scss
+++ b/src/app/main/content/pages/invoices/modern/modern.component.scss
@@ -35,8 +35,6 @@
 
                                 .logo {
                                     width: 156px;
-                                    height: 156px;
-                                    font-size: 115px;
                                 }
                             }
 
@@ -154,12 +152,7 @@
                         .logo {
                             width: 32px;
                             min-width: 32px;
-                            height: 32px;
-                            font-size: 17px;
-                            font-weight: 500;
                             margin-right: 24px;
-                            border-radius: 2px;
-                            overflow: hidden;
                         }
 
                         .small-note {
@@ -205,8 +198,6 @@
 
                                     .logo {
                                         width: 60pt;
-                                        height: 60pt;
-                                        font-size: 40pt;
                                     }
                                 }
 
diff --git a/src/app/main/content/pages/maintenance/maintenance.component.html b/src/app/main/content/pages/maintenance/maintenance.component.html
index 7c383483..4706e03e 100644
--- a/src/app/main/content/pages/maintenance/maintenance.component.html
+++ b/src/app/main/content/pages/maintenance/maintenance.component.html
@@ -5,7 +5,7 @@
         <div id="maintenance-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="logo">
-                <span>F</span>
+                <img src="assets/images/logos/fuse.svg">
             </div>
 
             <div class="title">Closed for scheduled maintenance!</div>
diff --git a/src/app/main/content/pages/maintenance/maintenance.component.scss b/src/app/main/content/pages/maintenance/maintenance.component.scss
index 5878d40c..7dc78ae5 100644
--- a/src/app/main/content/pages/maintenance/maintenance.component.scss
+++ b/src/app/main/content/pages/maintenance/maintenance.component.scss
@@ -18,7 +18,7 @@
 
             #maintenance-form {
                 max-width: 384px;
-                padding: 32px;
+                padding: 48px;
                 background: #FFFFFF;
                 text-align: center;
                 @include mat-elevation(7);
@@ -30,14 +30,7 @@
 
                 .logo {
                     width: 128px;
-                    height: 128px;
-                    line-height: 128px;
-                    font-size: 86px;
-                    font-weight: 500;
                     margin: 32px auto;
-                    color: rgba(255, 255, 255, 1);
-                    border-radius: 2px;
-                    background: mat-color($accent);
                 }
 
                 .title {
diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
index b717a0c5..ef796515 100644
--- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
+++ b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
@@ -1,7 +1,6 @@
 <div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
 
-    <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2"
-         fxFlexOrder.gt-sm="1"
+    <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65"
          *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
         <div class="profile-box add-post"
@@ -135,8 +134,7 @@
         </div>
     </div>
 
-    <div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35" fxFlexOrder="1"
-         fxFlexOrder.gt-sm="2">
+    <div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35">
 
         <div class="profile-box latest-activity" fxLayout="column"
              *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">
diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss
index f247e378..107f66c5 100644
--- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss
+++ b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss
@@ -219,7 +219,7 @@
             padding-left: 32px;
 
             @include media-breakpoint-down('sm') {
-                padding: 0;
+                padding: 32px 0 0 0;
             }
 
             .latest-activity {
diff --git a/src/app/main/content/ui/forms/forms.component.scss b/src/app/main/content/ui/forms/forms.component.scss
index 33c43ccd..63daaf10 100644
--- a/src/app/main/content/ui/forms/forms.component.scss
+++ b/src/app/main/content/ui/forms/forms.component.scss
@@ -3,6 +3,7 @@
     .content {
 
         form {
+            width: 100%;
             max-width: 800px !important;
         }
 
diff --git a/src/app/main/quick-panel/quick-panel.component.html b/src/app/main/quick-panel/quick-panel.component.html
index 96ca90ec..f0133fd0 100644
--- a/src/app/main/quick-panel/quick-panel.component.html
+++ b/src/app/main/quick-panel/quick-panel.component.html
@@ -1,6 +1,6 @@
-<md-list class="date">
+<md-list class="date" cdk-focus-region-start>
 
-    <h3 md-subheader>
+    <h3 md-subheader cdk-focus-init>
         <span>Today</span>
     </h3>
 
@@ -16,7 +16,7 @@
     </div>
 </md-list>
 
-<md-divider></md-divider>
+<md-divider cdk-focus-region-end></md-divider>
 
 <md-list>
     <h3 md-subheader>
@@ -50,19 +50,22 @@
     </h3>
 
     <md-list-item>
-        <md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications" labelPosition="before">
+        <md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
+                         labelPosition="before">
             <h3>Notifications</h3>
         </md-slide-toggle>
     </md-list-item>
 
     <md-list-item>
-        <md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud" labelPosition="before">
+        <md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
+                         labelPosition="before">
             <h3>Cloud Sync</h3>
         </md-slide-toggle>
     </md-list-item>
 
     <md-list-item>
-        <md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters" labelPosition="before">
+        <md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
+                         labelPosition="before">
             <h3>Retro Thrusters</h3>
         </md-slide-toggle>
     </md-list-item>
diff --git a/src/index.html b/src/index.html
index 3ad6af95..a06b2cec 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,7 +10,7 @@
         <meta name="description" content="Material design admin template with pre-built apps and pages">
         <meta name="keywords" content="HTML,CSS,AngularJS,Angular,Angular 4,Angular 5,Angular 6, Material">
         <meta name="author" content="Withinpixels">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
         <link rel="icon" type="image/x-icon" href="favicon.ico">
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

From dcff423943e3d928ccee0212ab68663dc91ddb14 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 22 Sep 2017 16:07:05 +0300
Subject: [PATCH 4/4] Updated version to 1.1.0 since we have couple breaking
 changes!

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ec276783..9af9e849 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index b17493de..d1f7c5d6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "license": "",
   "scripts": {
     "ng": "ng",