add search icon to left of quick search, placeholder is italic

linz · Jul 1, 2024 · 8a5b122 · 8a5b122
1 parent 5c85e23
commit 8a5b122
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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 {