Skip to content

Commit

Permalink
Merge pull request #41 from Code-4-Community/gi-37-38-frontend
Browse files Browse the repository at this point in the history 
updated frontend elements for #37 & #38
  • Loading branch information
@SushiS1ay3r
SushiS1ay3r authored Nov 5, 2024
2 parents 0544cff + 06a7814 commit 0bdd995
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 106 deletions.
2 changes: 1 addition & 1 deletion apps/frontend/src/components/map/Map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ const Map: React.FC<MapProps> = ({
<MapDiv
id="map"
ref={mapRef}
style={{ width: '100%', height: '495px' }}
style={{ width: '100%', height: '675px' }}
/>
{showSignUp && <SignUpPage setShowSignUp={setShowSignUp} />}
</div>
Expand Down
163 changes: 58 additions & 105 deletions apps/frontend/src/pages/loginPage/loginPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import { Button, Box, Image, Input, Text, Stack } from "@chakra-ui/react";
import { Link } from "react-router-dom";
import BostonImage from "../../assets/images/loginPageMedia/boston-pru.png"
import AppleLogo from "../../assets/images/loginPageMedia/applelogo.png"
import c4cLogo from '../../images/logos/c4cLogo.png';
import cityOfBostonLogo from '../../images/logos/cityOfBostonLogo.png';



// Using className specifications to track hiearchy !
// Using className specifications to track hierarchy!
export default function LoginPage() {
return (
<Box
Expand All @@ -24,72 +22,77 @@ export default function LoginPage() {
flexDirection="column"
alignItems='center'
justifyContent='flex-start'
marginTop="12rem"
height="100%"
overflowY="auto" // Enable vertical scrolling
>
{/* Added margin-top only to logos to create spacing from the top */}
<Box
className='logos'
display="flex"
alignItems='center'
>
className='logos'
display="flex"
alignItems='center'
marginTop="4rem" // Keep margin for logo spacing
>
<img
src={cityOfBostonLogo}
style={{ marginTop: '12px', paddingRight: '15px' }}
src={cityOfBostonLogo}
style={{ paddingRight: '15px' }}
/>
<div
style={{
borderLeft: '1px solid rgba(0, 0, 0, 1)',
height: '55px',
paddingRight: '15px',
}}
style={{
borderLeft: '1px solid rgba(0, 0, 0, 1)',
height: '55px',
paddingRight: '15px',
}}
/>
<img src={c4cLogo} />
</Box>

{/* The rest of the content should have no additional margin */}
<Box
className="loginCTA"
width='321px'
height='29px'
marginTop='4rem'
className="loginCTA"
width='321px'
height='auto'
marginTop='2rem' // Adjust margin for spacing below logos
>
<Text
fontStyle="Montserrat"
fontSize="24px"
lineHeight="29.26px"
fontWeight="600"
fontStyle="Montserrat"
fontSize="24px"
lineHeight="29.26px"
fontWeight="600"
>Welcome Back Volunteer!</Text>
<Text
fontStyle="Montserrat"
fontSize="14px"
lineHeight="17.07px"
fontWeight="300"
fontStyle="Montserrat"
fontSize="14px"
lineHeight="17.07px"
fontWeight="300"
>Continue adopting today!</Text>
<Box
<Box
className='primaryLoginOption'
width='305px'
>
<Stack spacing='1rem'> {/* Adjust the spacing value as needed */}
>
<Stack spacing='1rem'>
<Box>
<Text mb={2} fontSize="sm" fontWeight="normal">Email Address</Text> {/* Adjust mb value as needed */}
<Text mb={2} fontSize="sm" fontWeight="normal">Email Address</Text>
<Input
width="305px"
height="33px"
bg="#D9D9D9"
borderRadius="10px"
borderColor="#D9D9D9"
_hover={{ borderColor: 'gray.300' }}
_focus={{ borderColor: 'gray.500', boxShadow: '0 0 0 1px gray.500' }}
width="100%"
height="33px"
bg="#D9D9D9"
borderRadius="10px"
borderColor="#D9D9D9"
_hover={{ borderColor: 'gray.300' }}
_focus={{ borderColor: 'gray.500', boxShadow: '0 0 0 1px gray.500' }}
/>
</Box>
<Box>
<Text mb={2} fontSize="sm" fontWeight="normal">Password</Text> {/* Adjust mb value as needed */}
<Text mb={2} fontSize="sm" fontWeight="normal">Password</Text>
<Input
width="305px"
height="33px"
bg="#D9D9D9"
type="password"
borderRadius="10px"
borderColor="#D9D9D9"
_hover={{ borderColor: 'gray.300' }}
_focus={{ borderColor: 'gray.500', boxShadow: '0 0 0 1px gray.500' }}
width="100%"
height="33px"
bg="#D9D9D9"
type="password"
borderRadius="10px"
borderColor="#D9D9D9"
_hover={{ borderColor: 'gray.300' }}
_focus={{ borderColor: 'gray.500', boxShadow: '0 0 0 1px gray.500' }}
/>
</Box>
<Button
Expand All @@ -106,70 +109,20 @@ export default function LoginPage() {
display="block"
width="100%"
textAlign="center"
_hover={{ textDecoration: 'none' }} // Removes underline on hover
textDecoration="none" // Removes underline
color="current" // Ensures the button text uses the current font color
>
Sign in
</Button>
</Stack>
</Box>
<Box className="orOptions" display="flex" alignItems="center"margin="1rem">
<Box flex={1} height="1px" bg="black" mr={4} />
<Text mt={6} mx={4}>or</Text> {/* mx is shorthand for margin on the x-axis (left and right) */}
<Box flex={1} height="1px" bg="black" ml={4} mr={12}/>
</Box>
{ /* */}

</Box>
<Box
className="big-tech-login"
display="flex"
flexDirection="column"
marginTop="20rem"
>
<Button
bg="#D9D9D9"
borderRadius="10px"
borderColor="#D9D9D9"
fontWeight='300'
fontSize='14px'
fontStyle='Montserrat'
lineHeight='17.07px'
marginTop="2rem"
width="300px"
>
Continue with Apple
</Button>
<Button
bg="#D9D9D9"
borderRadius="10px"
borderColor="#D9D9D9"
fontWeight='300'
fontSize='14px'
fontStyle='Montserrat'
lineHeight='17.07px'
marginTop="2rem"
_hover={{ textDecoration: 'none' }}
textDecoration="none"
color="current"
>
Continue with Facebook
</Button>
<Button
bg="#D9D9D9"
borderRadius="10px"
borderColor="#D9D9D9"
fontWeight='300'
fontSize='14px'
fontStyle='Montserrat'
lineHeight='17.07px'
marginTop="2rem"
>
Continue with Google
Sign in
</Button>
</Stack>
</Box>
</Box>
</Box>
<Box
className='media-side'
width="50%"
height="100%"
>
<Image
src={BostonImage}
Expand All @@ -180,4 +133,4 @@ export default function LoginPage() {
</Box>
</Box>
);
}
}

0 comments on commit 0bdd995

Please sign in to comment.