style: Improve card spacing (#1638)

This PR applies the 8px spacing rule to the header of filters, global actions and cards. Closes #1624 (cherry picked from commit c79d7fe)
argilla-io · Aug 22, 2022 · fd4016a · fd4016a
1 parent ecdc854
commit fd4016a
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 15 deletions.
diff --git a/frontend/assets/scss/abstract/placeholders/_placeholders.scss b/frontend/assets/scss/abstract/placeholders/_placeholders.scss
@@ -82,7 +82,7 @@
     padding: 4em;
 }
 %collapsable-if-metrics {
-  padding-right: calc($sidebarMenuWidth + 15px);
+  padding-right: calc($sidebarMenuWidth + 56px);
   transition: padding 0.25s linear 0.2s;
   .--metrics & {
     @include media(">desktop") {

diff --git a/frontend/assets/scss/abstract/variables/_variables.scss b/frontend/assets/scss/abstract/variables/_variables.scss
@@ -107,6 +107,7 @@ $maxwidth: 980px;
 // Utilities
 //-----------
 $border-radius: 5px;
+$border-radius-m: 10px;
 $radius: 0.5em;
 // Shadows
 //-----------

diff --git a/frontend/components/commons/header/filters/FiltersArea.vue b/frontend/components/commons/header/filters/FiltersArea.vue
@@ -136,7 +136,7 @@ export default {
     align-items: center;
   }
   &__content {
-    padding: 0.5em 0 0.5em 0;
+    padding: 32px 0;
     position: relative;
     width: 100%;
   }

diff --git a/frontend/components/commons/header/global-actions/GlobalActions.vue b/frontend/components/commons/header/global-actions/GlobalActions.vue
@@ -54,10 +54,10 @@ export default {
   text-align: left;
   padding: 1em 1.4em;
   background: $lighter-color;
-  border-radius: 3px 3px 1px 1px;
-  border: 1px solid palette(grey, smooth);
+  border-radius: $border-radius-m;
   position: relative;
-  margin-bottom: -1px;
+  box-shadow: 0 1px 2px 0 rgba(185, 185, 185, 0.5);
+  margin-bottom: 16px;
   &--exploration {
     position: relative;
   }

diff --git a/frontend/components/commons/results/ResultsList.vue b/frontend/components/commons/results/ResultsList.vue
@@ -195,7 +195,6 @@ export default {
 .vue-recycle-scroller__item-view {
   box-sizing: border-box;
 }
-
 $maxItemsperPage: 20;
 @for $i from 0 through $maxItemsperPage {
   .vue-recycle-scroller__item-view:nth-of-type(#{$i}) {

diff --git a/frontend/components/commons/results/ResultsLoading.vue b/frontend/components/commons/results/ResultsLoading.vue
@@ -41,7 +41,8 @@ export default {
   height: 2px;
   position: absolute;
   top: 0;
-  left: 0;
+  left: 10px;
+  right: 10px;
   background: $primary-color;
   animation: load 0.8s ease-in-out infinite;
 }
@@ -51,7 +52,8 @@ export default {
   width: 100%;
   background: white;
   border: 1px solid palette(grey, smooth);
-  margin-bottom: -1px;
+  margin-bottom: 8px;
+  border-radius: $border-radius-m;
 }
 @keyframes load {
   0% {

diff --git a/frontend/components/commons/results/ResultsRecord.vue b/frontend/components/commons/results/ResultsRecord.vue
@@ -118,18 +118,17 @@ export default {
   &__item {
     position: relative;
     background: $lighter-color;
-    border-radius: 1px;
+    border-radius: $border-radius-m;
     display: inline-block;
     width: 100%;
     transition: 0.3s ease-in-out;
     border: 1px solid palette(grey, smooth);
-    border-bottom: 0;
+    margin-bottom: 8px;
     &__asterisk {
       @include font-size(24px);
       color: $secondary-color;
     }
     &--annotation-mode {
-      // padding-left: 4em;
       @extend .list__item !optional;
       &.discarded {
         opacity: 0.5;
@@ -148,7 +147,6 @@ export default {
     }
   }
 }
-
 .list-enter-active,
 .list-leave-active {
   transition: all 0.5s ease;

diff --git a/frontend/components/core/RePagination.vue b/frontend/components/core/RePagination.vue
@@ -228,7 +228,7 @@ $pagination-size: 30px;
     border-top: 1px solid palette(grey, smooth);
     min-height: 63px;
     z-index: 99;
-    padding-right: 1em;
+    padding-right: 56px;
     padding-left: 4em;
     .--metrics & {
       @include media(">desktop") {

diff --git a/frontend/components/token-classifier/results/EntitiesHeader.vue b/frontend/components/token-classifier/results/EntitiesHeader.vue
@@ -116,7 +116,7 @@ export default {
 .container {
   @extend %container;
   padding-top: 0;
-  padding-bottom: 0.7em;
+  padding-bottom: 0;
   margin-left: 0;
   @extend %collapsable-if-metrics !optional;
 }
@@ -126,8 +126,9 @@ export default {
   }
   &__container {
     padding: 0.4em 0.5em;
+    margin-bottom: 16px;
     background: palette(white);
-    border-radius: $border-radius;
+    border-radius: $border-radius-m;
     box-shadow: 0 1px 2px 0 rgba(185, 185, 185, 0.5);
     min-height: 48px;
     max-height: 189px;