chore: ui improvements

goto-eof · Apr 30, 2023 · 361ea8b · 361ea8b
1 parent cf755c0
commit 361ea8b
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 81 deletions.
diff --git a/src/Main.tsx b/src/Main.tsx
@@ -137,10 +137,20 @@ export default function Main() {
  </Box>
  </MenuButton>
  <MenuList>
- <MenuItem onClick={() => navigate('/myOffers')}>
+ <MenuItem
+ onClick={() => {
+ setSelectedMenu('');
+ navigate('/myOffers');
+ }}
+ >
  My Offers
  </MenuItem>
- <MenuItem onClick={() => navigate('/myRequests')}>
+ <MenuItem
+ onClick={() => {
+ setSelectedMenu('');
+ navigate('/myRequests');
+ }}
+ >
  My Requests
  </MenuItem>
  <MenuDivider />
@@ -194,7 +204,7 @@ export default function Main() {
  ) : null}
  </Box>
 
- <Box p={4}>
+ <Box px={0}>
  <Box>
  <Routes>
  <Route path="/" element={<Home />} />
@@ -205,6 +215,7 @@ export default function Main() {
  key={'offers'}
  baseUrl="api/v1/job/public/0"
  urlCountItems="api/v1/job/public/count/0"
+ title="Offers"
  />
  }
  />
@@ -215,6 +226,7 @@ export default function Main() {
  key={'requests'}
  baseUrl="api/v1/job/public/1"
  urlCountItems="api/v1/job/public/count/1"
+ title="Requests"
  />
  }
  />
@@ -231,6 +243,7 @@ export default function Main() {
  key={'myOffers'}
  baseUrl="api/v1/job/mine/0"
  urlCountItems="api/v1/job/count/mine/0"
+ title="My Offers"
  />
  }
  />
@@ -241,6 +254,7 @@ export default function Main() {
  key={'myRequests'}
  baseUrl="api/v1/job/mine/1"
  urlCountItems="api/v1/job/count/mine/1"
+ title="My Requests"
  />
  }
  />

diff --git a/src/components/job/JobOffersRequests.tsx b/src/components/job/JobOffersRequests.tsx
@@ -23,13 +23,19 @@ import JobConst from '../../consts/JobConst';
 import UserService from '../../service/UserService';
 import Stars from './Stars';
 import JobService from '../../service/JobService';
+import Title from './Title';
 
 interface Props {
  baseUrl: string;
  urlCountItems: string;
+ title: string;
 }
 
