Unit List View

frontend/src/components/HousingLocatorTable.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 
 import { Button } from "./Button";
-import { TablePagination } from "./TablePagination";
+import { Pagination } from "./Pagination";
 
 import { User, demoteUser } from "@/api/users";
 import { DataContext } from "@/contexts/DataContext";
@@ -68,9 +68,19 @@ const HLRow = styled.div`
   margin-bottom: 20px;
 `;
 
+const HLTableFooterWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-right: 24px;
+  margin-bottom: 20px;
+  justify-content: right;
+`;
+
 const HLTableFooter = styled.div`
-  padding-left: 85%;
-  margin: 1vh 0vw 3vh 0vw;
+  display: flex;
+  flex-direction: row;
+
+  justify-content: space-between;
 `;
 
 const Overlay = styled.div`
@@ -219,6 +229,15 @@ export const HousingLocatorTable = () => {
               ></DeleteIcon>
             </HLRow>
           ))}
+        <HLTableFooterWrapper>
+          <HLTableFooter>
+            <Pagination
+              totalPages={Math.ceil(housingLocators.length / ENTRIES_PER_PAGE)}
+              currPage={pageNumber}
+              setPageNumber={setPageNumber}
+            />
+          </HLTableFooter>
+        </HLTableFooterWrapper>
       </HLTableContainer>
       {popup && selectedUser && (
         <>
@@ -303,13 +322,6 @@ export const HousingLocatorTable = () => {
           </Modal>
         </>
       )}
-      <HLTableFooter>
-        <TablePagination
-          totalPages={Math.ceil(housingLocators.length / ENTRIES_PER_PAGE)}
-          currPage={pageNumber}
-          setPageNumber={setPageNumber}
-        />
-      </HLTableFooter>
     </HLTableWrapper>
   );
 };

frontend/src/components/Pagination.tsx

