Merge pull request #376 from bounswe/Search-functionality-&-MockData-…

…improvements Search functionality & mock data improvements
bounswe · Nov 19, 2024 · 76401f6 · 76401f6
2 parents 620639e + b072cf2
commit 76401f6
Show file tree

Hide file tree

Showing 10 changed files with 1,057 additions and 11 deletions.
diff --git a/web/tradeverse/public/logo_new.png b/web/tradeverse/public/logo_new.png
diff --git a/web/tradeverse/src/App.css b/web/tradeverse/src/App.css
@@ -69,7 +69,7 @@
 /* Login button specific styles */
 .loginButton {
   background-color: #EAEAEA;
-  color: blue;
+  color: #5D5FEF;
 
 }
 
@@ -79,13 +79,13 @@
 
 /* Register button specific styles */
 .registerButton {
-  background-color: #F48023;
+  background-color: #5D5FEF;
   color: white;
 
 }
 
 .registerButton:hover {
-  background-color: darkorange;
+  opacity: 0.8;
 }
 /* Responsive styles */
 @media (max-width: 768px) {

diff --git a/web/tradeverse/src/components/structure/RenderNavigation.js b/web/tradeverse/src/components/structure/RenderNavigation.js
@@ -82,11 +82,16 @@ export const RenderMenu = () => {
 
        <div className="centerTitle">
           <Link to={'/'} className="link">
-              <img src="logo.png" alt="Tradeverse Logo" className="logo" />
+              <img src="logo_new.png" alt="Tradeverse Logo" className="logo" />
           </Link>
        </div>
 
        <div className="rightMenu">
+        <div className="img-container">
+          <Link to={'/search'} className="searchButton">
+            <i className="fas fa-search"></i>
+          </Link>
+        </div>
          {user.isAuthenticated ? (
            <div className="menuItem">
              <div className="userDropdown" onClick={toggleDropdown}>
@@ -112,7 +117,7 @@ export const RenderMenu = () => {
          )}
        </div>
      </div>
-      <SubforumNavbar subforums={mockData.subforums}/>
+      <SubforumNavbar subforums={mockData.subforums}/>  
      </div>
    );
 }
diff --git a/web/tradeverse/src/components/structure/navigation.js b/web/tradeverse/src/components/structure/navigation.js
@@ -2,7 +2,7 @@ import  Home  from "../../pages/Home"
 import About from "../../pages/About"
 import Login from "../../pages/Login"
 import SignUp from "../../pages/SignUp"
-
+import Search from "../../pages/Search"
 
 export const nav = [
      { path:     "/",         name: "Home",        element: <Home />,       isMenu: false,     isPrivate: false  , isAdmin:false},
@@ -13,5 +13,6 @@ export const nav = [
      { path:    "/notfound", name: "Not Found",  element: <Home />,   isMenu: false,    isPrivate: false  , isAdmin:false},
      { path:   "/notauthorized", name: "Not Authorized", element: <Home />, isMenu: false, isPrivate: false  , isAdmin:false},
      { path: "/adduser", name: "Add User", element: <Home />, isMenu: false, isPrivate: false, isAdmin: false },
+     { path: "/search", name: "Search", element: <Search />, isMenu: false, isPrivate: false, isAdmin: false }, 
 
 ]
diff --git a/web/tradeverse/src/components/styles/feed.css b/web/tradeverse/src/components/styles/feed.css
@@ -38,7 +38,7 @@
 }
 
 .sortButton.active {
-    background-color: darkorange;
+    background-color: #5D5FEF;
     color: white;
 }
 

diff --git a/web/tradeverse/src/components/styles/style.css b/web/tradeverse/src/components/styles/style.css
@@ -44,7 +44,7 @@
 
   .dropdownContent a {
     font-size: 14px;
-    color: blue;
+    color: rgb(93, 95, 239); 
     text-decoration: none;
     padding: 8px 0;
     transition: color 0.2s ease;
@@ -69,4 +69,45 @@
 
 .menu {
   height: 60px
-}
+}
+/* Container for the icon */
+.img-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px;
+}
+
+/* Search button styling */
+.searchButton {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  background-color: rgb(93, 95, 239); 
+  color: white; /* White icon color */
+  border-radius: 50%; /* Circular button */
+  text-decoration: none;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
+
+/* Icon styling */
+.searchButton i {
+  font-size: 20px; /* Icon size */
+}
+
+/* Hover effects */
+.searchButton:hover {
+  opacity: 0.9; /* Slightly reduce opacity on hover */
+  transform: scale(1.1); /* Slightly increase size on hover */
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
+}
+
+/* Active state */
+.searchButton:active {
+  background-color: #003f7f; /* Even darker blue for active state */
+  transform: scale(0.95); /* Slightly shrink for click feedback */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
+}