MOBILE-3749 style: Fix some button styles

src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss

@@ -4,4 +4,8 @@
     .core-horizontal-scroll > div {
         @include horizontal_scroll_item(80%, 250px, 300px);
     }
+
+    .core-course-module-handler {
+        --inner-border-width: 0;
+    }
 }

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

@@ -146,8 +146,7 @@
     .core-module-icon {
         margin-right: 1px;
         margin-left: 1px;
-        width: 16px;
+        --size: 16px;
-        height: 16px;
         display: inline-block;
         vertical-align: bottom;
     }

src/addons/competency/pages/competency/competency.html

@@ -43,8 +43,7 @@
                     </ng-container>
                     &nbsp;/&nbsp;
                     <span *ngFor="let ancestor of competency.competency.comppath.ancestors">
-                        <a *ngIf="competency.competency.comppath.showlinks" (click)="openCompetencySummary(ancestor.id)"
+                        <a *ngIf="competency.competency.comppath.showlinks" (click)="openCompetencySummary(ancestor.id)">
-                            class="core-clickable">
                             {{ ancestor.name }}
                         </a>
                         <ng-container *ngIf="!competency.competency.comppath.showlinks">{{ ancestor.name }}</ng-container>
@@ -60,7 +59,7 @@
                     </div>
                     <div *ngIf="competency.competency.hasrelatedcompetencies">
                         <p *ngFor="let relatedcomp of competency.competency.relatedcompetencies">
-                            <a (click)="openCompetencySummary(relatedcomp.id)" class="core-clickable">
+                            <a (click)="openCompetencySummary(relatedcomp.id)">
                                 {{ relatedcomp.shortname }} - {{ relatedcomp.idnumber }}
                             </a>
                         </p>

src/addons/mod/assign/components/index/addon-mod-assign-index.html

@@ -31,7 +31,7 @@
 <core-loading [hideUntil]="loaded" class="core-loading-center">
 
     <!-- Description and intro attachments. -->
-    <ion-card *ngIf="description" (click)="expandDescription($event)" class="core-clickable">
+    <ion-card *ngIf="description">
         <ion-item class="ion-text-wrap">
             <ion-label>
                 <core-format-text [text]="description" [component]="component" [componentId]="componentId" maxHeight="120"

src/core/components/iframe/core-iframe.html

@@ -5,11 +5,15 @@
         [attr.allowfullscreen]="allowFullscreen ? 'allowfullscreen' : null">
     </iframe>
 
-    <div [hidden]="loading" class="ion-text-center ion-text-wrap core-iframe-help">
+    <ion-button
-        <ion-button fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog">
+        *ngIf="!loading"
-            {{ 'core.iframehelp' | translate }}
+        color="dark" expand="block" fill="clear"
-        </ion-button>
+        (click)="openIframeHelpModal()"
-    </div>
+        aria-haspopup="dialog"
+        class="core-button-as-link"
+    >
+        <ion-label>{{ 'core.iframehelp' | translate }}</ion-label>
+    </ion-button>
 
     <span class="core-loading-spinner">
         <ion-spinner *ngIf="loading"></ion-spinner>

src/core/components/navigation-bar/core-navigation-bar.html

@@ -1,7 +1,7 @@
 <ion-grid class="ion-no-padding ion-padding-bottom" *ngIf="previous || info || next">
     <ion-row>
         <ion-col class="ion-text-start" size="4">
-            <ion-button *ngIf="previous" class="core-navigation-bar-arrow" color="light"
+            <ion-button *ngIf="previous" class="core-navigation-bar-arrow"
                 [title]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)">
                 <ion-icon name="fas-arrow-left" [slot]="previousTitle ? 'start' : 'icon-only'" aria-hidden="true"></ion-icon>
                 <core-format-text *ngIf="previousTitle" [text]="previousTitle" [component]="component" [componentId]="componentId"

src/core/components/show-password/show-password.scss

