From 8a5b122aa345d1f9679c45460c09cbd41586dac7 Mon Sep 17 00:00:00 2001
From: matttdawson <89495499+matttdawson@users.noreply.github.com>
Date: Tue, 2 Jul 2024 11:32:11 +1200
Subject: [PATCH] add search icon to left of quick search, placeholder is
 italic

---
 src/components/gridFilter/GridFilterQuick.tsx |  6 +++++-
 src/styles/Grid.scss                          | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/gridFilter/GridFilterQuick.tsx b/src/components/gridFilter/GridFilterQuick.tsx
index 960b320f..d4145bd8 100644
--- a/src/components/gridFilter/GridFilterQuick.tsx
+++ b/src/components/gridFilter/GridFilterQuick.tsx
@@ -1,3 +1,4 @@
+import { LuiIcon } from "@linzjs/lui";
 import { useContext, useEffect, useState } from "react";
 
 import { GridContext } from "../../contexts/GridContext";
@@ -17,11 +18,14 @@ export const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }: GridFi
 
   return (
     <div className="GridFilterQuick-container">
+      <div className="GridFilterQuick-icon">
+        <LuiIcon name={"ic_search"} alt={"Search"} size={"md"} />
+      </div>
       <input
         aria-label="Search"
         className="GridFilterQuick-input"
         type="text"
-        placeholder={quickFilterPlaceholder ?? "Search..."}
+        placeholder={quickFilterPlaceholder ?? "Search"}
         value={quickFilterValue}
         onChange={(event) => {
           setQuickFilterValue(event.target.value);
diff --git a/src/styles/Grid.scss b/src/styles/Grid.scss
index 8e45116c..85ad2534 100644
--- a/src/styles/Grid.scss
+++ b/src/styles/Grid.scss
@@ -54,15 +54,26 @@
   flex: 1;
 }
 
+.GridFilterQuick-icon {
+  position: absolute;
+  margin: 8px;
+  pointer-events: none;
+  fill: colors.$fuscous;
+}
+
 .GridFilterQuick-input {
   width: 100%;
   height: 40px;
   min-height: 40px;
   border: 0.06rem solid colors.$silver;
   border-radius: 3px;
-  padding-left: 0.75rem;
+  padding-left: 36px;
   padding-right: 0.75rem;
   font-family: "Open Sans", system-ui, sans-serif;
+
+  &::placeholder {
+    font-style: italic;
+  }
 }
 
 .Grid-popoverContainer {