chore: small ui update

vwh · Oct 6, 2024 · 7d78bf0 · 7d78bf0
1 parent 8b43843
commit 7d78bf0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -55,7 +55,11 @@ const App: React.FC = () => {
       <main className="flex h-[calc(100vh-68px)] flex-col md:flex-row">
         <EditingSection />
         <section className="relative flex h-full w-full flex-grow items-center justify-center overflow-hidden bg-background md:shadow-xl">
-          <div className="z-50" id="svg-container" style={containerStyle}>
+          <div
+            className="z-50 transition-all hover:scale-105"
+            id="svg-container"
+            style={containerStyle}
+          >
             <div style={svgWrapperStyle}>
               <SvgComponent
                 fill={svgSettings.fillColor}

diff --git a/src/components/icons-dialog.tsx b/src/components/icons-dialog.tsx
@@ -17,6 +17,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Tooltiper } from "./tooltiper";
 
+import { SearchIcon } from "lucide-react";
 import * as svgs from "lucide-react";
 
 const ICONS_PER_PAGE = 35;
@@ -85,13 +86,16 @@ export default function IconsDialog() {
           </DialogDescription>
         </DialogHeader>
         <div className="flex flex-col gap-4">
-          <Input
-            type="text"
-            placeholder="Search Icons..."
-            value={searchTerm}
-            onChange={handleSearch}
-            className="w-full"
-          />
+          <div className="flex items-center">
+            <SearchIcon className="h-7 w-7 pl-2 text-gray-500" />
+            <Input
+              type="text"
+              placeholder="Search Icons"
+              value={searchTerm}
+              onChange={handleSearch}
+              className="ml-2 w-full focus:outline-none"
+            />
+          </div>
           <div className="flex flex-wrap items-center justify-center gap-1 p-2">
             {iconButtons}
           </div>