MOBILE-3814 blocks: Use cards on blocks

src/core/features/block/components/block/core-block.html

@@ -1,4 +1,4 @@
 <!-- Only render the block if it's supported. -->
-<div *ngIf="loaded && componentClass && block.visible" class="{{class}}">
+<ion-card *ngIf="loaded && componentClass && block.visible" class="{{class}}">
     <core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
-</div>
+</ion-card>

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

@@ -1,3 +1,7 @@
+:host {
+    --item-divider-font-size: var(--item-divider-font-size-big);
+}
+
 .core-course-section-nav-buttons {
     display: flex;
     justify-content: space-between;

src/core/features/courses/pages/my/my.scss

@@ -1,5 +1,9 @@
 @import "~theme/globals";
 
+:host {
+    --item-divider-font-size: var(--item-divider-font-size-big);
+}
+
 :host ::ng-deep ion-item-divider {
     display: none !important;
 }
@@ -11,6 +15,10 @@
     --internal-loading-inline-min-height: calc(100vh - var(--core-header-toolbar-height) - var(--bottom-tabs-size) - 2px);
 }
 
+core-block ::ng-deep ion-card.addon-block-myoverview {
+    --border-width: 0;
+}
+
 @if ($core-dashboard-logo) {
     .in-toolbar h1 .core-header-logo {
         max-height: calc(var(--core-header-toolbar-height) - 24px);

src/theme/theme.light.scss

@@ -225,7 +225,8 @@
     --item-divider-background: var(--ion-item-background);
     --item-divider-color: var(--text-color);
     --item-divider-border-width: 0px;
-    --item-divider-font-size: 20px;
+    --item-divider-font-size: 16px;
+    --item-divider-font-size-big: 20px;
     ion-item-divider, ion-item.divider {
         --background: var(--item-divider-background);
         --color: var(--item-divider-color);