feat: search adjustments (#3819)

* ktl-1608 feat: search adjustments * fix: fixed focus style for search button --------- Co-authored-by: Yuri Teplyakov <[email protected]>
Kotlin · Oct 1, 2024 · 22a4e73 · 22a4e73
1 parent 0224c7a
commit 22a4e73
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 15 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,18 +4,33 @@
 
 @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.7);
 
 #pages-search {
+  width: 40px;
+  height: 40px;
   padding: 0;
 
   cursor: pointer;
 
   border: none;
+  border-radius: var(--size-s1);
+
   background: transparent;
 
   font-size: 0;
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+  }
+}
+
+@media (width < 900px) {
+  #pages-search {
+    width: 52px;
+    height: 52px;
+  }
 }
 
 .search {
@@ -30,6 +45,7 @@ $secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
 
     font-size: 0;
     line-height: 0;
+    tab-index: 1;
   }
 }
 
@@ -40,7 +56,7 @@ $secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
 }
 
 .popup-wrapper {
-  min-width: calc(100% - 322px) !important;
+  min-width: 636px !important;
 
   color: $font-color;
 
@@ -53,7 +69,11 @@ $secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
   }
 
   input {
-    color: $font-color !important;
+    height: 32px;
+
+    color: #fff;
+
+    font-size: 16px;
 
     font-weight: normal !important;
   }
@@ -64,6 +84,14 @@ $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 +102,52 @@ $secondary-font-color: hsla(0deg, 0%, 100%, 0.6);
 }
 
 .template-wrapper {
-  display: grid;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
 
-  height: 32px;
+  height: auto;
+  padding: 4px 24px;
   grid-template-columns: auto auto;
 
   strong {
     color: $font-color;
+    background: rgba(48, 127, 255, 0.3);
   }
+}
 
-  span {
-    color: $font-color;
+.template-title {
+  display: -webkit-box;
+  overflow: hidden;
 
-    line-height: 32px;
+  white-space: normal;
+  word-break: break-all;
 
-    &.template-description {
-      color: $secondary-font-color;
-      justify-self: end;
-    }
-  }
+  color: #fff;
+
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.template-description {
+  display: block;
+  display: -webkit-box;
+  overflow: hidden;
+
+  white-space: normal;
+  word-break: break-all;
+
+  color: $secondary-font-color;
+
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  justify-self: end;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
 }
 
 @media screen and (width <= 759px) {
@@ -106,6 +161,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 +185,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>
   );