Merge pull request #89 from Sybit-Education/fix/filter-color-not-matching

Filter same color as search icon fix

Author: AlexanderKugler

src/app/components/filter/filter.component.html

@@ -1,9 +1,6 @@
-<button type="button" class="position" data-bs-toggle="modal" data-bs-target="#exampleModal">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-funnel"
-         viewBox="0 0 16 16">
-        <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/>
-    </svg>
-</button>
+<div class="-translate-y-0.5">
+    <i data-bs-toggle="modal" data-bs-target="#exampleModal" class="bi bi-funnel w-[50px] h-full text-center text-gray-400 group-hover:text-black transition-all ease-in pl-2 border-l border-solid -mr-1 border-gray-400 cursor-pointer"></i>
+</div>
 <div class="modal fade z-50" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">

src/app/components/navbar/navbar.component.html

@@ -5,7 +5,7 @@
         </a>
     </div>
     <div 
-         class="flex flex-row w-11/12 min-h-[40px] max-w-[800px] ml-2 mr-2 group bg-blue-100 rounded-full mt-1 mb-1 justify-start text-[#000] items-center">
+         class="flex flex-row w-11/12 min-h-[40px] max-w-[800px] ml-2 mr-2 group bg-blue-100 rounded-full mt-1 mb-1 justify-center text-[#000] items-center">
         <i class="bi bi-search w-[50px] text-center text-gray-400 group-hover:text-black group-active:text-black transition-all ease-in"></i>
         <input
                 autocomplete="off"
@@ -16,7 +16,7 @@
                 (input)="onSearch()"
                 (keydown)="onEnterKey($event)"
         />
-        <app-home-filter></app-home-filter>
+        <app-home-filter></app-home-filter>        
     </div>
     @if ( !isMapUrl) {
     <button routerLink="/map" class="btn hide-on-mobile rounded-full"><i class="bi bi-map"></i></button>