Cleanup after implementing initial logto funtions.

frontend/src/app/components/AuthStatus.tsx

@@ -41,58 +41,6 @@ export default function AuthStatus() {
           </button>
         )}
       </div>
-
-      <style jsx>{`
-        .auth-status {
-          margin: 2rem 0;
-          padding: 1.5rem;
-          border-radius: 8px;
-          background-color: #f8f9fa;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .auth-info {
-          margin-bottom: 1rem;
-        }
-
-        .user-info {
-          margin-top: 0.5rem;
-          padding: 0.75rem;
-          background-color: #e9ecef;
-          border-radius: 4px;
-        }
-
-        .auth-actions {
-          margin-top: 1rem;
-        }
-
-        button {
-          padding: 0.5rem 1rem;
-          border: none;
-          border-radius: 4px;
-          cursor: pointer;
-          font-weight: 500;
-          transition: background-color 0.2s;
-        }
-
-        .login-button {
-          background-color: #4285f4;
-          color: white;
-        }
-
-        .logout-button {
-          background-color: #ea4335;
-          color: white;
-        }
-
-        button:hover {
-          opacity: 0.9;
-        }
-
-        .loading {
-          opacity: 0.7;
-        }
-      `}</style>
     </div>
   );
 }

frontend/src/app/components/HealthStatus.tsx

@@ -51,25 +51,6 @@ export default function HealthStatus() {
           </p>
         </div>
       )}
-      <style jsx>{`
-        .health-status {
-          padding: 1rem;
-          border-radius: 0.5rem;
-          border: 1px solid #eaeaea;
-          margin-top: 1rem;
-        }
-        .status-ok {
-          color: green;
-          font-weight: bold;
-        }
-        .status-error {
-          color: red;
-          font-weight: bold;
-        }
-        .error {
-          color: red;
-        }
-      `}</style>
     </div>
   );
 }

frontend/src/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/app/page.tsx

@@ -16,33 +16,6 @@ export default function Home() {
         <h2>Backend Health</h2>
         <HealthStatus />
       </section>
-
-      <style jsx>{`
-        .container {
-          max-width: 800px;
-          margin: 0 auto;
-          padding: 2rem;
-        }
-        h1 {
-          margin-bottom: 2rem;
-          color: #333;
-          font-size: 2.5rem;
-          text-align: center;
-        }
-        h2 {
-          color: #555;
-          margin-bottom: 1rem;
-          border-bottom: 1px solid #eee;
-          padding-bottom: 0.5rem;
-        }
-        section {
-          margin-bottom: 2rem;
-          background-color: white;
-          padding: 1rem;
-          border-radius: 8px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-        }
-      `}</style>
     </main>
   );
 }