diff --git a/README.MD b/README.MD index 05100f0..c8f741a 100644 --- a/README.MD +++ b/README.MD @@ -10,11 +10,11 @@ - Don Lin (Back-end, Architecture) - Jack Haddad (Back-end, Front-end, Architecture) - Sienna Nguyen (Front-end, Back-end) -- Claudia Chan (Design) - Frank Situ (Back-end, Architecture) - Danny Jung (Back-end, Front-end, Architecture) - Jolin Chen (Front-end) - Jaehoon Oh (Front-end, Back-end) +- Josef Santos (Front-end) ## About diff --git a/web/package-lock.json b/web/package-lock.json index 5e24af3..2212031 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -8,9 +8,10 @@ "name": "mantine-vite-template", "version": "0.0.0", "dependencies": { - "@mantine/carousel": "^7.11.2", - "@mantine/core": "7.11.2", - "@mantine/hooks": "7.11.2", + "@mantine/carousel": "^7.12.0", + "@mantine/core": "^7.12.0", + "@mantine/dropzone": "^7.12.0", + "@mantine/hooks": "^7.12.0", "@reduxjs/toolkit": "^2.2.5", "@tabler/icons-react": "^3.7.0", "embla-carousel-react": "^8.1.7", @@ -2458,11 +2459,12 @@ } }, "node_modules/@floating-ui/react": { - "version": "0.26.14", - "license": "MIT", + "version": "0.26.22", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.22.tgz", + "integrity": "sha512-LNv4azPt8SpT4WW7Kku5JNVjLk2GcS0bGGjFTAgqOONRFo9r/aaGHHPpdiIuQbB1t8shmWyWqTTUDmZ9fcNshg==", "dependencies": { - "@floating-ui/react-dom": "^2.0.0", - "@floating-ui/utils": "^0.2.0", + "@floating-ui/react-dom": "^2.1.1", + "@floating-ui/utils": "^0.2.7", "tabbable": "^6.0.0" }, "peerDependencies": { @@ -2471,8 +2473,9 @@ } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.9", - "license": "MIT", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz", + "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==", "dependencies": { "@floating-ui/dom": "^1.0.0" }, @@ -2482,8 +2485,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.2.2", - "license": "MIT" + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", + "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", @@ -2680,21 +2684,21 @@ "dev": true }, "node_modules/@mantine/carousel": { - "version": "7.11.2", - "resolved": "https://registry.npmjs.org/@mantine/carousel/-/carousel-7.11.2.tgz", - "integrity": "sha512-SSK8VRMNhSzKV+icfjgBpc0XyN/SlwWZMw3bZ8/pg4kfhl8mzX21omG6ZaIaDdB3hs8CPLg1jZiQDjDAMniFpA==", + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/@mantine/carousel/-/carousel-7.12.0.tgz", + "integrity": "sha512-c+IaeDAHR77E8jbgFWkjN4cA0E2c9fIcvPGZnFNZ7NUFQjuQmaOdNcLqid2FOk+ay889eN+6PGuYmSgW58amCQ==", "peerDependencies": { - "@mantine/core": "7.11.2", - "@mantine/hooks": "7.11.2", + "@mantine/core": "7.12.0", + "@mantine/hooks": "7.12.0", "embla-carousel-react": ">=7.0.0", "react": "^18.2.0", "react-dom": "^18.2.0" } }, "node_modules/@mantine/core": { - "version": "7.11.2", - "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.11.2.tgz", - "integrity": "sha512-T64RjdgY8UPAv249miW1lQyPPot1JbCcKKsAZMNQHgcttcxLhrFpKVvglc4/48hdSoxI4LYJPNvqp7zciZmucQ==", + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.12.0.tgz", + "integrity": "sha512-FxsaIaEnqxV71MBGGsvXXad2q9KYTaIQFVP4TSAZI6xLChklXF/qJTqvabweaoW9BaVQT75b/BnUoJFzPfyAfw==", "dependencies": { "@floating-ui/react": "^0.26.9", "clsx": "^2.1.1", @@ -2704,15 +2708,29 @@ "type-fest": "^4.12.0" }, "peerDependencies": { - "@mantine/hooks": "7.11.2", + "@mantine/hooks": "7.12.0", + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, + "node_modules/@mantine/dropzone": { + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-7.12.0.tgz", + "integrity": "sha512-emj9D2fCaeLmrBPE15dAZ31tI0hDENMN3Emz1xqMqmR/5xuzsVSTiZRJxIARsHn2Muiva3jLdRLFdW9A8YB3FA==", + "dependencies": { + "react-dropzone-esm": "15.0.1" + }, + "peerDependencies": { + "@mantine/core": "7.12.0", + "@mantine/hooks": "7.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" } }, "node_modules/@mantine/hooks": { - "version": "7.11.2", - "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.11.2.tgz", - "integrity": "sha512-jhyVe/sbDEG2U8rr2lMecUPgQxcfr5hh9HazqGfkS7ZRIMDO7uJ947yAcTMGGkp5Lxtt5TBFt1Cb6tiB2/1agg==", + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.12.0.tgz", + "integrity": "sha512-UKMSpQZMdmecZX1PKPoknfUOE9MfDPiZR1myU4wUUKpaZibvvmhYuy8mcOOmYWegapRS3ErKIAc2cNnJ1Dk4RQ==", "peerDependencies": { "react": "^18.2.0" } @@ -13101,6 +13119,20 @@ "react": "^18.2.0" } }, + "node_modules/react-dropzone-esm": { + "version": "15.0.1", + "resolved": "https://registry.npmjs.org/react-dropzone-esm/-/react-dropzone-esm-15.0.1.tgz", + "integrity": "sha512-RdeGpqwHnoV/IlDFpQji7t7pTtlC2O1i/Br0LWkRZ9hYtLyce814S71h5NolnCZXsIN5wrZId6+8eQj2EBnEzg==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">= 10.13" + }, + "peerDependencies": { + "react": ">= 16.8 || 18.0.0" + } + }, "node_modules/react-element-to-jsx-string": { "version": "15.0.0", "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz", @@ -13127,8 +13159,9 @@ "license": "MIT" }, "node_modules/react-number-format": { - "version": "5.3.4", - "license": "MIT", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.0.tgz", + "integrity": "sha512-NWdICrqLhI7rAS8yUeLVd6Wr4cN7UjJ9IBTS0f/a9i7UB4x4Ti70kGnksBtZ7o4Z7YRbvCMMR/jQmkoOBa/4fg==", "dependencies": { "prop-types": "^15.7.2" }, @@ -13170,7 +13203,8 @@ }, "node_modules/react-remove-scroll": { "version": "2.5.10", - "license": "MIT", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.10.tgz", + "integrity": "sha512-m3zvBRANPBw3qxVVjEIPEQinkcwlFZ4qyomuWVpNJdv4c6MvHfXV0C3L9Jx5rr3HeBHKNRX+1jreB5QloDIJjA==", "dependencies": { "react-remove-scroll-bar": "^2.3.6", "react-style-singleton": "^2.2.1", @@ -13264,7 +13298,8 @@ }, "node_modules/react-textarea-autosize": { "version": "8.5.3", - "license": "MIT", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz", + "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==", "dependencies": { "@babel/runtime": "^7.20.13", "use-composed-ref": "^1.3.0", @@ -14965,7 +15000,8 @@ }, "node_modules/tabbable": { "version": "6.2.0", - "license": "MIT" + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" }, "node_modules/table": { "version": "6.8.2", @@ -15403,8 +15439,9 @@ } }, "node_modules/type-fest": { - "version": "4.18.2", - "license": "(MIT OR CC0-1.0)", + "version": "4.24.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.24.0.tgz", + "integrity": "sha512-spAaHzc6qre0TlZQQ2aA/nGMe+2Z/wyGk5Z+Ru2VUfdNwT6kWO6TjevOlpebsATEG1EIQ2sOiDszud3lO5mt/Q==", "engines": { "node": ">=16" }, @@ -15771,14 +15808,16 @@ }, "node_modules/use-composed-ref": { "version": "1.3.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz", + "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==", "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "node_modules/use-isomorphic-layout-effect": { "version": "1.1.2", - "license": "MIT", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, @@ -15790,7 +15829,8 @@ }, "node_modules/use-latest": { "version": "1.2.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz", + "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==", "dependencies": { "use-isomorphic-layout-effect": "^1.1.1" }, diff --git a/web/package.json b/web/package.json index 234c57c..96219f0 100644 --- a/web/package.json +++ b/web/package.json @@ -19,10 +19,10 @@ "storybook:build": "storybook build" }, "dependencies": { - "@mantine/carousel": "^7.11.2", - "@mantine/core": "7.11.2", - "@mantine/dropzone": "^7.11.2", - "@mantine/hooks": "^7.11.2", + "@mantine/carousel": "^7.12.0", + "@mantine/core": "^7.12.0", + "@mantine/dropzone": "^7.12.0", + "@mantine/hooks": "^7.12.0", "@reduxjs/toolkit": "^2.2.5", "@tabler/icons-react": "^3.7.0", "embla-carousel-react": "^8.1.7", diff --git a/web/public/WDCCLogo.png b/web/public/WDCCLogo.png new file mode 100644 index 0000000..0390448 Binary files /dev/null and b/web/public/WDCCLogo.png differ diff --git a/web/src/app/components/JobBoard/JobBoard.module.css b/web/src/app/components/JobBoard/JobBoard.module.css index 84a833a..5d4cfac 100644 --- a/web/src/app/components/JobBoard/JobBoard.module.css +++ b/web/src/app/components/JobBoard/JobBoard.module.css @@ -1,23 +1,16 @@ -.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; + flex-grow: 1; height: 100%; } .listingInnerContainer { + flex: 1; min-height: 85%; width: 100%; + margin: 0; display: grid; grid-template-columns: repeat( 2, @@ -27,19 +20,10 @@ 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; } @@ -50,21 +34,18 @@ .filterSubheading { color: var(--mantine-color-customAzureBlue-1); - font-weight: 700; - font-size: 1.2rem; + font-weight: 600; + font-size: 1.1rem; } .checkbox { margin: 0.8em 0; } -.listItemContainer { +.jobCard { background-color: var(--mantine-color-customCharcoalGrey-1); border-radius: 1rem; padding: 1.5rem; - display: flex; - flex-direction: column; - justify-content: space-around; } .listItemTitle { @@ -72,12 +53,6 @@ margin: 0; } -.listItemCompanyContainer { - background-color: var(--mantine-color-customAzureBlue-1); - width: fit-content; - padding: 0.2rem 1rem; - border-radius: 2rem; -} .listItemCompanyName { margin: 0; } @@ -89,10 +64,38 @@ font-size: 0.8rem; } -.headingContainer { - flex: 2; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; +.filterButton { + text-decoration: underline; + font-size: 1.2rem; +} + +/* larger screen */ +@media (min-width: 1080px) { + .listingInnerContainer { + grid-template-columns: repeat( + 3, + 1fr + ); /* 3 columns, each taking up 1 fraction of available space */ + } + + .searchInputContainer { + flex: 1; + display: flex; + flex-direction: column; + } + + .searchInput { + width: 60%; + align-self: flex-end; + } +} + +/* mobile view */ +@media (max-width: 768px) { + .listingInnerContainer { + grid-template-columns: repeat( + 1, + 1fr + ); /* 3 columns, each taking up 1 fraction of available space */ + } } diff --git a/web/src/app/components/JobBoard/JobFilter.tsx b/web/src/app/components/JobBoard/JobFilter.tsx index 87e5cd0..c50cb3f 100644 --- a/web/src/app/components/JobBoard/JobFilter.tsx +++ b/web/src/app/components/JobBoard/JobFilter.tsx @@ -1,6 +1,7 @@ -import { Checkbox, Stack } from '@mantine/core'; +import { Checkbox, Title, Button, Stack, Modal, Flex } from '@mantine/core'; import classes from './JobBoard.module.css'; -import { FC } from 'react'; +import { FC, useState } from 'react'; +import { IconArrowDown } from '@tabler/icons-react'; interface JobFilterProps { filterRoles: string[]; @@ -28,49 +29,119 @@ const JobFilter: FC = ({ { value: 'software', label: 'Software' }, { value: 'other', label: 'Other' }, ]; + const [isModalOpen, setIsModalOpen] = useState(false); + + const openModal = () => setIsModalOpen(true); + const closeModal = () => setIsModalOpen(false); + const [isPortrait, setIsPortrait] = useState(window.innerHeight > window.innerWidth); return ( - - Filters - - - {roles.map((role) => ( - - ))} - - - - - {fields.map((role) => ( - - ))} - - - + <> + {!isPortrait && ( + + + Filters + + + + {roles.map((role) => ( + + ))} + + + + + {fields.map((role) => ( + + ))} + + + + )} + {isPortrait && ( + <> + + + + + + + {roles.map((role) => ( + + ))} + + + + + {fields.map((role) => ( + + ))} + + + + + )} + ); }; diff --git a/web/src/app/components/JobBoard/JobListing.tsx b/web/src/app/components/JobBoard/JobListing.tsx index 2e5f7fc..3d4bb78 100644 --- a/web/src/app/components/JobBoard/JobListing.tsx +++ b/web/src/app/components/JobBoard/JobListing.tsx @@ -1,9 +1,8 @@ -import { Pagination, Stack } from '@mantine/core'; -import classes from './JobBoard.module.css'; +import { Pagination, Container, Flex } from '@mantine/core'; +import styles from './JobBoard.module.css'; import JobListingItem from './JobListingItem'; import { FC, useEffect, useState } from 'react'; import { chunk } from 'lodash'; -import JobSearch from './JobSearch'; interface JobListingProps { filterRoles: string[]; @@ -11,11 +10,12 @@ interface JobListingProps { } const JobListing: FC = ({ filterRoles, filterFields }) => { const [activePage, setPage] = useState(1); - const [search, setSearch] = useState(''); const [itemsPerPage, setItemsPerPage] = useState(4); + const [isPortrait, setIsPortrait] = useState(window.innerHeight > window.innerWidth); const updateItemsPerPage = () => { + setIsPortrait(window.innerHeight > window.innerWidth); if (window.innerWidth > 1080) { setItemsPerPage(6); } else { @@ -38,6 +38,7 @@ const JobListing: FC = ({ filterRoles, filterFields }) => { { title: 'Junior Software Developer', company: 'WDCC', + logo: 'WDCCLogo.png', location: 'Auckland CBD, Auckland', description: 'In this role, you will work to design, develop, and maintain software solutions using .NET, Typescript, and JavaScript.', @@ -45,6 +46,7 @@ const JobListing: FC = ({ filterRoles, filterFields }) => { { title: 'Junior Software Developer', company: 'WDCC', + logo: 'WDCCLogo.png', location: 'Auckland CBD, Auckland', description: 'In this role, you will work to design, develop, and maintain software solutions using .NET, Typescript, and JavaScript.', @@ -52,6 +54,7 @@ const JobListing: FC = ({ filterRoles, filterFields }) => { { title: 'Junior Software Developer', company: 'WDCC', + logo: 'WDCCLogo.png', location: 'Auckland CBD, Auckland', description: 'In this role, you will work to design, develop, and maintain software solutions using .NET, Typescript, and JavaScript.', @@ -59,6 +62,7 @@ const JobListing: FC = ({ filterRoles, filterFields }) => { { title: 'Junior Software Developer', company: 'WDCC', + logo: 'WDCCLogo.png', location: 'Auckland CBD, Auckland', description: 'In this role, you will work to design, develop, and maintain software solutions using .NET, Typescript, and JavaScript.', @@ -66,6 +70,7 @@ const JobListing: FC = ({ filterRoles, filterFields }) => { { title: 'Junior Software Developer', company: 'WDCC', + logo: 'WDCCLogo.png', location: 'Auckland CBD, Auckland', description: 'In this role, you will work to design, develop, and maintain software solutions using .NET, Typescript, and JavaScript.', @@ -82,22 +87,24 @@ const JobListing: FC = ({ filterRoles, filterFields }) => { company={jobListingItem.company} location={jobListingItem.location} description={jobListingItem.description} + logo={jobListingItem.logo} /> )); return ( - - -
{jobListingItems}
-
+ + + {jobListingItems} + + -
- + + ); }; diff --git a/web/src/app/components/JobBoard/JobListingItem.tsx b/web/src/app/components/JobBoard/JobListingItem.tsx index 486ea18..49274a3 100644 --- a/web/src/app/components/JobBoard/JobListingItem.tsx +++ b/web/src/app/components/JobBoard/JobListingItem.tsx @@ -1,25 +1,36 @@ import { FC } from 'react'; -import classes from './JobBoard.module.css'; -import { Text } from '@mantine/core'; +import styles from './JobBoard.module.css'; +import { Flex, Text, Image } from '@mantine/core'; interface JobListingItemProps { title: string; company: string; + logo: string; location: string; description: string; } -const JobListingItem: FC = ({ title, company, location, description }) => { +const JobListingItem: FC = ({ + title, + company, + location, + description, + logo, +}) => { return ( -
- {title} -
- {company} -
- {location} - + + {title} + {company} + {location} + {description} -
+ ); }; diff --git a/web/src/app/components/JobBoard/JobSearch.tsx b/web/src/app/components/JobBoard/JobSearch.tsx index 94d3464..bf5e82e 100644 --- a/web/src/app/components/JobBoard/JobSearch.tsx +++ b/web/src/app/components/JobBoard/JobSearch.tsx @@ -1,7 +1,7 @@ -import { Flex, TextInput, Title } from '@mantine/core'; -import classes from './JobBoard.module.css'; +import { Grid, TextInput, Title } from '@mantine/core'; import { IconSearch } from '@tabler/icons-react'; -import { FC } from 'react'; +import { FC, useState } from 'react'; +import classes from './JobBoard.module.css'; interface JobSearchProps { search: string; @@ -12,20 +12,43 @@ const JobSearch: FC = ({ search, setSearch }) => { const handleChange = (event: React.ChangeEvent) => { setSearch(event.target.value); }; + const [isPortrait, setIsPortrait] = useState(window.innerHeight > window.innerWidth); return ( - -
- FIND JOBS - } - size="md" - value={search} - onChange={handleChange} - /> -
- + + {!isPortrait ? ( + <> + + Job Board + + +
+ } + size="md" + value={search} + onChange={handleChange} + className={classes.searchInput} + /> +
+ + + ) : ( + + Job Board + + } + size="md" + value={search} + onChange={handleChange} + pr={20} + /> + + )} + ); }; diff --git a/web/src/app/pages/JobBoard.page.tsx b/web/src/app/pages/JobBoard.page.tsx index 1d5442a..f81a191 100644 --- a/web/src/app/pages/JobBoard.page.tsx +++ b/web/src/app/pages/JobBoard.page.tsx @@ -1,26 +1,60 @@ -import { Divider } from '@mantine/core'; +import { Divider, Grid } from '@mantine/core'; import JobFilter from '../components/JobBoard/JobFilter'; import JobListing from '../components/JobBoard/JobListing'; -import classes from '../styles/JobBoardPage.module.css'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; +import JobSearch from '../components/JobBoard/JobSearch'; export function JobBoard() { const [filterRoles, setFilterRoles] = useState([]); const [filterFields, setFilterFields] = useState([]); - return ( -
-
- -
- + const [isPortrait, setIsPortrait] = useState(window.innerHeight > window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setIsPortrait(window.innerHeight > window.innerWidth); + }; + + window.addEventListener('resize', handleResize); - -
+ return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + const [search, setSearch] = useState(''); + + return ( + + {!isPortrait ? ( + <> + + + + + + + + + + + + ) : ( + + + + + + )} + ); } diff --git a/web/src/app/styles/JobBoardPage.module.css b/web/src/app/styles/JobBoardPage.module.css index f405f98..75e337d 100644 --- a/web/src/app/styles/JobBoardPage.module.css +++ b/web/src/app/styles/JobBoardPage.module.css @@ -11,3 +11,21 @@ .leftContainer { margin-top: 15vh; } + +.modal { + background-color: var(--mantine-color-customCharcoalGrey-1); + padding: 2rem; +} + +.modalHeader { + background-color: var(--mantine-color-customCharcoalGrey-1); + padding: 0; +} + +@media (max-width: 768px) { + .jobBoardContainer { + padding: 3rem; + overflow-y: scroll; + flex-direction: column; + } +} diff --git a/web/yarn.lock b/web/yarn.lock index 2f2fe4b..a349d82 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -1943,21 +1943,21 @@ __metadata: linkType: hard "@floating-ui/core@npm:^1.6.0": - version: 1.6.6 - resolution: "@floating-ui/core@npm:1.6.6" + version: 1.6.7 + resolution: "@floating-ui/core@npm:1.6.7" dependencies: - "@floating-ui/utils": "npm:^0.2.6" - checksum: 10c0/c94f6d0a800185b1839b879231ef65f8dc7736a52c0297ed042f23624519748ed1145469f3aa7f864474f3dccd9ec3bedeaba891f409464a176c8f3416b60619 + "@floating-ui/utils": "npm:^0.2.7" + checksum: 10c0/5c9ae274854f87ed09a61de758377d444c2b13ade7fd1067d74287b3e66de5340ae1281e48604b631c540855a2595cfc717adf9a2331eaadc4fa6d28e8571f64 languageName: node linkType: hard "@floating-ui/dom@npm:^1.0.0": - version: 1.6.9 - resolution: "@floating-ui/dom@npm:1.6.9" + version: 1.6.10 + resolution: "@floating-ui/dom@npm:1.6.10" dependencies: "@floating-ui/core": "npm:^1.6.0" - "@floating-ui/utils": "npm:^0.2.6" - checksum: 10c0/71ab68e6880446835a865d05db0889e5cd40a6007e97325624d7ce57b50e7f8533934cdab667365219020e9c8ae840c1e1bd37b1e4cd6937ac48ca2e2f11e333 + "@floating-ui/utils": "npm:^0.2.7" + checksum: 10c0/ed7d7b400e00b2f31f1b8f11863af2cb95d0d3cd84635186ca31b41d8d9fe7fe12c85e4985617d7df7ed365abad48b327d0bae35934842007b4e1052d9780576 languageName: node linkType: hard @@ -1974,23 +1974,23 @@ __metadata: linkType: hard "@floating-ui/react@npm:^0.26.9": - version: 0.26.21 - resolution: "@floating-ui/react@npm:0.26.21" + version: 0.26.22 + resolution: "@floating-ui/react@npm:0.26.22" dependencies: "@floating-ui/react-dom": "npm:^2.1.1" - "@floating-ui/utils": "npm:^0.2.6" + "@floating-ui/utils": "npm:^0.2.7" tabbable: "npm:^6.0.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" - checksum: 10c0/13a6c458d9316a969fbb93840fdd3f23ca6a5ecd68a6069dc8e7384f1097f13d6221e2fdf211dd265d19b80a95e02bc97e0f77cfb408bea01eff7c4a9b49f5ea + checksum: 10c0/7eea7bef4fb98d13873752c5cabcf61216dbf00d748027450cdd0ff5c7a51328f8800fa012ecd87bef8e1abedcc7703d5298a604843ec031dc88a18233548623 languageName: node linkType: hard -"@floating-ui/utils@npm:^0.2.6": - version: 0.2.6 - resolution: "@floating-ui/utils@npm:0.2.6" - checksum: 10c0/8de3108e7862ca756be501dbe6ff49996ff15f545a282acf39bf268ae2977ceb14298bb155c5c7e6f7885df7fdcc6abb136eb94cde61a3b5a7d96f6dc5b74ad4 +"@floating-ui/utils@npm:^0.2.7": + version: 0.2.7 + resolution: "@floating-ui/utils@npm:0.2.7" + checksum: 10c0/0559ea5df2dc82219bad26e3509e9d2b70f6987e552dc8ddf7d7f5923cfeb7c44bf884567125b1f9cdb122a4c7e6e7ddbc666740bc30b0e4091ccbca63c6fb1c languageName: node linkType: hard @@ -2109,22 +2109,22 @@ __metadata: languageName: node linkType: hard -"@mantine/carousel@npm:^7.11.2": - version: 7.11.2 - resolution: "@mantine/carousel@npm:7.11.2" +"@mantine/carousel@npm:^7.12.0": + version: 7.12.0 + resolution: "@mantine/carousel@npm:7.12.0" peerDependencies: - "@mantine/core": 7.11.2 - "@mantine/hooks": 7.11.2 + "@mantine/core": 7.12.0 + "@mantine/hooks": 7.12.0 embla-carousel-react: ">=7.0.0" react: ^18.2.0 react-dom: ^18.2.0 - checksum: 10c0/560c10bb4fa9cd270f4f74c74feb5fdcf3a3f03593e179f4aa8504ebaf99b6408e1d517e7f51842b3c5a79d80cff4461510a3393d95ff765148c0d3aa78bb46b + checksum: 10c0/cfc2645deff12318d016de0cc5a9dc53e0e925e575241be1fa36081fb0bf3e9fddf63099de170860f7682ab7b35db80300834c1db78cefcba63059d9cee74934 languageName: node linkType: hard -"@mantine/core@npm:7.11.2": - version: 7.11.2 - resolution: "@mantine/core@npm:7.11.2" +"@mantine/core@npm:^7.12.0": + version: 7.12.0 + resolution: "@mantine/core@npm:7.12.0" dependencies: "@floating-ui/react": "npm:^0.26.9" clsx: "npm:^2.1.1" @@ -2133,14 +2133,14 @@ __metadata: react-textarea-autosize: "npm:8.5.3" type-fest: "npm:^4.12.0" peerDependencies: - "@mantine/hooks": 7.11.2 + "@mantine/hooks": 7.12.0 react: ^18.2.0 react-dom: ^18.2.0 - checksum: 10c0/ca13547e9961d908701c8c1825c4b99eb4a757060c22fc5a6c681a32ec58ec33fa58951978d395f5054f8823cdcaae3562f88631ef2ad6cd1d22414fa167d327 + checksum: 10c0/afd39a0202375aa709bf8e147326cabee65eaa8cd8a9c70830377f5f2612de58e0812837a4064ce346950e1406a5cd02147cac591f0f043ff2b464c69628004d languageName: node linkType: hard -"@mantine/dropzone@npm:^7.11.2": +"@mantine/dropzone@npm:^7.12.0": version: 7.12.0 resolution: "@mantine/dropzone@npm:7.12.0" dependencies: @@ -2154,7 +2154,7 @@ __metadata: languageName: node linkType: hard -"@mantine/hooks@npm:^7.11.2": +"@mantine/hooks@npm:^7.12.0": version: 7.12.0 resolution: "@mantine/hooks@npm:7.12.0" peerDependencies: @@ -7561,12 +7561,12 @@ __metadata: linkType: hard "foreground-child@npm:^3.1.0": - version: 3.2.1 - resolution: "foreground-child@npm:3.2.1" + version: 3.3.0 + resolution: "foreground-child@npm:3.3.0" dependencies: cross-spawn: "npm:^7.0.0" signal-exit: "npm:^4.0.1" - checksum: 10c0/9a53a33dbd87090e9576bef65fb4a71de60f6863a8062a7b11bc1cbe3cc86d428677d7c0b9ef61cdac11007ac580006f78bd5638618d564cfd5e6fd713d6878f + checksum: 10c0/028f1d41000553fcfa6c4bb5c372963bf3d9bf0b1f25a87d1a6253014343fb69dfb1b42d9625d7cf44c8ba429940f3d0ff718b62105d4d4a4f6ef8ca0a53faa2 languageName: node linkType: hard @@ -9234,10 +9234,10 @@ __metadata: version: 0.0.0-use.local resolution: "mantine-vite-template@workspace:." dependencies: - "@mantine/carousel": "npm:^7.11.2" - "@mantine/core": "npm:7.11.2" - "@mantine/dropzone": "npm:^7.11.2" - "@mantine/hooks": "npm:^7.11.2" + "@mantine/carousel": "npm:^7.12.0" + "@mantine/core": "npm:^7.12.0" + "@mantine/dropzone": "npm:^7.12.0" + "@mantine/hooks": "npm:^7.12.0" "@reduxjs/toolkit": "npm:^2.2.5" "@storybook/addon-essentials": "npm:^8.0.0" "@storybook/addon-interactions": "npm:^8.0.0" @@ -12415,9 +12415,9 @@ __metadata: linkType: hard "type-fest@npm:^4.12.0": - version: 4.23.0 - resolution: "type-fest@npm:4.23.0" - checksum: 10c0/c42bb14e99329ab37983d1f188e307bf0cc705a23807d9b2268d8fb2ae781d610ac6e2058dde8f9ea2b1b8ddc77ceb578d157fa81f69f8f70aef1d42fb002996 + version: 4.24.0 + resolution: "type-fest@npm:4.24.0" + checksum: 10c0/9770471a397733b17b5a9ce48ee5a4d6c042c84a4858ff4e15abd126f351c61b5fea8b7b5e55bfa34840098a920b915d5ff878db1b3c007a2512a6a9c7f21579 languageName: node linkType: hard