-export default function JobOffersRequests({ baseUrl, urlCountItems }: Props) {
+export default function JobOffersRequests({
+ baseUrl,
+ urlCountItems,
+ title,
+}: Props) {
  const [offers, setOffers] = useState<Array<Job>>(new Array<Job>());
  const [itemsCount, setItemsCount] = useState(0);
  const [isLoaded, setLoaded] = useState(false);
@@ -55,6 +61,7 @@ export default function JobOffersRequests({ baseUrl, urlCountItems }: Props) {
 
  return (
  <>
+ <Title title={title} />
  <SimpleGrid spacing={3}>
  {offers &&
  offers.map((item, idx) => <JobComponent key={idx} job={item} />)}
@@ -83,81 +90,89 @@ function JobComponent({ job }: JobProps) {
  }
 
  return (
- <Card
- direction={{ base: 'column', sm: 'row' }}
- overflow="hidden"
- variant="outline"
- >
- {job.pictureName && (
- <Skeleton width={{ base: '100%', sm: '300px' }} isLoaded={imageLoaded}>
- <Image
- objectFit="cover"
- maxW={{ base: '100%', sm: '300px' }}
- h={{ base: '100%', sm: '100%' }}
- src={'/api/v1/jobPicture/files/' + job.pictureName}
- alt="Job Picture"
- onLoad={() => setImageLoaded(true)}
- />
- </Skeleton>
- )}
- {!job.pictureName && (
- <Skeleton width={{ base: '100%', sm: '300px' }} isLoaded={imageLoaded}>
- <Image
- objectFit="cover"
- maxW={{ base: '100%', sm: '300px' }}
- h={{ base: '100%', sm: '100%' }}
- src={'/api/v1/jobPicture/files/no_image.png'}
- alt="Job Picture"
- onLoad={() => setImageLoaded(true)}
- />
- </Skeleton>
- )}
-
- <SimpleGrid columns={{ base: 1, md: 2 }} w={'full'}>
- <Stack spacing={4} w={'full'}>
- <CardBody>
- <Heading
- cursor={'pointer'}
- color={'blue.400'}
- _hover={{ color: 'blue.500' }}
- size="md"
- onClick={() => goToViewOfferRequest(job.id)}
- >
- {job.title}{' '}
- </Heading>
- <Box fontSize={'0.8em'}>
- by {job.author?.firstname} {job.author?.lastname}
- {' | '} <Stars num={job.author?.stars} />
- </Box>
- <Text py="2">{job.description}</Text>
- </CardBody>
- <CardFooter justify={'center'}></CardFooter>
- </Stack>
- <Flex w={'full'}>
- <Box
- borderRadius={'10px'}
- verticalAlign={'top'}
- w={'full'}
- textAlign={'right'}
- p={10}
+ <>
+ <Card
+ direction={{ base: 'column', sm: 'row' }}
+ overflow="hidden"
+ variant="outline"
+ >
+ {job.pictureName && (
+ <Skeleton
+ width={{ base: '100%', sm: '300px' }}
+ isLoaded={imageLoaded}
  >
- <Box textAlign={'right'}>Price:</Box>
- <Box fontSize={'1.3em'} fontWeight={'bold'}>
- {job.price}€
- </Box>
- <Box mt={4}>
- <Button
- display={!showUserButtons(job) ? '' : 'none'}
- mr={3}
- variant="solid"
- colorScheme="blue"
+ <Image
+ objectFit="cover"
+ maxW={{ base: '100%', sm: '300px' }}
+ h={{ base: '100%', sm: '100%' }}
+ src={'/api/v1/jobPicture/files/' + job.pictureName}
+ alt="Job Picture"
+ onLoad={() => setImageLoaded(true)}
+ />
+ </Skeleton>
+ )}
+ {!job.pictureName && (
+ <Skeleton
+ width={{ base: '100%', sm: '300px' }}
+ isLoaded={imageLoaded}
+ >
+ <Image
+ objectFit="cover"
+ maxW={{ base: '100%', sm: '300px' }}
+ h={{ base: '100%', sm: '100%' }}
+ src={'/api/v1/jobPicture/files/no_image.png'}
+ alt="Job Picture"
+ onLoad={() => setImageLoaded(true)}
+ />
+ </Skeleton>
+ )}
+
+ <SimpleGrid columns={{ base: 1, md: 2 }} w={'full'}>
+ <Stack spacing={4} w={'full'}>
+ <CardBody>
+ <Heading
+ cursor={'pointer'}
+ color={'blue.400'}
+ _hover={{ color: 'blue.500' }}
+ size="md"
+ onClick={() => goToViewOfferRequest(job.id)}
  >
- {JobService.calulateAcceptButtonLabel(job)}
- </Button>
+ {job.title}{' '}
+ </Heading>
+ <Box fontSize={'0.8em'}>
+ by {job.author?.firstname} {job.author?.lastname}
+ {' | '} <Stars num={job.author?.stars} />
+ </Box>
+ <Text py="2">{job.description}</Text>
+ </CardBody>
+ <CardFooter justify={'center'}></CardFooter>
+ </Stack>
+ <Flex w={'full'}>
+ <Box
+ borderRadius={'10px'}
+ verticalAlign={'top'}
+ w={'full'}
+ textAlign={'right'}
+ p={10}
+ >
+ <Box textAlign={'right'}>Price:</Box>
+ <Box fontSize={'1.3em'} fontWeight={'bold'}>
+ {job.price}€
+ </Box>
+ <Box mt={4}>
+ <Button
+ display={!showUserButtons(job) ? '' : 'none'}
+ mr={3}
+ variant="solid"
+ colorScheme="blue"
+ >
+ {JobService.calulateAcceptButtonLabel(job)}
+ </Button>
+ </Box>
  </Box>
- </Box>
- </Flex>
- </SimpleGrid>
- </Card>
+ </Flex>
+ </SimpleGrid>
+ </Card>
+ </>
  );
 }
diff --git a/src/components/job/Title.tsx b/src/components/job/Title.tsx
@@ -0,0 +1,15 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function Title({ title }: Props) {
+ return (
+ <Box h={'80px'} bg={'gray.900'}>
+ <Text color={'gray.50'} fontSize={'3em'} textAlign={'center'}>
+ {title}
+ </Text>
+ </Box>
+ );
+}
+
+interface Props {
+ title: string;
+}
diff --git a/src/components/job/ViewOfferRequest.tsx b/src/components/job/ViewOfferRequest.tsx
@@ -26,6 +26,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import UserService from '../../service/UserService';
 import Stars from './Stars';
 import JobService from '../../service/JobService';
+import Title from './Title';
 
 interface Props {}
 export default function ViewOfferRequest({}: Props) {
@@ -70,6 +71,7 @@ export default function ViewOfferRequest({}: Props) {
 
  return (
  <>
+ <Title title={job?.title || ''} />
  <Card
  direction={{ base: 'column', sm: 'row' }}
  overflow="hidden"
@@ -112,14 +114,14 @@ export default function ViewOfferRequest({}: Props) {
  <SimpleGrid columns={{ base: 1, md: 2 }} w={'full'}>
  <Stack spacing={4} w={'full'}>
  <CardBody>
- <Heading
+ {/* <Heading
  cursor={'pointer'}
- color={'blue.400'}
- _hover={{ color: 'blue.500' }}
+ color={'green.400'}
+ _hover={{ color: 'greeen.500' }}
  size="md"
  >
  {job && job.title}{' '}
- </Heading>
+ </Heading> */}
  <Box fontSize={'0.8em'}>
  by {job && job.author?.firstname} {job && job.author?.lastname}{' '}
  (@