From 72d979de55ad9ab2a8eb5c50bb764f0cc78df580 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Mon, 23 Mar 2020 14:21:41 +0100
Subject: [PATCH] improve user search results styling

---
 webapp/assets/_new/styles/resets.scss         |  4 ++++
 .../features/SearchResults/SearchResults.vue  | 24 +++++++++++++------
 .../generic/TabNavigation/TabNavigation.vue   |  3 ++-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/webapp/assets/_new/styles/resets.scss b/webapp/assets/_new/styles/resets.scss
index 4e8b0a952..a99eec408 100644
--- a/webapp/assets/_new/styles/resets.scss
+++ b/webapp/assets/_new/styles/resets.scss
@@ -26,3 +26,7 @@ ul {
   margin: 0;
   padding: 0;
 }
+
+li {
+  margin: 0;
+}
diff --git a/webapp/components/_new/features/SearchResults/SearchResults.vue b/webapp/components/_new/features/SearchResults/SearchResults.vue
index 7c6890619..4ac2a5cc9 100644
--- a/webapp/components/_new/features/SearchResults/SearchResults.vue
+++ b/webapp/components/_new/features/SearchResults/SearchResults.vue
@@ -8,8 +8,8 @@
           <post-teaser :post="resource" />
         </masonry-grid-item>
       </masonry-grid>
-      <ul v-else-if="activeTab === 'User'">
-        <li v-for="resource in activeResources" :key="resource.key" class="list">
+      <ul v-else-if="activeTab === 'User'" class="user-list">
+        <li v-for="resource in activeResources" :key="resource.key" class="item">
           <base-card :wideContent="true">
             <user-teaser :user="resource" />
           </base-card>
@@ -98,15 +98,25 @@ export default {
 </script>
 <style lang="scss">
 .search-results {
-  // width: 40%;
-
   > section {
+    display: inline-block;
+    width: 100%;
+    max-width: 600px;
     padding: $space-small;
     background-color: $color-neutral-80;
     border-radius: 0 $border-radius-base $border-radius-base $border-radius-base;
   }
-}
-.search-results .list {
-  margin: $space-xxx-small 0 $space-small 0;
+
+  .user-list > .item {
+    transition: opacity .1s;
+
+    &:not(:last-child) {
+      margin-bottom: $space-small;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 }
 </style>
diff --git a/webapp/components/_new/generic/TabNavigation/TabNavigation.vue b/webapp/components/_new/generic/TabNavigation/TabNavigation.vue
index bd6d2bc5c..f6bfa4f94 100644
--- a/webapp/components/_new/generic/TabNavigation/TabNavigation.vue
+++ b/webapp/components/_new/generic/TabNavigation/TabNavigation.vue
@@ -46,7 +46,8 @@ export default {
 
     &.--disabled {
       background: $background-color-disabled;
-      border: 1px solid $color-neutral-80;
+      border: $border-size-base solid $color-neutral-80;
+      border-bottom: none;
       pointer-events: none;
       cursor: default;
     }