From 5c29cd3a05fad48c80d4e80e3050b7f644dac65c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 27 Jan 2022 23:13:21 +0100
Subject: [PATCH] MOBILE-3814 style: Use border radius to match prototype

---
 .../components/blogtags/blogtags.scss         |  2 +-
 .../block/tags/components/tags/tags.scss      |  2 +-
 .../components/calendar/calendar.scss         |  2 +-
 src/core/components/combobox/combobox.scss    | 12 ++--
 src/core/components/mod-icon/mod-icon.scss    |  2 +-
 .../components/module/core-course-module.html |  4 +-
 .../core-courses-course-list-item.html        | 61 ++++++++++---------
 .../course-list-item/course-list-item.scss    |  7 ++-
 .../rich-text-editor/rich-text-editor.scss    |  2 +-
 .../features/sitehome/pages/index/index.scss  |  8 ++-
 src/theme/components/discussion.scss          |  2 +-
 src/theme/components/format-text.scss         |  2 +-
 src/theme/theme.light.scss                    | 17 ++++--
 13 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/src/addons/block/blogtags/components/blogtags/blogtags.scss b/src/addons/block/blogtags/components/blogtags/blogtags.scss
index 75f3917dd..0f8abbbd2 100644
--- a/src/addons/block/blogtags/components/blogtags/blogtags.scss
+++ b/src/addons/block/blogtags/components/blogtags/blogtags.scss
@@ -24,7 +24,7 @@
                 contain: content;
                 vertical-align: baseline;
                 text-decoration: none;
