From ca1e510b8f7593d3cf051b1003617fa8cb22bda3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 18 Dec 2017 10:48:04 +0100
Subject: [PATCH] MOBILE-2253 login: Improve styles

---
 src/app/app.ios.scss                          |  74 +++++++
 src/app/app.md.scss                           |  74 +++++++
 src/app/app.scss                              | 105 +++-------
 src/app/app.wp.scss                           |   9 +
 src/assets/img/{logo.png => login_logo.png}   | Bin
 .../img/{logo_white.png => splash_logo.png}   | Bin
 src/components/input-errors/input-errors.html |   4 +-
 src/components/input-errors/input-errors.scss |   7 +-
 .../mark-required/mark-required.scss          |   2 +-
 .../show-password/show-password.scss          |  28 ++-
 .../login/pages/credentials/credentials.html  |  45 ++---
 .../login/pages/credentials/credentials.scss  |  47 ++---
 .../pages/email-signup/email-signup.html      | 190 +++++++++---------
 .../forgotten-password.html                   |  18 +-
 src/core/login/pages/init/init.html           |   2 +-
 src/core/login/pages/init/init.scss           |  32 +++
 src/core/login/pages/reconnect/reconnect.html |  61 +++---
 src/core/login/pages/reconnect/reconnect.scss |  78 +++----
 src/core/login/pages/site/site.html           |  21 +-
 src/core/login/pages/site/site.scss           |  29 ++-
 src/core/login/pages/sites/sites.html         |  32 +--
 src/core/login/pages/sites/sites.scss         |   4 +-
 src/theme/bmma.scss                           |   0
 src/theme/variables.scss                      |  85 +++++---
 24 files changed, 579 insertions(+), 368 deletions(-)
 create mode 100644 src/app/app.ios.scss
 create mode 100644 src/app/app.md.scss
 create mode 100644 src/app/app.wp.scss
 rename src/assets/img/{logo.png => login_logo.png} (100%)
 rename src/assets/img/{logo_white.png => splash_logo.png} (100%)
 create mode 100644 src/theme/bmma.scss

diff --git a/src/app/app.ios.scss b/src/app/app.ios.scss
new file mode 100644
index 000000000..9b7ffd32d
--- /dev/null
+++ b/src/app/app.ios.scss
@@ -0,0 +1,74 @@
+
+.button-ios {
+  min-height: $button-ios-height
+}
+
+// Light buttons color.
+.button-ios-light {
+  color: color($colors, primary, base);
+}
+
+
+// Highlights inside the input element.
+@if ($mm-text-input-ios-show-highlight) {
+  .card-ios, .list-ios {
+    // In order to get a 2px border we need to add an inset
+    // box-shadow 1px (this is to avoid the div resizing)
+
+    // The last item in a list has a border on the item, not the
+    // inner item, so add it to the item itself
+    .item-input.item-input-has-focus:last-child,
+    .item-input.input-has-focus:last-child {
+      @include ios-input-highlight($text-input-ios-highlight-color);
+
+      .item-inner ion-input {
+        box-shadow: none;
+      }
+    }
+
+    // Show the focus highlight when the input has focus
+    .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
+    .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
+      @include ios-input-highlight($text-input-ios-highlight-color-valid);
+
+      .item-inner ion-input {
+        box-shadow: none;
+      }
+    }
+
+    .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
+      @include ios-input-highlight($text-input-ios-highlight-color-invalid);
+
+      .item-inner ion-input {
+        box-shadow: none;
+      }
+    }
+  }
+
+  .item-ios.item-input {
+    .item-inner {
+      border: 0;
+    }
+
+    &.item-block .item-inner ion-input {
+      border-bottom: $hairlines-width solid $list-border-color;
+    }
+
+    // TODO remove all uses of input-has-focus in v4
+    &.item-input-has-focus .item-inner ion-input,
+    &.input-has-focus .item-inner ion-input {
+      @include ios-input-highlight($text-input-ios-highlight-color);
+    }
+
+    // Show the valid highlight when it has the .ng-valid class and a value
+    &.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
+    &.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+      @include ios-input-highlight($text-input-ios-highlight-color-valid);
+    }
+
+    // Show the invalid highlight when it has the invalid class and has been touched
+    &.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+      @include ios-input-highlight($text-input-ios-highlight-color-invalid);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/app.md.scss b/src/app/app.md.scss
new file mode 100644
index 000000000..552f800a2
--- /dev/null
+++ b/src/app/app.md.scss
@@ -0,0 +1,74 @@
+
+.button-md {
+  min-height: $button-md-height;
+}
+
+// Light buttons color.
+.button-md-light {
+  color: color($colors, primary, base);
+}
+
+// Highlights inside the input element.
+@if ($mm-text-input-md-show-highlight) {
+  .card-md, .list-md {
+    // In order to get a 2px border we need to add an inset
+    // box-shadow 1px (this is to avoid the div resizing)
+
+    // The last item in a list has a border on the item, not the
+    // inner item, so add it to the item itself
+    .item-input.item-input-has-focus:last-child,
+    .item-input.input-has-focus:last-child {
+      @include md-input-highlight($text-input-md-highlight-color);
+
+      .item-inner ion-input {
+        box-shadow: none;
+      }
+    }
+
+    .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
+    .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
+      @include md-input-highlight($text-input-md-highlight-color-valid);
+
+      .item-inner ion-input {
+        box-shadow: none;
+      }
+    }
+
+    .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
+      @include md-input-highlight($text-input-md-highlight-color-invalid);
+
+      .item-inner ion-input {
+        box-shadow: none;
+      }
+    }
+  }
+
+  .item-md.item-input {
+    .item-inner {
+      border: 0;
+    }
+
+    &.item-block .item-inner ion-input {
+      border-bottom: 1px solid $list-border-color;
+    }
+
+    // TODO remove all uses of input-has-focus in v4
+    &.item-input-has-focus .item-inner ion-input,
+    &.input-has-focus .item-inner ion-input {
+      @include md-input-highlight($text-input-md-highlight-color);
+    }
+
+    // Show the valid highlight when it has the .ng-valid class and a value
+    // TODO remove all uses of input-has-focus in v4
+    // TODO remove all uses of input-has-value in v4
+    &.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
+    &.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+      @include md-input-highlight($text-input-md-highlight-color-valid);
+    }
+
+    // Show the invalid highlight when it has the invalid class and has been touched
+    &.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+      @include md-input-highlight($text-input-md-highlight-color-invalid);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/app.scss b/src/app/app.scss
index a1a043c65..1ef2a9457 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -22,60 +22,22 @@
 .text-left           { text-align: left; }
 .text-right          { text-align: right; }
 .text-center         { text-align: center; }
