MOBILE-4842 styles: Style textarea like WYSIWYG editors

src/addons/mod/glossary/pages/edit/edit.html

@@ -44,7 +44,7 @@ <h1>
                 }
 
                 @if (showAliases) {
-                    <ion-item>
+                    <ion-item lines="none">
                         <ion-textarea labelPlacement="stacked" [(ngModel)]="data.aliases" rows="1" [core-auto-rows]="data.aliases"
                             name="aliases" [label]="'addon.mod_glossary.aliases' | translate" />
                     </ion-item>

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

@@ -124,8 +124,8 @@ <h3 class="ion-padding-horizontal" [class.ion-padding-top]="questionIndex === 1"
                                     </ion-col>
                                 </ion-row>
                             } @else {
-                                <ion-item class="ion-text-wrap" [class.even]="isEven">
-                                    <ion-textarea labelPlacement="floating" [(ngModel)]="answers[question.name]" [name]="question.name"
+                                <ion-item class="ion-text-wrap" [class.even]="isEven" lines="none">
+                                    <ion-textarea labelPlacement="stacked" [(ngModel)]="answers[question.name]" [name]="question.name"
                                         [required]="question.required">
                                         <p slot="label" [core-mark-required]="question.required">
                                             <strong>{{question.num}}.</strong> {{ question.text }}

src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html

@@ -38,7 +38,7 @@ <h2>{{ field.dimtitle }}</h2>
                 }
             }
             @if (edit) {
-                <ion-item>
+                <ion-item lines="none">
                     <ion-textarea labelPlacement="stacked" [(ngModel)]="selectedValues[n].peercomment"
                         [core-auto-rows]="selectedValues[n].peercomment"
                         [label]=" 'addon.mod_workshop_assessment_accumulative.dimensioncommentfor' | translate : {'$a': field.dimtitle }" />

src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html

@@ -9,7 +9,7 @@ <h2>{{ field.dimtitle }}</h2>
                 </ion-label>
             </ion-item>
             @if (edit) {
-                <ion-item>
+                <ion-item lines="none">
                     <ion-textarea labelPlacement="stacked" [(ngModel)]="selectedValues[n].peercomment"
                         [core-auto-rows]="selectedValues[n].peercomment">
                         <div [core-mark-required]="true" slot="label">

src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html

@@ -33,7 +33,7 @@ <h2>{{ field.dimtitle }}</h2>
                 </ion-radio-group>
             </ion-list>
             @if (edit) {
-                <ion-item>
+                <ion-item lines="none">
                     <ion-textarea labelPlacement="stacked" [(ngModel)]="selectedValues[n].peercomment" [name]="'peercomment_' + n"
                         [core-auto-rows]="selectedValues[n].peercomment"
                         [label]="'addon.mod_workshop_assessment_numerrors.dimensioncommentfor' | translate : {'$a': field.dimtitle }" />

src/addons/notes/components/add/add-modal.html

@@ -19,7 +19,7 @@ <h1>{{ 'addon.notes.addnewnote' | translate }}</h1>
                 <ion-select-option value="site">{{ 'addon.notes.sitenotes' | translate }}</ion-select-option>
             </ion-select>
         </ion-item>
-        <ion-item>
+        <ion-item lines="none">
             <ion-textarea [ariaLabel]="'addon.notes.note' | translate" placeholder="{{ 'addon.notes.note' | translate }}" rows="5"
                 [(ngModel)]="text" name="text" required="required" />
         </ion-item>

src/core/components/course-image/course-image.scss

@@ -112,10 +112,12 @@
         z-index: -1;
         width: 100%;
 
-        ion-avatar img {
+        ion-avatar {
             width: 100%;
-            height: 100%;
-            object-fit: cover;
+            height: auto;
+            img {
+                object-fit: cover;
+            }
         }
         ion-icon.course-icon-fallback {
             --padding: 24px;

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

@@ -106,3 +106,23 @@ div.core-course-index-subsection {
         z-index: 1;
     }
 }
+
+:host-context(:root.dark) {
+    ion-item.item {
+        &.item-current {
+            --background: var(--primary-shade);
+            --color: var(--white);
+        }
+
+        &.divider.section {
+            ion-icon.expandable-status-icon {
+                color: var(--white);
+
+                &:hover {
+                    background: var(--primary-tint);
+                    color: var(--gray-900);
+                }
+            }
+        }
+    }
+}

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

@@ -209,4 +209,9 @@
             background: var(--gray-800);
         }
     }
+
+    .colored-box-with-icon.core-course-last-module-viewed {
+        background-color: var(--info-shade);
+        color: var(--info-tint);
+    }
 }

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

@@ -8,7 +8,7 @@
     }
 
     core-course-image {
-        --core-image-size: auto;
+        --core-image-size: var(--thumb-height);
     }
 
     .course-container {

src/core/features/dataprivacy/components/contactdpo/contactdpo.html

@@ -22,8 +22,8 @@ <h1>{{ 'core.dataprivacy.contactdataprotectionofficer' | translate }}</h1>
                 </ion-label>
             </ion-item>
         }
-        <ion-item>
-            <ion-textarea labelPlacement="floating" placeholder="{{ 'core.dataprivacy.message' | translate }}" rows="5"
+        <ion-item  lines="none">
+            <ion-textarea labelPlacement="stacked" placeholder="{{ 'core.dataprivacy.message' | translate }}" rows="5"
                 [(ngModel)]="message" name="text" [required]="true" formControlName="message">
                 <div [core-mark-required]="true" slot="label">
                     {{ 'core.dataprivacy.message' | translate }}

