From d7e54e21e1ac15976076c9f157059b2cba43e9b1 Mon Sep 17 00:00:00 2001
From: Papin Nikolai <nikolai@weirdcat.ru>
Date: Mon, 5 Aug 2024 11:08:21 +0300
Subject: [PATCH] Did it via flexbox + position absolute of the searchbar.
 Realized that that everything is a little bigger on the dummy than i assumed
 it was due to 90% scaling in view mode, but seems fine

---
 frontend/src/lib/components/header.svelte    |  9 ++++-----
 frontend/src/lib/components/icon.svelte      | 16 +++++++++++++---
 frontend/src/lib/components/searchbar.svelte |  9 ++++++++-
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/header.svelte b/frontend/src/lib/components/header.svelte
index e7fed12..6d37042 100644
--- a/frontend/src/lib/components/header.svelte
+++ b/frontend/src/lib/components/header.svelte
@@ -20,11 +20,8 @@
     <a class="header__link" href="/blog">Blog</a>
     <a class="header__link" href="/services">Services</a>
 
-
-    <Spacer type="right"/>
-    <Searchbar/>
-
-    <Spacer type="left"/>
+    <Spacer type="horizontal"/>
+    <Searchbar id="searchbar"/>
 
     <Icon class="header__language-button" image={LanguageIcon} size="40px"/>
     <Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>
@@ -34,11 +31,13 @@
 <style>
     .header {
         display: flex;
+        justify-content: space-evenly;
         align-items: center;
 
         gap: 20px;
         padding: 5px 20px 5px 20px;
 
+        height: 74px;
         background-color: var(--col_panel);
         box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.3);
     }
diff --git a/frontend/src/lib/components/icon.svelte b/frontend/src/lib/components/icon.svelte
index 862f124..5f8f4d6 100644
--- a/frontend/src/lib/components/icon.svelte
+++ b/frontend/src/lib/components/icon.svelte
@@ -1,15 +1,18 @@
+<!-- FIXME: deal with this mess in style property. You can't do all that right in your HTML -->
+
 <script>
     export let image = "";
-    export let onclick = () => {};
+    export let onclick;
     export let color = "var(--col_text_panel)";
     export let size = "25px";
 </script>
 
-<input class="icon" type="button" value="" style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" on:click={onclick}>
+<input class="icon" type="button" value="" 
+style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" 
+on:click={onclick ? onclick : null}>
 
 <style>
     .icon {
-        cursor: pointer;
         background-color: var(--color);
         object-fit: contain;
         -webkit-mask-image: var(--image);
@@ -19,4 +22,11 @@
         height: var(--size);
         width: var(--size);
     }
+
+    .clickable {
+        cursor: pointer;
+    }
+    .clickable:hover {
+        background-color: var(--col_text_hint);
+    }
 </style>
\ No newline at end of file
diff --git a/frontend/src/lib/components/searchbar.svelte b/frontend/src/lib/components/searchbar.svelte
index c60ccb2..a91701d 100644
--- a/frontend/src/lib/components/searchbar.svelte
+++ b/frontend/src/lib/components/searchbar.svelte
@@ -11,21 +11,28 @@
 <style>
     .searchbar {
 
+        position: absolute;
         display: flex;
         align-items: center;
 
         background-color: var(--col_panel_field);
         border-radius: 30px;
 
+
+        height: 36px;
         padding: 10px;
+        margin-inline: auto auto;
     }
 
+    .searchbar__icon {
+        margin: 9px;
+    }
     .searchbar__input {
         border: none;
         background-color: transparent;
         color: var(--col_text_panel);
 
-        font-size: 18px;
+        font-size: 16px;
     }
 
     .searchbar__input:focus {