convert from connection to pools in mysql

frontend/src/App.css

@@ -1,15 +1,16 @@
 #root {
     width: 100%;
     max-width: 1280px;
-    text-align: center;
+    text-align: center; /* Centered text alignment */
 }
 
 /* Overall Body Style */
 body {
-    background-color: #b8b6b6; /* Light background for contrast */
+    background-color: #ffffff; /* Light background for contrast */
     color: #4b2e2e; /* Darker red brown for readability */
     font-family: 'Arial', sans-serif;
     margin: 0;
+    text-align: center; /* Centered text alignment */
     padding: 20px;
 }
 
@@ -17,7 +18,6 @@ body {
 header {
     background-color: #a41e34; /* Christmas red */
     color: white;
-    text-align: center;
     padding: 20px 0;
     border-bottom: 5px solid #b7c9b5; /* Light green border */
 }
@@ -26,19 +26,6 @@ header h1 {
     font-size: 2.5em;
 }
 
-/* Navigation Menu */
-nav a {
-    text-decoration: none;
-    color: white;
-    padding: 15px 25px;
-    border-radius: 5px;
-    transition: background-color 0.3s;
-}
-
-nav a:hover {
-    background-color: #c28f8f; /* Softer red when hovering */
-}
-
 /* Section Style */
 section {
     background-color: #e4f7e0; /* Light green background */
@@ -56,43 +43,38 @@ button {
     border-radius: 5px;
     cursor: pointer;
     font-size: 1.1em;
+    display: inline-block; /* Centers button in the container */
 }
 
 button:hover {
     background-color: #9b6bb5; /* Darker purple on hover */
 }
 
+button:disabled {
+    background-color: #d3d3d3; /* Light gray for disabled button */
+    color: #a9a9a9; /* Darker gray for text */
+    cursor: not-allowed; /* Show not-allowed cursor */
+}
+
 /* Footer Style */
 footer {
-    text-align: center;
+    text-align: center; /* Centered */
     padding: 20px;
     background-color: #a41e34; /* Same red as header */
     color: white;
     position: relative;
 }
 
-/* Christmas Decorations */
-.christmas-tree {
-    background-image: url('path/to/christmas-tree.png'); /* Add a Christmas tree image */
-    width: 50px;
-    height: 100px;
-    display: inline-block;
-    background-size: cover;
-}
-
+/* Snowflakes Background */
 .snowflakes {
     position: absolute;
-    z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: url('path/to/snowflake-pattern.png'); /* Snowflakes pattern */
-    opacity: 0.3; /* Make it subtle */
-    pointer-events: none; /* Allow clicks to go through */
+    background-image: url('./assets/snowflakes.png'); /* Snowflakes pattern */
 }
 
-
 /* General table styles */
 table {
     width: 100%;
@@ -100,78 +82,60 @@ table {
     margin: 20px 0;
     font-size: 1em;
     font-family: 'Arial', sans-serif;
+    text-align: center; /* Centered table text */
 }
 
 /* Table header styles */
 th {
-    background-color: #a41e34;
-    /* Christmas red */
+    background-color: #060698; /* Christmas red */
     color: white;
-    text-align: left;
     padding: 10px 15px;
-    border-bottom: 3px solid #b7c9b5;
-    /* Light green border for header */
+    border-bottom: 3px solid #b7c9b5; /* Light green border for header */
 }
 
 /* Table cell styles */
 td {
     border: 1px solid #ddd;
-    padding: 10px 15px;
-    /* Added padding for better spacing */
-    background-color: #e4f7e0;
-    /* Light green background for cells */
+    padding: 10px 15px; /* Added padding for better spacing */
+    background-color: #e4f7e0; /* Light green background for cells */
 }
 
 /* Zebra striping for table rows */
 tr:nth-child(even) {
-    background-color: #f9f9f9;
-    /* Light gray for even rows */
+    background-color: #f9f9f9; /* Light gray for even rows */
 }
 
 /* Hover effect for rows */
 tr:hover {
-    background-color: #c28f8f;
-    /* Softer red when hovering */
+    background-color: #c28f8f; /* Softer red when hovering */
 }
 
 /* Additional table styling for Christmas theme */
 table {
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-    /* Shadow for depth */
-    border-radius: 8px;
-    /* Rounded corners */
-    overflow: hidden;
-    /* Ensures border radius works */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
+    border-radius: 8px; /* Rounded corners */
+    overflow: hidden; /* Ensures border radius works */
 }
 
 /* Add some festive decorations */
 th::after {
-    content: '🎄';
-    /* Small Christmas tree icon in the header */
+    content: '🎄'; /* Small Christmas tree icon in the header */
     margin-left: 10px;
-    font-size: 1.2em;
-    /* Slightly larger */
+    font-size: 1.2em; /* Slightly larger */
 }
 
 td {
-    position: relative;
-    /* For potential decorations */
+    position: relative; /* For potential decorations */
 }
 
 td::before {
-    content: '';
-    /* Placeholder for decoration */
+    content: ''; /* Placeholder for decoration */
     position: absolute;
-    background-image: url('path/to/snowflake-icon.png');
-    /* Snowflake icon */
-    width: 16px;
-    /* Adjust as necessary */
+    background-image: url('path/to/snowflake-icon.png'); /* Snowflake icon */
+    width: 16px; /* Adjust as necessary */
     height: 16px;
-    opacity: 0.1;
-    /* Very subtle */
-    top: 5px;
-    /* Position it nicely */
+    opacity: 0.1; /* Very subtle */
+    top: 5px; /* Position it nicely */
     left: 5px;
-    pointer-events: none;
-    /* Ignore mouse events */
-}
+    pointer-events: none; /* Ignore mouse events */
+}

frontend/src/App.tsx

@@ -7,11 +7,13 @@ import Program from './components/Program'
 function App() {
   return (
     <>
+    <div className='snowflakes'>
       <InitialSetup/>
       <Greeting/>
       <br/>
       <Hosting/>
       <Program/>
+      </div>
     </>
   )
 }

frontend/src/components/InitialSetup.tsx

@@ -32,9 +32,8 @@ const InitialSetup = () => {
             const isTokenValid = await validToken(token, selectedName);
             setIsSubmitted(isTokenValid);
         };
-        if (selectedName !== undefined) checkUserPassword(selectedName)
-        if (token && selectedName) validateToken();
-    }, [selectedName]); 
+        if (token !== undefined && selectedName !== undefined) validateToken();
+    }, []); 
 
 
     const handlePasswordCreate = async () => {