@@ -0,0 +1,216 @@
+import styled from "styled-components";
+
+const NumPageButton = styled.button`
+  width: 25px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid #eeeeee;
+  opacity: 0px;
+  background: #f5f5f5;
+  align-content: center;
+
+  &:hover {
+    cursor: pointer;
+    background: #f5f5f5;
+  }
+
+  &.active {
+    background: #ec8537;
+    color: #ffffff;
+    border-color: #ec8537;
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  //width: 341.87px;
+  height: 24px;
+  justify-content: space-between;
+  gap: 20px;
+  opacity: 0px;
+`;
+
+const NavButton = styled(NumPageButton)``;
+
+const NavButtonIcon = styled.img`
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  border: 0;
+`;
+
+const EllipsesWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+`;
+
+type PaginationProps = {
+  totalPages: number;
+  currPage: number;
+  setPageNumber: (newPageNumber: number) => void;
+};
+
+const BUTTONS_PER_PAGE = 5;
+
+export const Pagination = (props: PaginationProps) => {
+  const pages = [];
+
+  const handleClick = (increase: boolean): void => {
+    if (increase && props.currPage !== props.totalPages) {
+      props.setPageNumber(props.currPage + 1);
+    }
+
+    if (!increase && props.currPage > 1) {
+      props.setPageNumber(props.currPage - 1);
+    }
+  };
+
+  //case 1: num pages < buttons per page -> show all
+  if (props.totalPages <= BUTTONS_PER_PAGE) {
+    for (let i = 1; i <= props.totalPages; i++) {
+      pages.push(
+        <NumPageButton
+          key={i}
+          onClick={() => {
+            props.setPageNumber(i);
+          }}
+          className={props.currPage === i ? "active" : ""}
+        >
+          {i}
+        </NumPageButton>,
+      );
+    }
+  }
+  //case 2: on page 1-3 -> show first 4 ... and last
+  else if (props.currPage <= BUTTONS_PER_PAGE - 2) {
+    for (let i = 1; i <= props.totalPages; i++) {
+      //add button for first three pages
+      if (i <= BUTTONS_PER_PAGE - 1) {
+        pages.push(
+          <NumPageButton
+            key={i}
+            onClick={() => {
+              props.setPageNumber(i);
+            }}
+            className={props.currPage === i ? "active" : ""}
+          >
+            {i}
+          </NumPageButton>,
+        );
+      } else if (i === props.totalPages) {
+        pages.push(<EllipsesWrapper>...</EllipsesWrapper>);
+        pages.push(
+          <NumPageButton
+            key={i}
+            onClick={() => {
+              props.setPageNumber(i);
+            }}
+            className={props.currPage === i ? "active" : ""}
+          >
+            {i}
+          </NumPageButton>,
+        );
+      }
+    }
+  }
+  //case 3: on page end - 4 + 1-> show first ...  last 4
+  else if (props.currPage > props.totalPages - BUTTONS_PER_PAGE + 2) {
+    //add button for first three pages
+    for (let i = 1; i <= props.totalPages; i++) {
+      if (i >= props.totalPages - BUTTONS_PER_PAGE + 2) {
+        pages.push(
+          <NumPageButton
+            key={i}
+            onClick={() => {
+              props.setPageNumber(i);
+            }}
+            className={props.currPage === i ? "active" : ""}
+          >
+            {i}
+          </NumPageButton>,
+        );
+      } else if (i === 1) {
+        pages.push(
+          <NumPageButton
+            key={i}
+            onClick={() => {
+              props.setPageNumber(i);
+            }}
+            className={props.currPage === i ? "active" : ""}
+          >
+            {i}
+          </NumPageButton>,
+        );
+        pages.push(<EllipsesWrapper>...</EllipsesWrapper>);
+      }
+    }
+  }
+  //case 4: middle -> show first ... middle - 1, middle, middle + 1, ... last
+  else {
+    for (let i = 1; i <= props.totalPages; i++) {
+      if (i === 1) {
+        pages.push(
+          <NumPageButton
+            key={i}
+            onClick={() => {
+              props.setPageNumber(i);
+            }}
+            className={props.currPage === i ? "active" : ""}
+          >
+            {i}
+          </NumPageButton>,
+        );
+        pages.push(<EllipsesWrapper>...</EllipsesWrapper>);
+      } else if (i === props.currPage - 1 || i === props.currPage || i === props.currPage + 1) {
+        pages.push(
+          <NumPageButton
+            key={i}
+            onClick={() => {
+              props.setPageNumber(i);
+            }}
+            className={props.currPage === i ? "active" : ""}
+          >
+            {i}
+          </NumPageButton>,
+        );
+      } else if (i === props.totalPages) {
+        pages.push(<EllipsesWrapper>...</EllipsesWrapper>);
+        pages.push(
+          <NumPageButton
+            key={i}
+            onClick={() => {
+              props.setPageNumber(i);
+            }}
+            className={props.currPage === i ? "active" : ""}
+          >
+            {i}
+          </NumPageButton>,
+        );
+      }
+    }
+  }
+
+  return (
+    <ButtonWrapper>
+      <NavButton>
+        <NavButtonIcon
+          src={"/ic_caretleft.svg"}
+          onClick={() => {
+            handleClick(false);
+          }}
+        />
+      </NavButton>
+      {pages}
+      <NavButton>
+        <NavButtonIcon
+          src={"/ic_caretright.svg"}
+          onClick={() => {
+            handleClick(true);
+          }}
+        />
+      </NavButton>
+    </ButtonWrapper>
+  );
+};

frontend/src/components/ReferralTable.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useState } from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+// import { Pagination } from "./Pagination";
 
 import { Button } from "./Button";
 import { ReferralTableDropDown } from "./ReferralTableDropDown";

frontend/src/components/Table.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styled from "styled-components";
 
-import { TablePagination } from "./TablePagination";
+import { Pagination } from "./Pagination";
 
 const TableContainer = styled.div`
   display: flex;
@@ -43,6 +43,9 @@ const TableCell = styled.div`
 `;
 
 const TableFooter = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
   padding-top: 20px;
 `;
 
@@ -82,7 +85,7 @@ export const Table = (props: TableProps) => {
             ))}
           <TableFooter>
             {/* TODO: Replace this with new pagination when it is implemented */}
-            <TablePagination
+            <Pagination
               totalPages={Math.ceil(rows.length / rowsPerPage)}
               currPage={pageNumber}
               setPageNumber={setPageNumber}

frontend/src/components/UnitCard.tsx

@@ -84,7 +84,7 @@ const RentText = styled(UnitCardText)`
   font-weight: 700;
   line-height: 121%;
   letter-spacing: 0.331px;
-  font-family: Inter;
+  font-family: "Neutraface Text";
 `;
 
 const AddressText = styled(UnitCardText)`

frontend/src/components/UnitCardGrid.tsx

@@ -7,7 +7,6 @@ import { UnitCard } from "@/components/UnitCard";
 import { DataContext } from "@/contexts/DataContext";
 
 const UnitCardLayout = styled.div`
-  // margin: 95px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -42,8 +41,8 @@ const GridContainer = styled.div`
 const ButtonsWrapper = styled.div`
   display: flex;
   flex-direction: row;
-  left: 74vw;
   position: absolute;
+  left: 69vw;
 `;
 
 const PendingButton = styled.div<{ selected: boolean }>`