@@ -6,7 +6,6 @@
         padding: 0 calc(var(--padding-start) / 2);
         position: absolute;
         right: 0;
-        bottom: 8px;
         margin-top: 0;
         margin-bottom: 0;
         z-index: 3;

src/core/components/user-avatar/core-user-avatar.html

@@ -1,8 +1,17 @@
-<img *ngIf="avatarUrl" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
+<img
-    onError="this.src='assets/img/user-avatar.png'" (click)="gotoProfile($event)" [attr.aria-hidden]="!linkProfile"
+    *ngIf="avatarUrl"
-    [attr.role]="linkProfile ? 'button' : null" (keydown)="buttonAction.keyDown($event)"
+    [src]="avatarUrl"
+    [alt]="'core.pictureof' | translate:{$a: fullname}"
+    core-external-content
+    onError="this.src='assets/img/user-avatar.png'"
+    (click)="gotoProfile($event)"
+    [attr.aria-hidden]="!linkProfile"
+    [attr.role]="linkProfile ? 'button' : null"
+    (keydown)="buttonAction.keyDown($event)"
     (keyup)="buttonAction.keyUp($event)"
-    [attr.tabindex]="linkProfile ? 0 : null">
+    [attr.tabindex]="linkProfile ? 0 : null"
+    [class.clickable]="linkProfile"
+>
 
 <img *ngIf="!avatarUrl" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}"
     (click)="gotoProfile($event)" [attr.aria-hidden]="!linkProfile" [attr.role]="linkProfile ? 'button' : null"

src/core/components/user-avatar/user-avatar.scss

