Skip to content

Commit

Permalink
AD-136 Complete restyle of home page. Removed placeholder graphics an…
Browse files Browse the repository at this point in the history 
…d added Company bullet points, Elections, and Regier / Sign In
  • Loading branch information
@morrisonbrett
morrisonbrett committed Oct 29, 2024
1 parent 0f2a321 commit adb9dea
Show file tree
Hide file tree
Showing 3 changed files with 233 additions and 60 deletions.
117 changes: 117 additions & 0 deletions public/static/TrueVote_Logo_Text_Light.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
149 changes: 91 additions & 58 deletions src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,106 @@
import { useGlobalContext } from '@/Global';
import { AllElections } from '@/ui/AllElections';
import { CompanyMissionBullets } from '@/ui/CompanyMissionBullets';
import classes from '@/ui/shell/AppStyles.module.css';
import { Container, Image, Stack, Table, Text } from '@mantine/core';
import { Box, Button, Container, Group, Image, Paper, Stack, Table, Text } from '@mantine/core';
import { IconLogin, IconUserPlus } from '@tabler/icons-react';
import { FC } from 'react';
import { Link } from 'react-router-dom';
import { Link, NavigateFunction, useNavigate } from 'react-router-dom';

export const Home: FC = () => {
// const theme: MantineTheme = useMantineTheme();
// const { colorScheme } = useMantineColorScheme();
const navigate: NavigateFunction = useNavigate();
const { nostrProfile } = useGlobalContext();
const { localization } = useGlobalContext();

// const getColor: any = (color: string) => theme.colors[color][colorScheme === 'dark' ? 5 : 7];

return (
<Container size='xs' px='xs' className={classes.centerContainer}>
<Stack gap={32}>
<Text className={classes.homeText}>{localization?.getLocalizedString('SLOGAN')}</Text>
</Stack>
{nostrProfile !== undefined && String(nostrProfile.displayName).length > 0 ? (
<>
<Text>
<Stack gap='xs'>
{/* Logo Section */}
<Table
verticalSpacing='xs'
striped
withTableBorder
withColumnBorders
className={classes.table}
>
<Table.Tbody>
<Table.Tr>
<Table.Td className={classes.tdCenter}>
<div className={classes.wideLogoImageDiv}>
<Link to='/elections'>
<Image radius='md' className={classes.wideLogoImage} />
</Link>
</div>
</Table.Td>
</Table.Tr>
</Table.Tbody>
</Table>

{/* Slogan Section with more prominence */}
<Paper p='md' radius='lg' className={classes.sloganPaper}>
<Text size='xl' fw={700} ta='center' className={classes.homeText}>
{localization?.getLocalizedString('SLOGAN')}
</Text>
</Paper>

{/* Welcome Section */}
{nostrProfile !== undefined && String(nostrProfile.displayName).length > 0 ? (
<Text ta='center' size='lg'>
{localization?.getLocalizedString('WELCOME')}, {nostrProfile.displayName}
</Text>
</>
) : (
<></>
)}
<Table
verticalSpacing='xs'
striped
withTableBorder
withColumnBorders
className={classes.table}
>
<Table.Tbody>
<Table.Tr>
<Table.Td className={classes.tdCenter}>
<div className={classes.voterImageDiv}>
<Link to='/elections'>
<Image radius='md' className={classes.voterImage} />
</Link>
</div>
<Text className={(classes.smallText, classes.tight)}>
{localization?.getLocalizedString('VOTEONPHONEORCOMPUTER')}
</Text>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td className={classes.tdCenter}>
<div className={classes.voterImageDiv}>
<Link to='/results'>
<Image radius='md' className={classes.chartsImage} />
</Link>
</div>
<Text className={(classes.smallText, classes.tight)}>
{localization?.getLocalizedString('REVIEWRESULTS')}
</Text>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td className={classes.tdCenter}>
<div className={classes.homeLogoDiv}>
<Image radius='md' className={classes.homeLogoImage} />
</div>
<Text className={classes.smallText} />
</Table.Td>
</Table.Tr>
</Table.Tbody>
</Table>
) : (
<Group gap='md' grow className={classes.homeButtons}>
<Button
leftSection={<IconUserPlus />}
className={`${classes.profileButton} ${classes.primaryGreenBackgroundColor}`}
radius='md'
variant='filled'
onClick={(): void => navigate('/register')}
styles={{
root: {
color: 'white',
},
}}
>
Register
</Button>
<Button
leftSection={<IconLogin />}
className={`${classes.profileButton} ${classes.primaryPurpleBackgroundColor}`}
radius='md'
variant='filled'
onClick={(): void => navigate('/signin')}
styles={{
root: {
color: 'white',
},
}}
>
Sign In
</Button>
</Group>
)}

{/* Elections Section */}
<Paper p='lg' radius='md' withBorder className={classes.sectionPaper}>
<Box>
<Text size='xl' fw={700} ta='left' mb='lg' className={classes.sectionTitle}>
Elections
</Text>
<AllElections />
</Box>
</Paper>

{/* Built for Future Section */}
<Paper p='lg' radius='md' withBorder className={classes.sectionPaper}>
<Box>
<Text size='xl' fw={700} ta='left' mb='lg' className={classes.sectionTitle}>
Built for the Future
</Text>
<CompanyMissionBullets />
</Box>
</Paper>
</Stack>
</Container>
);
};
27 changes: 25 additions & 2 deletions src/ui/shell/AppStyles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,22 @@
z-index: 1;
}

.primaryPurpleBackgroundColor {
background-color: #7793d8;
}

.primaryPurpleBackgroundColor:hover {
background-color: #5f77bd !important;
}

.primaryGreenBackgroundColor {
background-color: #34a26b;
}

.primaryGreenBackgroundColor:hover {
background-color: #2a8255 !important;
}

.flexShell {
align-self: flex-start;
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
Expand Down Expand Up @@ -359,7 +375,7 @@
}

.profileButton {
width: 200px;
width: 160px;
}

.electionHeaderImage {
Expand Down Expand Up @@ -395,7 +411,10 @@
}

.wideLogoImage {
content: url('/static/TrueVote_Logo_Text.svg');
content: light-dark(
url('/static/TrueVote_Logo_Text_Light.svg'),
url('/static/TrueVote_Logo_Text.svg')
);
width: 350px;
}

Expand Down Expand Up @@ -579,3 +598,7 @@
border-bottom: 2px solid light-dark(var(--mantine-color-blue-3), var(--mantine-color-blue-8));
padding-bottom: var(--mantine-spacing-xs);
}

.homeButtons {
padding: 5px;
}

0 comments on commit adb9dea

Please sign in to comment.