Minor UI change

change icon, enhanced UI experience

module/webroot/styles.css

@@ -21,29 +21,40 @@ body {
     margin-top: 100px;
 }
 
+.search-menu-container {
+    display: flex;
+    position: fixed;
+    top: 40px;
+    width: calc(100% - 15px);
+    z-index: 1000;
+    transition: transform 0.3s ease;
+}
+
 .search-card {
     background-color: white;
     border: 1px solid #ccc;
-    border-radius: 25px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
     padding: 10px;
-    position: fixed;
-    top: 40px;
-    transition: transform 0.3s ease;
-    width: calc(100% - 100px);
-    z-index: 1000;
+    border-radius: 50px;
+    left: 0;
+    width: calc(100% - 80px);
+    position: absolute;
 }
 
+.search-icon {
+    position: absolute;
+    left: 18px;
+}
+
+
 .search-input {
     background-color: #fff;
     border: none;
-    box-sizing: border-box;
     font-size: 14px;
     outline: none;
-    padding: 5px 15px;
-    text-align: left;
+    padding: 5px 30px;
     width: 100%;
 }
 
@@ -52,7 +63,6 @@ body {
     right: 10px;
     border: none;
     background: none;
-    color: #ccc;
     font-size: 18px;
     cursor: pointer;
     display: none;
@@ -61,11 +71,8 @@ body {
 
 .menu {
     display: flex;
-    position: fixed;
-    top: 40px;
-    right: 10px;
-    z-index: 1000;
-    transition: transform 0.3s ease;
+    right: 0;
+    position: absolute;
 }
 
 .menu-toggle {
@@ -75,17 +82,18 @@ body {
 #menu-button {
     background-color: white;
     border: 1px solid #ccc;
-    border-radius: 25px;
+    border-radius: 50%;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    padding: 13px 17px;
-    text-align: center;
-    position: relative;
-    z-index: 1000;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .menu-icon {
     display: inline-block;
-    transition: transform 0.3s ease;
+    transition: transform 0.2s ease;
 }
 
 .menu-icon.menu-open {
@@ -106,7 +114,7 @@ body {
     top: 110%;
     right: 0;
     transform: translateX(120%);
-    transition: transform 0.3s ease;
+    transition: transform 0.2s ease;
     width: auto;
     white-space: nowrap;
 }
@@ -224,15 +232,18 @@ body {
 .floating-btn {
     background-color: #007bff;
     border: none;
-    border-radius: 24px;
     box-shadow: 0 4px 8px #0003;
     color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 10px 20px;
-    font-size: 16px;
+    padding: 12px 17px;
+    font-size: 17px;
     transition: transform 0.3s ease-in-out;
+    border-top-left-radius: 50px;
+    border-top-right-radius: 50px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
 }
 
 .loading {
@@ -271,6 +282,7 @@ body {
         border: 1px solid #6E6E6E;
     }
 
+    .clear-btn,
     .search-input{
         color: white;
     }