ktl-1608 feat: search adjustments

Kotlin · Sep 20, 2024 · 1149fa7 · 1149fa7
1 parent d049318
commit 1149fa7
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 16 deletions.
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss b/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss
@@ -4,8 +4,8 @@
 
 @import '../../ui-kit/_tokens/index';
 
-$font-color: hsla(0deg, 0%, 100%, 0.8);
-$secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
+$font-color: rgba(255, 255, 255, 0.96);
+$secondary-font-color: rgba(255, 255, 255, 0.70);
 
 #pages-search {
   padding: 0;
@@ -30,6 +30,7 @@ $secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
 
     font-size: 0;
     line-height: 0;
+    tab-index: 1;
   }
 }
 
@@ -40,22 +41,26 @@ $secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
 }
 
 .popup-wrapper {
-  min-width: calc(100% - 322px) !important;
+  min-width: 636px !important;
 
   color: $font-color;
 
   border: 1px solid hsla(0deg, 0%, 100%, 0.2) !important;
 
   background-color: #27282c !important;
 
+
   [class^='filterWrapper'] {
     border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.2);
   }
 
   input {
-    color: $font-color !important;
+    color: #ffffff;
 
     font-weight: normal !important;
+    font-size: 16px;
+
+    height: 32px;
   }
 
   span[data-test-custom='ring-select-popup-filter-icon'] {
@@ -64,6 +69,12 @@ $secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
 
   button[data-test='ring-input-clear'] {
     color: #fff !important;
+    span {
+      display: none;
+    }
+    &:after {
+      content: "Clear";
+    }
   }
 }
 
@@ -74,25 +85,46 @@ $secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
 }
 
 .template-wrapper {
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  padding: 4px 24px;
 
-  height: 32px;
+  height: auto;
   grid-template-columns: auto auto;
+  overflow: hidden;
 
   strong {
     color: $font-color;
+    background: rgba(48,127,255,0.3);
   }
+}
 
-  span {
-    color: $font-color;
-
-    line-height: 32px;
+.template-title {
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  word-break: break-all;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
 
-    &.template-description {
-      color: $secondary-font-color;
-      justify-self: end;
-    }
-  }
+.template-description {
+    display: block;
+    color: $secondary-font-color;
+    justify-self: end;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    word-break: break-all;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
 }
 
 @media screen and (width <= 759px) {
@@ -106,6 +138,16 @@ $secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
       line-height: unset;
     }
   }
+
+  .template-title {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .template-description {
+    font-size: 14px;
+    line-height: 20px;
+  }
 }
 
 .template-name {
@@ -120,3 +162,7 @@ $secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
 [class*='hover'] {
   background-color: hsla(0deg, 0%, 100%, 0.1) !important;
 }
+
+div[data-test='ring-select-popup-filter'] {
+  padding-left: 40px;
+}
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/components/search/searchResultRow.tsx b/dokka-subprojects/plugin-base-frontend/src/main/components/search/searchResultRow.tsx
@@ -29,7 +29,7 @@ export const SearchResultRow: React.FC<SearchProps> = ({ searchResult }: SearchP
 
   return (
     <div className="template-wrapper">
-      <span>{out}</span>
+      <div className="template-title">{out}</div>
       <span className="template-description">{searchResult.description}</span>
     </div>
   );