Merge pull request #2842 from crazyserver/MOBILE-3320

Mobile 3320

src/addons/messageoutput/airnotifier/pages/devices/devices.html

@@ -12,10 +12,13 @@
     </ion-refresher>
     <core-loading [hideUntil]="devicesLoaded">
         <ion-list>
-            <ion-item class="ion-text-wrap" *ngFor="let device of devices">
+            <ion-item class="ion-text-wrap" *ngFor="let device of devices" [class.item-current]="device.current">
                 <ion-label [class.core-bold]="device.current">
-                    {{ device.name }} {{ device.model }} {{ device.platform }} {{ device.version }}
-                    <span *ngIf="device.current">({{ 'core.currentdevice' | translate }})</span>
+                    <p class="item-heading">
+                        {{ device.name }} {{ device.model }}
+                        <span *ngIf="device.current">({{ 'core.currentdevice' | translate }})</span>
+                    </p>
+                    <p>{{ device.platform }} {{ device.version }}</p>
                 </ion-label>
                 <core-button-with-spinner [loading]="device.updating" slot="end">
                     <ion-toggle

src/addons/messageoutput/airnotifier/pages/devices/devices.ts

@@ -74,7 +74,12 @@ export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestr
             device.current = !!(pushId && pushId == device.pushid);
         });
 
-        return formattedDevices;
+        return formattedDevices.sort((a, b) => {
+            const compareA = a.name.toLowerCase();
+            const compareB = b.name.toLowerCase();
+
+            return compareA.localeCompare(compareB);
+        });
     }
 
     /**

src/core/components/tabs-outlet/core-tabs-outlet.html

@@ -28,13 +28,15 @@
                                 [tabindex]="selected == tab.id ? 0 : -1"
                             >
                                 <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
-                                <ion-label>{{ tab.title | translate}}</ion-label>
-                                <ion-badge *ngIf="tab.badge">
-                                    <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
-                                    <span *ngIf="tab.badgeA11yText" class="sr-only">
-                                        {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
-                                    </span>
-                                </ion-badge>
+                                <ion-label>
+                                    {{ tab.title | translate}}
+                                    <ion-badge *ngIf="tab.badge">
+                                        <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
+                                        <span *ngIf="tab.badgeA11yText" class="sr-only">
+                                            {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
+                                        </span>
+                                    </ion-badge>
+                                </ion-label>
                             </ion-tab-button>
                         </ion-slide>
                     </ng-container>

src/core/components/tabs/core-tabs.html

@@ -27,13 +27,15 @@
                             [tabindex]="selected == tab.id ? 0 : -1"
                         >
                             <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
-                            <ion-label>{{ tab.title | translate}}</ion-label>
-                            <ion-badge *ngIf="tab.badge">
-                                <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
-                                <span *ngIf="tab.badgeA11yText" class="sr-only">
-                                    {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
-                                </span>
-                            </ion-badge>
+                            <ion-label>
+                                {{ tab.title | translate}}
+                                <ion-badge *ngIf="tab.badge">
+                                    <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
+                                    <span *ngIf="tab.badgeA11yText" class="sr-only">
+                                        {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
+                                    </span>
+                                </ion-badge>
+                            </ion-label>
                         </ion-tab-button>
                     </ion-slide>
                 </ng-container>

src/theme/components/format-text.scss

@@ -366,7 +366,7 @@ core-rich-text-editor .core-rte-editor {
     input[type=checkbox] {
         position: relative;
 
-        --color: var(--brand-color-contrast);
+        --color: var(--text-color);
         --color-checked: var(--color);
 
         width: var(--size);

src/theme/globals.variables.scss

@@ -37,12 +37,12 @@ $text-color-dark-rgb:      color-to-rgb-list($text-color-dark) !default;
 
 $background-color:          $gray-light !default;
 $background-color-rgb:      color-to-rgb-list($background-color) !default;
-$background-color-dark:     mix(#ffffff, #000000, 90%) !default; // #1a1a1a
+$background-color-dark:     mix(#ffffff, #000000, 10%) !default; // #1a1a1a
 $background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default;
 
 $ion-item-background:      $white !default;
 $ion-item-background-rgb:  color-to-rgb-list($ion-item-background) !default;
-$ion-item-background-dark: mix(#ffffff, #000000, 80%) !default; // #333333
+$ion-item-background-dark: mix(#ffffff, #000000, 20%) !default; // #333333
 $ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default;
 
 $primary:    $brand-color !default;

src/theme/theme.base.scss

@@ -273,7 +273,7 @@ button,
 
 // Clear buttons will be black.
 ion-button.button-clear {
-    --ion-color-primary: var(--brand-color-contrast);
+    --ion-color-primary: var(--brand-color);
 }
 
 [role="button"],
@@ -357,7 +357,7 @@ ion-alert .alert-message {
 }
 
 ion-alert .alert-wrapper button.alert-button {
-    color: var(--brand-color-contrast);
+    color: var(--brand-color);
 }
 
 // Ionic list.
@@ -423,7 +423,8 @@ ion-toolbar {
 }
 
 // Item styles
-[aria-current="page"] {
+[aria-current="page"],
+.item.item-current {
     // TODO: Add safe area to border and RTL
     --ion-safe-area-left: calc(-1 * var(--selected-item-border-width));
     border-inline-start: var(--selected-item-border-width) solid var(--selected-item-color);
@@ -583,7 +584,7 @@ ion-toolbar h1 .core-bar-button-image img {
 // Radio.
 ion-radio,
 input[type=radio] {
-    --color: var(--brand-color-contrast);
+    --color: var(--text-color);
     --color-checked: var(--color);
     --border-radius: 50%;
     --border-width: 2px;
@@ -637,8 +638,8 @@ input[type=radio] {
 ion-checkbox,
 input[type=checkbox] {
     --border-radius: 2px;
-    --border-color-checked: var(--brand-color-contrast);
-    --background-checked: var(--brand-color-contrast);
+    --border-color-checked: var(--text-color);
+    --background-checked: var(--text-color);
     --checkmark-color: var(--contrast-background);
     --border-width: 2px;
     --outer-border-width: 2px;

src/theme/theme.dark.scss

@@ -76,6 +76,8 @@
     --core-header-toolbar-color:        var(--white);
 
     --core-tabs-background: var(--ion-color-step-200);
+    --core-tab-background: var(--core-tabs-background);
+    --core-tab-color: var(--subdued-text-color);
     --core-tab-border-color: var(--gray-light);
     --core-tab-color-active: var(--dark);
 
@@ -84,8 +86,10 @@
     --ion-item-background: #{$ion-item-background-dark};
     --ion-item-detail-icon-color: var(--white);
     --item-divider-background: var(--ion-color-step-200);
-    --spacer-background: var(--ion-color-step-1000);
+    --item-divider-color: var(--text-color);
+    --spacer-background: var(--ion-color-step-0);
 
+    --core-combobox-background: var(--ion-item-background);
     --core-combobox-color: var(--white);
 
     --core-login-background: var(--black);