From a5be9fbc95f97a88d07b8b056adbdb9aa54f4f68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 8 Feb 2022 12:06:48 +0100
Subject: [PATCH] MOBILE-3808 styles: Some style fixes

---
 .../messages/pages/discussion/discussion.html |  2 +-
 .../messages/pages/discussion/discussion.scss |  4 --
 .../pages/course-storage/course-storage.html  |  4 +-
 .../core-download-refresh.html                |  4 +-
 .../download-refresh/download-refresh.ts      |  5 +-
 src/core/components/file/core-file.html       |  4 +-
 src/core/components/mod-icon/mod-icon.scss    |  4 +-
 src/core/components/tabs/tabs.scss            |  1 +
 src/core/directives/collapsible-header.ts     |  1 -
 .../core-course-module-completion.html        |  7 ++-
 .../components/module/core-course-module.html | 62 +++++++++++--------
 .../course/components/module/module.ts        |  5 +-
 src/core/features/login/login.scss            |  2 +-
 .../login/pages/credentials/credentials.html  |  4 +-
 .../login/pages/reconnect/reconnect.html      |  4 +-
 src/core/features/login/pages/site/site.html  |  4 +-
 .../features/sitehome/pages/index/index.html  |  8 +--
 .../features/sitehome/pages/index/index.scss  |  4 +-
 src/theme/components/format-text.scss         |  2 +-
 src/theme/theme.base.scss                     | 19 +++++-
 src/theme/theme.light.scss                    | 11 ++--
 21 files changed, 96 insertions(+), 65 deletions(-)

diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
index fe42e7ac1..68417d729 100644
--- a/src/addons/messages/pages/discussion/discussion.html
+++ b/src/addons/messages/pages/discussion/discussion.html
@@ -128,7 +128,7 @@
             [attr.aria-label]="'addon.messages.newmessages' | translate">
             <ion-icon name="fas-arrow-down" aria-hidden="true"></ion-icon>
             <span class="sr-only">{{ 'addon.messages.newmessages' | translate }}</span>
-            <span class="core-discussion-messages-badge">{{ newMessages }}</span>
+            <ion-badge class="core-discussion-messages-badge">{{ newMessages }}</ion-badge>
         </ion-fab-button>
     </ion-fab>
 </ion-content>
diff --git a/src/addons/messages/pages/discussion/discussion.scss b/src/addons/messages/pages/discussion/discussion.scss
index 2f8f0935d..57320a0c6 100644
--- a/src/addons/messages/pages/discussion/discussion.scss
+++ b/src/addons/messages/pages/discussion/discussion.scss
@@ -27,13 +27,9 @@
 
         .core-discussion-messages-badge {
             position: absolute;
-            border-radius: 50%;
             color: var(--addon-messages-discussion-badge-text);
             background-color: var(--addon-messages-discussion-badge);
             display: block;
-            line-height: 20px;
-            height: 20px;
-            width: 20px;
             @include position(-6px, -6px, null, null);
         }
     }
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 4db31b1e0..dab853fb1 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -55,7 +55,7 @@
                             <div *ngIf="downloadEnabled" slot="end" class="core-button-spinner">
                                 <core-download-refresh *ngIf="!section.isDownloading" [status]="section.downloadStatus" [enabled]="true"
                                     (action)="prefecthSection(section)" [loading]="section.isDownloading || section.isCalculating"
-                                    [canTrustDownload]="true" size="small">
+                                    [canTrustDownload]="true">
                                 </core-download-refresh>
 
                                 <ion-badge class="core-course-download-section-progress"
@@ -93,7 +93,7 @@
                                     </ion-icon>
                                 </ion-button>
                                 <core-download-refresh *ngIf="downloadEnabled && module.handlerData?.showDownloadButton"
-                                    [status]="module.downloadStatus" [enabled]="true" [canTrustDownload]="true" size="small"
+                                    [status]="module.downloadStatus" [enabled]="true" [canTrustDownload]="true"
                                     [loading]="module.spinner || module.handlerData.spinner" (action)="prefetchModule(module, section)">
                                 </core-download-refresh>
                             </div>
diff --git a/src/core/components/download-refresh/core-download-refresh.html b/src/core/components/download-refresh/core-download-refresh.html
index 9ba3490a9..f9580727f 100644
--- a/src/core/components/download-refresh/core-download-refresh.html
+++ b/src/core/components/download-refresh/core-download-refresh.html
@@ -1,14 +1,14 @@
 <ng-container *ngIf="enabled && !loading">
     <!-- Download button. -->
     <ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark" @coreShowHideAnimation
