From 6688da72c0a50fb8a4be3f4e46d1acbc8ef40a2a Mon Sep 17 00:00:00 2001
From: Igor Lobanov <bniwredyc@gmail.com>
Date: Thu, 29 Sep 2022 12:31:01 +0200
Subject: [PATCH] header search icon styles fixed

---
 src/components/Nav/Header.module.scss | 26 +++++++++++++-------------
 src/components/Nav/Header.tsx         |  2 +-
 src/components/Nav/Icon.tsx           | 21 ++++++++++++++++-----
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index 9d6dee20..ac3be68c 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -63,19 +63,6 @@
     height: 80px;
   }
 
-  img {
-    height: 32px;
-    object-fit: contain;
-    object-position: left;
-    transition: height 0.2s;
-    vertical-align: middle;
-    width: 100px;
-
-    @include media-breakpoint-up(lg) {
-      width: 175px;
-    }
-  }
-
   a {
     border: none;
     color: #000;
@@ -86,6 +73,19 @@
   }
 }
 
+.searchIcon {
+  height: 32px;
+  object-fit: contain;
+  object-position: left;
+  transition: height 0.2s;
+  vertical-align: middle;
+  width: 100px;
+
+  @include media-breakpoint-up(lg) {
+    width: 175px;
+  }
+}
+
 .usernav {
   display: inline-flex;
   padding-right: 0;
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index b61d2ee0..11715948 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -120,7 +120,7 @@ export const Header = (props: Props) => {
               </For>
               <li class={styles.headerSearch}>
                 <a href="#">
-                  <Icon name="search" />
+                  <Icon name="search" iconClassName={styles.searchIcon} />
                   {t('Search')}
                 </a>
               </li>
diff --git a/src/components/Nav/Icon.tsx b/src/components/Nav/Icon.tsx
index 4008080a..823cfcac 100644
--- a/src/components/Nav/Icon.tsx
+++ b/src/components/Nav/Icon.tsx
@@ -1,14 +1,25 @@
+import clsx from 'clsx'
 import { mergeProps, Show } from 'solid-js'
+import type { JSX } from 'solid-js'
 import './Icon.css'
 
-export const Icon = (_props: any) => {
-  const props = mergeProps({ title: '', counter: 0 }, _props)
+type IconProps = {
+  className?: string
+  iconClassName?: string
+  style?: string | JSX.CSSProperties
+  title?: string
+  name?: string
+  counter?: number
+}
+
+export const Icon = (passedProps: IconProps) => {
+  const props = mergeProps({ title: '', counter: 0 }, passedProps)
 
   return (
-    <div class="icon" style={props.style}>
-      <img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} />
+    <div class={clsx('icon', props.className)} style={props.style}>
+      <img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} class={props.iconClassName} />
       <Show when={props.counter}>
-        <div class="notifications-counter">{props.counter.toString()}</div>
+        <div class="notifications-counter">{props.counter}</div>
       </Show>
     </div>
   )