Merge pull request #259 from AnushkaChouhan25/main

Update Navbar and Theme Toggle Button #223

paras/package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1",
+    "web-vitals": "^4.2.3"
   },
   "scripts": {
     "start": "react-scripts start",

paras/public/index.html

@@ -5,17 +5,21 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
     <style>
       body {
-          font-family: 'Poppins', sans-serif;
+          /* font-family: 'Poppins', sans-serif; */
           display: flex;
           flex-direction: column;
           min-height: 100vh;
           margin: 0;
+          font-family: "Caveat", cursive; 
       }
 
       #root {

paras/src/App.css

@@ -1,4 +1,12 @@
 /* App.css */
+body {
+  font-family: 'Arial', sans-serif; /* Use a modern font */
+  background-color: #f0f4f8; /* Soft background color for contrast */
+  color: #333; /* Dark text for readability */
+  margin: 0;
+  padding: 0;
+}
+
 .app {
   text-align: center;
   background-color: white;
@@ -10,20 +18,25 @@
 
 .header {
   display: flex;
+
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
-  position: relative;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  padding: 10px 20px; /* Adjusted padding for better spacing */
+  background: rgb(204, 171, 234); /* Gradient background */ 
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 8px; /* Rounded corners for a softer look */
 }
 
 .title {
   flex-grow: 1;
   text-align: center;
-  padding-left: 50px;
-  font-size: 24px;
+  position: relative;
+  left: 85px;
+  font-size: 28px; /* Increased font size */
+  letter-spacing: 1px; /* Added letter spacing for readability */
 }
 
+
 .board {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -32,9 +45,80 @@
   margin: 20px auto;
   padding: 20px;
   border-radius: 15px;
-  background: linear-gradient(120deg, #0e2e4e, #1f4679);
+  background: linear-gradient(120deg, #e7fba7, #f2acca89);
   transition: background-color 0.5s, transform 0.5s ease;
 }
+/* Navbar Styling */
+.navbar {
+  display: flex;
+  justify-content: space-between;
+
+  align-items: center;
+  padding: 10px 100px;
+  background: linear-gradient(120deg, #f9baea, #5b6f94); /* Gradient background */
+  color: #ffffff; /* White text color */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */
+  border-radius: 10px; /* Rounded corners */
+}
+
+/* Logo and Title Container */
+.navbar-logo {
+
+  display: flex; /* Flexbox for logo and title alignment */
+  align-items: center; /* Center vertically */
+}
+.navbar-logo h1{
+  font-family: "Bebas Neue", sans-serif;
+}
+
+/* Logo Styling */
+.logo {
+  width: 40px; /* Logo width */
+  height: 40px; /* Logo height */
+  margin-right: 5px; /* Space between logo and title */
+}
+
+/* Title Styling */
+.navbar-title {
+  font-size: 28px; /* Stylish font size */
+  font-family: 'Cursive', sans-serif; /* Stylish font */
+  letter-spacing: 1.5px; /* Increased letter spacing */
+  margin: 10px; /* Remove default margin */
+
+}
+
+/* Link Styling */
+.navbar-links {
+  display: flex; /* Horizontal layout for links */
+  justify-content: center; /* Center the links */
+  flex-grow: 1; /* Allow links to take remaining space */
+
+}
+
+/* Individual Link Styling */
+.nav-link {
+  text-decoration: none; /* Remove underline */
+  color: #ffffff; /* White text color */
+  padding: 10px 15px; /* Padding for click area */
+  border-radius: 5px; /* Rounded corners for links */
+  transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
+  margin: 0 10px; /* Space between links */
+  font-weight: bold;
+}
+
+/* Hover Effect for Links */
+.nav-link:hover {
+  background: linear-gradient(120deg, #f6a2e1, #a9d7fd); /* Gradient background on hover */
+  color: #ffffff; /* Keep text white */
+  transform: scale(1.05); /* Slight scaling effect on hover */
+}
+
+/* Active Link Effect */
+.nav-link.active {
+  background: linear-gradient(120deg, #c2daf5, #6cb2eb); /* Active link gradient */
+  color: #ffffff; /* Keep text white */
+}
+
 
 .cell {
   display: flex;
@@ -523,31 +607,34 @@
 /* New theme toggle styles */
 .theme-toggle {
   display: inline-flex;
-  background-color: #2c2c2c;
+  background-color: rgba(255, 255, 255, 0.8); /* Light transparent background for toggle */
   border-radius: 20px;
   padding: 4px;
-  position: fixed;
-  top: 20px;
-  right: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .theme-button {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 8px 12px;
+  padding: 10px 15px; /* Increased padding for buttons */
   border-radius: 16px;
-  transition: background-color 0.3s;
+  transition: background-color 0.3s, transform 0.3s; /* Added transform for scaling */
 }
 
 .theme-button.active {
-  background-color: #4a4a4a;
+  background: linear-gradient(120deg, #4a90e2, #6cb2eb); /* Active button gradient */
+  color: #fff; /* White text for active button */
 }
 
-.theme-button span {
-  font-size: 18px;
+.theme-button:hover {
+  background-color: rgba(224, 224, 224, 0.6); /* Light hover effect */
+  transform: scale(1.1); /* Scale effect on hover */
 }
 
+.theme-button span {
+  font-size: 20px; /* Increased icon size */
+}
 .current-scores,.highest-scores{
   background-color: #28a796;
   border-radius: 10px;