Merge pull request #48 from UoaWDCC/josef/sponsor-profile-page

Josef/sponsor profile page

web/package.json

@@ -19,11 +19,15 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@mantine/core": "7.8.1",
-    "@mantine/hooks": "7.8.1",
+    "@mantine/carousel": "^7.11.2",
+    "@mantine/core": "7.11.2",
+    "@mantine/dropzone": "^7.11.2",
+    "@mantine/hooks": "^7.11.2",
     "@reduxjs/toolkit": "^2.2.5",
     "@tabler/icons-react": "^3.7.0",
+    "embla-carousel-react": "^8.1.7",
     "jwt-decode": "^4.0.0",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.2",
@@ -60,7 +64,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^24.0.0",
     "postcss": "^8.4.35",
-    "postcss-preset-mantine": "1.15.0",
+    "postcss-preset-mantine": "1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.2.5",
     "prop-types": "^15.8.1",

web/src/app/App.tsx

@@ -5,10 +5,11 @@ import { theme } from './theme';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import './global.css';
+import '@mantine/carousel/styles.css';
 
 export default function App() {
   return (
-    <MantineProvider theme={theme}>
+    <MantineProvider theme={theme} defaultColorScheme="dark">
       <Router />
       <ToastContainer
         position="bottom-right"

web/src/app/components/JobBoard/JobBoard.module.css

@@ -0,0 +1,98 @@
+.filterContainer {
+  flex: 1;
+  display: flex;
+  max-width: 360px;
+  width: 100%;
+  flex-direction: column;
+}
+
+.listingContainer {
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: 1200px;
+  height: 100%;
+}
+
+.listingInnerContainer {
+  min-height: 85%;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(
+    2,
+    1fr
+  ); /* 2 columns, each taking up 1 fraction of available space */
+  grid-template-rows: repeat(2, 1fr); /* 2 rows, each taking up 1 fraction of available space */
+  gap: 1rem;
+}
+
+@media (min-width: 1080px) {
+  .listingInnerContainer {
+    grid-template-columns: repeat(
+      3,
+      1fr
+    ); /* 3 columns, each taking up 1 fraction of available space */
+  }
+}
+.paginationContainer {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+}
+
+.filterHeading {
+  color: white;
+  font-size: 1.4rem;
+}
+
+.filterSubheading {
+  color: var(--mantine-color-customAzureBlue-1);
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+.checkbox {
+  margin: 0.8em 0;
+}
+
+.listItemContainer {
+  background-color: var(--mantine-color-customCharcoalGrey-1);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.listItemTitle {
+  font-size: 1.2rem;
+  margin: 0;
+}
+
+.listItemCompanyContainer {
+  background-color: var(--mantine-color-customAzureBlue-1);
+  width: fit-content;
+  padding: 0.2rem 1rem;
+  border-radius: 2rem;
+}
+.listItemCompanyName {
+  margin: 0;
+}
+.listItemLocation {
+  margin: 0.5rem 0;
+}
+
+.listItemDescription {
+  font-size: 0.8rem;
+}
+
+.headingContainer {
+  flex: 2;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}