From 3f3c53b67dad24a19aa8fcb1d4a02c99ef578aaa Mon Sep 17 00:00:00 2001
From: dperolio <dustin@dperolio.com>
Date: Sun, 27 Feb 2022 19:32:44 -0500
Subject: [PATCH] fix addons list to use gap instead of negative margin hackery

---
 .../styles/addon/displays/_card.scss          |  1 -
 .../styles/addon/displays/_compact.scss       |  4 ---
 .../styles/addon/displays/_list.scss          |  4 ---
 .../addon-manager/styles/addons/_list.scss    | 25 +++----------------
 4 files changed, 4 insertions(+), 30 deletions(-)

diff --git a/renderer/src/builtins/addon-manager/styles/addon/displays/_card.scss b/renderer/src/builtins/addon-manager/styles/addon/displays/_card.scss
index ac229443..983c4f08 100644
--- a/renderer/src/builtins/addon-manager/styles/addon/displays/_card.scss
+++ b/renderer/src/builtins/addon-manager/styles/addon/displays/_card.scss
@@ -9,7 +9,6 @@
   display: flex;
   flex-flow: column;
   min-width: 340px;
-  margin: 10px;
   cursor: pointer;
   transition: box-shadow .2s ease-out, background .2s ease-out;
   flex: 1;
diff --git a/renderer/src/builtins/addon-manager/styles/addon/displays/_compact.scss b/renderer/src/builtins/addon-manager/styles/addon/displays/_compact.scss
index 49ae8455..854a2f6e 100644
--- a/renderer/src/builtins/addon-manager/styles/addon/displays/_compact.scss
+++ b/renderer/src/builtins/addon-manager/styles/addon/displays/_compact.scss
@@ -3,12 +3,8 @@
 .vz-addons-list {
   $base: &;
   &[vz-display='compact'] {
-    #{$base}-items {
-      margin: 25px -5px 0;
-    }
     .vz-addon-card {
       padding: 16px;
-      margin: 5px;
       &-header {
         padding: 0;
       }
diff --git a/renderer/src/builtins/addon-manager/styles/addon/displays/_list.scss b/renderer/src/builtins/addon-manager/styles/addon/displays/_list.scss
index fb0b8783..9c05ff8f 100644
--- a/renderer/src/builtins/addon-manager/styles/addon/displays/_list.scss
+++ b/renderer/src/builtins/addon-manager/styles/addon/displays/_list.scss
@@ -4,12 +4,8 @@
   $base: &;
   z-index: 1;
   &[vz-display='list'] {
-    #{$base}-items {
-      margin: 25px -10px 0;
-    }
     .vz-addon-card {
       flex: 1 100%;
-      margin: 5px 10px;
     }
     &:not([vz-banners]) {
       .vz-addon-card {
diff --git a/renderer/src/builtins/addon-manager/styles/addons/_list.scss b/renderer/src/builtins/addon-manager/styles/addons/_list.scss
index 4529b293..25673caf 100644
--- a/renderer/src/builtins/addon-manager/styles/addons/_list.scss
+++ b/renderer/src/builtins/addon-manager/styles/addons/_list.scss
@@ -4,31 +4,14 @@
   display: flex;
   flex-flow: column;
   flex: 1;
-  &-page-content {
-    // &::before {
-    //   @include vz.size(100%, 350px);
-    //   content: '';
-    //   -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 70%);
-    //   mask-image: linear-gradient(to top, transparent 0%, #000 70%);
-    //   background-image: url('vizaliy://assets/images/addons-list-bg-dark.png');
-    //   background-repeat: no-repeat;
-    //   background-position: center;
-    //   background-size: cover;
-    //   position: absolute;
-    //   top: 0;
-    //   left: 0;
-    //   z-index: 0;
-    //   animation: vz-fade-half 0.3s forwards;
-    //   [vz-theme='light'] & {
-    //     background-image: url('vizality://assets/images/addons-list-bg-light.png');
-    //   }
-    // }
-  }
   &-items {
     display: flex;
     justify-content: center;
     flex-flow: row wrap;
-    margin: 20px -10px 20px; // Negative left and right margins to counteract vz-addon-card margin
+    gap: 15px;
+    [vz-display='compact'] & {
+      gap: 10px;
+    }
   }
   &-inner {
     display: flex;