Skip to content

Commit

Permalink
🎨 rewrite most of validEvent page to Chakra
Browse files Browse the repository at this point in the history
  • Loading branch information
FredrikMorstad committed Dec 3, 2023
1 parent 4989986 commit d622a9b
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 47 deletions.
67 changes: 42 additions & 25 deletions src/components/pages/events/eventPage/validEvent/ValidEvent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ import {
} from 'components/molecules/event/eventBody/EventBody';
import { AuthenticateContext, Roles } from 'contexts/authProvider';
import EventHeader from 'components/molecules/event/eventHeader/EventHeader';
import { Button } from '@chakra-ui/react';
import { Button, Center, Flex } from '@chakra-ui/react';
import Icon from 'components/atoms/icons/icon';
import { useHistory } from 'react-router-dom';
import useTitle from 'hooks/useTitle';
import { useMobileScreen } from 'hooks/useMobileScreen';

export interface EventPageProps {
eid: string;
Expand All @@ -23,50 +24,66 @@ const ValidEventLayout: React.FC<{ event: Event }> = ({ event }) => {
const history = useHistory();

return (
<div className={styles.eventBody}>
<Flex
flexDir="column"
w="100%"
borderRadius="lg"
bg="#222136"
textAlign="center">
<EventHeader id={event.eid} className={styles.header} />

<EventInfo event={event} role={role} />

{role === Roles.admin && (
<div className={styles.settingsIcon}>
<Flex w="100%" m="1%">
<Icon
type={'cog'}
size={2}
onClick={() => history.push(`${event.eid}/admin`)}></Icon>
</div>
</Flex>
)}
</div>
</Flex>
);
};
export default ValidEventLayout;

export const ValidEventEditLayout: React.FC<{ event: Event }> = ({ event }) => {
const { role } = useContext(AuthenticateContext);
const isMobile = useMobileScreen();
const [edit, setEdit] = useState(false);

const setEventEdit = () => {
setEdit(!edit);
};

return (
<div className={styles.eventBody}>
<EventHeader id={event.eid} className={styles.header} />
{!edit ? (
<EventInfo event={event} role={role} />
) : (
<EditEvent event={event} setEdit={setEventEdit} />
)}
{role === Roles.admin && !edit && (
<div className={styles.editContainer}>
<Button
variant="primary"
onClick={setEventEdit}
className={styles.adminButtons}>
Rediger
</Button>
</div>
)}
</div>
<Flex w="100%" flexDir={isMobile ? 'column' : 'row'}>
<Center
w="100%"
pb="1rem"
flexDir="column"
bg="#222136"
borderRadius="lg"
textAlign="center">
<EventHeader id={event.eid} className={styles.header} />
{!edit ? (
<EventInfo event={event} role={role} />
) : (
<EditEvent event={event} setEdit={setEventEdit} />
)}
{role === Roles.admin && !edit && (
<Center>
<Button
variant="primary"
onClick={setEventEdit}
className={styles.adminButtons}>
Rediger
</Button>
</Center>
)}
</Center>
<Center
w={{ base: '100%', md: '12.5vw' }}
dir="column"
my={{ base: '1rem' }}></Center>
</Flex>
);
};
Original file line number Diff line number Diff line change
@@ -1,32 +1,10 @@
.eventBody {
display: flex;
flex-direction: column;
width: 100%;
border-radius: 20px;
background-color: #222136;
text-align: center;
}

.editContainer {
display: flex;
justify-content: center;
width: 100%;
}

.header {
min-height: 35vh;
border-radius: 20px 20px 0px 0px;
}

.adminButtons {
margin: 1% 0 1% 0;
width: 25%;
}

.settingsIcon {
margin: 1% 1% 1% 1%;
width: 100%;
display: flex;
}

@media screen and (max-width: 768px) {
Expand Down

0 comments on commit d622a9b

Please sign in to comment.