Merge pull request #59 from ksummarized/00058_replace_mui_with_tailwi…

…ndcss
ksummarized · Nov 21, 2023 · b8be8e9 · b8be8e9
2 parents 7c08e33 + a3ad09d
commit b8be8e9
Show file tree

Hide file tree

Showing 38 changed files with 10,768 additions and 11,429 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,38 +14,36 @@
     "license-checker-windows": "cd scripts && windows_check_licenses.bat"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@hookform/resolvers": "^2.9.11",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.6",
+    "@hookform/resolvers": "^3.3.1",
     "@vitejs/plugin-react-refresh": "^1.3.6",
+    "autoprefixer": "^10.4.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.1",
     "react-router-dom": "^6.8.0",
+    "tailwindcss": "^3.3.3",
     "vite": "^4.0.4",
     "zod": "^3.20.6"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
-    "@vitest/coverage-v8": "^0.33.0",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
+    "@vitest/coverage-v8": "^0.34.4",
     "eslint": "^8.32.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.5.3",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-vitest": "^0.2.6",
+    "eslint-plugin-vitest": "^0.3.1",
     "license-checker": "^25.0.1",
-    "prettier": "^2.8.3",
-    "typescript": "^4.9.4",
-    "vitest": "^0.33.0"
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
+    "vitest": "^0.34.4"
   }
 }
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/frontend/src/App.css b/frontend/src/App.css
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,29 +1,27 @@
 import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { ThemeProvider } from "@mui/material/styles";
 
-import "./App.css";
-import darkTheme from "./styles/Styles";
+import "./index.css";
 import LoginPage from "./pages/Login/LoginPage";
 import HomePage from "./pages/Home/HomePage";
 import RegisterPage from "./pages/Register/RegisterPage";
 import StartPage from "./pages/Start/StartPage";
 import RequireAuth from "./helpers/RequireAuth";
+import NotFound from "./pages/NotFound/NotFound";
 
 function App(): JSX.Element {
   return (
-    <ThemeProvider theme={darkTheme}>
-      <BrowserRouter>
-        <Routes>
-          <Route index element={<StartPage />} />
-          <Route element={<RequireAuth />}>
-            <Route path="home" element={<HomePage />} />
-          </Route>
-          <Route path="login" element={<LoginPage />} />
-          <Route path="register" element={<RegisterPage />} />
-        </Routes>
-      </BrowserRouter>
-    </ThemeProvider>
+    <BrowserRouter>
+      <Routes>
+        <Route index element={<StartPage />} />
+        <Route element={<RequireAuth />}>
+          <Route path="home" element={<HomePage />} />
+        </Route>
+        <Route path="login" element={<LoginPage />} />
+        <Route path="register" element={<RegisterPage />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

diff --git a/frontend/src/assets/icons/CalendarIcon.svg b/frontend/src/assets/icons/CalendarIcon.svg
diff --git a/frontend/src/assets/icons/OrganizerIcon.svg b/frontend/src/assets/icons/OrganizerIcon.svg
diff --git a/frontend/src/assets/icons/ToDoListIcon.svg b/frontend/src/assets/icons/ToDoListIcon.svg
diff --git a/...rc/assets/images/undrawRelaxingAtHome.svg → frontend/src/assets/images/UndrawRelax.svg b/...rc/assets/images/undrawRelaxingAtHome.svg → frontend/src/assets/images/UndrawRelax.svg
diff --git a/frontend/src/assets/logos/facebookLogo.svg → frontend/src/assets/logos/FacebookLogo.svg b/frontend/src/assets/logos/facebookLogo.svg → frontend/src/assets/logos/FacebookLogo.svg
diff --git a/frontend/src/assets/logos/githubLogo.svg → frontend/src/assets/logos/GithubLogo.svg b/frontend/src/assets/logos/githubLogo.svg → frontend/src/assets/logos/GithubLogo.svg
diff --git a/frontend/src/assets/logos/googleLogo.svg → frontend/src/assets/logos/GoogleLogo.svg b/frontend/src/assets/logos/googleLogo.svg → frontend/src/assets/logos/GoogleLogo.svg
diff --git a/frontend/src/assets/logos/KsummarizedLogo.png b/frontend/src/assets/logos/KsummarizedLogo.png
diff --git a/frontend/src/assets/logos/XLogo.svg b/frontend/src/assets/logos/XLogo.svg
diff --git a/frontend/src/assets/logos/logo.png b/frontend/src/assets/logos/logo.png
diff --git a/frontend/src/assets/logos/twitterLogo.svg b/frontend/src/assets/logos/twitterLogo.svg
diff --git a/frontend/src/components/Fields/FormInput/CheckboxInput.tsx b/frontend/src/components/Fields/FormInput/CheckboxInput.tsx
@@ -1,20 +1,31 @@
 import * as React from "react";
 import { useFormContext, Controller } from "react-hook-form";
-import { Checkbox, CheckboxProps } from "@mui/material";
 
 type CheckboxInputProps = {
+  id: string;
   name: string;
-} & CheckboxProps;
+  label: string;
+};
 
-function CheckboxInput({ name, ...otherProps }: CheckboxInputProps) {
+function CheckboxInput({ id, name, label }: CheckboxInputProps) {
   const { control } = useFormContext();
 
   return (
     <Controller
       control={control}
       name={name}
       defaultValue=""
-      render={({ field }) => <Checkbox {...field} {...otherProps} />}
+      render={({ field }) => (
+        <div>
+          <input id={id} type="checkbox" {...field} className="form-control" />
+          <label
+            htmlFor={id}
+            className="block text-gray-700 text-sm font-bold mb-2"
+          >
+            {label}
+          </label>
+        </div>
+      )}
     />
   );
 }

diff --git a/frontend/src/components/Fields/FormInput/TextFieldInput.tsx b/frontend/src/components/Fields/FormInput/TextFieldInput.tsx
@@ -1,12 +1,23 @@
 import * as React from "react";
 import { useFormContext, Controller } from "react-hook-form";
-import { TextField, TextFieldProps } from "@mui/material";
 
 type TextFieldInputProps = {
+  id: string;
   name: string;
-} & TextFieldProps;
+  type: string;
+  required: boolean;
+  label: string;
+  placeholder: string;
+};
 
-function TextFieldInput({ name, ...otherProps }: TextFieldInputProps) {
+function TextFieldInput({
+  id,
+  name,
+  type,
+  required,
+  label,
+  placeholder,
+}: TextFieldInputProps) {
   const {
     control,
     formState: { errors },
@@ -18,14 +29,25 @@ function TextFieldInput({ name, ...otherProps }: TextFieldInputProps) {
       name={name}
       defaultValue=""
       render={({ field }) => (
-        <TextField
-          {...field}
-          {...otherProps}
-          error={!!errors[name]}
-          helperText={
-            errors[name] ? (errors[name]?.message as unknown as string) : ""
-          }
-        />
+        <div>
+          <label
+            htmlFor={id}
+            className="block text-gray-700 text-sm font-bold mb-2"
+          >
+            {label}
+            {required === true ? "*" : ""}
+          </label>
+          <input
+            id={id}
+            type={type}
+            placeholder={placeholder}
+            {...field}
+            className="form-control w-full px-3 py-1.5 text-gray-700 rounded border border-solid border-gray-300 focus:border-yellow-600 focus:outline-none"
+          />
+          {!!errors[name] && (
+            <p className="text-red-500 text-xs italic">{`${errors[name]?.message}`}</p>
+          )}
+        </div>
       )}
     />
   );