tailwind css integration

peerprep/frontend/package.json

@@ -34,11 +34,14 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
     "jest": "^29.7.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",

peerprep/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

peerprep/frontend/src/App.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import './styles/App.css';
 /*
 const App: React.FC = () => {
   return (

peerprep/frontend/src/main.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
-import './styles/index.css'
+import './styles/index.css';
 import './styles/App.css';
 
 createRoot(document.getElementById('root')!).render(

peerprep/frontend/src/styles/App.css

@@ -1,32 +1,104 @@
 #root {
-  max-width: 1280px;
   margin: 0 auto;
   padding: 5rem;
   text-align: center;
   background-color: white;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Global Styling */
 body {
   background-color: white;
   color: black;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  color: white;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
 }
 
 h1 {
   font-size: 32px;
   color: black;
+  line-height: 1.1;
 }
 
 h2 {
   font-size: 24px;
   color: black;
 }
 
-/* Container uses flexbox for split layout */
+/* Container uses flexbox for split layout
 .container {
   display: flex;
   justify-content: space-between;
-  gap: 20px;  /* Add a gap between the left and right panels */
+  gap: 20px;
+} */
+
+.question-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.login-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.signup-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
 }
 
 /* Left panel for form and question list, using grid */

peerprep/frontend/src/styles/index.css

@@ -1,68 +1,3 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities; 

peerprep/frontend/src/views/CollabServiceViews/CollabServiceIntegratedView.tsx

@@ -3,7 +3,7 @@ import { UnControlled as CodeMirror } from 'react-codemirror2';
 import { useParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import * as Y from 'yjs';
-import Chat from '../../components/Chat.tsx';
+import Chat from './components/Chat.tsx';
 
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/material.css';

peerprep/frontend/src/views/QuestionServiceViews/QuestionManagement.tsx

@@ -134,7 +134,7 @@ const QuestionManagement: React.FC = () => {
   };
 
   return (
-    <div className="container">
+    <div className="question-container">
       {/* Add a link to the login page at the top or in a suitable location */}
       <div className="nav">
         <Link to="/" className="top-left-link">Go to Login</Link> 

peerprep/frontend/src/views/UserServiceViews/Login.tsx

@@ -37,7 +37,7 @@ const Login = () => {
     };
 
     return (
-      <div className="container">
+      <div className="login-container">
         <div className="login-form">
           <h2>Login</h2>
           <div className="form-section">

peerprep/frontend/src/views/UserServiceViews/SignUp.tsx

@@ -48,7 +48,7 @@ const SignUp = () => {
   };
 
   return (
-    <div className="container">
+    <div className="signup-container">
       <div className="login-form">
         <h2>Sign Up</h2>
 

peerprep/frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}