Bee css

src/components/CategoryCard.css

@@ -25,6 +25,7 @@
 }
 
 .category-card h3 {
+  margin-top: 25px;
   color: #d9bd80;
   font-family: "Quattrocento", serif;
   font-size: 2em;

src/components/NavBar.jsx

@@ -27,18 +27,18 @@ function NavBar() {
 
         {/* Links container */}
         <div className="links">
-          <Link to="/">Home</Link>
+          <Link to="/">🌟 Home</Link>
           {auth.token && auth.user ? (
-            <Link to="/lists">Lists</Link>
+            <Link to="/lists">🌟 Lists</Link>
           ) : (
-            <Link to="/signup">Sign Up</Link>
+            <Link to="/signup">🌟 Sign Up</Link>
           )}
           {auth.token && auth.user ? (
             <Link to="/" onClick={handleLogout}>
-              Log Out
+              🌟 Log Out
             </Link>
           ) : (
-            <Link to="/login">Login</Link>
+            <Link to="/login">🌟 Login</Link>
           )}
         </div>
       </nav>

src/pages/CreateListPage.css

@@ -175,8 +175,8 @@
 }
 
 .list-form-container {
-  width: 90%;
-  max-width: 400px;
+  width: 100%;
+  max-width: 3000px;
   padding: 40px;
   background-color: #081f43;
   border-radius: 8px;

src/pages/ListDetailsPage.css

@@ -107,6 +107,10 @@
   border-radius: 8px;
 }
 
+.list-items-container button {
+  margin-top: 30px; /* Adjust the value as needed */
+}
+
 /* --- MEDIA QUERIES --- */
 
 @media (max-width: 768px) {

src/pages/LoginPage.css

@@ -41,10 +41,6 @@
   justify-content: center;
 }
 
-.login-page.logged-in {
-  margin-top: 50px;
-}
-
 .login-page.logged-in .login-container {
   max-width: 600px; 
   padding: 60px;

src/pages/LoginPage.jsx

@@ -20,6 +20,8 @@ function LoginPage() {
   if (auth?.token) {
     return (
       <div className="login-page logged-in">
+        {/* Snowflakes Component */}
+        <Snowflakes />
         <div className="login-container">
           <h1 className="welcome-back-header">
             <span className="header-flourish">꧁</span> Welcome back!

src/pages/NotFoundPage.css

@@ -1,19 +1,11 @@
-body {
-  font-family: "Lato", sans-serif;
-  background-color: #00173a;
-  color: #f8f8f8; 
-  margin: 0;
-  padding: 0;
-}
-
 .not-found {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 95vh;
   text-align: center;
-  position: relative; 
+  position: relative;
 }
 
 .not-found-card {

src/pages/SignUpPage.css

@@ -41,9 +41,54 @@
   justify-content: center;
 }
 
+.signup-page.logged-in .signup-container {
+  max-width: 800px; /* Increase this to widen the container */
+  padding: 60px;
+  height: 350px;
+}
+
+.signup-page.logged-in .signup-container h1 {
+  font-size: 2rem;
+  color: var(--gold);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px; 
+}
+
+.signup-page.logged-in .signup-container p {
+ font-family: var(--body-font);
+  font-size: 1em; 
+  color: var(--white);
+  margin-top: 10px; 
+  margin-bottom: 20px; 
+}
+
+.signup-page.logged-in .signup-container button {
+  margin: 10px; 
+  margin-top: 20px; 
+}
+
+.signup-page.logged-in .signup-container button:first-of-type {
+  margin-right: 20px; 
+}
+
+.signup-page.logged-in .signup-container button:last-of-type {
+  margin-left: 20px; 
+}
+
 @media (max-width: 600px) {
   .signup-container {
     padding: 30px;
     margin: 20px;
   }
+}
+
+@media (max-width: 600px) {
+  .signup-page.logged-in .signup-container {
+    max-width: 90%;  /* 90% width for smaller screens */
+    padding: 30px;
+    margin: 20px;
+  }
 }

src/pages/SignUpPage.jsx

@@ -17,12 +17,16 @@ function SignUpPage() {
     navigate("/");
   };
 
-  // If user is logged in, the following message will show.
   if (auth?.token) {
     return (
-      <div className="signup-page">
+      <div className="signup-page logged-in">
+        {/* Snowflakes Component */}
+        <Snowflakes />
         <div className="signup-container">
-          <h1>You are already logged in!</h1>
+          <h1>
+            <span className="header-flourish">꧁</span> You are already logged
+            in! <span className="header-flourish flip-flourish">꧁</span>
+          </h1>
           <p>
             Log out if you wish to access a different account. Otherwise,
             explore the site!
@@ -38,7 +42,6 @@ function SignUpPage() {
     <div className="signup-page">
       {/* Snowflakes Component */}
       <Snowflakes />
-
       <div className="signup-container">
         <h1>
           <span className="header-flourish">꧁</span> Sign Up{" "}