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 (
+
+ +
{ 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 {