fix: Reverts popover styling for search page (#6688)

chatwoot · Mar 20, 2023 · d2aa5f4 · d2aa5f4
1 parent e76b63f
commit d2aa5f4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -76,7 +76,8 @@ export default {
   display: flex;
   align-items: center;
   padding: var(--space-small) var(--space-normal);
-  border-bottom: 1px solid var(--s-100);
+  border: 1px solid var(--s-100);
+  border-radius: var(--border-radius-small);
   transition: border-bottom 0.2s ease-in-out;
 
   input[type='search'] {
@@ -86,7 +87,7 @@ export default {
   }
 
   &.is-focused {
-    border-bottom: 1px solid var(--w-100);
+    border-color: var(--w-100);
 
     .icon {
       color: var(--w-400);

diff --git a/app/javascript/dashboard/modules/search/components/SearchTabs.vue b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -35,6 +35,6 @@ export default {
 <style lang="scss" scoped>
 .tab-container {
   margin-top: var(--space-smaller);
-  border-bottom: 1px solid var(--s-50);
+  border-bottom: 1px solid var(--s-100);
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -47,7 +47,7 @@
             </p>
           </div>
           <div v-else class="empty text-center">
-            <p class="text-center">
+            <p class="text-center margin-bottom-0">
               <fluent-icon icon="search" size="24px" class="icon" />
             </p>
             <p class="empty-state__text">
@@ -202,23 +202,21 @@ export default {
 }
 .search-root {
   margin: 0 auto;
-  max-width: 64rem;
+  max-width: 72rem;
   min-height: 48rem;
   width: 100%;
   height: fit-content;
-  box-shadow: var(--shadow);
+  padding: var(--space-normal);
   display: flex;
   position: relative;
   flex-direction: column;
   background: white;
-  border-radius: var(--border-radius-large);
+  overflow-y: auto;
   margin-top: var(--space-large);
-  border-top: 1px solid var(--s-25);
+
   .search-results {
     flex-grow: 1;
     height: 100%;
-    max-height: 80vh;
-    overflow-y: auto;
     padding: 0 var(--space-small);
   }
 }
@@ -230,6 +228,7 @@ export default {
   justify-content: center;
   padding: var(--space-medium) var(--space-normal);
   border-radius: var(--border-radius-medium);
+  margin-top: var(--space-large);
   .icon {
     color: var(--s-500);
   }