Minor CSS fixes

Author: NivethaUdayakumar

frontend/package-lock.json

@@ -18,7 +18,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

frontend/package.json

@@ -1,5 +1,3 @@
-.App {
-  text-align: center;
-  background-color: black;
-  color: white;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/App.css

@@ -6,8 +6,6 @@ import QuestionServicePage from './pages/questionservicepage';
 import { UserContextProvider } from './UserContextProvider';
 import './App.css';
 
-
-
 const App: React.FC = () => {
   useEffect(() => {
     document.documentElement.classList.add('dark');
@@ -16,7 +14,7 @@ const App: React.FC = () => {
   return (
     <UserContextProvider>
 
-      <div className="App h-screen">
+      <div className="App h-screen bg-gray-900 text-white">
         <Routes>
           <Route path='/' element={<LoginPage />} />
           <Route path='/login' element={<LoginPage />} />

frontend/src/App.tsx

@@ -10,7 +10,7 @@ interface FilterCategoriesProps {
 const FilterCategories: React.FC<FilterCategoriesProps> = ({ category, setCategory, questions }) => {
   const uniqueCategories = Array.from(new Set(
     questions
-      .flatMap((q) => q.categories.split(',').map(cat => cat.trim()))  // Split by comma and trim whitespace
+      .flatMap((q) => q.categories.split(',').map(cat => cat.trim())) 
   ));
   return (
     <select

frontend/src/components/filtercategory.tsx

@@ -24,6 +24,7 @@ const QuestionServicePage: React.FC = () => {
 
   return (
     <div className="p-4">
+      <h1 className="text-2xl font-bold text-left mb-6">Peer Prep</h1>
       <div className="flex justify-start items-center space-x-2 mb-4 text-sm">
         <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
         <FilterCategories category={categoryFilter} setCategory={setCategoryFilter} questions={questions} />