MOBILE-2253 login: Improve styles

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);
+    }
+  }
+}

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);
+    }
+  }
+}

src/app/app.scss

@@ -22,60 +22,22 @@
 .text-left           { text-align: left; }
 .text-right          { text-align: right; }
 .text-center         { text-align: center; }
-
+.text-justify        { text-align: justify; }
-/**
- * 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;
-    }
-}
 
 
 @media only screen and (min-width: 430px) {
   .mm-center-view .scroll-content {
+    display: flex!important;
+    align-content: center !important;
+    align-items: center !important;
+    > * {
       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.
     }
   }
 }
 
+
 // 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);
+  min-height: 32px;
-  border: 1px solid $list-border-color;
+  img, .label {
-
-  img, span {
     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 {
+// Avatar
-  width: 100%;
+// -------------------------
-  padding-top: 10px;
+// Large centered avatar
-  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.
 .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;
+}
+

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);
+}

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>

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;
+            }
         }
     }
 }

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%;

src/components/show-password/show-password.scss

@@ -3,11 +3,12 @@ core-show-password {
     width: 100%;
     position: relative;
 
-    ion-input {
+    ion-input input.text-input {
-        padding-right: 47 + $content-padding;
+        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 {
+.md {
-    .button[icon-only] {
+    .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;
+    }
+}

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">
+<ion-content class="mm-center-view">
-    <core-loading [hideUntil]="pageLoaded" class="mm-view-content">
+    <core-loading [hideUntil]="pageLoaded">
-        <ion-list no-lines class="box">
+        <div class="box">
-            <ion-item text-wrap class="text-center">
+            <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>
+            </div>
-            <form [formGroup]="credForm" (ngSubmit)="login()">
+            <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>
+            <ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
-                <p>{{ 'core.login.potentialidps' | translate }}</p>
+                <ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
-                <ion-item *ngFor="let provider of identityProviders" text-wrap class="mm-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
+                <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}}">
+                    <img [src]="provider.iconurl" alt="{{provider.name}}" item-start>
-                    <span>{{provider.name}}</span>
+                    {{provider.name}}
-                    <ion-icon class="icon-accessory" name="arrow-forward" md="ios-arrow-forward" item-end></ion-icon>
+                </button>
-                </ion-item>
+            </ion-list>
-            </div>
 
-            <div *ngIf="canSignup">
+            <ion-list *ngIf="canSignup" padding-top>
-                <ion-item text-wrap>
+                <ion-list-header text-wrap>{{ 'core.login.firsttime' | translate }}</ion-list-header>
-                    <p class="item-heading">{{ 'core.login.firsttime' | translate }}</p>
+                <ion-item no-lines text-wrap *ngIf="authInstructions">
-                    <p *ngIf="authInstructions"><core-format-text [text]="authInstructions"></core-format-text></p>
+                    <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>
+        </div>
     </core-loading>
 </ion-content>

src/core/login/pages/credentials/credentials.scss

@@ -1,23 +1,26 @@
 page-core-login-credentials {
     .content {
+        background: -webkit-radial-gradient(white, $gray-light);
+        background: radial-gradient(white, $gray-light);
+    }
+
     .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%;
     }
 
-        img.moodle-logo {
+    img.login-logo {
         width: 90%;
         max-width: 300px;
     }
 
     .box {
         padding: 16px;
+        margin: 8px;
         background: $white;
         border: 1px solid $gray;
     }
@@ -26,9 +29,7 @@ page-core-login-credentials {
         @if $mm-fixed-url { display: none; }
     }
 
-        .list .item-input {
+    .item-input {
-            border: 1px solid $list-border-color;
         margin-bottom: 20px;
     }
-    }
 }

src/core/login/pages/email-signup/email-signup.html

@@ -15,9 +15,8 @@
     </ion-refresher>
 
     <core-loading [hideUntil]="settingsLoaded">
-        <form *ngIf="settingsLoaded && settings" [formGroup]="signupForm" (ngSubmit)="create()" class="list list-inset">
+        <form ion-list *ngIf="settingsLoaded && settings" [formGroup]="signupForm" (ngSubmit)="create()" class="list list-inset">
-            <ion-list>
+            <ion-item text-wrap text-center>
-                <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. -->
@@ -116,7 +115,6 @@
             <ion-item padding>
                 <button ion-button block color="primary">{{ 'core.login.createaccount' | translate }}</button>
             </ion-item>
-            </ion-list>
         </form>
     </core-loading>
 </ion-content>

src/core/login/pages/forgotten-password/forgotten-password.html

@@ -4,12 +4,14 @@
     </ion-navbar>
 </ion-header>
 <ion-content>
+    <ion-list>
         <ion-item text-wrap>
             {{ 'core.login.passwordforgotteninstructions2' | translate }}
         </ion-item>
+    </ion-list>
     <ion-card>
-        <form [formGroup]="myForm" (ngSubmit)="resetPassword()">
+        <form ion-list [formGroup]="myForm" (ngSubmit)="resetPassword()">
-            <ion-item-divider class="mm-bold" text-wrap color="light">
+            <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>
+            <ion-item>
-                <button ion-button block color="primary" [disabled]="!myForm.valid">{{ 'core.courses.search' | translate }}</button>
+                <button text-wrap ion-button block [disabled]="!myForm.valid">{{ 'core.courses.search' | translate }}</button>
             </ion-item>
         </form>
     </ion-card>

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>

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;
+        }
+    }
 }

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">
+    <div class="box">
-        <ion-item *ngIf="site" text-wrap class="item-avatar-center" [ngClass]="{'item-avatar-center': site.avatar, 'text-center': !site.avatar}">
+        <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,7 +24,8 @@
             <p *ngIf="!isLoggedOut">
                 <ion-icon padding name="alert"></ion-icon> {{ 'core.login.reconnectdescription' | translate }}
             </p>
-        </ion-item>
+        </div>
+        <ion-list>
             <ion-item padding text-wrap class="mm-username">
                 <p class="item-heading">{{ 'core.login.username' | translate }}</p>
                 <p>{{username}}</p>
@@ -32,23 +33,29 @@
             <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>
+                        <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-buttons class="button-bar">
+                <ion-grid>
-                <a ion-button (click)="cancel()">{{ 'core.login.cancel' | translate }}</a>
+                    <ion-row>
-                <button ion-button color="primary" [disabled]="!credForm.valid">{{ 'core.login.loginbutton' | translate }}</button>
+                        <ion-col>
-            </ion-buttons>
+                            <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>
+        <ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
-            <p>{{ 'core.login.potentialidps' | translate }}</p>
+            <ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
-            <ion-item *ngFor="let provider of identityProviders" text-wrap class="mm-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
+            <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}}">
+                <img [src]="provider.iconurl" alt="{{provider.name}}" item-start>
-                <span>{{provider.name}}</span>
+                {{provider.name}}
-                <ion-icon class="icon-accessory" name="arrow-forward" md="ios-arrow-forward" item-end></ion-icon>
+            </button>
-            </ion-item>
-        </div>
         </ion-list>
+    </div>
 </ion-content>

src/core/login/pages/reconnect/reconnect.scss

@@ -1,23 +1,26 @@
 page-core-login-reconnect {
     .content {
+        background: -webkit-radial-gradient(white, $gray-light);
+        background: radial-gradient(white, $gray-light);
+    }
+
     .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%;
     }
 
-        img.moodle-logo {
+    img.login-logo {
         width: 90%;
         max-width: 300px;
     }
 
     .box {
         padding: 16px;
+        margin: 8px;
         background: $white;
         border: 1px solid $gray;
     }
@@ -26,22 +29,23 @@ page-core-login-reconnect {
         @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);
+            @include padding-horizontal($item-md-padding-left, $content-padding);
         }
         &.item-ios {
-                @include padding-horizontal($item-ios-padding-left * 1.5, $content-padding);
+            @include padding-horizontal($item-ios-padding-left, $content-padding);
+        }
+        &.item-wp {
+            @include padding-horizontal($item-wp-padding-left, $content-padding);
+        }
+
+        .item-inner {
+            padding-left: 8px;
         }
     }
+
+    .item-input {
+        margin-bottom: 20px;
     }
 }

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">
+<ion-content class="mm-center-view">
-    <form class="mm-view-content" [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl)">
+    <div class="box">
-        <ion-list class="box">
+        <div text-center padding>
-            <div class="text-center" padding>
+            <img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation">
-                <img src="assets/img/logo.png" class="avatar-full moodle-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 *ngIf="!fixedSites || !displayAsButtons" ion-button block [disabled]="!siteForm.valid">{{ 'core.login.connect' | translate }}</button>
-                <button ion-button block color="primary" [disabled]="!siteForm.valid">{{ 'core.login.connect' | translate }}</button>
-            </div>
-        </ion-list>
         </form>
+    </div>
 </ion-content>

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.moodle-logo {
+    img.login-logo {
         width: 90%;
         max-width: 300px;
     }
 
     .box {
         padding: 16px;
+        margin: 8px;
         background: $white;
         border: 1px solid $gray;
     }
 
-        .item-input {
+    .item-input:last-child {
-            border: 1px solid $list-border-color;
+        margin-bottom: 20px;
-        }
     }
 }

src/core/login/pages/sites/sites.html

@@ -6,9 +6,6 @@
             <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>
@@ -27,4 +24,9 @@
             </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>

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;
+    }
 }

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,
+  primary:    $mm-color,
-  secondary:  #32db64,
+  secondary:  $turquoise,
-  danger:     #f53d3d,
+  danger:     $red,
-  light:      #f4f4f4,
+  light:      $gray-lighter,
-  dark:       #222
+  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;