From 6d13fdf6a78903dc944fa4829236bd9aa0123cfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 31 Mar 2022 15:33:42 +0200
Subject: [PATCH] MOBILE-3833 style: Restyle spacers

---
 .../components/filteroptions/filteroptions.scss           | 8 ++++++++
 .../myoverview/components/filteroptions/filteroptions.ts  | 1 +
 src/core/components/spacer/spacer.ts                      | 5 +++--
 src/core/features/sitehome/pages/index/index.scss         | 8 ++------
 src/theme/theme.light.scss                                | 6 ++----
 5 files changed, 16 insertions(+), 12 deletions(-)
 create mode 100644 src/addons/block/myoverview/components/filteroptions/filteroptions.scss

diff --git a/src/addons/block/myoverview/components/filteroptions/filteroptions.scss b/src/addons/block/myoverview/components/filteroptions/filteroptions.scss
new file mode 100644
index 000000000..166260056
--- /dev/null
+++ b/src/addons/block/myoverview/components/filteroptions/filteroptions.scss
@@ -0,0 +1,8 @@
+ion-footer {
+    &::before {
+        display: none;
+    }
+    ion-button {
+        margin: 0;
+    }
+}
diff --git a/src/addons/block/myoverview/components/filteroptions/filteroptions.ts b/src/addons/block/myoverview/components/filteroptions/filteroptions.ts
index 93b9d753a..ad77d9a5b 100644
--- a/src/addons/block/myoverview/components/filteroptions/filteroptions.ts
+++ b/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 {
 
diff --git a/src/core/components/spacer/spacer.ts b/src/core/components/spacer/spacer.ts
index e2196dd81..0bedc96bf 100644
--- a/src/core/components/spacer/spacer.ts
+++ b/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>',
-    styles: [':host {--item-divider-min-height: 30px;}'],
+    template: '',
+    styles: [':host { display: block; margin: var(--spacer-vertical) var(--spacer-horizontal); \
+        border-bottom: 1px solid var(--spacer-color);}'],
 })
 export class CoreSpacerComponent {
 
diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss
index f77fee9ef..2581b9366 100644
--- a/src/core/features/sitehome/pages/index/index.scss
+++ b/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 {
-    border-radius: var(--medium-radius);
-    --horizontal-margin: 10px;
-    margin-left: var(--horizontal-margin);
-    margin-right: var(--horizontal-margin);
-    width: auto;
+core-spacer {
+    --spacer-horizontal: 10px;
 }
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 14da0eacf..944c0f5d6 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -308,10 +308,8 @@
         --min-height: var(--item-divider-min-height);
     }
 
-    --spacer-background: var(--light);
-    core-spacer {
-        --item-divider-background: var(--spacer-background);
-    }
+    --spacer-vertical: 8px;
+    --spacer-color: var(--gray-300);
 
     ion-note {
         --color: var(--subdued-text-color);