MOBILE-3833 style: Restyle spacers

src/addons/block/myoverview/components/filteroptions/filteroptions.scss

@@ -0,0 +1,8 @@
+ion-footer {
+    &::before {
+        display: none;
+    }
+    ion-button {
+        margin: 0;
+    }
+}

src/addons/block/myoverview/components/filteroptions/filteroptions.ts

@@ -22,6 +22,7 @@ import { AddonBlockMyOverviewFilterOptions } from '../myoverview/myoverview';
 @Component({
     selector: 'addon-block-myoverview-filter-options',
     templateUrl: 'filteroptions.html',
+    styleUrls: ['filteroptions.scss'],
 })
 export class AddonBlockMyOverviewFilterOptionsComponent {
 

src/core/components/spacer/spacer.ts

@@ -22,8 +22,9 @@ import { Component } from '@angular/core';
  */
 @Component({
     selector: 'core-spacer',
-    template: '<ion-item-divider><ion-label></ion-label></ion-item-divider>',
+    template: '',
-    styles: [':host {--item-divider-min-height: 30px;}'],
+    styles: [':host { display: block; margin: var(--spacer-vertical) var(--spacer-horizontal); \
+        border-bottom: 1px solid var(--spacer-color);}'],
 })
 export class CoreSpacerComponent {
 

src/core/features/sitehome/pages/index/index.scss

@@ -11,10 +11,6 @@ ion-item ion-icon {
     @include margin-horizontal(null, var(--margin-end));
 }
 
-core-spacer ::ng-deep .item {
+core-spacer {
-    border-radius: var(--medium-radius);
+    --spacer-horizontal: 10px;
-    --horizontal-margin: 10px;
-    margin-left: var(--horizontal-margin);
-    margin-right: var(--horizontal-margin);
-    width: auto;
 }

src/theme/theme.light.scss

@@ -308,10 +308,8 @@
         --min-height: var(--item-divider-min-height);
     }
 
-    --spacer-background: var(--light);
+    --spacer-vertical: 8px;
-    core-spacer {
+    --spacer-color: var(--gray-300);
-        --item-divider-background: var(--spacer-background);
-    }
 
     ion-note {
         --color: var(--subdued-text-color);