-                border-radius: 4px;
+                border-radius: var(--small-radius);
             }
             .s20 {
                 font-size: 1.5em;
diff --git a/src/addons/block/tags/components/tags/tags.scss b/src/addons/block/tags/components/tags/tags.scss
index b1144d4e0..7856e76c5 100644
--- a/src/addons/block/tags/components/tags/tags.scss
+++ b/src/addons/block/tags/components/tags/tags.scss
@@ -26,7 +26,7 @@
                     contain: content;
                     vertical-align: baseline;
                     text-decoration: none;
-                    border-radius: 4px;
+                    border-radius: var(--small-radius);
                 }
                 .s20 {
                     font-size: 2.7em;
diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss
index 2c63bfa24..ab1d358e8 100644
--- a/src/addons/calendar/components/calendar/calendar.scss
+++ b/src/addons/calendar/components/calendar/calendar.scss
@@ -56,7 +56,7 @@
 
         &.today .addon-calendar-day-number span {
             border: 2px solid var(--addon-calendar-today-border-color);
-            line-height: 20px;;
+            line-height: 20px;
             border-radius: 50%;
         }
         &.dayblank {
diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss
index 566c1274e..2548e9f1b 100644
--- a/src/core/components/combobox/combobox.scss
+++ b/src/core/components/combobox/combobox.scss
@@ -21,14 +21,14 @@
 
         --border-color: var(--core-combobox-border-color);
         --border-style: solid;
-        --border-width: var(--core-combobox-border-all-width);
+        --border-width: var(--core-combobox-border-width);
 
         --box-shadow: var(--core-combobox-box-shadow);
 
-        --padding-top: 10px;
-        --padding-end: 10px;
-        --padding-bottom: 10px;
-        --padding-start: 16px;
+        --padding-top: 8px;
+        --padding-end: 8px;
+        --padding-bottom: 8px;
+        --padding-start: 8px;
 
         &.md {
             --background-activated-opacity: 0;
@@ -105,7 +105,7 @@ ion-button {
         font-weight: 400;
         font-size: 16px;
         line-height: 20px;
-        border-radius: 0;
+        border-radius: var(--core-combobox-radius);
     }
 
     .select-text {
diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss
index 5cd4a8cca..b0dcb46d0 100644
--- a/src/core/components/mod-icon/mod-icon.scss
+++ b/src/core/components/mod-icon/mod-icon.scss
@@ -10,7 +10,7 @@
     margin-bottom: var(--margin-vertical);
     @include margin-horizontal(null, var(--margin-end));
 
-    border-radius: 4px;
+    border-radius: var(--small-radius);
     padding: 0.7rem;
     background-color: $gray-100;
     line-height: var(--size);
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 8a50cf3b3..1f5af1171 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="module.handlerData && module.visibleoncoursepage !== 0">
+<ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0">
     <ng-container *ngIf="!module.handlerData.loading">
         <ion-item id="core-course-module-{{module.id}}"
             class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
@@ -91,4 +91,4 @@
             <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
         </ion-label>
     </ion-item>
-</ng-container>
+</ion-card>
diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
index e6255cc27..77d4e330e 100644
--- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
+++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
@@ -1,33 +1,34 @@
-<ion-item class="ion-text-wrap core-course-list-item" (click)="openCourse()" [class.item-disabled]="course.visible == 0"
-    [class.item-dimmed]="course.hidden" [attr.aria-label]="course.displayname || course.fullname" detail="true" button
-    *ngIf="layout == 'list' || layout == 'listwithenrol'">
-    <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
-        [attr.course-color]="course.color ? null : course.colorNumber" [style.color]="course.color">
-    </ion-icon>
-    <ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
-        <img [src]="course.courseImage" core-external-content alt="" />
-    </ion-avatar>
-    <ion-label>
-        <ion-row>
-            <ion-col class="ion-align-self-center">
-                <ng-container *ngTemplateOutlet="mainInfo"></ng-container>
-            </ion-col>
-            <ion-col size="auto" class="ion-align-self-center">
-                <ng-container *ngIf="!isEnrolled">
-                    <ion-icon *ngFor="let icon of enrolmentIcons" color="dark" size="small" [name]="icon.icon"
-                        [title]="icon.label | translate" [attr.aria-label]="icon.label | translate">
-                    </ion-icon>
-                </ng-container>
-                <ng-container *ngIf="isEnrolled">
-                    <ng-container *ngTemplateOutlet="download"></ng-container>
-                </ng-container>
-            </ion-col>
-        </ion-row>
-        <p *ngIf="isEnrolled && progress! >= 0 && completionUserTracked !== false">
-            <core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
-        </p>
-    </ion-label>
-</ion-item>
+<ion-card class="core-course-list-item" *ngIf="layout == 'list' || layout == 'listwithenrol'" [class.item-dimmed]="course.hidden">
+    <ion-item class="ion-text-wrap" (click)="openCourse()" [class.item-disabled]="course.visible == 0"
+        [attr.aria-label]="course.displayname || course.fullname" button>
+        <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
+            [attr.course-color]="course.color ? null : course.colorNumber" [style.color]="course.color">
+        </ion-icon>
+        <ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
+            <img [src]="course.courseImage" core-external-content alt="" />
+        </ion-avatar>
+        <ion-label>
+            <ion-row>
+                <ion-col class="ion-align-self-center">
+                    <ng-container *ngTemplateOutlet="mainInfo"></ng-container>
+                </ion-col>
+                <ion-col size="auto" class="ion-align-self-center">
+                    <ng-container *ngIf="!isEnrolled">
+                        <ion-icon *ngFor="let icon of enrolmentIcons" color="dark" size="small" [name]="icon.icon"
+                            [title]="icon.label | translate" [attr.aria-label]="icon.label | translate">
+                        </ion-icon>
+                    </ng-container>
+                    <ng-container *ngIf="isEnrolled">
+                        <ng-container *ngTemplateOutlet="download"></ng-container>
+                    </ng-container>
+                </ion-col>
+            </ion-row>
+            <p *ngIf="isEnrolled && progress! >= 0 && completionUserTracked !== false">
+                <core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
+            </p>
+        </ion-label>
+    </ion-item>
+</ion-card>
 
 <ion-card [attr.course-color]="course.color ? null : course.colorNumber" *ngIf="layout == 'card' || layout == 'summarycard'"
     class="core-course-list-card" [class.item-dimmed]="course.hidden">
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index 2835c6aa9..47e14a6f0 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -1,6 +1,7 @@
 @import "~theme/globals";
 
-.core-course-list-item {
+
+ion-card.core-course-list-item {
     .course-icon {
         color: white;
         background: var(--gray-200);
@@ -37,7 +38,7 @@
     color: var(--core-star-color);
 }
 
-ion-card {
+ion-card.core-course-list-card {
     --vertical-margin: 12px;
     --border-radius: 16px;
     display: flex;
@@ -162,7 +163,7 @@ button {
 :host-context(.core-horizontal-scroll) {
     @include horizontal_scroll_item(80%, 250px, 300px);
 
-    ion-card {
+    ion-card.core-course-list-card {
         .core-course-thumb {
             padding-top: 30%;
         }
diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
index 1656bbb80..42ef760a4 100644
--- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
+++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
@@ -126,7 +126,7 @@
             margin: 0 auto;
             font-size: 18px;
             background-color: var(--toobar-background);
-            border-radius: 4px;
+            border-radius: var(--small-radius);
             @include core-transition(background-color, 200ms);
             color: var(--button-color);
             cursor: pointer;
diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss
index 9951ed0ae..9aec56ba2 100644
--- a/src/core/features/sitehome/pages/index/index.scss
+++ b/src/core/features/sitehome/pages/index/index.scss
@@ -2,10 +2,16 @@
 
 ion-item ion-icon {
     display: inline-block;
-    border-radius: 4px;
+    border-radius: var(--small-radius);
     padding: 0.7rem;
     background-color: $gray-100;
     line-height: var(--size);
     --margin-end: 1rem;
     @include margin-horizontal(null, var(--margin-end));
 }
+
+core-course-module.core-sitehome-news ::ng-deep  ion-card {
+    --border-width: 0;
+    margin: 0;
+    padding: 0;
+}
diff --git a/src/theme/components/discussion.scss b/src/theme/components/discussion.scss
index bf359a84b..173146469 100644
--- a/src/theme/components/discussion.scss
+++ b/src/theme/components/discussion.scss
@@ -24,7 +24,7 @@
     // Message item.
     ion-item.addon-message {
         border: 0;
-        border-radius: 4px;
+        border-radius: var(--small-radius);
         padding: 0 8px 0 8px;
         margin: 10px 8px 0 8px;
         --background: var(--addon-messages-message-bg);
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 562764e50..b6c4216fe 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -374,7 +374,7 @@ core-rich-text-editor .core-rte-editor {
         border: 1px solid var(--gray-500);
         background: var(--contrast-background);
         padding: 6px 8px;
-        border-radius: 4px;
+        border-radius: var(--small-radius);
         margin-left: 2px;
         margin-right: 2px;
         margin-bottom: 10px;
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index c7840b8cb..ff855bb82 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -104,13 +104,16 @@
     --ion-text-color-rgb: #{$text-color-rgb};
     --subdued-text-color: #595959;
 
+    --small-radius: 4px;
+    --big-radius: 8px;
+
     --ion-card-color: var(--text-color);
     ion-card {
         --border-width: 1px;
         --border-style: solid;
         --border-color: var(--stroke);
         --box-shadow: none;
-        --border-radius: 8px;
+        --border-radius: var(--big-radius);
     }
 
     --text-hightlight-background-color: #{$core-text-hightlight-background-color};
@@ -176,6 +179,9 @@
         --background: var(--ion-item-background);
         .searchbar-input {
             height: var(--a11y-min-target-size);
+            border: 1px solid var(--stroke);
+            box-shadow: none;
+            border-radius: var(--big-radius);
         }
     }
 
@@ -274,11 +280,10 @@
 
     --core-combobox-background: var(--ion-item-background);
     --core-combobox-color: var(--gray-900);
-    --core-combobox-border-color: var(--primary);
-    --core-combobox-border-width: 3px;
-    --core-combobox-border-all-width: 0 0 var(--core-combobox-border-width) 0;
-    --core-combobox-radius: 0px;
-    --core-combobox-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    --core-combobox-border-color: var(--stroke);
+    --core-combobox-border-width: 1px;
+    --core-combobox-radius: var(--big-radius);
+    --core-combobox-box-shadow: none;
 
     --selected-item-color: var(--primary);
     --selected-item-border-width: 5px;