a bunch of ui work

assets/css/login.css

@@ -1,38 +1,73 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
 body {
+    font-family: Arial, sans-serif;
+    background-color: #F4F1EB; /* Light cream background */
     display: flex;
-    justify-content: center; /* Center horizontally */
+    justify-content: center;
-    align-items: center;     /* Center vertically */
+    align-items: center;
-    height: 100vh;          /* Full viewport height */
+    min-height: 100vh;
-    margin: 0;              /* Remove default margin */
+}
-    background-color: #f4f4f4;
+
-}
+.login-container {
-.login-page-container {
-    background: white;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     text-align: center;
-    width:400px;
+    background-color: #FFFFFF; /* White box background */
-    box-sizing: border-box;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 400px;
 }
 
-.login-button {
+.login-container h1 {
-    display: block; /* Change to block for vertical alignment */
+    font-size: 2em;
-    margin: 10px 0;
+    color: #457B9D; /* Muted blue */
+    margin-bottom: 10px;
+}
+
+.login-container p {
+    color: #495057; /* Dark gray */
+    font-size: 1em;
+    margin-bottom: 20px;
+}
+
+.login-container img {
+    max-width: 100px;
+    margin-bottom: 20px;
+}
+
+.login-container .twitch-button {
+    background-color: #9146FF; /* Twitch purple */
+    color: white;
     padding: 10px 20px;
+    border: none;
     border-radius: 5px;
-    color: white;
+    font-size: 1em;
+    cursor: pointer;
     text-decoration: none;
-    font-size: 16px;
+    display: inline-block;
-    font-family: "Helvetica Neue", Helvetica, serif;
+    margin-top: 20px;
 }
 
-.twitch {
+.login-container .twitch-button:hover {
-    background-color: #9146ff;
+    background-color: #772CE8; /* Slightly darker Twitch purple */
 }
-.google {
+
-    background-color: #db4437;
+.footer-text {
+    margin-top: 30px;
+    font-size: 0.9em;
+    color: #666;
 }
-.x {
+
-    background-color: #1da1f2;
+.footer-text a {
+    color: #457B9D;
+    text-decoration: none;
+}
+
+.footer-text a:hover {
+    text-decoration: underline;
 }

assets/css/style.css

@@ -91,6 +91,18 @@ body {
     background-color: #356081;
 }
 
+.secondary-button {
+    display: inline-block;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    background-color: #a3c1ad;
+    color: white;
+    font-size: 1em;
+    cursor: pointer;
+    text-decoration: none;
+}
+
 .danger-btn {
     background-color: #E57373; /* Light muted red */
     color: #FFFFFF;

templates/login.html

@@ -4,81 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login</title>
-    <style>
+    <link rel="stylesheet" type="text/css" href="assets/css/login.css" />
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #F4F1EB; /* Light cream background */
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-        }
-
-        .login-container {
-            text-align: center;
-            background-color: #FFFFFF; /* White box background */
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            max-width: 400px;
-        }
-
-        .login-container h1 {
-            font-size: 2em;
-            color: #457B9D; /* Muted blue */
-            margin-bottom: 10px;
-        }
-
-        .login-container p {
-            color: #495057; /* Dark gray */
-            font-size: 1em;
-            margin-bottom: 20px;
-        }
-
-        .login-container img {
-            max-width: 100px;
-            margin-bottom: 20px;
-        }
-
-        .login-container .twitch-button {
-            background-color: #9146FF; /* Twitch purple */
-            color: white;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            font-size: 1em;
-            cursor: pointer;
-            text-decoration: none;
-            display: inline-block;
-            margin-top: 20px;
-        }
-
-        .login-container .twitch-button:hover {
-            background-color: #772CE8; /* Slightly darker Twitch purple */
-        }
-
-        .footer-text {
-            margin-top: 30px;
-            font-size: 0.9em;
-            color: #666;
-        }
-
-        .footer-text a {
-            color: #457B9D;
-            text-decoration: none;
-        }
-
-        .footer-text a:hover {
-            text-decoration: underline;
-        }
-    </style>
 </head>
 <body>
 

templates/welcome.html

@@ -22,7 +22,7 @@
                 <div class="card">
                     <h3 class="card-title">Your Goals</h3>
                     <p class="card-content">Track your certifications and courses. Update or add goals to keep your community engaged.</p>
-                    <button class="card-button">Add a Goal</button>
+                    <a class="secondary-button" href="/goals">Add a Goal</a>
                 </div>
                 <div class="card">
                     <h3 class="card-title">Community Opportunities</h3>