@@ -1,6 +1,9 @@
 :host {
     position: relative;
-    cursor: pointer;
+
+    .clickable {
+        cursor: pointer;
+    }
     img {
         border-radius: 50%;
         width: var(--core-avatar-size);

src/core/features/course/components/format/core-course-format.html

@@ -92,7 +92,7 @@
 
             <ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
                 *ngIf="displaySectionSelector && sections?.length">
-                <ion-button *ngIf="previousSection" color="light" (click)="sectionChanged(previousSection)"
+                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)"
                     [attr.aria-label]="'core.previous' | translate">
                     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
                     <core-format-text class="accesshide" [text]="previousSection.name" contextLevel="course"

src/core/features/login/pages/credentials/credentials.html

@@ -63,11 +63,16 @@
         </form>
 
         <!-- Forgotten password option. -->
-        <ion-list lines="none" *ngIf="showForgottenPassword" class="core-login-forgotten-password ion-no-padding">
+        <ion-button
-            <ion-item button class="ion-text-center ion-text-wrap" (click)="forgottenPassword()" detail="false">
+            *ngIf="showForgottenPassword"
-                <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
+            expand="block"
-            </ion-item>
+            fill="clear"
-        </ion-list>
+            color="dark"
+            class="core-login-forgotten-password core-button-as-link"
+            (click)="forgottenPassword()"
+        >
+            <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
+        </ion-button>
 
         <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
             <ion-item class="ion-text-wrap" lines="none">

src/core/features/login/pages/reconnect/reconnect.html

@@ -71,13 +71,16 @@
     </form>
 
     <!-- Forgotten password option. -->
-    <ion-list lines="none" *ngIf="showForgottenPassword && !isOAuth" class="core-login-forgotten-password ion-no-padding">
+    <ion-button
-        <ion-item button class="ion-text-center ion-text-wrap" (click)="forgottenPassword()" detail="false">
+        *ngIf="showForgottenPassword && !isOAuth"
-            <ion-label>
+        expand="block"
-                {{ 'core.login.forgotten' | translate }}
+        fill="clear"
-            </ion-label>
+        color="dark"
-        </ion-item>
+        class="core-login-forgotten-password core-button-as-link"
-    </ion-list>
+        (click)="forgottenPassword()"
+    >
+        <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
+    </ion-button>
 
     <!-- Identity providers. -->
     <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
@@ -85,8 +88,8 @@
             <ion-label><h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3></ion-label>
         </ion-item>
         <ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon"
-            (click)="oauthClicked(provider)" [attr.aria-label]="provider.name">
+            (click)="oauthClicked(provider)">
-            <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
+            <img [src]="provider.iconurl" alt="" role="presentation" width="32" height="32" slot="start">
             <ion-label>{{provider.name}}</ion-label>
         </ion-item>
     </ion-list>

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

@@ -109,12 +109,16 @@
     </ng-container>
 
     <!-- Help. -->
-    <ion-list lines="none" class="ion-margin-top">
+    <ion-button
-        <ion-item button class="ion-text-center ion-text-wrap core-login-need-help" (click)="showHelp()" detail="false"
+        class="ion-margin-top core-login-need-help core-button-as-link"
-            aria-haspopup="dialog">
+        (click)="showHelp()"
-            <ion-label>{{ 'core.needhelp' | translate }}</ion-label>
+        aria-haspopup="dialog"
-        </ion-item>
+        expand="block"
-    </ion-list>
+        fill="clear"
+        color="dark"
+    >
+        <ion-label>{{ 'core.needhelp' | translate }}</ion-label>
+    </ion-button>
 </ion-content>
 
 <!-- Template site selector. -->

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

@@ -12,7 +12,6 @@
 
 .item {
     &.core-login-need-help {
-        text-decoration: underline;
         margin-top: 16px;
     }
     &.core-login-site-qrcode {

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

@@ -1,9 +1,10 @@
+@import "~theme/globals";
+
 :host{
     --menutabbar-size: 60px;
 
-    ion-tabs {
+    ion-tab-bar {
-        -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
+        box-shadow: 0px -3px 3px rgba(var(--drop-shadow));
-        filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
     }
 
     ion-tab-button ion-icon {
@@ -28,6 +29,10 @@
             width: var(--menutabbar-size);
             height: 100%;
             flex-direction: column;
+            @include border-end(var(--border));
+            box-shadow: 3px 0 3px rgba(var(--drop-shadow));
+            border-top: 0;
+
             ion-tab-button {
                 width: 100%;
                 ion-badge {

src/core/features/user/pages/profile/profile.html

@@ -14,11 +14,16 @@
         <ion-list *ngIf="user && !isDeleted && isEnrolled">
             <ion-item class="ion-text-center core-user-profile-maininfo">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
-                    <div class="core-icon-foreground" *ngIf="canChangeProfilePicture">
+                    <ion-button
-                        <ion-icon name="fa-pen" (click)="changeProfilePicture()"
+                        class="edit-avatar"
-                            [attr.aria-label]="'core.user.newpicture' | translate">
+                        *ngIf="canChangeProfilePicture"
-                        </ion-icon>
+                        (click)="changeProfilePicture()"
-                    </div>
+                        [attr.aria-label]="'core.user.newpicture' | translate"
+                        fill="clear"
+                        color="dark"
+                    >
+                        <ion-icon slot="icon-only" name="fa-pen" aria-hidden="true"></ion-icon>
+                    </ion-button>
                 </core-user-avatar>
                 <ion-label>
                     <h2>{{ user.fullname }}</h2>

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

@@ -17,16 +17,12 @@
                 height: 24px !important;
             }
 
-            .core-icon-foreground {
+            .edit-avatar {
                 position: absolute;
-                right: 0;
+                right: -24px;
-                bottom: 0;
+                bottom: -12px;
-                line-height: 30px;
+                --border-radius: 50%;
-                text-align: center;
+                --background: var(--ion-item-background);
-                width: 30px;
-                height: 30px;
-                border-radius: 50%;
-                background-color:var(--background);
 
                 :host-context([dir="rtl"]) & {
                     left: 0;
@@ -38,8 +34,7 @@
 
 }
 
-:host-context([dir="rtl"]) ::ng-deep core-user-avatar .core-icon-foreground {
+:host-context([dir="rtl"]) ::ng-deep core-user-avatar .edit-avatar {
-    left: 0;
+    left: -24px;
     right: unset;
 }
-

src/theme/globals.mixins.ionic.scss

@@ -107,6 +107,7 @@
     $tint: map-get($value, tint);
 
     --ion-color-#{$color-name}: #{$base};
+    --ion-color-#{$color-name}-base: #{$base};
     --ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
     --ion-color-#{$color-name}-contrast: #{$contrast};
     --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
@@ -115,6 +116,7 @@
 
     .ion-color-#{$color-name} {
         --ion-color: #{$base};
+        --ion-color-base: #{$base};
         --ion-color-rgb: #{color-to-rgb-list($base)};
         --ion-color-contrast: #{$contrast};
         --ion-color-contrast-rgb: #{color-to-rgb-list($contrast)};

src/theme/globals.mixins.scss

@@ -30,7 +30,7 @@
     }
 }
 
-@mixin border-start($px, $type, $color) {
+@mixin border-start($px, $type: null, $color: null) {
     @include ltr() {
         border-left: $px $type $color;
     }
@@ -41,7 +41,7 @@
 }
 
 
-@mixin border-end($px, $type, $color) {
+@mixin border-end($px, $type: null, $color: null) {
     @include ltr() {
         border-right: $px $type $color;
     }

src/theme/theme.base.scss

@@ -79,6 +79,7 @@ ion-toolbar .in-toolbar.button-clear {
 
 ion-header ion-toolbar .button.button-clear,
 ion-header ion-toolbar .button.button-solid {
+    --background: transparent;
     --color: var(--core-header-toolbar-color);
     --ion-color-primary: var(--core-header-toolbar-color);
 }
@@ -130,7 +131,7 @@ ion-button.button-small ion-icon.faicon[slot] {
 }
 
 // Buttons.
-ion-button {
+ion-button, button, [role="button"] {
     min-height: var(--a11y-min-target-size);
     min-width: var(--a11y-min-target-size);
 }
@@ -144,10 +145,13 @@ ion-button {
     }
 }
 
-.core-iframe-help ion-button {
+ion-button.core-button-as-link {
     text-transform: none;
     text-decoration: underline;
-    --color: initial;
+    font-size: inherit;
+    font-weight: normal;
+    letter-spacing: normal;
+    white-space: break-spaces;
 }
 
 // Ionic alert.
@@ -363,7 +367,7 @@ img[alt] {
 
 // Activity modules
 .core-module-icon {
-    --size: 24px;
+    --size: var(--module-icon-size);
     width: var(--size);
     height: var(--size);
     max-width: var(--size);

src/theme/theme.light.scss

@@ -65,6 +65,8 @@
     // Accessibility vars.
     --a11y-min-target-size: 44px;
 
+    --module-icon-size: 24px;
+
     --ion-text-color: #{$text-color};
     --ion-text-color-rgb: 58,58,58;
     --ion-card-color: var(--ion-text-color);
@@ -215,10 +217,10 @@
     --addon-forum-border-color: #{$addon-forum-border-color};
     --addon-forum-highlight-color: #{$addon-forum-highlight-color};
 
-    --drop-shadow: 0, 0, 0, 0.2;
+    --drop-shadow: 0, 0, 0, 0.18;
 
-    --core-menu-box-shadow-end: -4px 0px 16px rgba(0, 0, 0, 0.18);
+    --core-menu-box-shadow-end: -4px 0px 16px rgba(var(--drop-shadow));
-    --core-menu-box-shadow-start: 4px 0px 16px rgba(0, 0, 0, 0.18);
+    --core-menu-box-shadow-start: 4px 0px 16px rgba(var(--drop-shadow));
 
     --core-question-correct-color: var(--green-dark);
     --core-question-correct-color-bg: var(--green-light);