-        [attr.aria-label]="(statusTranslatable || 'core.download') | translate" [size]="size">
+        [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
         <ion-icon slot="icon-only" name="cloud-download" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <!-- Refresh button. -->
     <ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
         (click)="download($event, true)" color="dark" @coreShowHideAnimation
-        [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate" [size]="size">
+        [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
         <ion-icon slot="icon-only" name="fas-redo-alt" aria-hidden="true"></ion-icon>
     </ion-button>
 
diff --git a/src/core/components/download-refresh/download-refresh.ts b/src/core/components/download-refresh/download-refresh.ts
index 26487f98b..7dd013c02 100644
--- a/src/core/components/download-refresh/download-refresh.ts
+++ b/src/core/components/download-refresh/download-refresh.ts
@@ -35,7 +35,10 @@ export class CoreDownloadRefreshComponent {
     @Input() statusTranslatable?: string; // Download status translatable string.
     @Input() enabled = false; // Whether the download is enabled.
     @Input() loading = true; // Force loading status when is not downloading.
-    @Input() size: 'small' | 'default' | 'large' = 'default'; // Size of the buttons.
+    /**
+     * @deprecated since 4.0. It has no effect.
+     */
+    @Input() size = ''; // Size of the buttons.
     @Input() canTrustDownload = false; // If false, refresh will be shown if downloaded.
     @Output() action: EventEmitter<boolean>; // Will emit an event when the item clicked.
 
diff --git a/src/core/components/file/core-file.html b/src/core/components/file/core-file.html
index a5e2fbc7c..ff3e41e9b 100644
--- a/src/core/components/file/core-file.html
+++ b/src/core/components/file/core-file.html
@@ -9,7 +9,7 @@
     </ion-label>
     <div slot="end" class="flex-row">
         <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading" [canTrustDownload]="!alwaysDownload"
-            (action)="download()" size="small">
+            (action)="download()">
         </core-download-refresh>
 
         <ion-button fill="clear" *ngIf="isDownloaded && isIOS" (click)="openFile($event, true)" color="dark"
@@ -18,7 +18,7 @@
         </ion-button>
 
         <ion-button fill="clear" *ngIf="!isDownloading && canDelete" (click)="delete($event)" [attr.aria-label]="'core.delete' | translate"
-            color="danger" size="small">
+            color="danger">
             <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true"></ion-icon>
         </ion-button>
     </div>
diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss
index b0dcb46d0..45b236cb6 100644
--- a/src/core/components/mod-icon/mod-icon.scss
+++ b/src/core/components/mod-icon/mod-icon.scss
@@ -5,12 +5,13 @@
     --size: var(--module-icon-size);
     --margin-end: 0px;
     --margin-vertical: 0px;
+    --icon-radius: var(--small-radius);
 
     margin-top: var(--margin-vertical);
     margin-bottom: var(--margin-vertical);
     @include margin-horizontal(null, var(--margin-end));
 
-    border-radius: var(--small-radius);
+    border-radius: var(--icon-radius);
     padding: 0.7rem;
     background-color: $gray-100;
     line-height: var(--size);
@@ -50,4 +51,5 @@ img {
 :host-context(ion-card ion-item) {
     --margin-vertical: 12px;
     --margin-end: 12px;
+    --icon-radius: var(--module-icon-radius);
 }
diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss
index dbc1f28e7..ff1c17bfe 100644
--- a/src/core/components/tabs/tabs.scss
+++ b/src/core/components/tabs/tabs.scss
@@ -7,6 +7,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    --ion-safe-area-top: 0px;
 
     ion-tabs {
         background: transparent;
diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts
index e0927de10..1981fd416 100644
--- a/src/core/directives/collapsible-header.ts
+++ b/src/core/directives/collapsible-header.ts
@@ -32,7 +32,6 @@ import { CoreMath } from '@singletons/math';
 })
 export class CoreCollapsibleHeaderDirective implements OnDestroy {
 
-    protected scrollElement?: HTMLElement;
     protected loadingObserver: CoreEventObserver;
     protected content?: HTMLIonContentElement | null;
     protected header: HTMLIonHeaderElement;
diff --git a/src/core/features/course/components/module-completion/core-course-module-completion.html b/src/core/features/course/components/module-completion/core-course-module-completion.html
index dbdc18616..a96265860 100644
--- a/src/core/features/course/components/module-completion/core-course-module-completion.html
+++ b/src/core/features/course/components/module-completion/core-course-module-completion.html
@@ -24,8 +24,11 @@
     </ng-container>
 
     <ng-container *ngIf="!completion.istrackeduser">
-        <ion-chip *ngFor="let rule of details" color="light" role="listitem">
-            <ion-label>{{ rule.rulevalue.description }}</ion-label>
+        <ion-chip *ngFor="let rule of details" role="listitem">
+            <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <strong>{{ 'core.course.completion_automatic:todo' | translate }}</strong> {{ rule.rulevalue.description }}
+            </ion-label>
         </ion-chip>
     </ng-container>
 </div>
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index adfa73f2a..5a85d4f1d 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -1,12 +1,12 @@
 <ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0">
     <ng-container *ngIf="!module.handlerData.loading">
-        <ion-item id="core-course-module-{{module.id}}"
+        <ion-item id="core-course-module-{{module.id}}" detail="false" lines="none"
             class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
             (click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" [ngClass]="{
                 'has-module-info': hasInfo,
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
-            }" [button]="module.handlerData.action && module.uservisible" detail="false">
+            }" [button]="module.handlerData.action && module.uservisible">
 
             <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon" [modname]="module.modname"
                 [componentId]="module.instance">
@@ -19,8 +19,8 @@
                     </core-format-text>
                 </p>
                 <ion-chip class="completioninfo completion_incomplete" *ngIf="completionStatus === 0">
+                    <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
                     <ion-label>
-                        <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
                         {{ 'core.course.todo' | translate }}
                     </ion-label>
                 </ion-chip>
@@ -50,7 +50,7 @@
 
                 <div class="core-module-buttons-more">
                     <!-- Buttons defined by the module handler. -->
-                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark" size="small"
+                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark"
                         [hidden]="button.hidden || module.handlerData.spinner" class="core-animate-show-hide"
                         (click)="buttonClicked($event, button)" [attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">
                         <ion-icon [name]="button.icon" slot="icon-only" aria-hidden="true"></ion-icon>
@@ -58,11 +58,11 @@
                 </div>
             </div>
         </ion-item>
-        <ion-item *ngIf="hasInfo" id="core-course-module-{{module.id}}-info"
+        <ion-item *ngIf="hasInfo" id="core-course-module-{{module.id}}-info" detail="false" lines="none"
             class="ion-text-wrap core-course-module-handler core-course-module-info {{module.handlerData.class}}" [ngClass]="{
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
-            }" detail="false">
+            }">
             <ion-label>
                 <core-format-text class="core-module-description" *ngIf="module.description" [maxHeight]="80" [text]="module.description"
                     contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
@@ -82,30 +82,38 @@
                     [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)">
                 </core-course-module-completion>
 
-                <ion-chip *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap block">
-                    <ion-icon name="fas-sync" aria-hidden="true"></ion-icon>
-                    <ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
-                </ion-chip>
+                <div *ngIf="module.completiondata?.offline">
+                    <ion-chip color="warning">
+                        <ion-icon name="fas-sync" aria-hidden="true"></ion-icon>
+                        <ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
+                    </ion-chip>
+                </div>
 
                 <!-- Availability -->
-                <ion-chip *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap block">
-                    <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                    <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
-                </ion-chip>
+                <div *ngIf="module.visible === 0 && (!section || section.visible)">
+                    <ion-chip>
+                        <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
+                        <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
+                    </ion-chip>
+                </div>
 
-                <ion-chip *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap block">
-                    <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                    <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
-                </ion-chip>
+                <div *ngIf="module.visible !== 0 && module.isStealth">
+                    <ion-chip>
+                        <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
+                        <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
+                    </ion-chip>
+                </div>
 
-                <ion-chip class="core-module-availabilityinfo ion-text-wrap block" *ngIf="module.availabilityinfo">
-                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
-                    <ion-label>
-                        <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
-                            [courseId]="module.course" class="ion-text-wrap">
-                        </core-format-text>
-                    </ion-label>
-                </ion-chip>
+                <div *ngIf="module.availabilityinfo">
+                    <ion-chip class="core-module-availabilityinfo">
+                        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                        <ion-label>
+                            <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
+                                [courseId]="module.course">
+                            </core-format-text>
+                        </ion-label>
+                    </ion-chip>
+                </div>
 
             </ion-label>
         </ion-item>
@@ -114,7 +122,7 @@
     <!-- Loading. -->
     <ion-item *ngIf="module.handlerData.loading" role="status" class="ion-text-wrap" id="core-course-module-{{module.id}}"
         [attr.aria-label]="module.handlerData.a11yTitle"
-        [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]" detail="false">
+        [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]" detail="false" lines="none">
         <ion-label>
             <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
         </ion-label>
diff --git a/src/core/features/course/components/module/module.ts b/src/core/features/course/components/module/module.ts
index 287c2a484..fa25f2e50 100644
--- a/src/core/features/course/components/module/module.ts
+++ b/src/core/features/course/components/module/module.ts
@@ -62,8 +62,9 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
         }
 
         this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title;
-        this.completionStatus = this.module.completiondata === undefined ||
-                    this.module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE
+        this.completionStatus = this.module.completiondata === undefined  ||
+                !this.module.completiondata?.istrackeduser ||
+                this.module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE
             ? undefined
             : this.module.completiondata.state;
 
diff --git a/src/core/features/login/login.scss b/src/core/features/login/login.scss
index 129a185de..053125e44 100644
--- a/src/core/features/login/login.scss
+++ b/src/core/features/login/login.scss
@@ -106,7 +106,7 @@
 
 :host-context(body.dark) {
     @if ($core-login-button-outline-dark) {
-        form ion-button-dark {
+        form ion-button {
             --background: white;
             --color: var(--core-login-background-dark);
         }
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index bd28dced2..11772f5e6 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -56,7 +56,7 @@
                 <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
                 <ion-button expand="block" color="light" class="ion-margin" lines="none" (click)="showInstructionsAndScanQR()">
                     <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
-                    <ion-label>{{ 'core.scanqr' | translate }}</ion-label>
+                    {{ 'core.scanqr' | translate }}
                 </ion-button>
             </ng-container>
         </form>
@@ -64,7 +64,7 @@
         <!-- Forgotten password option. -->
         <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear" color="dark"
             class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
-            <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
+            {{ 'core.login.forgotten' | translate }}
         </ion-button>
 
         <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 5d41ab921..d8fa966ff 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -67,7 +67,7 @@
             <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
             <ion-button expand="block" color="light" class="ion-margin" lines="none" (click)="showInstructionsAndScanQR()">
                 <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
-                <ion-label>{{ 'core.scanqr' | translate }}</ion-label>
+                {{ 'core.scanqr' | translate }}
             </ion-button>
         </ng-container>
     </form>
@@ -75,7 +75,7 @@
     <!-- Forgotten password option. -->
     <ion-button *ngIf="showForgottenPassword && !isOAuth" expand="block" fill="clear" color="dark"
         class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
-        <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
+        {{ 'core.login.forgotten' | translate }}
     </ion-button>
 
     <!-- Identity providers. -->
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index 6302070b4..c6a3f8071 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -104,14 +104,14 @@
         <ion-button expand="block" color="light" class="ion-margin" lines="none" (click)="showInstructionsAndScanQR()"
             aria-haspopup="dialog">
             <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
-            <ion-label>{{ 'core.scanqr' | translate }}</ion-label>
+            {{ 'core.scanqr' | translate }}
         </ion-button>
     </ng-container>
 
     <!-- Help. -->
     <ion-button class="ion-margin-top core-login-need-help core-button-as-link ion-text-wrap" (click)="showHelp()" aria-haspopup="dialog"
         expand="block" fill="clear" color="dark">
-        <ion-label>{{ 'core.needhelp' | translate }}</ion-label>
+        {{ 'core.needhelp' | translate }}
     </ion-button>
 </ion-content>
 
diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html
index 4f422475d..45bd97c06 100644
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@@ -55,7 +55,7 @@
 </ion-content>
 
 <ng-template #allCourseList>
-    <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()" detail="true">
+    <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()" lines="none">
         <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <h2>{{ 'core.courses.availablecourses' | translate}}</h2>
@@ -69,7 +69,7 @@
 </ng-template>
 
 <ng-template #categories>
-    <ion-item button class="ion-text-wrap" (click)="openCourseCategories()" detail="true">
+    <ion-item button class="ion-text-wrap" (click)="openCourseCategories()" lines="none">
         <ion-icon name="fas-folder" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <h2>{{ 'core.courses.categories' | translate}}</h2>
@@ -78,7 +78,7 @@
 </ng-template>
 
 <ng-template #enrolledCourseList>
-    <ion-item button class="ion-text-wrap" (click)="openMyCourses()" detail="true">
+    <ion-item button class="ion-text-wrap" (click)="openMyCourses()" lines="none">
         <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true">
         </ion-icon>
         <ion-label>
@@ -88,7 +88,7 @@
 </ng-template>
 
 <ng-template #courseSearch>
-    <ion-item button class="ion-text-wrap" (click)="openSearch()" detail="true">
+    <ion-item button class="ion-text-wrap" (click)="openSearch()" lines="none">
         <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <h2>{{ 'core.courses.searchcourses' | translate}}</h2>
diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss
index 9aec56ba2..7a2bbde1d 100644
--- a/src/core/features/sitehome/pages/index/index.scss
+++ b/src/core/features/sitehome/pages/index/index.scss
@@ -2,7 +2,7 @@
 
 ion-item ion-icon {
     display: inline-block;
-    border-radius: var(--small-radius);
+    border-radius: var(--module-icon-radius);
     padding: 0.7rem;
     background-color: $gray-100;
     line-height: var(--size);
@@ -10,7 +10,7 @@ ion-item ion-icon {
     @include margin-horizontal(null, var(--margin-end));
 }
 
-core-course-module.core-sitehome-news ::ng-deep  ion-card {
+core-course-module.core-sitehome-news ::ng-deep ion-card {
     --border-width: 0;
     margin: 0;
     padding: 0;
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 8ffe17e5d..a5fe5391d 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -699,7 +699,7 @@ core-rich-text-editor .core-rte-editor {
         padding: .25em .4em;
         font-size: 75%;
         font-weight: 700;
-        line-height: 1;
+        line-height: 1.1;
         text-align: center;
         white-space: nowrap;
         vertical-align: baseline;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index e6027e705..31aed6866 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -189,6 +189,7 @@ ion-button core-format-text .core-format-text-content {
     overflow: hidden;
     text-overflow: ellipsis;
     display: block;
+    line-height: 1.2;
 }
 
 ion-button > * {
@@ -217,6 +218,10 @@ ion-button ion-spinner {
     --color: inherit !important;
 }
 
+ion-button:not(.button-has-icon-only) > ion-icon {
+    min-width: 20px;
+}
+
 @each $color-name, $unused in $colors {
     .text-#{$color-name},
     p.text-#{$color-name} {
@@ -850,14 +855,22 @@ ion-select-popover ion-item.core-select-option-title {
     }
 }
 
+ion-badge {
+    line-height: 1.1;
+    padding: 4px 8px;
+    border-radius: var(--big-radius);
+}
+
 ion-chip {
     line-height: 1.1;
     font-size: 12px;
     padding: 4px 8px;
-    height: 24px;
+    min-height: 24px;
+    height: auto;
 
     ion-icon {
         font-size: 16px;
+        min-width: 16px;
         @include margin(0, 8px, 0, 0);
     }
 
@@ -869,6 +882,10 @@ ion-chip {
             color: var(--ion-color-base);
         }
     }
+
+    ion-label {
+        white-space: normal !important;
+    }
 }
 
 ion-searchbar {
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 7eaa2bb89..1ad8d7b27 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -58,6 +58,11 @@
 
     --brand-color: var(--brand);
 
+    --small-radius: 4px;
+    --medium-radius: 8px;
+    --big-radius: 16px;
+    --huge-radius: 24px;
+
     // Accessibility vars.
     --a11y-min-target-size: 44px;
     --a11y-focus-color: var(--primary);
@@ -65,6 +70,7 @@
     --zoom-level: 100%;
 
     --module-icon-size: 24px;
+    --module-icon-radius: var(--medium-radius);
 
     --ion-background-color: var(--background-color);
     --ion-background-color-rgb: #{$background-color-rgb};
@@ -75,11 +81,6 @@
     --ion-text-color-rgb: #{$text-color-rgb};
     --subdued-text-color: var(--gray-700);
 
-    --small-radius: 4px;
-    --medium-radius: 8px;
-    --big-radius: 16px;
-    --huge-radius: 24px;
-
     --ion-card-color: var(--text-color);
     ion-card {
         --border-width: 1px;