add download button styles

Author: mux-mux

src/components/FindFace/FindFace.css

@@ -20,7 +20,8 @@
   margin-bottom: 15px;
 }
 
-.filter-controls button {
+.filter-controls button,
+.download-controls {
   padding: 10px 15px;
   border: none;
   border-radius: 8px;
@@ -45,6 +46,14 @@
   box-shadow: 0 0 10px rgba(21, 145, 245, 0.6);
 }
 
+.download-controls {
+  background-color: #55af31;
+}
+
+.download-controls:hover {
+  background-color: #5cbf36;
+}
+
 .filter-none {
   box-shadow: 0 0 0 1px #72bf64 inset;
 }

src/components/FindFace/FindFace.js

@@ -67,8 +67,12 @@ const FindFace = ({ imageUrl, onUserDataChange, user }) => {
     fetchFaceData();
   }, [fetchFaceData]);
 
+  const handleDownload = () => {
+    console.log('Download image');
+  };
+
   return (
-    <div className="flex items-center flex-col mt-4">
+    <div className="flex items-center flex-col mt-4 gap-3">
       <div className="filter-controls">
         {['none', 'blur', 'emoji', 'alien', 'dog', 'ghost'].map((type) => (
           <button
@@ -82,6 +86,9 @@ const FindFace = ({ imageUrl, onUserDataChange, user }) => {
           </button>
         ))}
       </div>
+      <button onClick={handleDownload} className="mb-5 download-controls">
+        Download Image
+      </button>
       <div className="relative">
         <img
           src={imageUrl}