Merge pull request #722 from Ojas-Arora/leader

Different Colours Icons Naving
SUGAM-ARORA · Aug 10, 2024 · 429dcc8 · 429dcc8
2 parents ad320ba + c8f3488
commit 429dcc8
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 2 deletions.
diff --git 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
@@ -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 />}