MOBILE-3627 core: Some style fixes

src/addons/calendar/components/calendar/calendar.scss

@@ -10,6 +10,7 @@
     .addon-calendar-months {
         background-color: var(--contrast-background);
         padding: 0;
+        font-size: 14px;
     }
 
     .addon-calendar-day {

src/addons/messages/messages-common.scss

@@ -11,12 +11,12 @@
             }
         }
 
-        .note {
+        ion-note {
-            position: absolute;
+            ion-badge {
-            top: 0;
+                margin-left: 6px;
-            right: 0;
+                margin-right: 6px;
-            margin:  4px 8px;
+                vertical-align: middle;
-            font-size: 1.3rem;
+            }
         }
 
         .addon-message-last-message {
@@ -43,6 +43,11 @@
             margin-top: 10px;
         }
     }
+
+    ion-item-divider ion-badge {
+        margin-left: 16px;
+        margin-right: 16px;
+    }
 }
 
 :host-context([dir=rtl]) {
@@ -53,11 +58,6 @@
             margin-left: 0;
         }
 
-        .note {
-            left: 0;
-            right: unset;
-        }
-
         .addon-message-last-message-user {
             margin-left: 2px;
             margin-right: 0;

src/addons/messages/pages/group-conversations/group-conversations.html

@@ -123,10 +123,6 @@
                 <ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
                     [title]="'addon.messages.mutedconversation' | translate"></ion-icon>
             </h2>
-            <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
-                <ion-badge *ngIf="conversation.unreadcount > 0">{{ conversation.unreadcount }}</ion-badge>
-                <span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
-            </ion-note>
             <p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname" contextLevel="system"
                 [contextInstanceId]="0"></core-format-text></p>
             <p class="addon-message-last-message">
@@ -139,5 +135,9 @@
                     class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text>
             </p>
         </ion-label>
+        <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount" slot="end">
+            <ion-badge *ngIf="conversation.unreadcount > 0">{{ conversation.unreadcount }}</ion-badge>
+            <span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
+        </ion-note>
     </ion-item>
 </ng-template>

src/addons/mod/forum/components/index/index.scss

@@ -55,9 +55,8 @@
             flex-grow: 1;
         }
 
-        .addon-mod-forum-discussion-more-info {
+        .addon-mod-forum-discussion-more-info.ios {
-            font-size: 1.4rem;
+            font-size: 0.9rem;
-            clear: both;
         }
 
     }

src/addons/notifications/components/components.module.ts

@@ -13,9 +13,7 @@
 // limitations under the License.
 
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CoreSharedModule } from '@/core/shared.module';
-import { IonicModule } from '@ionic/angular';
-import { TranslateModule } from '@ngx-translate/core';
 
 import { AddonNotificationsActionsComponent } from './actions/actions';
 
@@ -24,9 +22,7 @@ import { AddonNotificationsActionsComponent } from './actions/actions';
         AddonNotificationsActionsComponent,
     ],
     imports: [
-        CommonModule,
+        CoreSharedModule,
-        IonicModule,
-        TranslateModule.forChild(),
     ],
     exports: [
         AddonNotificationsActionsComponent,

src/core/components/split-view/split-view.scss

@@ -70,7 +70,7 @@
     --menu-border-width: 0;
     --menu-box-shadow: none;
     --menu-z: 0;
-    --selected-item-border-width: 0;
+    --selected-item-color: transparent;
 }
 
 :host(.content-only) {

src/core/features/mainmenu/pages/menu/menu.scss

@@ -29,6 +29,7 @@
             height: 100%;
             flex-direction: column;
             ion-tab-button {
+                display: contents;
                 width: 100%;
                 ion-badge {
                     top: calc(50% - 20px);

src/theme/theme.base.scss

@@ -136,6 +136,11 @@ ion-item-divider {
         opacity: 0.25;
         padding-inline-end: 16px;
     }
+
+    &.ios {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
 }
 
 // Ionic list.
@@ -371,8 +376,13 @@ ion-select.core-button-select,
         margin-inline-end: auto;
     }
 
+    &.ion-activated {
+        --color: var(--ion-color-primary-contrast);
+    }
+
 }
 ion-button.core-button-select {
+    --border-radius: 0;
     &::part(native) {
         text-transform: none;
         font-weight: 400;