Added all the SVG Icons

akashe · Feb 19, 2024 · b762a31 · b762a31
1 parent 89dac86
commit b762a31
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 57 deletions.
diff --git a/frontend/react-app/src/components/Footer.jsx b/frontend/react-app/src/components/Footer.jsx
@@ -3,7 +3,10 @@ function Footer ()
     return <footer className="fixed bottom-0 left-0 right-0 z-10 h-16 bg-white flex items-center justify-center">
         <div className="relative flex items-center w-full max-w-[800px]">
             <input type="text" className="w-full px-4 py-2 rounded-full bg-slate-300 text-gray-700 focus:outline-none focus:ring-2 focus:ring-slate-800 focus:ring-opacity-60" placeholder="Search here..."/>
-            <img src="logo.svg" alt="Logo" className="absolute right-4 top-1/2 transform -translate-y-1/2 h-6 w-6"/>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 absolute right-4 top-1/2 transform -translate-y-1/2">
+                <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+            </svg>
+
         </div>
 
     </footer>

diff --git a/frontend/react-app/src/components/Header.jsx b/frontend/react-app/src/components/Header.jsx
@@ -5,7 +5,11 @@ function Header ()
             <h1 className="text-2xl font-bold">Arxiv Hunter</h1>
             <div className="hidden lg:block flex-grow"></div>
             <button
-                className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300">P</button>
+                className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300 flex justify-center items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                </svg>
+                </button>
         </header>
 
     )

diff --git a/frontend/react-app/src/components/Main.jsx b/frontend/react-app/src/components/Main.jsx
@@ -7,63 +7,20 @@ function Main ()
                 <p className="text-base text-slate-800 mb-4">
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam voluptatum, aspernatur praesentium fugit voluptas sint placeat nisi porro! Consectetur fugiat quidem asperiores aperiam velit facere sapiente accusantium laboriosam ipsa amet! Perferendis repellat blanditiis fugit minima doloribus, officiis praesentium excepturi ducimus accusamus, deleniti quia quas, soluta amet ipsa sint et inventore.
                 </p>
-                <div>
-                    <a href="#">
+                <div className="flex justify-center">
                         <button
-                            className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300">G</button>
-                    </a>
-                    <a download href="#">
-                        <button
-                            className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300">D</button>
-                    </a>
-                </div>
-            </div>
-            <div className="text-slate-800 mt-4 p-4 bg-gradient-to-r from-slate-50 to bg-slate-100 border-slate-100 rounded-md shadow-md">
-                <h1 className="mb-4 text-2xl font-semibold text-slate-900">An Important Alert</h1>
-                <p className="text-base text-slate-800 mb-4">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam voluptatum, aspernatur praesentium fugit voluptas sint placeat nisi porro! Consectetur fugiat quidem asperiores aperiam velit facere sapiente accusantium laboriosam ipsa amet! Perferendis repellat blanditiis fugit minima doloribus, officiis praesentium excepturi ducimus accusamus, deleniti quia quas, soluta amet ipsa sint et inventore.
-                </p>
-                <div>
-                    <a href="#">
-                        <button
-                            className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300">G</button>
-                    </a>
-                    <a download href="#">
-                        <button
-                            className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300">D</button>
-                    </a>
-                </div>
-            </div>
-            <div className="text-slate-800 mt-4 p-4 bg-gradient-to-r from-slate-50 to bg-slate-100 border-slate-100 rounded-md shadow-md">
-                <h1 className="mb-4 text-2xl font-semibold text-slate-900">An Important Alert</h1>
-                <p className="text-base text-slate-800 mb-4">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam voluptatum, aspernatur praesentium fugit voluptas sint placeat nisi porro! Consectetur fugiat quidem asperiores aperiam velit facere sapiente accusantium laboriosam ipsa amet! Perferendis repellat blanditiis fugit minima doloribus, officiis praesentium excepturi ducimus accusamus, deleniti quia quas, soluta amet ipsa sint et inventore.
-                </p>
-                <div>
-                    <a href="#">
-                        <button
-                            className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300">G</button>
-                    </a>
-                    <a download href="#">
-                        <button
-                            className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300">D</button>
-                    </a>
-                </div>
-            </div>
-            <div className="text-slate-800 mt-4 p-4 bg-gradient-to-r from-slate-50 to bg-slate-100 border-slate-100 rounded-md shadow-md">
-                <h1 className="mb-4 text-2xl font-semibold text-slate-900">An Important Alert</h1>
-                <p className="text-base text-slate-800 mb-4">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam voluptatum, aspernatur praesentium fugit voluptas sint placeat nisi porro! Consectetur fugiat quidem asperiores aperiam velit facere sapiente accusantium laboriosam ipsa amet! Perferendis repellat blanditiis fugit minima doloribus, officiis praesentium excepturi ducimus accusamus, deleniti quia quas, soluta amet ipsa sint et inventore.
-                </p>
-                <div>
-                    <a href="#">
-                        <button
-                            className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300">G</button>
-                    </a>
-                    <a download href="#">
+                            className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300 flex justify-center items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 flex justify-center items-center">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+                            </svg>
+
+                        </button>
                         <button
-                            className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300">D</button>
-                    </a>
+                            className="text-xl font-bold text-slate-800 border-slate-800 text-center bg-slate-200 rounded-full h-10 w-10 mr-2 hover:bg-slate-300 flex justify-center items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                            </svg>
+                        </button>
                 </div>
             </div>
         </main>