feat/developer search paginate

holy-grail-frontend/src/App.css

@@ -1,8 +1,188 @@
-#root {
-    text-align: center;
-    background-color: white;
-    min-width: 100%;
-    box-sizing: border-box;
+/* font */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
+:root {
+  --header-height: 3rem;
+
+  /* colors */
+  --hue: 0;
+  --sat: 0%;
+  --title-color: hsl(var(--hue), var(--sat), 20%);
+  --title-color-dark: hsl(var(--hue), var(--sat), 0%);
+  --text-color: hsl(var(--hue), var(--sat), 30%);
+  --body-color: hsl(var(--hue), var(--sat), 98%);
+  --alt-color: hsl(var(--hue), var(--sat), 50%);
+  --container-color: #FFFFFF;
+
+  /* font */
+  --body-font: "Poppins", sans-serif;
+
+  --big-font-size: 3.5rem;
+  --h1-font-size: 2.25rem;
+  --h2-font-size: 1.75rem;
+  --h3-font-size: 1.25rem;
+  --normal-font-size: 1rem;
+  --small-font-size: 0.875rem;
+  --smaller-font-size: 0.813rem;
+  --tiny-font-size: 0.625rem;
+
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semi-bold: 600;
+
+  --mb-0-25: 0.25rem;
+  --mb-0-5: 0.5rem;
+  --mb-0-75: 0.75rem;
+  --mb-1: 1rem;
+  --mb-1-5: 1.5rem;
+  --mb-2: 2rem;
+  --mb-2-5: 2.5rem;
+  --mb-3: 3rem;
+
+  --z-tooltip: 10;
+  --z-fixed: 100;
+  --z-modal: 1000;
+}
+
+*:not(span) {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+  color: var(--title-color);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body,
+button,
+input,
+textarea {
+  font-family: var(--body-font);
+  font-size: var(--normal-font-size);
+}
+
+body {
+  background-color: var(--body-color);
+  color: var(--text-color)
+}
+
+h1, h2, h3 {
+  color: var(--title-color);
+  font-weight: var(--font-semi-bold);
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.hr.horizontal-divider {
+  border-top: 3px solid var(--alt-color)
+}
+
+.text-underline {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+}
+
+.bold-text {
+  font-weight: var(--font-semi-bold);
+  font-size: var(--normal-font-size);
+}
+
+.section {
+  padding: 0 2rem;
+}
+
+.section__title {
+  font-size: var(--h1-font-size);
+  color: var(--title-color);
+  font-weight: var(--font-semi-bold);
+}
+
+.section__subtitle {
+  display: block;
+  font-size: var(--normal-font-size);
+  color: var(--alt-color);
+  margin-bottom: 2%;
+}
+
+.sub-section__title {
+  font-size: var(--h2-font-size);
+  font-weight: var(--font-semi-bold);
+}
+
+.section__title,
+.section__subtitle,
+.sub-section__title {
+  margin-left: auto;
+  text-align: left;
+}
+
+.img-caption {
+  margin-top: 2rem;
+  text-align: center;
+}
+.caption__content,
+.caption__title {
+  width: 100%;
+}
+.caption__title {
+  font-weight: var(--font-semi-bold);
+}
+.caption__content {
+  font-size: var(--small-font-size);
+}
+.caption__title,
+.caption__content {
+  display: inline-block;
+  margin: 0 auto;
+}
+
+.button-text {
+  font-weight: var(--font-semi-bold);
+  color: var(--text-color);
+}
+
+.text__link {
+  font-weight: var(--font-semi-bold);
+  color: steelblue;
+}
+
+.text__link:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* layout */
+.container {
+  max-width: 1440px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.grid {
+  display: grid;
+  gap: 1.5rem;
 }
 
 .logo {
@@ -39,4 +219,14 @@
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;
   }
+}
+
+@media screen and (max-width: 1080px) {
+  :root {
+    --h1-font-size: 2rem;
+    --normal-font-size: 0.95rem;
+  }
+  .bold-text {
+    margin-top: 1rem;
+  }
 }

holy-grail-frontend/src/App.tsx

@@ -1,9 +1,7 @@
 import "./App.css";
 import { ChakraProvider } from "@chakra-ui/react";
-import NavBar from "./features/NavBar/NavBar";
 import LoginPage from "./features/SignIn/LoginPage";
 import LandingPage from "./features/Landing/LandingPage";
-import Library from "./features/Library/Library";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Footer from "./features/Footer/Footer";
 import SignUpPage from "./features/SignUp/SignUpPage";
@@ -17,16 +15,19 @@ import ForgotPasswordPage from "./features/ForgotPassword/ForgotPasswordPage";
 import ResetPasswordPage from "./features/ResetPassword/ResetPasswordPage";
 import AccountVerifyPage from "./features/AccountVerify/AccountVerifyPage";
 
+import Header from "./features/Header/Header";
+
 function App() {
   return (
     <AuthProvider>
       <ChakraProvider>
         <Router>
-          <NavBar />
+          <Header />
+          {/*<NavBar />*/}
           <Routes>
             <Route path="/" element={<LandingPage />} />
             <Route path="/login" element={<LoginPage />} />
-            <Route path="/library" element={<Library />} />
+            {/*<Route path="/library" element={<Library />} />*/}
             <Route path="/register" element={<SignUpPage />} />
             <Route path="/upload" element={<UploadPage />} />
             <Route path="/admin" element={<ApprovalPage />} />

holy-grail-frontend/src/components/HomeButton/HomeButton.tsx

@@ -17,9 +17,7 @@ export const HomeButton = forwardRef<
         h="40px"
         {...props}
       >
-        <Text fontWeight="bold" color="black">
-          {children}
-        </Text>
+        <div className="button-text">{children}</div>
       </Button>
     </>
   );

holy-grail-frontend/src/components/NotesTable/NotesTable.tsx

@@ -5,6 +5,8 @@ import { ComboboxProps } from "../../features/Library/Combobox";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { Pagination } from "../Pagination/Pagination";
 import { useMediaQuery } from "react-responsive";
+import "../../features/Library/library.css";
+
 interface NotesTableProps {
   notes: Note[];
   categories: ComboboxProps["options"];
@@ -56,22 +58,16 @@ const NotesTable = ({
   return (
     <Box>
       <ThemeProvider theme={muiTheme}>
-        <Box
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-          mr="auto"
-          ml="auto"
-          sx={{ width: "80%" }}
-        >
+        <Box display="flex" flexDirection="column" alignItems="center">
           <Box
             display="flex"
             flexDirection={isMobile ? "column" : "row"}
-            justifyContent="space-around"
             gap={2}
             marginBottom={2}
-            sx={{ width: "90%" }}
+            sx={{ width: "100%" }}
+            alignItems="center"
           >
+            <div className="bold-text">Filter By:</div>
             <Combobox
               label="Category"
               value={category}
@@ -80,7 +76,7 @@ const NotesTable = ({
                 handlePageChange(1);
               }}
               options={categories}
-              style={{ width: isMobile ? "100%" : "30%" }}
+              style={{ width: isMobile ? "100%" : "15%" }}
             />
             <Combobox
               label="Subject"
@@ -90,7 +86,7 @@ const NotesTable = ({
                 handlePageChange(1);
               }}
               options={subjects}
-              style={{ width: isMobile ? "100%" : "30%" }}
+              style={{ width: isMobile ? "100%" : "15%" }}
             />
             <Combobox
               label="Type"
@@ -100,7 +96,7 @@ const NotesTable = ({
                 handlePageChange(1);
               }}
               options={types}
-              style={{ width: isMobile ? "100%" : "30%" }}
+              style={{ width: isMobile ? "100%" : "15%" }}
             />
           </Box>
           <Grid container mt="3%" spacing={2} sx={{ width: "90%" }}>

holy-grail-frontend/src/components/Pagination/Pagination.tsx

@@ -4,13 +4,22 @@ import debounce from "lodash/debounce";
 interface PaginationProps {
   pageInfo: { page: number; size: number; total: number; pages: number };
   handlePageChange: (newPage: number) => void;
+  styles?: { mt: string };
 }
 
-export const Pagination = ({ pageInfo, handlePageChange }: PaginationProps) => {
+export const Pagination = ({
+  pageInfo,
+  handlePageChange,
+  styles,
+}: PaginationProps) => {
   const debouncedHandlePageChange = debounce(handlePageChange, 100);
 
   return (
-    <HStack spacing={4} justifyContent="center" mt="10%">
+    <HStack
+      spacing={4}
+      justifyContent="center"
+      mt={styles?.mt ? styles.mt : "10%"}
+    >
       <Button
         onClick={() => debouncedHandlePageChange(pageInfo.page - 1)}
         isDisabled={pageInfo.page === 1}