diff --git a/index.html b/index.html index e0ef3be..7aca349 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - - - - - Vite + React + TS - - -
- - + + + + + Vite + React + TS + + +
+ + diff --git a/src/App.css b/src/App.css index 1d72881..7ef2cd8 100644 --- a/src/App.css +++ b/src/App.css @@ -1,10 +1,142 @@ @import "tailwindcss"; +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + background-color: #f8f9fa; +} + +html, body { + height: 100%; + width: 100%; +} + #root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.flex { + display: flex; +} + +.flex-col { + flex-direction: column; +} + +.min-h-screen { + min-height: 100vh; +} + +.w-full { + width: 100%; +} + +.bg-gray-100 { + background-color: #f7fafc; +} + +.flex-1 { + flex: 1; +} + +.max-w-7xl { + max-width: 80rem; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.sm\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.lg\:px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.bg-white { + background-color: #ffffff; +} + +.rounded-lg { + border-radius: 0.5rem; +} + +.shadow-md { + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.text-gray-600 { + color: #718096; +} + +.text-gray-900 { + color: #1a202c; +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.font-semibold { + font-weight: 600; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + +.space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + +.bg-blue-600 { + background-color: #3182ce; +} + +.text-white { + color: #ffffff; +} + +.font-bold { + font-weight: 700; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.rounded { + border-radius: 0.25rem; } .logo { @@ -43,18 +175,16 @@ color: #888; } -.chats { - text-align: left; - width: 15%; - height: 200%; - float: left; - background-color: #888; - position: fixed; +.hover\:bg-blue-700:hover { + background-color: #2b6cb0; } -.chat-messages { - text-align: left; - margin-left: 15%; +.transition { + transition: all 0.2s; +} + +.bg-gray-300 { + background-color: #e2e8f0; } .chats-form { @@ -65,9 +195,12 @@ text-align: center; } -.text-input { - width: 67vw; - margin-right: 1vw; +.text-gray-700 { + color: #4a5568; +} + +.hover\:bg-gray-400:hover { + background-color: #cbd5e0; } .chats-submit { diff --git a/src/App.tsx b/src/App.tsx index f7a9096..7955978 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,54 +1,46 @@ -import Home from "./pages/Home"; -import Contact from "./pages/Contact"; -import SignIn from "./pages/SignIn"; -import SignUp from "./pages/SignUp"; -import Dashboard from "./pages/Dashboard"; -import Search from "./pages/Search"; -import Chats from "./pages/Chats"; -import TutorPage from "./pages/TutorPage"; -import Header from "./components/Header"; -import Footer from "./components/Footer"; -import "./App.css"; -import { store } from "./services/auth"; -import { BrowserRouter, Routes, Route } from "react-router-dom"; -import ProtectedRoutes from "./utils/protectedRoutes"; -import AuthProvider from "react-auth-kit"; +import Home from './pages/Home'; +import Contact from './pages/Contact'; +import SignIn from './pages/SignIn'; +import SignUp from './pages/SignUp'; +import Dashboard from './pages/Dashboard'; +import Search from './pages/Search'; +import Chats from './pages/Chats'; +import TutorPage from './pages/TutorPage'; +import Header from './components/Header'; +import Footer from './components/Footer'; +import './App.css'; +import { store } from './services/auth'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import ProtectedRoutes from './utils/protectedRoutes'; +import AuthProvider from 'react-auth-kit'; function App() { - return ( - - -
-
-
- - } /> - } /> - } /> - } /> - }> - } - /> - } /> - } - /> - } /> - } - /> - - -
-
- - - ); + return ( + + +
+
+
+ + } /> + } /> + } /> + } /> + }> + } /> + } /> + } /> + } /> + } /> + + + +
+
+ + + ); } export default App; diff --git a/src/components/SettingsButton.tsx b/src/components/SettingsButton.tsx index 48b65ab..2ecc129 100644 --- a/src/components/SettingsButton.tsx +++ b/src/components/SettingsButton.tsx @@ -5,20 +5,23 @@ export default function SettingsButton() { const [isPopupOpen, setIsPopupOpen] = useState(false); return (
- + {isPopupOpen && ( -
- - +
+
+ + +
)}
diff --git a/src/components/SettingsDashboard.tsx b/src/components/SettingsDashboard.tsx index 726743f..f3e3c23 100644 --- a/src/components/SettingsDashboard.tsx +++ b/src/components/SettingsDashboard.tsx @@ -1,24 +1,3 @@ -/* -const newUser = { - email, - password: pass, // Store hashed password - name: (fName + " " + lName), - phone: phone, - role: isTutor ? "tutor" : "student", - chats: [], - // the following is information which is later defined by the user - description: "", - languages: ["en"], - state: "", - GPA: 0.0, - // tutor specific (leave blank for students) - teaches: [], // all the classes this tutor teaches - rating: 0.0, - - createdAt: new Date(), - }; - */ - import { useEffect, useState } from "react"; import useAuthUser from "react-auth-kit/hooks/useAuthUser"; @@ -81,9 +60,7 @@ export default function SettingsDashboard() { ...prevSettings, language: checked ? [...(prevSettings.language || []), value] // Add if checked - : (prevSettings.language || []).filter( - (lang) => lang !== value, - ), // Remove if unchecked + : (prevSettings.language || []).filter((lang) => lang !== value), // Remove if unchecked })); }; @@ -112,81 +89,83 @@ export default function SettingsDashboard() { }; return ( -
-

Settings

+
+

Settings

{settings.name === "LOADING" ? (

Loading Page

) : (
-