From 9b4e15efebb4453cc5e2b050b5bfeb6ab52b5cdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Feb 2022 11:43:06 +0100
Subject: [PATCH] MOBILE-3814 home: Add cards to improve site home styling

---
 .../features/sitehome/pages/index/index.html  | 58 +++++++++++--------
 .../features/sitehome/pages/index/index.scss  | 12 ++--
 src/theme/components/format-text.scss         |  2 +-
 3 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html
index 43e87b631..97f7ba85a 100644
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@@ -55,12 +55,14 @@
 </ion-content>
 
 <ng-template #allCourseList>
-    <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()">
-        <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <h2>{{ 'core.courses.availablecourses' | translate}}</h2>
-        </ion-label>
-    </ion-item>
+    <ion-card>
+        <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()">
+            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <h2>{{ 'core.courses.availablecourses' | translate}}</h2>
+            </ion-label>
+        </ion-item>
+    </ion-card>
 </ng-template>
 
 <ng-template #news>
@@ -69,29 +71,35 @@
 </ng-template>
 
 <ng-template #categories>
-    <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
-        <ion-icon name="fas-folder" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <h2>{{ 'core.courses.categories' | translate}}</h2>
-        </ion-label>
-    </ion-item>
+    <ion-card>
+        <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
+            <ion-icon name="fas-folder" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <h2>{{ 'core.courses.categories' | translate}}</h2>
+            </ion-label>
+        </ion-item>
+    </ion-card>
 </ng-template>
 
 <ng-template #enrolledCourseList>
-    <ion-item button class="ion-text-wrap" (click)="openMyCourses()">
-        <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true">
-        </ion-icon>
-        <ion-label>
-            <h2>{{ 'core.courses.mycourses' | translate}}</h2>
-        </ion-label>
-    </ion-item>
+    <ion-card>
+        <ion-item button class="ion-text-wrap" (click)="openMyCourses()">
+            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true">
+            </ion-icon>
+            <ion-label>
+                <h2>{{ 'core.courses.mycourses' | translate}}</h2>
+            </ion-label>
+        </ion-item>
+    </ion-card>
 </ng-template>
 
 <ng-template #courseSearch>
-    <ion-item button class="ion-text-wrap" (click)="openSearch()">
-        <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <h2>{{ 'core.courses.searchcourses' | translate}}</h2>
-        </ion-label>
-    </ion-item>
+    <ion-card>
+        <ion-item button class="ion-text-wrap" (click)="openSearch()">
+            <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <h2>{{ 'core.courses.searchcourses' | translate}}</h2>
+            </ion-label>
+        </ion-item>
+    </ion-card>
 </ng-template>
diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss
index 6193c059a..25fb8be63 100644
--- a/src/core/features/sitehome/pages/index/index.scss
+++ b/src/core/features/sitehome/pages/index/index.scss
@@ -4,18 +4,16 @@ ion-item ion-icon {
     display: inline-block;
     border-radius: var(--module-icon-radius);
     padding: 0.7rem;
-    background-color: $gray-100;
+    background-color: var(--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;
-}
-
 core-spacer ::ng-deep .item {
     border-radius: var(--medium-radius);
+    --horizontal-margin: 10px;
+    margin-left: var(--horizontal-margin);
+    margin-right: var(--horizontal-margin);
+    width: auto;
 }
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index a5fe5391d..1cfaad8c7 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -179,7 +179,7 @@ core-format-text {
         position: absolute;
         @include position(null, 10px, 10px, null);
         color: var(--ion-text-color);
-        border-radius: var(--small-radius);
+        border-radius: var(--huge-radius);
         background-color: var(--core-format-text-viewer-icon-background);
         display: flex;