-
-/**
- * App Branding
- */
-.mm-bglogo {
-    background-color: $mm-color-init-screen; /* Change this to add a bg image or change color */
-    background: -webkit-radial-gradient($mm-color-init-screen-alt, $mm-color-init-screen);
-    background: radial-gradient($mm-color-init-screen-alt, $mm-color-init-screen);
-    background-repeat: no-repeat;
-    background-position: center center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
-    display: table;
-
-    .mm-logo {
-        display: table-cell;
-        text-align: center;
-        vertical-align: middle;
-    }
-
-    img {
-        width: $mm-init-screen-logo-width;
-        max-width: $mm-init-screen-logo-max-width;
-        display: block;
-        margin: 0 auto;
-        margin-bottom: 30px;
-    }
-
-    .spinner circle {
-        stroke: $mm-init-screen-spinner-color;
-    }
-}
+.text-justify        { text-align: justify; }
 
 
 @media only screen and (min-width: 430px) {
   .mm-center-view .scroll-content {
-    margin: 0 auto;
-    max-width: 600px;
-    /* display: table !important; */
-    width: 100% !important;
-    height: 100% !important;
-    .mm-view-content {
-      /* display: table-cell;
-      vertical-align: middle; */
-      display: block; // Added this style and commented some others to make scroll work. Box isn't centered vertically.
+    display: flex!important;
+    align-content: center !important;
+    align-items: center !important;
+    > * {
+      margin: 0 auto;
+      max-width: 600px;
     }
   }
 }
 
+
 // Define an alternative way to set a heading in an item without using a heading tag.
 // This is done for accessibility reasons when a heading is semantically incorrect.
 .item .item-heading {
@@ -83,52 +45,29 @@
 }
 
 .mm-oauth-icon, .item.mm-oauth-icon, .list .item.mm-oauth-icon {
-  padding: ($content-padding / 2);
-  border: 1px solid $list-border-color;
-
-  img, span {
+  min-height: 32px;
+  img, .label {
     max-height: 32px;
     vertical-align: middle;
   }
   img {
     max-width: 32px;
   }
-  span {
+  .label {
     margin-left: 5px;
     color: $gray-darker;
   }
-
-  .label {
-    margin: 0;
-  }
-}
-
-.icon-accessory,
-ion-icon.icon-accessory {
-  color: $item-icon-accessory-color;
-  font-size: $item-icon-accessory-font-size;
 }
 
 .mm-bold, .mm-bold .label {
   font-weight: bold;
 }
 
-.item .core-input-footnote {
-  width: 100%;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  font-style: italic;
-}
-
-.content {
-  // Set bgcolor in content instead of overriding $background-color because that variable is applied to a lot of places.
-  background-color: $gray-light;
-}
-
-// Large centered avatar.
+// Avatar
+// -------------------------
+// Large centered avatar
 .item-avatar-center {
     text-align: center;
-    padding-left: 16px;
 
     &.item-complex .item-content {
         text-align: center;
@@ -158,3 +97,19 @@ ion-icon.icon-accessory {
         }
     }
 }
+
+ion-avatar ion-img, ion-avatar img {
+  text-indent: -99999px;
+  background-color: $gray-light;
+}
+
+// Form items
+// -------------------------
+
+.item .core-input-footnote {
+  width: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-style: italic;
+}
+
diff --git a/src/app/app.wp.scss b/src/app/app.wp.scss
new file mode 100644
index 000000000..29afff5a3
--- /dev/null
+++ b/src/app/app.wp.scss
@@ -0,0 +1,9 @@
+
+.button-wp {
+  min-height: $button-wp-height;
+}
+
+// Light buttons color.
+.button-wp-light {
+  color: color($colors, primary, base);
+}
diff --git a/src/assets/img/logo.png b/src/assets/img/login_logo.png
similarity index 100%
rename from src/assets/img/logo.png
rename to src/assets/img/login_logo.png
diff --git a/src/assets/img/logo_white.png b/src/assets/img/splash_logo.png
similarity index 100%
rename from src/assets/img/logo_white.png
rename to src/assets/img/splash_logo.png
diff --git a/src/components/input-errors/input-errors.html b/src/components/input-errors/input-errors.html
index f914829fb..51be581b5 100644
--- a/src/components/input-errors/input-errors.html
+++ b/src/components/input-errors/input-errors.html
@@ -1,5 +1,5 @@
 <div class="core-input-error-container" *ngIf="formControl.dirty && !formControl.valid" role="alert">
-    <div *ngFor="let error of errorKeys">
+    <ng-container *ngFor="let error of errorKeys">
         <div *ngIf="formControl.hasError(error)" class="core-input-error">{{errorMessages[error]}}</div>
-    </div>
+    </ng-container>
 </div>
\ No newline at end of file
diff --git a/src/components/input-errors/input-errors.scss b/src/components/input-errors/input-errors.scss
index c432be9ab..29cfb2c92 100644
--- a/src/components/input-errors/input-errors.scss
+++ b/src/components/input-errors/input-errors.scss
@@ -4,8 +4,13 @@ core-input-errors {
     .core-input-error-container {
         .core-input-error {
             padding: 4px;
-            color: red;
+            color: $red;
             font-size: 12px;
+            display: none;
+
+            &:first-child {
+                display: block;
+            }
         }
     }
 }
diff --git a/src/components/mark-required/mark-required.scss b/src/components/mark-required/mark-required.scss
index 5bff71c3f..deacc173b 100644
--- a/src/components/mark-required/mark-required.scss
+++ b/src/components/mark-required/mark-required.scss
@@ -1,6 +1,6 @@
 *[core-mark-required] {
     .core-input-required-asterisk, .icon.core-input-required-asterisk {
-        color: red !important;
+        color: $red !important;
         font-size: 8px;
         padding-left: 4px;
         line-height: 100%;
diff --git a/src/components/show-password/show-password.scss b/src/components/show-password/show-password.scss
index 1beb78e94..5e5621493 100644
--- a/src/components/show-password/show-password.scss
+++ b/src/components/show-password/show-password.scss
@@ -3,11 +3,12 @@ core-show-password {
     width: 100%;
     position: relative;
 
-    ion-input {
-        padding-right: 47 + $content-padding;
+    ion-input input.text-input {
+        padding-right: 47px;
     }
 
     .button[icon-only] {
+        background: transparent;
         padding: 0 ($content-padding / 2);
         position: absolute;
         top: $content-padding / 2;
@@ -17,8 +18,27 @@ core-show-password {
     }
 }
 
-.item-label-stacked core-show-password {
-    .button[icon-only] {
+.md {
+    .item-label-stacked core-show-password .button[icon-only] {
         top: 0;
     }
 }
+
+.ios {
+    .item-label-stacked core-show-password .button[icon-only] {
+        top: -5px;
+    }
+    core-show-password .button[icon-only] {
+        top: 0;
+    }
+}
+
+.wp {
+    .item-label-stacked core-show-password .button[icon-only] {
+        top: 7px;
+    }
+    core-show-password .button[icon-only] {
+        top: 12px;
+        right: 5px;
+    }
+}
diff --git a/src/core/login/pages/credentials/credentials.html b/src/core/login/pages/credentials/credentials.html
index f46bc468b..b58d711b8 100644
--- a/src/core/login/pages/credentials/credentials.html
+++ b/src/core/login/pages/credentials/credentials.html
@@ -3,21 +3,21 @@
         <ion-title>{{ 'core.login.login' | translate }}</ion-title>
     </ion-navbar>
 </ion-header>
-<ion-content padding class="mm-center-view">
-    <core-loading [hideUntil]="pageLoaded" class="mm-view-content">
-        <ion-list no-lines class="box">
-            <ion-item text-wrap class="text-center">
+<ion-content class="mm-center-view">
+    <core-loading [hideUntil]="pageLoaded">
+        <div class="box">
+            <div text-wrap text-center>
                 <!-- Show site logo or a default image. -->
                 <img *ngIf="logoUrl" [src]="logoUrl" role="presentation">
-                <img *ngIf="!logoUrl" src="assets/img/logo.png" class="moodle-logo" role="presentation">
+                <img *ngIf="!logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation">
 
                 <!-- If no sitename show big siteurl. -->
                 <p *ngIf="!siteName" padding class="item-heading mm-siteurl">{{siteUrl}}</p>
                 <!-- If sitename, show big sitename and small siteurl. -->
                 <p *ngIf="siteName" padding class="item-heading mm-sitename">{{siteName}}</p>
                 <p *ngIf="siteName" class="mm-siteurl">{{siteUrl}}</p>
-            </ion-item>
-            <form [formGroup]="credForm" (ngSubmit)="login()">
+            </div>
+            <form ion-list [formGroup]="credForm" (ngSubmit)="login()">
                 <ion-item *ngIf="siteChecked && !isBrowserSSO">
                     <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username" autocapitalize="none" autocorrect="off"></ion-input>
                 </ion-item>
@@ -26,30 +26,29 @@
                         <ion-input class="mm-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" mm-show-password></ion-input>
                     </core-show-password>
                 </ion-item>
-                <button ion-button block color="primary" [disabled]="siteChecked && !isBrowserSSO && !credForm.valid">{{ 'core.login.loginbutton' | translate }}</button>
+                <button ion-button block [disabled]="siteChecked && !isBrowserSSO && !credForm.valid">{{ 'core.login.loginbutton' | translate }}</button>
             </form>
 
             <!-- Forgotten password button. -->
             <div padding-top>
-                <button ion-button block text-wrap (click)="forgottenPassword()">{{ 'core.login.forgotten' | translate }}</button>
+                <button ion-button block text-wrap color="light" (click)="forgottenPassword()">{{ 'core.login.forgotten' | translate }}</button>
             </div>
 
-            <div *ngIf="identityProviders && identityProviders.length" padding-top>
-                <p>{{ 'core.login.potentialidps' | translate }}</p>
-                <ion-item *ngFor="let provider of identityProviders" text-wrap class="mm-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
-                    <img [src]="provider.iconurl" alt="{{provider.name}}">
-                    <span>{{provider.name}}</span>
-                    <ion-icon class="icon-accessory" name="arrow-forward" md="ios-arrow-forward" item-end></ion-icon>
-                </ion-item>
-            </div>
+            <ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
+                <ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
+                <button ion-item *ngFor="let provider of identityProviders" text-wrap class="mm-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
+                    <img [src]="provider.iconurl" alt="{{provider.name}}" item-start>
+                    {{provider.name}}
+                </button>
+            </ion-list>
 
-            <div *ngIf="canSignup">
-                <ion-item text-wrap>
-                    <p class="item-heading">{{ 'core.login.firsttime' | translate }}</p>
-                    <p *ngIf="authInstructions"><core-format-text [text]="authInstructions"></core-format-text></p>
+            <ion-list *ngIf="canSignup" padding-top>
+                <ion-list-header text-wrap>{{ 'core.login.firsttime' | translate }}</ion-list-header>
+                <ion-item no-lines text-wrap *ngIf="authInstructions">
+                    <p><core-format-text [text]="authInstructions"></core-format-text></p>
                 </ion-item>
                 <button ion-button block (click)="signup()">{{ 'core.login.startsignup' | translate }}</button>
-            </div>
-        </ion-list>
+            </ion-list>
+        </div>
     </core-loading>
 </ion-content>
diff --git a/src/core/login/pages/credentials/credentials.scss b/src/core/login/pages/credentials/credentials.scss
index c708e6271..b940b3116 100644
--- a/src/core/login/pages/credentials/credentials.scss
+++ b/src/core/login/pages/credentials/credentials.scss
@@ -1,34 +1,35 @@
 page-core-login-credentials {
     .content {
-        .mm-ioninput-password {
-            padding-top: 0;
-            padding-bottom: 0;
-        }
         background: -webkit-radial-gradient(white, $gray-light);
         background: radial-gradient(white, $gray-light);
+    }
 
-        img {
-            max-width: 100%;
-        }
+    .mm-ioninput-password {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
 
-        img.moodle-logo {
-            width: 90%;
-            max-width: 300px;
-        }
+    img {
+        max-width: 100%;
+    }
 
-        .box {
-            padding: 16px;
-            background: $white;
-            border: 1px solid $gray;
-        }
+    img.login-logo {
+        width: 90%;
+        max-width: 300px;
+    }
 
-        .mm-sitename, .mm-siteurl {
-            @if $mm-fixed-url { display: none; }
-        }
+    .box {
+        padding: 16px;
+        margin: 8px;
+        background: $white;
+        border: 1px solid $gray;
+    }
 
-        .list .item-input {
-            border: 1px solid $list-border-color;
-            margin-bottom: 20px;
-        }
+    .mm-sitename, .mm-siteurl {
+        @if $mm-fixed-url { display: none; }
+    }
+
+    .item-input {
+        margin-bottom: 20px;
     }
 }
diff --git a/src/core/login/pages/email-signup/email-signup.html b/src/core/login/pages/email-signup/email-signup.html
index bf242c12a..2a737e086 100644
--- a/src/core/login/pages/email-signup/email-signup.html
+++ b/src/core/login/pages/email-signup/email-signup.html
@@ -15,108 +15,106 @@
     </ion-refresher>
 
     <core-loading [hideUntil]="settingsLoaded">
-        <form *ngIf="settingsLoaded && settings" [formGroup]="signupForm" (ngSubmit)="create()" class="list list-inset">
-            <ion-list>
-                <ion-item text-wrap class="text-center">
-                    <!-- If no sitename show big siteurl. -->
-                    <p *ngIf="!siteName" padding class="item-heading">{{siteUrl}}</p>
-                    <!-- If sitename, show big sitename and small siteurl. -->
-                    <p *ngIf="siteName" padding class="item-heading">{{siteName}}</p>
-                    <p *ngIf="siteName">{{siteUrl}}</p>
-                </ion-item>
+        <form ion-list *ngIf="settingsLoaded && settings" [formGroup]="signupForm" (ngSubmit)="create()" class="list list-inset">
+            <ion-item text-wrap text-center>
+                <!-- If no sitename show big siteurl. -->
+                <p *ngIf="!siteName" padding class="item-heading">{{siteUrl}}</p>
+                <!-- If sitename, show big sitename and small siteurl. -->
+                <p *ngIf="siteName" padding class="item-heading">{{siteName}}</p>
+                <p *ngIf="siteName">{{siteUrl}}</p>
+            </ion-item>
 
-                <!-- Username and password. -->
-                <ion-item-divider text-wrap color="light">
-                    {{ 'core.login.createuserandpass' | translate }}
-                </ion-item-divider>
-                <ion-item text-wrap>
-                    <ion-label stacked core-mark-required="true">{{ 'core.login.username' | translate }}</ion-label>
-                    <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username" autocapitalize="none" autocorrect="off"></ion-input>
-                    <core-input-errors item-content [control]="signupForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
+            <!-- Username and password. -->
+            <ion-item-divider text-wrap color="light">
+                {{ 'core.login.createuserandpass' | translate }}
+            </ion-item-divider>
+            <ion-item text-wrap>
+                <ion-label stacked core-mark-required="true">{{ 'core.login.username' | translate }}</ion-label>
+                <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username" autocapitalize="none" autocorrect="off"></ion-input>
+                <core-input-errors item-content [control]="signupForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
+            </ion-item>
+            <ion-item text-wrap>
+                <ion-label stacked core-mark-required="true">{{ 'core.login.password' | translate }}</ion-label>
+                <core-show-password item-content [name]="'password'">
+                    <ion-input type="password" name="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password"></ion-input>
+                </core-show-password>
+                <p *ngIf="settings.passwordpolicy" item-content class="core-input-footnote">
+                    {{settings.passwordpolicy}}
+                </p>
+                <core-input-errors item-content [control]="signupForm.controls.password" [errorMessages]="passwordErrors"></core-input-errors>
+            </ion-item>
+
+            <!-- More details. -->
+            <ion-item-divider text-wrap color="light">
+                {{ 'core.login.supplyinfo' | translate }}
+            </ion-item-divider>
+            <ion-item text-wrap>
+                <ion-label stacked core-mark-required="true">{{ 'core.user.email' | translate }}</ion-label>
+                <ion-input type="email" name="email" placeholder="{{ 'core.user.email' | translate }}" formControlName="email" autocapitalize="none" autocorrect="off"></ion-input>
+                <core-input-errors item-content [control]="signupForm.controls.email" [errorMessages]="emailErrors"></core-input-errors>
+            </ion-item>
+            <ion-item text-wrap>
+                <ion-label stacked core-mark-required="true">{{ 'core.user.emailagain' | translate }}</ion-label>
+                <ion-input type="email" name="email2" placeholder="{{ 'core.user.emailagain' | translate }}" formControlName="email2" autocapitalize="none" autocorrect="off" pattern="{{signupForm.controls.email.value}}"></ion-input>
+                <core-input-errors item-content [control]="signupForm.controls.email2" [errorMessages]="email2Errors"></core-input-errors>
+            </ion-item>
+            <ion-item *ngFor="let nameField of settings.namefields" text-wrap>
+                <ion-label stacked core-mark-required="true">{{ 'core.user.' + nameField | translate }}</ion-label>
+                <ion-input type="text" name="nameField" placeholder="{{ 'core.user.' + nameField | translate }}" formControlName="{{nameField}}" autocorrect="off"></ion-input>
+                <core-input-errors item-content [control]="signupForm.controls[nameField]" [errorMessages]="namefieldsErrors[nameField]"></core-input-errors>
+            </ion-item>
+            <ion-item text-wrap>
+                <ion-label stacked>{{ 'core.user.city' | translate }}</ion-label>
+                <ion-input type="text" name="city" placeholder="{{ 'core.user.city' | translate }}" formControlName="city" autocorrect="off"></ion-input>
+            </ion-item>
+            <ion-item text-wrap>
+                <ion-label stacked id="core-login-signup-country">{{ 'core.user.country' | translate }}</ion-label>
+                <ion-select name="country" formControlName="country" aria-labelledby="core-login-signup-country">
+                    <ion-option value="">{{ 'core.login.selectacountry' | translate }}</ion-option>
+                    <ion-option *ngFor="let key of countriesKeys" [value]="key">{{countries[key]}}</ion-option>
+                </ion-select>
+            </ion-item>
+
+            <!-- Other categories. @todo: Implement once user profile fields are implemented. -->
+            <!-- <div *ngFor="let category in categories">
+                <ion-item-divider text-wrap color="light">{{ category.name }}</div>
+                <mm-user-profile-field *ngFor="let field in category.fields" field="field" edit="true" signup="true" register-auth="email" model="data" scroll-handle="mmLoginEmailSignupScroll"></mm-user-profile-field>
+            </div> -->
+
+            <!-- ReCAPTCHA -->
+            <div *ngIf="settings.recaptchachallengehash && settings.recaptchachallengeimage">
+                <ion-item-divider text-wrap color="light">{{ 'core.login.security_question' | translate }}</ion-item-divider>
+                <ion-item>
+                    <img [src]="settings.recaptchachallengeimage" alt="{{ 'core.login.recaptchachallengeimage' | translate }}">
                 </ion-item>
                 <ion-item text-wrap>
-                    <ion-label stacked core-mark-required="true">{{ 'core.login.password' | translate }}</ion-label>
-                    <core-show-password item-content [name]="'password'">
-                        <ion-input type="password" name="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password"></ion-input>
-                    </core-show-password>
-                    <p *ngIf="settings.passwordpolicy" item-content class="core-input-footnote">
-                        {{settings.passwordpolicy}}
-                    </p>
-                    <core-input-errors item-content [control]="signupForm.controls.password" [errorMessages]="passwordErrors"></core-input-errors>
+                    <ion-label stacked core-mark-required="true">{{ 'core.login.enterthewordsabove' | translate }}</ion-label>
+                    <ion-input type="text" name="recaptcharesponse" placeholder="{{ 'core.login.enterthewordsabove' | translate }}" formControlName="recaptcharesponse" autocapitalize="none" autocorrect="off"></ion-input>
+                    <core-input-errors item-content [control]="signupForm.controls.recaptcharesponse"></core-input-errors>
                 </ion-item>
-
-                <!-- More details. -->
-                <ion-item-divider text-wrap color="light">
-                    {{ 'core.login.supplyinfo' | translate }}
-                </ion-item-divider>
-                <ion-item text-wrap>
-                    <ion-label stacked core-mark-required="true">{{ 'core.user.email' | translate }}</ion-label>
-                    <ion-input type="email" name="email" placeholder="{{ 'core.user.email' | translate }}" formControlName="email" autocapitalize="none" autocorrect="off"></ion-input>
-                    <core-input-errors item-content [control]="signupForm.controls.email" [errorMessages]="emailErrors"></core-input-errors>
-                </ion-item>
-                <ion-item text-wrap>
-                    <ion-label stacked core-mark-required="true">{{ 'core.user.emailagain' | translate }}</ion-label>
-                    <ion-input type="email" name="email2" placeholder="{{ 'core.user.emailagain' | translate }}" formControlName="email2" autocapitalize="none" autocorrect="off" pattern="{{signupForm.controls.email.value}}"></ion-input>
-                    <core-input-errors item-content [control]="signupForm.controls.email2" [errorMessages]="email2Errors"></core-input-errors>
-                </ion-item>
-                <ion-item *ngFor="let nameField of settings.namefields" text-wrap>
-                    <ion-label stacked core-mark-required="true">{{ 'core.user.' + nameField | translate }}</ion-label>
-                    <ion-input type="text" name="nameField" placeholder="{{ 'core.user.' + nameField | translate }}" formControlName="{{nameField}}" autocorrect="off"></ion-input>
-                    <core-input-errors item-content [control]="signupForm.controls[nameField]" [errorMessages]="namefieldsErrors[nameField]"></core-input-errors>
-                </ion-item>
-                <ion-item text-wrap>
-                    <ion-label stacked>{{ 'core.user.city' | translate }}</ion-label>
-                    <ion-input type="text" name="city" placeholder="{{ 'core.user.city' | translate }}" formControlName="city" autocorrect="off"></ion-input>
-                </ion-item>
-                <ion-item text-wrap>
-                    <ion-label stacked id="core-login-signup-country">{{ 'core.user.country' | translate }}</ion-label>
-                    <ion-select name="country" formControlName="country" aria-labelledby="core-login-signup-country">
-                        <ion-option value="">{{ 'core.login.selectacountry' | translate }}</ion-option>
-                        <ion-option *ngFor="let key of countriesKeys" [value]="key">{{countries[key]}}</ion-option>
-                    </ion-select>
-                </ion-item>
-
-                <!-- Other categories. @todo: Implement once user profile fields are implemented. -->
-                <!-- <div *ngFor="let category in categories">
-                    <ion-item-divider text-wrap color="light">{{ category.name }}</div>
-                    <mm-user-profile-field *ngFor="let field in category.fields" field="field" edit="true" signup="true" register-auth="email" model="data" scroll-handle="mmLoginEmailSignupScroll"></mm-user-profile-field>
-                </div> -->
-
-                <!-- ReCAPTCHA -->
-                <div *ngIf="settings.recaptchachallengehash && settings.recaptchachallengeimage">
-                    <ion-item-divider text-wrap color="light">{{ 'core.login.security_question' | translate }}</ion-item-divider>
-                    <ion-item>
-                        <img [src]="settings.recaptchachallengeimage" alt="{{ 'core.login.recaptchachallengeimage' | translate }}">
-                    </ion-item>
-                    <ion-item text-wrap>
-                        <ion-label stacked core-mark-required="true">{{ 'core.login.enterthewordsabove' | translate }}</ion-label>
-                        <ion-input type="text" name="recaptcharesponse" placeholder="{{ 'core.login.enterthewordsabove' | translate }}" formControlName="recaptcharesponse" autocapitalize="none" autocorrect="off"></ion-input>
-                        <core-input-errors item-content [control]="signupForm.controls.recaptcharesponse"></core-input-errors>
-                    </ion-item>
-                    <ion-item padding>
-                        <!-- Use anchor instead of button to prevent marking form as submitted. -->
-                        <a ion-button block (click)="requestCaptcha()">{{ 'core.login.getanothercaptcha' | translate }}</a>
-                    </ion-item>
-                </div>
-
-                <!-- Site policy (if any). -->
-                <div *ngIf="settings.sitepolicy">
-                    <ion-item-divider text-wrap color="light">{{ 'core.login.policyagreement' | translate }}</ion-item-divider>
-                    <ion-item text-wrap>
-                        <p><a [href]="settings.sitepolicy" core-link capture="false">{{ 'core.login.policyagreementclick' | translate }}</a></p>
-                    </ion-item>
-                    <ion-item text-wrap>
-                        <ion-label core-mark-required="true">{{ 'core.login.policyaccept' | translate }}</ion-label>
-                        <ion-checkbox item-right name="policyagreed" formControlName="policyagreed"></ion-checkbox>
-                        <core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors"></core-input-errors>
-                    </ion-item>
-                </div>
-
-                <!-- Submit button. -->
                 <ion-item padding>
-                    <button ion-button block color="primary">{{ 'core.login.createaccount' | translate }}</button>
+                    <!-- Use anchor instead of button to prevent marking form as submitted. -->
+                    <a ion-button block (click)="requestCaptcha()">{{ 'core.login.getanothercaptcha' | translate }}</a>
                 </ion-item>
-            </ion-list>
+            </div>
+
+            <!-- Site policy (if any). -->
+            <div *ngIf="settings.sitepolicy">
+                <ion-item-divider text-wrap color="light">{{ 'core.login.policyagreement' | translate }}</ion-item-divider>
+                <ion-item text-wrap>
+                    <p><a [href]="settings.sitepolicy" core-link capture="false">{{ 'core.login.policyagreementclick' | translate }}</a></p>
+                </ion-item>
+                <ion-item text-wrap>
+                    <ion-label core-mark-required="true">{{ 'core.login.policyaccept' | translate }}</ion-label>
+                    <ion-checkbox item-right name="policyagreed" formControlName="policyagreed"></ion-checkbox>
+                    <core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors"></core-input-errors>
+                </ion-item>
+            </div>
+
+            <!-- Submit button. -->
+            <ion-item padding>
+                <button ion-button block color="primary">{{ 'core.login.createaccount' | translate }}</button>
+            </ion-item>
         </form>
     </core-loading>
 </ion-content>
diff --git a/src/core/login/pages/forgotten-password/forgotten-password.html b/src/core/login/pages/forgotten-password/forgotten-password.html
index 0778e033a..26cf02d2b 100644
--- a/src/core/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/login/pages/forgotten-password/forgotten-password.html
@@ -4,12 +4,14 @@
     </ion-navbar>
 </ion-header>
 <ion-content>
-    <ion-item text-wrap>
-        {{ 'core.login.passwordforgotteninstructions2' | translate }}
-    </ion-item>
+    <ion-list>
+        <ion-item text-wrap>
+            {{ 'core.login.passwordforgotteninstructions2' | translate }}
+        </ion-item>
+    </ion-list>
     <ion-card>
-        <form [formGroup]="myForm" (ngSubmit)="resetPassword()">
-            <ion-item-divider class="mm-bold" text-wrap color="light">
+        <form ion-list [formGroup]="myForm" (ngSubmit)="resetPassword()">
+            <ion-item-divider text-wrap color="light">
                 {{ 'core.login.searchby' | translate }}
             </ion-item-divider>
             <div radio-group formControlName="field">
@@ -23,10 +25,10 @@
                 </ion-item>
             </div>
             <ion-item>
-                <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}" formControlName="value" autocapitalize="none" autocorrect="off"></ion-input>
+                <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}" formControlName="value" autocapitalize="none" autocorrect="off" core-auto-focus></ion-input>
             </ion-item>
-            <ion-item padding text-wrap>
-                <button ion-button block color="primary" [disabled]="!myForm.valid">{{ 'core.courses.search' | translate }}</button>
+            <ion-item>
+                <button text-wrap ion-button block [disabled]="!myForm.valid">{{ 'core.courses.search' | translate }}</button>
             </ion-item>
         </form>
     </ion-card>
diff --git a/src/core/login/pages/init/init.html b/src/core/login/pages/init/init.html
index 8961c1b4e..d0ef72e4a 100644
--- a/src/core/login/pages/init/init.html
+++ b/src/core/login/pages/init/init.html
@@ -1,7 +1,7 @@
 <ion-content>
     <div class="mm-bglogo">
         <div class="mm-logo">
-            <img src="assets/img/logo_white.png"/>
+            <img src="assets/img/splash_logo.png"/>
             <ion-spinner></ion-spinner>
         </div>
     </div>
diff --git a/src/core/login/pages/init/init.scss b/src/core/login/pages/init/init.scss
index f9a6bc26e..ca7f75c5f 100644
--- a/src/core/login/pages/init/init.scss
+++ b/src/core/login/pages/init/init.scss
@@ -1,3 +1,35 @@
 page-core-login-init {
+    .mm-bglogo {
+        background-color: $mm-color-init-screen; /* Change this to add a bg image or change color */
+        background: -webkit-radial-gradient($mm-color-init-screen-alt, $mm-color-init-screen);
+        background: radial-gradient($mm-color-init-screen-alt, $mm-color-init-screen);
+        background-repeat: no-repeat;
+        background-position: center center;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        width: 100%;
+        display: table;
 
+        .mm-logo {
+            display: table-cell;
+            text-align: center;
+            vertical-align: middle;
+        }
+
+        img {
+            width: $mm-init-screen-logo-width;
+            max-width: $mm-init-screen-logo-max-width;
+            display: block;
+            margin: 0 auto;
+            margin-bottom: 30px;
+        }
+
+        .spinner circle {
+            stroke: $mm-init-screen-spinner-color;
+        }
+    }
 }
diff --git a/src/core/login/pages/reconnect/reconnect.html b/src/core/login/pages/reconnect/reconnect.html
index d4b9e386b..beba803e3 100644
--- a/src/core/login/pages/reconnect/reconnect.html
+++ b/src/core/login/pages/reconnect/reconnect.html
@@ -4,8 +4,8 @@
     </ion-navbar>
 </ion-header>
 <ion-content padding class="mm-center-view">
-    <ion-list no-lines class="box">
-        <ion-item *ngIf="site" text-wrap class="item-avatar-center" [ngClass]="{'item-avatar-center': site.avatar, 'text-center': !site.avatar}">
+    <div class="box">
+        <div *ngIf="site" text-wrap text-center [ngClass]="{'item-avatar-center': site.avatar}">
             <ion-avatar *ngIf="site.avatar">
                 <!-- Show user avatar. -->
                 <img [src]="site.avatar" class="avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}" role="presentation">
@@ -13,7 +13,7 @@
 
             <!-- Show site logo or a default image. -->
             <img *ngIf="!site.avatar && logoUrl" [src]="logoUrl" core-external-content [siteId]="site.id" role="presentation">
-            <img *ngIf="!site.avatar && !logoUrl" src="assets/img/logo.png" class="moodle-logo" role="presentation">
+            <img *ngIf="!site.avatar && !logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation">
 
             <!-- If no sitename show big siteurl. -->
             <p *ngIf="!siteName" class="item-heading mm-siteurl">{{siteUrl}}</p>
@@ -24,31 +24,38 @@
             <p *ngIf="!isLoggedOut">
                 <ion-icon padding name="alert"></ion-icon> {{ 'core.login.reconnectdescription' | translate }}
             </p>
-        </ion-item>
-        <ion-item padding text-wrap class="mm-username">
-            <p class="item-heading">{{ 'core.login.username' | translate }}</p>
-            <p>{{username}}</p>
-        </ion-item>
-        <form [formGroup]="credForm" (ngSubmit)="login()">
-            <ion-item>
-                <core-show-password item-content [name]="'password'">
-                    <ion-input class="mm-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" mm-show-password></ion-input>
-                </core-show-password>
+        </div>
+        <ion-list>
+            <ion-item padding text-wrap class="mm-username">
+                <p class="item-heading">{{ 'core.login.username' | translate }}</p>
+                <p>{{username}}</p>
             </ion-item>
-            <ion-buttons class="button-bar">
-                <a ion-button (click)="cancel()">{{ 'core.login.cancel' | translate }}</a>
-                <button ion-button color="primary" [disabled]="!credForm.valid">{{ 'core.login.loginbutton' | translate }}</button>
-            </ion-buttons>
-        </form>
+            <form [formGroup]="credForm" (ngSubmit)="login()">
+                <ion-item>
+                    <core-show-password item-content [name]="'password'">
+                        <ion-input class="mm-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" mm-show-password core-auto-focus></ion-input>
+                    </core-show-password>
+                </ion-item>
+                <ion-grid>
+                    <ion-row>
+                        <ion-col>
+                            <a ion-button block color="light" (click)="cancel()">{{ 'core.login.cancel' | translate }}</a>
+                        </ion-col>
+                        <ion-col>
+                            <button ion-button block [disabled]="!credForm.valid">{{ 'core.login.loginbutton' | translate }}</button>
+                        </ion-col>
+                    </ion-row>
+                </ion-grid>
+            </form>
+        </ion-list>
 
         <!-- Identity providers. -->
-        <div *ngIf="identityProviders && identityProviders.length" padding-top>
-            <p>{{ 'core.login.potentialidps' | translate }}</p>
-            <ion-item *ngFor="let provider of identityProviders" text-wrap class="mm-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
-                <img [src]="provider.iconurl" alt="{{provider.name}}">
-                <span>{{provider.name}}</span>
-                <ion-icon class="icon-accessory" name="arrow-forward" md="ios-arrow-forward" item-end></ion-icon>
-            </ion-item>
-        </div>
-    </ion-list>
+        <ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
+            <ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
+            <button ion-item *ngFor="let provider of identityProviders" text-wrap class="mm-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
+                <img [src]="provider.iconurl" alt="{{provider.name}}" item-start>
+                {{provider.name}}
+            </button>
+        </ion-list>
+    </div>
 </ion-content>
diff --git a/src/core/login/pages/reconnect/reconnect.scss b/src/core/login/pages/reconnect/reconnect.scss
index aa4c48163..38875e77d 100644
--- a/src/core/login/pages/reconnect/reconnect.scss
+++ b/src/core/login/pages/reconnect/reconnect.scss
@@ -1,47 +1,51 @@
 page-core-login-reconnect {
     .content {
-        .mm-ioninput-password {
-            padding-top: 0;
-            padding-bottom: 0;
-        }
         background: -webkit-radial-gradient(white, $gray-light);
         background: radial-gradient(white, $gray-light);
+    }
 
-        img {
-            max-width: 100%;
+    .mm-ioninput-password {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    img.login-logo {
+        width: 90%;
+        max-width: 300px;
+    }
+
+    .box {
+        padding: 16px;
+        margin: 8px;
+        background: $white;
+        border: 1px solid $gray;
+    }
+
+    .mm-sitename, .mm-siteurl {
+        @if $mm-fixed-url { display: none; }
+    }
+
+    .list .mm-username {
+        &.item-md {
+            @include padding-horizontal($item-md-padding-left, $content-padding);
+        }
+        &.item-ios {
+            @include padding-horizontal($item-ios-padding-left, $content-padding);
+        }
+        &.item-wp {
+            @include padding-horizontal($item-wp-padding-left, $content-padding);
         }
 
-        img.moodle-logo {
-            width: 90%;
-            max-width: 300px;
-        }
-
-        .box {
-            padding: 16px;
-            background: $white;
-            border: 1px solid $gray;
-        }
-
-        .mm-sitename, .mm-siteurl {
-            @if $mm-fixed-url { display: none; }
-        }
-
-        .list .item-input, .list .mm-username {
-            border: 1px solid $list-border-color;
-            margin-bottom: 20px;
-
-            .label {
-                margin: 0;
-            }
-        }
-
-        .list .mm-username {
-            &.item-md {
-                @include padding-horizontal($item-md-padding-left * 1.5, $content-padding);
-            }
-            &.item-ios {
-                @include padding-horizontal($item-ios-padding-left * 1.5, $content-padding);
-            }
+        .item-inner {
+            padding-left: 8px;
         }
     }
+
+    .item-input {
+        margin-bottom: 20px;
+    }
 }
diff --git a/src/core/login/pages/site/site.html b/src/core/login/pages/site/site.html
index f62d3969c..d8f15beac 100644
--- a/src/core/login/pages/site/site.html
+++ b/src/core/login/pages/site/site.html
@@ -9,13 +9,12 @@
         </ion-buttons>
     </ion-navbar>
 </ion-header>
-<ion-content id="mm-login-site" class="mm-center-view">
-    <form class="mm-view-content" [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl)">
-        <ion-list class="box">
-            <div class="text-center" padding>
-                <img src="assets/img/logo.png" class="avatar-full moodle-logo" role="presentation">
-            </div>
-
+<ion-content class="mm-center-view">
+    <div class="box">
+        <div text-center padding>
+            <img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation">
+        </div>
+        <form ion-list no-lines [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl)">
             <!-- Form to input the site URL if there are no fixed sites. -->
             <div *ngIf="!fixedSites">
                 <p padding>{{ 'core.login.newsitedescription' | translate }}</p>
@@ -42,9 +41,7 @@
                 </div>
             </div>
 
-            <div *ngIf="!fixedSites || !displayAsButtons">
-                <button ion-button block color="primary" [disabled]="!siteForm.valid">{{ 'core.login.connect' | translate }}</button>
-            </div>
-        </ion-list>
-    </form>
+            <button *ngIf="!fixedSites || !displayAsButtons" ion-button block [disabled]="!siteForm.valid">{{ 'core.login.connect' | translate }}</button>
+        </form>
+    </div>
 </ion-content>
diff --git a/src/core/login/pages/site/site.scss b/src/core/login/pages/site/site.scss
index e2f5f80af..c6f367d47 100644
--- a/src/core/login/pages/site/site.scss
+++ b/src/core/login/pages/site/site.scss
@@ -2,24 +2,21 @@ page-core-login-site {
     .content {
         background: -webkit-radial-gradient(white, $gray-light);
         background: radial-gradient(white, $gray-light);
+    }
 
-        img {
-            max-width: 100%;
-        }
+    img.login-logo {
+        width: 90%;
+        max-width: 300px;
+    }
 
-        img.moodle-logo {
-            width: 90%;
-            max-width: 300px;
-        }
+    .box {
+        padding: 16px;
+        margin: 8px;
+        background: $white;
+        border: 1px solid $gray;
+    }
 
-        .box {
-            padding: 16px;
-            background: $white;
-            border: 1px solid $gray;
-        }
-
-        .item-input {
-            border: 1px solid $list-border-color;
-        }
+    .item-input:last-child {
+        margin-bottom: 20px;
     }
 }
diff --git a/src/core/login/pages/sites/sites.html b/src/core/login/pages/sites/sites.html
index cbab72da6..f4fd0baf9 100644
--- a/src/core/login/pages/sites/sites.html
+++ b/src/core/login/pages/sites/sites.html
@@ -6,25 +6,27 @@
             <button *ngIf="sites && sites.length > 0" ion-button icon-only (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
                 <ion-icon name="create" ios="md-create"></ion-icon>
             </button>
-            <button ion-button icon-only (click)="add()" [attr.aria-label]="'core.add' | translate">
-                <ion-icon name="add"></ion-icon>
-            </button>
         </ion-buttons>
     </ion-navbar>
 </ion-header>
 <ion-content>
     <ion-list>
-            <ion-item (click)="login(site.id)" *ngFor="let site of sites; let idx = index">
-                <ion-avatar item-start>
-                    <img [src]="site.avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}" role="presentation">
-                </ion-avatar>
-                <h2>{{site.fullName}}</h2>
-                <p><core-format-text [text]="site.siteName" clean="true" watch="true" [siteId]="site.id"></core-format-text></p>
-                <p>{{site.siteUrl}}</p>
-                <ion-badge item-end *ngIf="!showDelete && site.badge">{{site.badge}}</ion-badge>
-                <button *ngIf="showDelete" item-end ion-button icon-only clear color="danger" (click)="deleteSite($event, idx)" [attr.aria-label]="'core.delete' | translate">
-                    <ion-icon name="trash"></ion-icon>
-                </button>
-            </ion-item>
+        <ion-item (click)="login(site.id)" *ngFor="let site of sites; let idx = index">
+            <ion-avatar item-start>
+                <img [src]="site.avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}" role="presentation">
+            </ion-avatar>
+            <h2>{{site.fullName}}</h2>
+            <p><core-format-text [text]="site.siteName" clean="true" watch="true" [siteId]="site.id"></core-format-text></p>
+            <p>{{site.siteUrl}}</p>
+            <ion-badge item-end *ngIf="!showDelete && site.badge">{{site.badge}}</ion-badge>
+            <button *ngIf="showDelete" item-end ion-button icon-only clear color="danger" (click)="deleteSite($event, idx)" [attr.aria-label]="'core.delete' | translate">
+                <ion-icon name="trash"></ion-icon>
+            </button>
+        </ion-item>
     </ion-list>
+    <ion-fab bottom right>
+        <button ion-fab (click)="add()" [attr.aria-label]="'core.add' | translate">
+            <ion-icon name="add"></ion-icon>
+        </button>
+    </ion-fab>
 </ion-content>
diff --git a/src/core/login/pages/sites/sites.scss b/src/core/login/pages/sites/sites.scss
index 7bb74215b..d8143d4b7 100644
--- a/src/core/login/pages/sites/sites.scss
+++ b/src/core/login/pages/sites/sites.scss
@@ -1,3 +1,5 @@
 page-core-login-sites {
-
+    .item-button[icon-only] ion-icon {
+        font-size: 2.3em;
+    }
 }
diff --git a/src/theme/bmma.scss b/src/theme/bmma.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 7295c1f41..7aff83671 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -14,7 +14,6 @@ $app-direction: ltr;
 
 @import "ionic.globals";
 
-
 // Color palette
 $black:           #3a3a3a; // Headings, standard text.
 $gray-darker:     #626262; // Text (emphasis-detail), placeholder, background.
@@ -47,6 +46,10 @@ $yellow:          #fbad1a; // Accent (never text).
 $yellow-light:    mix($yellow, white, 20%);
 $yellow-dark:     mix($yellow, black, 40%);
 
+$mm-color:          $orange;
+$mm-color-light:    lighten($mm-color, 10%);
+$mm-color-dark:     darken($mm-color, 10%);
+
 
 // Shared Variables
 // --------------------------------------------------
@@ -69,33 +72,80 @@ $content-padding: 10px;
 // The "primary" color is the only required color in the map.
 
 $colors: (
-  primary:    #488aff,
-  secondary:  #32db64,
-  danger:     #f53d3d,
-  light:      #f4f4f4,
-  dark:       #222
+  primary:    $mm-color,
+  secondary:  $turquoise,
+  danger:     $red,
+  light:      $gray-lighter,
+  dark:       $black,
+  warning:    $yellow
 );
 
+$text-color:                 $black;
+$link-color:                 $blue;
+$background-color:           $gray-light;
+$subdued-text-color:         $gray-darker;
+
+$list-background-color:      $white;
+
+$tabs-background:            $gray-darker;
+$tabs-border-color:          #b2b2b2 !default;
+$tabs-tab-color-inactive:    #8c8c8c !default;
+$tabs-tab-color-active:      $mm-color;
+
+$text-input-highlight-color-valid: $green;
+$text-input-highlight-color-invalid: $red;
+
+$button-md-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) ;
+
+
+// Moodle Mobile variables
+// --------------------------------------------------
+
+// Variables copied from Ionic 1.
+$item-icon-accessory-color:       #ccc !default;
+$item-icon-accessory-font-size:   16px !default;
+
+// Init screen.
+$mm-color-init-screen:          #ff5c00;
+$mm-color-init-screen-alt:      #ff7600;
+$mm-init-screen-spinner-color:  $white;
+$mm-init-screen-logo-width:     60%;
+$mm-init-screen-logo-max-width: 300px;
+
+$mm-fixed-url:                  false;
+
+
+// Branded apps customization
+// --------------------------------------------------
+@import "bmma";
+
 
 // App iOS Variables
 // --------------------------------------------------
 // iOS only Sass variables can go here
 
-
+$text-input-ios-show-focus-highlight: false;
+$mm-text-input-ios-show-highlight: false;
+$item-ios-avatar-size: 54px;
 
 
 // App Material Design Variables
 // --------------------------------------------------
 // Material Design only Sass variables can go here
 
-
+$text-input-md-show-focus-highlight: false;
+$mm-text-input-md-show-highlight: true;
+$item-md-detail-push-show: true;
+$item-md-avatar-size: 54px;
 
 
 // App Windows Variables
 // --------------------------------------------------
 // Windows only Sass variables can go here
 
-
+$text-input-wp-show-focus-highlight: true;
+$item-wp-detail-push-show: true;
+$item-wp-avatar-size: 54px;
 
 
 // App Theme
@@ -121,20 +171,3 @@ $colors: (
 
 @import "roboto";
 @import "noto-sans";
-
-
-// Moodle Mobile variables
-// --------------------------------------------------
-
-// Variables copied from Ionic 1.
-$item-icon-accessory-color:       #ccc !default;
-$item-icon-accessory-font-size:   16px !default;
-
-// Init screen.
-$mm-color-init-screen:          #ff5c00;
-$mm-color-init-screen-alt:      #ff7600;
-$mm-init-screen-spinner-color:  $white;
-$mm-init-screen-logo-width:     60%;
-$mm-init-screen-logo-max-width: 300px;
-
-$mm-fixed-url:                  false;