From 73365bce3fd6818aa76fac9efc86820dd14dc388 Mon Sep 17 00:00:00 2001
From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com>
Date: Sat, 10 Aug 2024 17:06:11 +0530
Subject: [PATCH 1/2] Different Colours Icons Naving

---
 src/Components/TopContainer.css | 51 +++++++++++++++++++++++++++++++++
 src/Components/TopContainer.js  |  4 +--
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css
index 84acbe00..9aaa5667 100644
--- a/src/Components/TopContainer.css
+++ b/src/Components/TopContainer.css
@@ -17,6 +17,57 @@
   margin-left: 60px;
   gap: 0.1rem;
 }
+/* Theme Styles */
+
+/* Dark Theme */
+.dark .navbar,
+.dark .inputBox,
+.dark .dropdown-content,
+.dark #search_results,
+.dark .menuContainer {
+  background-color: #19162c;
+  color: #ffffff;
+}
+
+/* Light Theme */
+.light .navbar,
+.light .inputBox,
+.light .dropdown-content,
+.light #search_results,
+.light .menuContainer {
+  background-color: lightblue;
+  color: #19162c;
+}
+
+/* Search Bar Icon Hover */
+.searchbtn:hover {
+  color: #cf00a3;
+}
+
+/* Go Pro Button Hover */
+.go-pro-btn:hover {
+  background-color: #a3007a;
+}
+
+/* Notification Item Hover */
+.notification-item:hover {
+  background-color: rgba(207, 0, 163, 0.1);
+}
+
+/* Menu Chevron Hover */
+.menuChevron:hover {
+  transform: rotate(180deg);
+}
+
+/* Profile Dropdown Menu Item Hover */
+.menuContainer ul li:hover {
+  background-color: rgba(207, 0, 163, 0.1);
+}
+
+/* Toggle Button Hover */
+.lightbutton:hover {
+  color: #cf00a3;
+}
 
 /* Search results styles */
 #search_results a:hover div {
diff --git a/src/Components/TopContainer.js b/src/Components/TopContainer.js
index e5528e6e..ae3bac25 100644
--- a/src/Components/TopContainer.js
+++ b/src/Components/TopContainer.js
@@ -136,12 +136,12 @@ function TopContainer() {
 
   return (
     <div className="topContainer">
-<button
+      <button
   onClick={toggleTheme}
   className="lightbutton"
   style={{ 
     marginRight: '200px', 
-    position: 'relative' // Apply relative positioning here
+    position: 'relative' 
   }}
 >
   {theme === "dark" ? <FaSun /> : <FaMoon />}

From 1d60dfb66c7eb898276adf6f3861f18b1cb1ab1a Mon Sep 17 00:00:00 2001
From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com>
Date: Sat, 10 Aug 2024 17:27:54 +0530
Subject: [PATCH 2/2] done

---
 src/Components/TopContainer.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css
index 54ce532f..daa25163 100644
--- a/src/Components/TopContainer.css
+++ b/src/Components/TopContainer.css
@@ -112,6 +112,7 @@
   display: flex;
   gap: 5px;
   align-items: center; /* Center items vertically */
+}
 
 /* Hover effect for nav item links */
 .largeview .nav-item a:hover {