fix(serch-bar): design, chage icon color and input padding (#588)

Co-authored-by: Dmitriy Potychkin <dmitriy.traceable.ai>
Co-authored-by: Anand Tiwary <[email protected]>

Author: DmitiryPotychkin

projects/components/src/search-box/search-box.component.scss

@@ -11,13 +11,14 @@
   padding: 0 8px;
 
   .icon {
-    color: $gray-5;
+    color: $gray-7;
     position: absolute;
     padding: 0 6px;
     cursor: pointer;
   }
 
   .close {
+    color: $gray-5;
     right: 0;
   }
 
@@ -42,12 +43,12 @@
     width: 420px;
     background: transparent;
     border: 1px solid transparent;
-    padding-left: 40px;
+    padding-left: 28px;
     padding-right: 36px;
     border-radius: 4px;
 
     &::placeholder {
-      @include body-1-regular($gray-5);
+      @include body-1-regular($gray-7);
       line-height: 30px;
     }
 

projects/components/src/search-box/search-box.component.ts

@@ -12,7 +12,7 @@ import { IconSize } from '../icon/icon-size';
   providers: [SubscriptionLifecycle],
   template: `
     <div class="ht-search-box" [class.focused]="this.isFocused">
-      <ht-icon icon="${IconType.Search}" size="${IconSize.Medium}" class="icon" (click)="onSubmit()"></ht-icon>
+      <ht-icon icon="${IconType.Search}" size="${IconSize.Small}" class="icon" (click)="onSubmit()"></ht-icon>
       <input
         class="input"
         type="text"