Merge pull request #4057 from crazyserver/MOBILE-4470

Mobile 4470

scripts/langindex.json

@@ -926,7 +926,6 @@
   "addon.mod_quiz.overduemustbesubmittedby": "quiz",
   "addon.mod_quiz.preview": "quiz",
   "addon.mod_quiz.previewquiznow": "quiz",
-  "addon.mod_quiz.question": "quiz",
   "addon.mod_quiz.quiznavigation": "quiz",
   "addon.mod_quiz.quizpassword": "quizaccess_password",
   "addon.mod_quiz.reattemptquiz": "quiz",
@@ -943,7 +942,6 @@
   "addon.mod_quiz.stateinprogress": "quiz",
   "addon.mod_quiz.stateoverdue": "quiz",
   "addon.mod_quiz.stateoverduedetails": "quiz",
-  "addon.mod_quiz.status": "quiz",
   "addon.mod_quiz.submission_confirmation_unanswered": "quiz",
   "addon.mod_quiz.submitallandfinish": "quiz",
   "addon.mod_quiz.summaryofattempt": "quiz",

src/addons/block/myoverview/components/myoverview/myoverview.scss

@@ -33,7 +33,6 @@
         .item-heading {
             font-weight: bold;
             margin-bottom: 0;
-            font-size: 16px;
         }
 
         .subdued {

src/addons/block/timeline/components/events/addon-block-timeline-events.html

@@ -9,7 +9,7 @@
 <ion-item-group *ngFor="let dayEvents of events">
     <ion-item>
         <ion-label>
-            <h4 [class.core-bold]="!course">{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
+            <h4>{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
         </ion-label>
     </ion-item>
     <ng-container *ngFor="let event of dayEvents.events">

src/addons/block/timeline/components/events/events.scss

@@ -1,16 +1,11 @@
 @use "theme/globals" as *;
 
 h3 {
-    font-weight: bold;
+    font: var(--mdl-typography-heading5-font);
-    font-size: 18px;
 }
 
 h4 {
-    font-size: 15px;
+    font: var(--mdl-typography-heading6-font);
-}
-
-h4.core-bold {
-    font-weight: bold;
 }
 
 .addon-block-timeline-activity {

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

@@ -144,7 +144,6 @@
 
     swiper-slide {
         display: block;
-        font-size: inherit;
         justify-content: start;
         align-items: start;
         text-align: start;

src/addons/messages/messages-common.scss

@@ -30,7 +30,7 @@
             }
             .addon-message-last-message-date {
                 white-space: nowrap;
-                font-size: 11px;
+                font-size: #{dynamic-font(11px)};
             }
         }
 

src/addons/mod/forum/pages/search/search.scss

@@ -1,15 +0,0 @@
-:host {
-    --results-count-text-color: var(--gray-700);
-
-    .results-count {
-        color: var(--results-count-text-color);
-        min-height: 0px;
-        margin: 8px 16px;
-        font-size: 14px;
-    }
-
-}
-
-:host-context(html.dark) {
-    --results-count-text-color: var(--gray-400);
-}

src/addons/mod/forum/pages/search/search.ts

@@ -34,7 +34,6 @@ import { Translate } from '@singletons';
 @Component({
     selector: 'page-addon-mod-forum-search',
     templateUrl: 'search.html',
-    styleUrls: ['search.scss'],
 })
 export class AddonModForumSearchPage implements OnInit {
 

src/addons/mod/quiz/lang.json

@@ -54,7 +54,6 @@
     "overduemustbesubmittedby": "This attempt is now overdue. It should already have been submitted. If you would like this quiz to be graded, you must submit it by {{$a}}. If you do not submit it by then, no marks from this attempt will be counted.",
     "preview": "Preview",
     "previewquiznow": "Preview quiz now",
-    "question": "Question",
     "quiznavigation": "Quiz navigation",
     "quizpassword": "Quiz password",
     "reattemptquiz": "Re-attempt quiz",
@@ -71,7 +70,6 @@
     "stateinprogress": "In progress",
     "stateoverdue": "Overdue",
     "stateoverduedetails": "Must be submitted by {{$a}}",
-    "status": "Status",
     "submission_confirmation_unanswered": "Questions without a response: {{$a}}",
     "submitallandfinish": "Submit all and finish",
     "summaryofattempt": "Summary of attempt",

src/addons/mod/quiz/pages/player/player.html

@@ -68,38 +68,21 @@
                 <ion-card-title>{{ 'addon.mod_quiz.summaryofattempt' | translate }}</ion-card-title>
             </ion-card-header>
 
-            <!-- "Header" of the summary table. -->
-            <ion-item class="ion-text-wrap">
-                <ion-label>
-                    <ion-row class="ion-align-items-center">
-                        <ion-col size="3" class="ion-text-center ion-hide-md-down">
-                            <strong>{{ 'addon.mod_quiz.question' | translate }}</strong>
-                        </ion-col>
-                        <ion-col size="3" class="ion-text-center ion-hide-md-up"><strong>#</strong></ion-col>
-                        <ion-col size="9" class="ion-text-center">
-                            <strong>{{ 'addon.mod_quiz.status' | translate }}</strong>
-                        </ion-col>
-                    </ion-row>
-                </ion-label>
-            </ion-item>
-
             <!-- List of questions of the summary table. -->
             <ng-container *ngFor="let question of summaryQuestions">
                 <ion-item *ngIf="question.type !== 'description' && question.questionnumber"
                     (click)="!isSequential && canReturn && changePage(question.page, false, question.slot)"
-                    [attr.aria-label]="'core.question.questionno' | translate:{$a: question.questionnumber}"
+                    [detail]="!isSequential && canReturn" [button]="!isSequential && canReturn" class="ion-text-wrap">
-                    [detail]="!isSequential && canReturn" [button]="!isSequential && canReturn">
                     <ion-label>
-                        <ion-row class="ion-align-items-center">
+                        <span [attr.aria-label]="'core.question.questionno' | translate:{$a: question.questionnumber}">
-                            <ion-col size="3" class="ion-text-center ion-text-wrap">{{ question.questionnumber }}</ion-col>
+                            {{ question.questionnumber }}.</span> {{ question.status }}
-                            <ion-col size="9" class="ion-text-center ion-text-wrap">{{ question.status }}</ion-col>
-                        </ion-row>
                     </ion-label>
                 </ion-item>
             </ng-container>
 
             <!-- Due date warning. -->
-            <ion-item class="ion-text-wrap" *ngIf="dueDateWarning">
+            <ion-item class="ion-text-wrap core-warning-item" *ngIf="dueDateWarning">
+                <ion-icon slot="start" name="fas-triangle-exclamation" color="warning" aria-hidden="true" />
                 <ion-label>{{ dueDateWarning }}</ion-label>
             </ion-item>
 

src/addons/notifications/pages/list/list.scss

@@ -5,12 +5,12 @@ ion-item.addon-notification-item {
     ion-label {
         margin-top: 8px;
         margin-bottom: 8px;
-        p.item-heading {
-            font-size: var(--text-size);
-            @include ellipsis(3);
-        }
         p {
-            font-size: 12px;
+            font: var(--mdl-typography-body-font-sm);
+            &.item-heading {
+                font-size: var(--text-size);
+                @include ellipsis(3);
+            }
         }
     }
 
@@ -20,7 +20,7 @@ ion-item.addon-notification-item {
         padding-top: 12px;
 
         ion-icon {
-            font-size: 6px;
+            font-size: #{dynamic-font(6px)};
             vertical-align: middle;
         }
     }

src/addons/notifications/pages/notification/notification.scss

@@ -10,10 +10,10 @@
             margin-top: 16px;
         }
         p.item-heading {
-            font-size: 16px;
+            font: var(--mdl-typography-body-font-lg);
         }
         p {
-            font-size: 12px;
+            font: var(--mdl-typography-body-font-sm);
         }
     }
 

src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html

@@ -2,13 +2,14 @@
     <!-- Content is outside the core-loading to let the script calculate drag items position -->
     <core-loading [hideUntil]="question.loaded" />
 
+    <ion-card *ngIf="!question.readOnly" class="core-info-card" [hidden]="!question.loaded">
+        <ion-item>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
+            <ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
+        </ion-item>
+    </ion-card>
+
     <div class="fake-ion-item ion-text-wrap" [hidden]="!question.loaded">
-        <ion-card *ngIf="!question.readOnly" class="core-info-card">
-            <ion-item>
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
-                <ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
-            </ion-item>
-        </ion-card>
         <div class="addon-qtype-ddwtos-container">
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
                 [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()" />

src/core/components/input-errors/input-errors.scss

@@ -8,7 +8,7 @@
     .core-input-error {
         padding: 4px;
         color: var(--danger);
-        font-size: 12px;
+        font: var(--mdl-typography-body-font-sm);
         display: none;
 
         &:first-child {

src/core/components/message/message.scss

@@ -63,12 +63,11 @@
                 }
 
                 div {
-                    font-weight: 500;
                     flex-grow: 1;
                     padding-left: .5rem;
                     padding-right: .5rem;
                     @include ellipsis();
-                    font-size: 16px;
+                    font: var(--mdl-typography-subtitle-font-md);
                 }
             }
 

src/core/components/swipe-slides/swipe-slides.scss

@@ -4,7 +4,6 @@
 
         swiper-slide {
             display: block;
-            font-size: inherit;
             justify-content: start;
             align-items: start;
             text-align: start;

src/core/components/tabs/tabs.scss

@@ -65,9 +65,16 @@
                         word-wrap: break-word;
                         max-width: 100%;
                         line-height: 1.2em;
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+
                         h2 {
-                            font-size: 14px;
+                            font: var(--mdl-typography-label-font-lg);
-                            font-weight: 400;
+                        }
+
+                        ion-badge {
+                            @include margin-horizontal(4px, 0px);
                         }
                     }
                 }
@@ -78,7 +85,7 @@
                     border-bottom-color: var(--border-color-active);
                     ion-tab-button {
                         color: var(--color-active);
-                        ion-label {
+                        ion-label h2 {
                             font-weight: var(--font-weight-active);
                         }
                     }

src/core/directives/format-text.ts

@@ -243,9 +243,9 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
     }
 
     /**
-     * Add magnifying glass icons to view adapted images at full size.
+     * Add image viewer button to view adapted images at full size.
      */
-    async addMagnifyingGlasses(): Promise<void> {
+    protected async addImageViewerButton(): Promise<void> {
         const imgs = Array.from(this.element.querySelectorAll('.core-adapted-img-container > img'));
         if (!imgs.length) {
             return;
@@ -270,7 +270,6 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
                 return;
             }
 
-            const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src'));
             const label = Translate.instant('core.openfullimage');
             const button = document.createElement('button');
 
@@ -283,6 +282,8 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
             button.innerHTML = `<ion-icon name="fas-${iconName}" aria-hidden="true" src="${src}"></ion-icon>`;
 
             button.addEventListener('click', (e: Event) => {
+                const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src'));
+
                 e.preventDefault();
                 e.stopPropagation();
                 CoreDomUtils.viewImage(imgSrc, img.getAttribute('alt'), this.component, this.componentId);
@@ -371,7 +372,7 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
         await CoreUtils.nextTick();
 
         // Add magnifying glasses to images.
-        this.addMagnifyingGlasses();
+        this.addImageViewerButton();
 
         if (result.options.filter) {
             // Let filters handle HTML. We do it here because we don't want them to block the render of the text.

src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss

@@ -1,10 +1,11 @@
 :host {
 
-    h2 {
+    h1 {
         margin-top: 0;
+        font-size: var(--mdl-typography-heading2-fontSize);
     }
 
-    h2, p {
+    h1, p {
         text-align: center;
     }
 

src/core/features/comments/components/comments/comments.scss

@@ -0,0 +1,3 @@
+button.as-link {
+    font: var(--mdl-typography-body-font-md);
+}

src/core/features/comments/components/comments/comments.ts

@@ -29,6 +29,7 @@ import { ContextLevel } from '@/core/constants';
 @Component({
     selector: 'core-comments',
     templateUrl: 'core-comments.html',
+    styleUrl: 'comments.scss',
 })
 export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestroy {
 
@@ -38,7 +39,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
     @Input() itemId!: number;
     @Input() area = '';
     @Input() title?: string;
-    @Output() onLoading: EventEmitter<boolean>; // Event that indicates whether the component is loading data.
+    @Output() onLoading = new EventEmitter<boolean>();  // Event that indicates whether the component is loading data.
     @Input() courseId?: number; // Course ID the comments belong to. It can be used to improve performance with filters.
     @Input() showItem = false; // Show button as an item.
 
@@ -47,14 +48,11 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
     countError = false;
     enabled = false;
 
-    protected updateSiteObserver?: CoreEventObserver;
+    protected updateSiteObserver: CoreEventObserver;
-    protected refreshCommentsObserver?: CoreEventObserver;
+    protected refreshCommentsObserver: CoreEventObserver;
-    protected commentsCountObserver?: CoreEventObserver;
+    protected commentsCountObserver: CoreEventObserver;
 
     constructor() {
-
-        this.onLoading = new EventEmitter<boolean>();
-
         this.enabled = CoreComments.areCommentsEnabledInSite();
 
         // Update visibility if current site info is updated.
@@ -87,7 +85,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
         this.commentsCountObserver = CoreEvents.on(
             CoreCommentsProvider.COMMENTS_COUNT_CHANGED_EVENT,
             (data) => {
-            // Verify these comments need to be updated.
+                // Verify these comments need to be updated.
                 if (!this.commentsCount.endsWith('+') && this.undefinedOrEqual(data, 'contextLevel') &&
                     this.undefinedOrEqual(data, 'instanceId') && this.undefinedOrEqual(data, 'component') &&
                     this.undefinedOrEqual(data, 'itemId') && this.undefinedOrEqual(data, 'area') && !this.countError) {
@@ -103,14 +101,14 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
     }
 
     /**
-     * View loaded.
+     * @inheritdoc
      */
     ngOnInit(): void {
         this.fetchData();
     }
 
     /**
-     * Listen to changes.
+     * @inheritdoc
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         // If something change, update the fields.
@@ -193,7 +191,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
     }
 
     /**
-     * Component destroyed.
+     * @inheritdoc
      */
     ngOnDestroy(): void {
         this.updateSiteObserver?.off();

src/core/features/course/components/course-index-tour/course-index-tour.scss

@@ -1,10 +1,11 @@
 :host {
 
-    h2 {
+    h1 {
         margin-top: 0;
+        font-size: var(--mdl-typography-heading2-fontSize);
     }
 
-    h2, p {
+    h1, p {
         text-align: center;
     }
 

src/core/features/course/components/course-index/course-index.scss

@@ -74,7 +74,7 @@ ion-item.item {
         padding: 12px 16px;
 
         &.completioninfo {
-            font-size: 10px;
+            font-size: #{dynamic-font(10px)};
             width: 18px;
         }
 

src/core/features/course/components/module-completion-details/module-completion-details.scss

@@ -1,14 +1,14 @@
+@use "theme/globals" as *;
+
 :host {
-    h2, div {
-        font-size: 16px;
-    }
     h2 {
         margin-top: 0px;
         margin-bottom: 8px;
-        line-height: 27px;
+        font: var(--mdl-typography-heading6-font);
     }
     ion-list {
-        line-height: 32px;
+        font: var(--mdl-typography-body-font-lg);
+        line-height: 200%;
     }
 
     ion-icon {
@@ -17,6 +17,6 @@
     }
 
     ion-icon.completion_dot {
-        font-size: 4px;
+        font-size: #{dynamic-font(4px)};
     }
 }

src/core/features/course/components/module-navigation/module-navigation.scss

@@ -25,8 +25,7 @@
             margin: 0;
             --border-radius: 0;
             width: 100%;
-            font-size: 12px;
+            font: var(--mdl-typography-body-font-sm);
-            font-weight: normal;
             --color: var(--button-color);
 
             .button-text {
@@ -34,7 +33,7 @@
             }
 
             ion-icon {
-                font-size: 12px;
+                font-size: var(--mdl-typography-body-fontSize-sm);
             }
         }
         .core-course-previous-module {

src/core/features/course/components/module-summary/module-summary.scss

@@ -5,7 +5,7 @@
 }
 
 h1 {
-    font-size: 20px;
+    font-size: var(--mdl-typography-heading4-fontSize);
 }
 
 .core-modulename {

src/core/features/course/components/module/module.scss

@@ -93,8 +93,7 @@
 
             ion-badge {
                 @include margin-horizontal(null, 4px);
-                font-size: 12px;
+                font: var(--mdl-typography-body-font-sm);
-                font-weight: normal;
             }
         }
     }
@@ -135,7 +134,7 @@
             border-radius: var(--mdl-shape-borderRadius-sm);
             margin-top: 8px;
             padding: 8px;
-            font-size: 14px;
+            font-size: var(--mdl-typography-body-fontSize-md);
             line-height: 120%;
 
             ::ng-deep ul {

src/core/features/course/pages/course-summary/course-summary.scss

@@ -34,6 +34,7 @@
             }
         }
 
+        /** Deprecated icon */
         ion-icon.course-icon {
             padding: 24px;
             font-size: calc(var(--thumb-height) - 48px);
@@ -58,7 +59,7 @@
     }
 
     h1 {
-        font-size: 20px;
+        font-size: var(--mdl-typography-heading4-fontSize);
     }
 
     .core-course-category {

src/core/features/course/pages/index/index.scss

@@ -20,6 +20,7 @@
             }
         }
 
+        /** Deprecated icon */
         ion-icon.course-icon {
             padding: 12px;
             font-size: calc(var(--core-courseimage-on-course-size) - 24px);
@@ -47,7 +48,7 @@
     }
 
     h1 {
-        font-size: 20px;
+        font-size: var(--mdl-typography-heading4-fontSize);
     }
 
     .core-course-header {

src/core/features/courses/components/course-list-item/course-list-item.scss

@@ -106,6 +106,7 @@ ion-chip {
 ion-card.core-course-list-item {
     max-width: var(--list-item-max-width);
 
+    /** Deprecated icon */
     ion-icon.course-icon {
         padding: 12px;
         font-size: calc(var(--avatar-size) - 24px);

src/core/features/editor/components/rich-text-editor/rich-text-editor.scss

@@ -147,7 +147,7 @@
             padding-right: 6px;
             padding-left: 6px;
             margin: 2px auto;
-            font-size: 18px;
+            font-size: #{dynamic-font(18px)};
             background-color: var(--toobar-background);
             border-radius: var(--mdl-shape-borderRadius-xs);
             @include core-transition(background-color, 200ms);

src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss

@@ -8,9 +8,7 @@
 
         h1 {
             margin: 0;
-            font-size: 16px;
+            font: var(--mdl-typography-body-font-lg);
-            font-weight: 400;
-            line-height: 24px;
             letter-spacing: 0.15px;
         }
 
@@ -36,9 +34,7 @@
         align-items: center;
 
         p {
-            font-size: 14px;
+            font: var(--mdl-typography-body-font-md);
-            font-weight: 400;
-            line-height: 20px;
             letter-spacing: 0.25px;
             text-align: center;
             opacity: 0.6;

src/core/features/h5p/components/h5p-player/h5p-player.scss

@@ -21,7 +21,7 @@
         }
 
         .core-h5p-placeholder-play-button {
-            font-size: 30px;
+            font-size: #{dynamic-font(30px)};
             min-height: 50px;
         }
 

src/core/features/login/components/site-onboarding/site-onboarding.scss

@@ -28,6 +28,6 @@
     }
 
     h1 {
-        font-size: 22px;
+        font-size: var(--mdl-typography-heading3-fontSize);
     }
 }

src/core/features/login/login.scss

@@ -147,7 +147,7 @@
     }
 
     p.core-login-inbrowser {
-        font-size: 12px;
+        font: var(--mdl-typography-body-font-sm);
         margin-top: 8px;
         margin-bottom: 8px;
     }
@@ -161,7 +161,7 @@
     .core-login-sign-up h2 {
         margin-top: 16px;
         margin-bottom: 8px;
-        font-size: 16px;
+        font: var(--mdl-typography-heading6-font);
     }
 
 }

src/core/features/login/pages/site/site.scss

@@ -31,7 +31,7 @@
     }
     ion-icon {
         margin: 0 auto;
-        font-size: 35px;
+        font-size: #{dynamic-font(35px)};
         height: 50px;
     }
 }

src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.scss

@@ -1,10 +1,11 @@
 :host {
 
-    h2 {
+    h1 {
         margin-top: 0;
+        font-size: var(--mdl-typography-heading2-fontSize);
     }
 
-    h2, p {
+    h1, p {
         text-align: center;
     }
 

src/core/features/mainmenu/components/user-menu/user-menu.scss

@@ -23,9 +23,7 @@
 }
 
 .core-usermenu-sitename {
-    font-weight: bold;
+    font: var(--mdl-typography-subtitle-font-lg);
-    font-size: 20px;
-    line-height: 24px;
 }
 
 img.core-usermenu-site-logo {

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

@@ -68,7 +68,7 @@ ion-tab-button {
     }
 
     ion-badge.core-tab-badge {
-        font-size: 12px;
+        font-size: var(--mdl-typography-body-fontSize-sm);
         font-weight: bold;
         border-radius: 10px;
         padding-left: 6px;
@@ -83,7 +83,7 @@ ion-tab-button {
         padding: 3px 6px 2px;
         @include position(8px, null, null, calc(50% + 6px));
         min-width: 12px;
-        font-size: 8px;
+        font-size: #{dynamic-font(8px)};
         font-weight: normal;
         box-sizing: border-box;
         position: absolute;
@@ -173,7 +173,7 @@ ion-tabs.placement-side {
     transition: all 500ms ease-in-out;
     opacity: .8;
     z-index: 12;
-    font-size: 12px;
+    font-size: var(--mdl-typography-body-font-sm);
 
     .core-online-message {
         display: var(--network-message-online);

src/core/features/policy/pages/acceptances/acceptances.scss

@@ -105,7 +105,7 @@
                 margin: 3px;
 
                 &.core-policy-icon-bullet {
-                    font-size: 6px;
+                    font-size: #{dynamic-font(6px)};
                     width: 18px;
                 }
             }

src/core/features/reminders/components/date/date.scss

@@ -9,7 +9,8 @@
 
 div {
     flex-grow: 1;
-    font-size: 14px;
+    font: var(--mdl-typography-body-font-md);
+    line-height: normal;
     margin: 0;
     align-self: center;
 

src/core/features/search/components/global-search-filters/global-search-filters.html

@@ -17,7 +17,7 @@
     <ion-list>
         <ng-container *ngIf="searchAreaCategories.length > 0">
             <core-spacer />
-            <ion-item class="ion-text-wrap help">
+            <ion-item class="ion-text-wrap heading">
                 <ion-label>
                     <p class="item-heading">{{ 'core.search.filtercategories' | translate }}</p>
                 </ion-label>
@@ -35,7 +35,7 @@
         </ng-container>
         <ng-container *ngIf="!hideCourses && courses.length > 0">
             <core-spacer />
-            <ion-item class="ion-text-wrap help">
+            <ion-item class="ion-text-wrap heading">
                 <ion-label>
                     <p class="item-heading">{{ 'core.search.filtercourses' | translate }}</p>
                 </ion-label>

src/core/features/search/components/global-search-filters/global-search-filters.scss

@@ -1,21 +1,16 @@
 :host {
-    --help-text-color: var(--gray-700);
+    --heading-text-color: var(--gray-700);
 
-    ion-item.help {
+    ion-item.heading {
-        color: var(--help-text-color);
+        color: var(--heading-text-color);
 
         ion-label {
             margin-bottom: 0;
         }
 
     }
-
-    ion-item:not(.help) {
-        font-size: 16px;
-    }
-
 }
 
 :host-context(html.dark) {
-    --help-text-color: var(--gray-400);
+    --heading-text-color: var(--gray-400);
 }

src/core/features/search/components/global-search-result/global-search-result.html

@@ -2,14 +2,14 @@
     <core-course-image *ngIf="result.course" [course]="result.course" />
     <core-user-avatar *ngIf="result.user" [user]="result.user" [linkProfile]="false" />
     <ion-label>
-        <h3 *ngIf="result.title">
+        <p class="item-heading" *ngIf="result.title">
             <ion-icon *ngIf="renderedIcon" [name]="renderedIcon" aria-hidden="true" />
             <core-mod-icon *ngIf="!renderedIcon && result.module" [modicon]="result.module.iconurl" [modname]="result.module.name"
                 [colorize]="false" />
             <img *ngIf="!renderedIcon && !result.module && result.component" [url]="result.component.iconurl" alt="" class="result-icon"
                 core-external-content [component]="result.component.name">
             <core-format-text [text]="result.title" />
-        </h3>
+        </p>
         <core-format-text *ngIf="result.content && !result.course && !result.user" [text]="result.content" />
         <div *ngIf="renderedContext" class="result-context-wrapper">
             <div *ngIf="renderedContext.courseName" class="result-context">

src/core/features/search/components/global-search-result/global-search-result.scss

@@ -7,8 +7,7 @@
     --core-global-search-result-context-color: var(--gray-600);
     --core-global-search-result-icon-size: 16px;
 
-    h3 {
+    p.item-heading {
-        font-size: 16px;
         display: flex;
         align-items: center;
         color: var(--core-global-search-result-title-color);
@@ -69,7 +68,7 @@
                 color: var(--core-global-search-result-context-color);
                 margin-top: var(--mdl-spacing-2);
                 margin-inline-end: var(--mdl-spacing-4);
-                font-size: 12px;
+                font: var(--mdl-typography-body-font-sm);
 
                 ion-icon {
                     margin-inline-end: var(--mdl-spacing-1);

src/core/features/search/components/search-box/search-box.scss

@@ -31,7 +31,7 @@
             --a11y-sizing-minTargetSize: var(--search-height);
             --padding-start: 0px;
             --padding-end: 0px;
-            font-size: 12px;
+            font-size: var(--mdl-typography-body-fontSize-sm);
         }
     }
 

src/core/features/settings/pages/licenses/licenses.html

@@ -12,7 +12,7 @@
 <ion-content class="limited-width">
     <core-loading [hideUntil]="loaded">
         <ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterChanged($event.target)" (ionCancel)="filterChanged($event.target)"
-            [placeholder]="'core.filter' | translate" class="ion-margin-top" />
+            [placeholder]="'core.filter' | translate" class="ion-margin-vertical" />
         <ion-list>
             <ion-item button *ngIf="error" class="ion-text-wrap" [href]="licensesUrl" core-link auto-login="no" [detail]="false">
                 <ion-label>
@@ -22,13 +22,13 @@
                     {{ 'core.view' | translate }}</ion-button>
             </ion-item>
             <ng-container *ngIf="!error">
-                <ion-item *ngFor="let license of licenses" class="ion-text-wrap">
+                <ion-item *ngFor="let license of licenses" class="ion-text-wrap" lines="inset">
                     <ion-label>
                         <p class="item-heading">
                             <a *ngIf="license.repository" [href]="license.repository" core-link auto-login="no">{{ license.name }}</a>
                             <ng-container *ngIf="!license.repository">{{ license.name }}</ng-container> - {{ license.version }}
                         </p>
-                        <p class="item-heading" *ngIf="license.publisher">
+                        <p *ngIf="license.publisher">
                             {{ 'core.settings.publisher' | translate }}{{ 'core.labelsep' | translate }} {{ license.publisher }}
                         </p>
                         <p>{{ 'core.settings.license' | translate }}{{ 'core.labelsep' | translate }} {{ license.licenses }}</p>
@@ -37,7 +37,9 @@
                                 [showBrowserWarning]="false">{{ license.email }}</a></p>
                     </ion-label>
                     <ion-button *ngIf="license.licenseUrl" [href]="license.licenseUrl" target="_blank" fill="clear" slot="end" core-link
-                        auto-login="no">{{ 'core.view' | translate }}</ion-button>
+                        auto-login="no" [ariaLabel]="'core.view' | translate">
+                        <ion-icon slot="icon-only" name="fas-up-right-from-square" aria-hidden="true" />
+                    </ion-button>
                 </ion-item>
             </ng-container>
         </ion-list>

src/core/features/settings/pages/licenses/licenses.ts

@@ -52,7 +52,7 @@ export class CoreSettingsLicensesPage implements OnInit {
     protected allLicenses: CoreSettingsLicense[] = [];
 
     constructor() {
-        this.appLicenseVersion = CoreConstants.CONFIG.versionname.indexOf('-') > 0
+        this.appLicenseVersion = CoreConstants.BUILD.isDevelopment
             ? 'main'
             : 'v' + CoreConstants.CONFIG.versionname;
 

src/core/features/user/pages/about/about.scss

@@ -39,10 +39,10 @@
     }
 
     h2 {
-        font-size: 24px;
+        font: var(--mdl-typography-heading2-font);
     }
     h3 {
-        font-size: 20px;
+        font: var(--mdl-typography-heading4-font);
     }
     .core-user-profile-interests {
         ion-badge {

src/theme/components/collapsible-item.scss

@@ -30,7 +30,6 @@
                 text-align: center;
                 z-index: 7;
                 text-transform: none;
-                font-size: 11px;
                 font-weight: normal;
                 background-color: var(--collapsible-toggle-background);
                 color: var(--collapsible-toggle-text);

src/theme/components/ion-action-sheet.scss

@@ -19,11 +19,10 @@ ion-action-sheet {
     &.md {
         .action-sheet-title {
             @include padding(4px, null, 4px, 16px);
-            font-size: 12px;
+            font: var(--mdl-typography-body-font-sm);
             min-height: auto;
             color: var(--medium);
             line-height: 2em;
-            font-weight: normal;
         }
 
         .action-sheet-group:first-child {

src/theme/components/ion-card.scss

@@ -23,7 +23,7 @@ ion-card {
     }
 
     ion-card-title {
-        font-size: 20px;
+        font: var(--mdl-typography-heading4-font);
     }
 
     &.core-card-with-buttons .item ion-label {

src/theme/components/ion-chip.scss

@@ -49,7 +49,7 @@ ion-chip {
 ion-chip,
 ion-button.button.chip {
     line-height: 1.1;
-    font-size: 12px;
+    font-size: var(--mdl-typography-body-fontSize-sm);
     min-height: 24px;
     margin: 4px;
     font-weight: normal;
@@ -68,7 +68,7 @@ ion-button.button.chip {
 ion-button.button.chip {
     --border-radius: var(--mdl-shape-borderRadius-md);
     min-height: 32px;
-    font-size: 14px;
+    font-size: var(--mdl-typography-body-fontSize-md);
 
     ion-icon[slot=start] {
         @include margin(0, 8px, 0, 0);

src/theme/components/ion-item.scss

@@ -54,6 +54,7 @@ ion-item.item {
 }
 
 // Fake item.
+// The usage of this fake item is discouraged, use ion-item instead. It will be removed soon.
 div.fake-ion-item {
     position: relative;
     align-items: center;
@@ -63,91 +64,49 @@ div.fake-ion-item {
     background: var(--ion-item-background);
     text-align: initial;
     text-decoration: none;
-    overflow: hidden;
     box-sizing: border-box;
-}
+    white-space: normal;
+    overflow: inherit;
 
-.md div.fake-ion-item {
-    font-size: var(--text-size);
-    font-weight: normal;
-    text-transform: none;
     @include padding(null, var(--mdl-spacing-4), null, var(--mdl-spacing-4));
-    @include margin(11px, null, 10px, null);
+    margin-top: var(--mdl-spacing-2);
+    margin-bottom: var(--mdl-spacing-2);
 
     h1 {
-        @include margin(0, 0, 2px);
+        @include margin(0px, 0px, 2px);
-        font-size: 24px;
+        font: var(--mdl-typography-heading4-font);
-        font-weight: normal;
     }
 
     h2 {
-        @include margin(2px, 0);
+        @include margin(2px, 0px);
-        font-size: 16px;
+        font: var(--mdl-typography-heading5-font);
-        font-weight: normal;
     }
 
     h3,
     h4,
     h5,
     h6 {
-        @include margin(2px, 0);
+        @include margin(2px, 0px);
-
+        font: var(--mdl-typography-heading6-font);
-        font-size: var(--text-size);
-        font-weight: normal;
-
-        line-height: normal;
     }
 
     p {
-        @include margin(0, 0, 2px);
+        @include margin(0px, 0px, 2px);
-        font-size: var(--text-size);
+        font: var(--mdl-typography-body-font-md);
         line-height: 20px;
-        text-overflow: inherit;
+    }
+
+    core-format-text,
+    core-format-text > *:not(pre) {
+        white-space: normal;
         overflow: inherit;
     }
 }
 
-.ios div.fake-ion-item {
-    font-size: var(--text-size);
-    @include padding(null, 10px, null, 20px);
-    @include margin(10px, 8px, 10px, null);
-
-    h1 {
-        @include margin(3px, 0, 2px);
-        font-size: 22px;
-        font-weight: normal;
-    }
-
-    h2 {
-        @include margin(0, 0, 2px);
-        font-size: 17px;
-        font-weight: normal;
-    }
-
-    h3,
-    h4,
-    h5,
-    h6 {
-        @include margin(0, 0, 3px);
-        font-size: var(--text-size);
-        font-weight: normal;
-        line-height: normal;
-    }
-
-    p {
-        @include margin(0, 0, 2px 0);
-        font-size: var(--text-size);
-        line-height: normal;
-        text-overflow: inherit;
-        overflow: inherit;
-    }
-
-}
-
 // Item Headings.
 // Some styles taken from ion-label
-ion-item.item.item-label > ion-label,
+ion-item.item > ion-label,
-.fake-ion-item > ion-label,
+ion-item-divider.item > ion-label,
 ion-item .in-item {
     font-size: var(--text-size);
 
@@ -183,7 +142,6 @@ ion-item .in-item {
 
 // Correctly inherit ion-text-wrap onto labels.
 .item > ion-label,
-.fake-ion-item,
 .item > ion-checkbox::part(label),
 ion-checkbox::part(label),
 .item ion-toggle::part(label),
@@ -198,7 +156,6 @@ ion-input > label {
 
 .item.ion-text-wrap > ion-label,
 ion-item > .in-item,
-.fake-ion-item.ion-text-wrap,
 .item.ion-text-wrap > ion-checkbox::part(label),
 ion-checkbox.ion-text-wrap::part(label),
 ion-toggle.ion-text-wrap::part(label),

src/theme/components/swiper.scss

@@ -27,8 +27,6 @@ swiper-container {
         width: 100%;
         height: 100%;
 
-        font-size: 18px;
-
         text-align: center;
         box-sizing: border-box;
 

src/theme/theme.base.scss

@@ -713,7 +713,7 @@ table.core-table {
     thead th {
         vertical-align: bottom;
         font-weight: bold;
-        font-size: 14px;
+        font-size: var(--mdl-typography-body-fontSize-md);
         background-color: var(--core-table-header-background);
     }
 
@@ -722,7 +722,7 @@ table.core-table {
             font-weight: normal;
         }
         td {
-            font-size: 16px;
+            font-size: var(--mdl-typography-body-fontSize-lg);
         }
     }
 

src/theme/theme.design-system.scss

@@ -197,7 +197,7 @@ html {
     --core-combobox-border-width: var(--core-input-border-width);
     --core-combobox-box-shadow: none;
 
-    --core-tab-font-weight-active: normal;
+    --core-tab-font-weight-active: var(--mdl-typography-label-fontWeight);
     --core-tabs-height: 48px;
 
     --core-progressbar-height: 8px;