src/core/features/dataprivacy/components/newrequest/newrequest.html

@@ -36,7 +36,7 @@ <h1>{{ 'core.dataprivacy.createnewdatarequest' | translate }}</h1>
                 }
             </ion-radio-group>
         </ion-item>
-        <ion-item>
+        <ion-item lines="none">
             <ion-textarea labelPlacement="stacked" placeholder="{{ 'core.dataprivacy.requestcomments' | translate }}" rows="5"
                 [(ngModel)]="message" name="text" formControlName="message">
                 <div slot="label">

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

@@ -43,6 +43,14 @@ export class CoreRemindersDateComponent {
     readonly url = input('');
 
     readonly showReminderButton = computed(() => {
+        // If not set, button won't be shown.
+        const component = this.component();
+        const instanceId = this.instanceId();
+        const type = this.type();
+        if (component === undefined || instanceId === undefined || type === undefined) {
+            return false;
+        }
+
         const remindersEnabled = CoreReminders.isEnabled();
 
         return remindersEnabled && this.time() > CoreTime.timestamp();
@@ -53,15 +61,11 @@ export class CoreRemindersDateComponent {
 
     constructor() {
         effect(async () => {
-            if (!this.showReminderButton()) {
-                return;
-            }
-
-            // If not set, button won't be shown.
             const component = this.component();
             const instanceId = this.instanceId();
             const type = this.type();
-            if (component === undefined || instanceId === undefined || type === undefined) {
+
+            if (!this.showReminderButton() || component === undefined || instanceId === undefined || type === undefined) {
                 return;
             }
 

src/theme/components/ion-card.scss

@@ -52,25 +52,28 @@ ion-card {
             --color-shade: var(--ion-color-#{$color-name}-shade);
             --border-width: 0;
 
-            --border-color: var(--color-tint);
+            --card-color: var(--color-tint);
+            --card-background: var(--color-shade);
+
+            --border-color: var(--card-color);
             --border-radius: var(--mdl-shape-borderRadius-sm);
-            --background: var(--color-tint);
-            --color: var(--color-shade);
+            --background: var(--card-color);
+            --color: var(--card-background);
 
             ion-item.item {
-                --background: var(--color-tint);
-                --color: var(--color-shade);
+                --background: var(--card-color);
+                --color: var(--card-background);
                 --inner-border-width: 0px;
                 --border-width: 0px;
                 font-size: var(--text-size);
 
                 &.item-label > ion-label,
                 &.item-label > ion-label > p {
-                    --color: var(--color-shade);
+                    --color: var(--card-background);
                 }
 
                 > ion-icon[slot] {
-                    color: var(--color-shade);
+                    color: var(--card-background);
                     @include margin-horizontal(null, 16px);
                 }
             }
@@ -82,3 +85,15 @@ ion-card {
     }
 
 }
+
+
+:root.dark ion-card {
+    // Coloured cards.
+    @each $color-name, $unused in $colors {
+        &.core-#{$color-name}-card {
+            --card-color: var(--color-shade);
+            --card-background: var(--color-tint);
+        }
+    }
+
+}

src/theme/components/ion-header.scss

@@ -6,6 +6,7 @@ ion-header.header-md {
     transition: box-shadow 0.5s;
 
     ion-toolbar {
+        --min-height: var(--core-header-toolbar-height);
         --color: var(--core-header-toolbar-color);
         --background: var(--core-header-toolbar-background);
         --border-width: 0 0 var(--core-header-toolbar-border-width) 0;
@@ -128,3 +129,7 @@ ion-header.header-md {
         --core-header-buttons-background: var(--background, var(--background-color));
     }
 }
+
+ion-tabs.hide-header ion-header {
+    display: none;
+}

src/theme/components/ion-textarea.scss

@@ -0,0 +1,31 @@
+ion-textarea[class]:not(.core-textarea) {
+    --border-color: var(--stroke);
+    --border-radius: var(--mdl-shape-borderRadius-md);
+    --border-width: 2px;
+    --border-style: solid;
+    --highlight-color: var(--dark) !important;
+
+
+    &.has-focus {
+        --border-width: 2px;
+        .textarea-wrapper .textarea-wrapper-inner {
+            padding: 7px;
+        }
+    }
+
+    .textarea-wrapper {
+        border: 0px;
+
+        .label-text-wrapper {
+            transform: none !important;
+            margin-top: 8px;
+            margin-bottom: 4px;
+        }
+
+        .textarea-wrapper-inner {
+            border: var(--border-width) var(--border-style) var(--border-color);
+            border-radius: var(--border-radius);
+            padding: 8px;
+        }
+    }
+}

src/theme/components/ionic.scss

@@ -30,6 +30,7 @@
 @import "ion-skeleton";
 @import "ion-spinner";
 @import "ion-tabs";
+@import "ion-textarea";
 @import "ion-toast";
 @import "swiper";
 

src/theme/theme.base.scss

@@ -117,15 +117,6 @@ a {
     }
 }
 
-// Ionic toolbar on header.
-ion-toolbar {
-    --min-height: var(--core-header-toolbar-height);
-}
-
-ion-tabs.hide-header ion-header {
-    display: none;
-}
-
 // Ionic list.
 ion-list {
     padding: 0 !important;