From 38bac88b694cbddcc9c94bc5dc53eb1828fd0505 Mon Sep 17 00:00:00 2001
From: Elroy Chua <elroymx@gmail.com>
Date: Mon, 16 Dec 2024 09:59:11 +0800
Subject: [PATCH] refine ui and fix log error for resetIcon

---
 frontend/src/app/page.tsx                     |  2 +-
 frontend/src/assets/icons/reset-icon.jsx      | 49 ++++++++++++-------
 .../main-layout/main-layout.module.css        | 17 +++----
 3 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index a8b6abe..d866cc1 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -20,7 +20,7 @@ export default function Home() {
         <>
           {/* Desktop Layout */}
           <div className={classes.mainLayout}>
-            <div className="flex md:hidden">
+            <div className="flex pt-28 md:hidden">
               <UserQuery />
             </div>
             <div className="hidden md:flex">
diff --git a/frontend/src/assets/icons/reset-icon.jsx b/frontend/src/assets/icons/reset-icon.jsx
index 1e97c62..ce5d411 100644
--- a/frontend/src/assets/icons/reset-icon.jsx
+++ b/frontend/src/assets/icons/reset-icon.jsx
@@ -1,19 +1,32 @@
 export const ResetIcon = () => {
-    return (
-        <svg
-            width="1.5em"
-            height="1.5em"
-            viewBox="0 0 21 21"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none">
-                <g id="SVGRepo_bgCarrier" stroke-width="7"></g>
-                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-                    <g id="SVGRepo_iconCarrier"> <g fill="none" fill-rule="evenodd" stroke="#006FEE" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 1 1 0 2.5 2.5)">
-
-                        <path d="m3.98652376 1.07807068c-2.38377179 1.38514556-3.98652376 3.96636605-3.98652376 6.92192932 0 4.418278 3.581722 8 8 8s8-3.581722 8-8-3.581722-8-8-8"></path>
-                        <path d="m4 1v4h-4" transform="matrix(1 0 0 -1 0 6)"></path>
-                    </g>
-                </g>
-        </svg>
-    )
-}
+  return (
+    <svg
+      width="1.5em"
+      height="1.5em"
+      viewBox="0 0 21 21"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="7"></g>
+      <g
+        id="SVGRepo_tracerCarrier"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></g>
+      <g id="SVGRepo_iconCarrier">
+        {" "}
+        <g
+          fill="none"
+          fillRule="evenodd"
+          stroke="#006FEE"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          transform="matrix(0 1 1 0 2.5 2.5)"
+        >
+          <path d="m3.98652376 1.07807068c-2.38377179 1.38514556-3.98652376 3.96636605-3.98652376 6.92192932 0 4.418278 3.581722 8 8 8s8-3.581722 8-8-3.581722-8-8-8"></path>
+          <path d="m4 1v4h-4" transform="matrix(1 0 0 -1 0 6)"></path>
+        </g>
+      </g>
+    </svg>
+  );
+};
diff --git a/frontend/src/components/main-layout/main-layout.module.css b/frontend/src/components/main-layout/main-layout.module.css
index 91c7310..547fa97 100644
--- a/frontend/src/components/main-layout/main-layout.module.css
+++ b/frontend/src/components/main-layout/main-layout.module.css
@@ -56,15 +56,10 @@
 }
 
 .homePage {
-    max-width: 1500px;
-    height: 90vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.welcomeMsg {
-    width: 35rem;
-    padding-bottom: 3rem;
+  max-width: 1500px;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }