MOBILE-2567 ux: Style select

src/app/app.scss

@@ -374,6 +374,13 @@ ion-app.app-root {
     @include core-headings();
   }
 
+  .item core-format-text,
+  core-format-text {
+    p {
+      margin-bottom: 1rem;
+    }
+  }
+
   // Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
   ion-card core-format-text img {
     width: min-content;
@@ -417,10 +424,19 @@ ion-app.app-root {
       }
   }
 
-  :not(.item) > * > * > ion-select,
+  ion-select {
+    color: $core-select-placeholder-color;
+    align-self: start;
+
+    .select-icon .select-icon-inner {
+      color: $core-select-placeholder-color;
+    }
+  }
+
+  ion-select.core-button-select,
   .core-button-select {
     background-color: white;
-    color: $core-color;
+    color: $core-select-placeholder-color;
     white-space: normal;
     align-self: start;
     max-width: none;
@@ -452,7 +468,7 @@ ion-app.app-root {
     }
 
     .select-icon .select-icon-inner {
-      color: $core-color;
+      color: $core-select-placeholder-color;
     }
 
     ion-icon:last-child {

src/core/courses/pages/my-overview/my-overview.html

@@ -37,7 +37,7 @@
                     <core-loading [hideUntil]="courses.loaded" class="core-loading-center">
                         <!-- "Time" selector. -->
                         <div padding class="clearfix" [hidden]="showFilter" ion-row justify-content-between>
-                            <ion-select float-start [title]="'core.show' | translate" [(ngModel)]="courses.selected" ion-col (ngModelChange)="selectedChanged()" interface="popover">
+                            <ion-select float-start [title]="'core.show' | translate" [(ngModel)]="courses.selected" ion-col (ngModelChange)="selectedChanged()" interface="popover" class="core-button-select">
                                 <ion-option value="inprogress">{{ 'core.courses.inprogress' | translate }}</ion-option>
                                 <ion-option value="future">{{ 'core.courses.future' | translate }}</ion-option>
                                 <ion-option value="past">{{ 'core.courses.past' | translate }}</ion-option>
@@ -82,7 +82,7 @@
                     </ion-refresher>
 
                     <div padding [hidden]="!(timeline.loaded || timelineCourses.loaded)">
-                        <ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()" interface="popover">
+                        <ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()" interface="popover" class="core-button-select">
                             <ion-option value="sortbydates">{{ 'core.courses.sortbydates' | translate }}</ion-option>
                             <ion-option value="sortbycourses">{{ 'core.courses.sortbycourses' | translate }}</ion-option>
                         </ion-select>

src/theme/variables.scss

@@ -135,6 +135,7 @@ $core-login-box-background-border: $gray !default;
 $core-login-box-text-color: $text-color !default;
 $core-login-button-outline: false !default;
 $core-login-loading-color: false !default;
+$core-select-placeholder-color: $core-color;
 
 // App iOS Variables
 // --------------------------------------------------
@@ -149,6 +150,7 @@ $tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
 $button-ios-outline-background-color: $core-button-outline-background-color;
 $toolbar-ios-height: 44px + 8; // Avoid toolbar with different heights.
 $checkbox-ios-icon-border-radius: 0px !default;
+$select-ios-placeholder-color: $core-select-placeholder-color;
 $radio-ios-disabled-opacity: .5 !default;
 $checkbox-ios-disabled-opacity: .5 !default;
 $toggle-ios-disabled-opacity: .5 !default;
@@ -166,6 +168,7 @@ $spinner-md-crescent-color: $core-spinner-color;
 $tabs-md-tab-color-inactive: $tabs-tab-color-inactive;
 $button-md-outline-background-color: $core-button-outline-background-color;
 $font-family-md-base: "Roboto", "Noto Sans", "Helvetica Neue", sans-serif !default;
+$select-md-placeholder-color: $core-select-placeholder-color;
 $radio-md-disabled-opacity: .5 !default;
 $checkbox-md-disabled-opacity: .5 !default;
 $toggle-md-disabled-opacity: .5 !default;
@@ -181,6 +184,7 @@ $loading-wp-spinner-color: $core-loading-spinner-color;
 $spinner-wp-circles-color: $core-spinner-color;
 $tabs-wp-tab-color-inactive: $tabs-tab-color-inactive;
 $button-wp-outline-background-color: $core-button-outline-background-color;
+$select-wp-placeholder-color: $core-select-placeholder-color;
 $radio-wp-disabled-opacity: .5 !default;
 $checkbox-wp-disabled-opacity: .5 !default;
 $toggle-wp-disabled-opacity: .5 !default;