Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: preferences page, styling, and routing between onboarding #11

Merged
merged 4 commits into from
Oct 25, 2024
Merged

feat: preferences page, styling, and routing between onboarding #11

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
60132b6
feat: preferences page, styling, and routing between onboarding
me-liu Oct 12, 2024
c921826
Merge branch 'main' of github.com:calblueprint/bread-and-roses into m…
me-liu Oct 20, 2024
4434bef
style: layout for onboarding folders, styling tweaks
me-liu Oct 20, 2024
7ecef5a
styling: changed font of button
me-liu Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions app/onboarding/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/* eslint-disable react/no-unescaped-entities */
import Link from 'next/link';
import Back from '@/assets/images/back.svg';
import {
Background,
Expand Down Expand Up @@ -52,11 +53,14 @@ export default function Onboarding() {
</UpdateText>
</UpdateContainer>
</Container>
<ButtonContainer>
<ContinueButton>
me-liu marked this conversation as resolved.
Show resolved Hide resolved
<ContinueText>Continue</ContinueText>
</ContinueButton>
</ButtonContainer>

<Link href="/preferences" passHref>
<ButtonContainer>
<ContinueButton>
<ContinueText>Continue</ContinueText>
</ContinueButton>
</ButtonContainer>
</Link>
</InlineContainer>
</Background>
);
Expand Down
1 change: 1 addition & 0 deletions app/onboarding/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ export const ContinueButton = styled.button`
justify-content: center;
align-items: center;
gap: 10px;
cursor: pointer;
`;

export const ContinueText = styled.p`
Expand Down
53 changes: 53 additions & 0 deletions app/preferences/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/* eslint-disable react/no-unescaped-entities */
import Link from 'next/link';
import Back from '@/assets/images/back.svg';
import {
Background,
ButtonContainer,
Container,
ContinueButton,
ContinueText,
Image,
InlineContainer,
Input,
InputText,
Rectangle,
Title,
} from './styles';

export default function Onboarding() {
return (
<Background>
<InlineContainer>
<Link href="/onboarding" passHref>
<Image src={Back} alt="Back icon" />
</Link>

<div>
<Rectangle variant="light" widthPercentage="50%" />
<Rectangle variant="dark" widthPercentage="50%" />
</div>
<Container>
<Title>Help us tailor shows to you!</Title>
<InputText> Facility Type</InputText>
me-liu marked this conversation as resolved.
Show resolved Hide resolved
<Input />
<InputText> Preferred Location</InputText>
<Input />
<InputText> Audience</InputText>
<Input />
<InputText> Preferred Equipment</InputText>
<Input />
<InputText> Type of Act</InputText>
<Input />
<InputText> Genre</InputText>
<Input />
</Container>
<ButtonContainer>
<ContinueButton>
<ContinueText>Continue</ContinueText>
</ContinueButton>
</ButtonContainer>
</InlineContainer>
</Background>
);
}
108 changes: 108 additions & 0 deletions app/preferences/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
'use client';

import NextImage from 'next/image';
import styled from 'styled-components';
import COLORS from '../../styles/colors';

export const Background = styled.main`
flex-direction: column;
min-width: 100%;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: start;
me-liu marked this conversation as resolved.
Show resolved Hide resolved
background-color: ${COLORS.gray2};
overflow: hidden;
`;

export const InlineContainer = styled.main`
width: 30%;
height: 85%;
flex-direction: column;
margin-top: 2%;
margin-bottom: 2%;

@media (max-width: 1200px) {
width: 45%;
}
@media (max-width: 768px) {
width: 85%;
}
`;

export const Image = styled(NextImage)`
width: 20px;
height: 20px;
margin-bottom: -2px;
`;

export const Rectangle = styled.main<{
variant: 'light' | 'dark';
widthPercentage: string;
}>`
width: ${({ widthPercentage }) => widthPercentage};
height: 7px;
display: inline-block;
background: ${({ variant }) =>
variant === 'light' ? COLORS.gray8 : COLORS.gray10};
border-radius: 2px;
`;

export const Container = styled.main`
width: 100%;
me-liu marked this conversation as resolved.
Show resolved Hide resolved
height: 53%;
display: flex;
flex-direction: column;
align-items: start;
margin: 25px 0px;
justify-content: space-between;
background-color: white;
border-radius: 8px;
padding: 13%;
`;

export const InputText = styled.text`
me-liu marked this conversation as resolved.
Show resolved Hide resolved
margin-top: 6%;
`;

export const Input = styled.input`
width: 100%;
height: 22px;
me-liu marked this conversation as resolved.
Show resolved Hide resolved
border-color: ${COLORS.gray4};
border-style: solid;
border-radius: 4px;
me-liu marked this conversation as resolved.
Show resolved Hide resolved
`;

export const Title = styled.h1`
font-size: 28px;
text-align: start;
color: ${COLORS.gray11};
margin-top: 0;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

delete margin-top and add margin-bottom: 2.25rem; to add more space between title and the first input field

Copy link
Contributor Author

@me-liu me-liu Oct 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason I did margin-top: 0 because the title text has some default margins on the top and bottom. I think if do this I end up with a lot of spacing btween the title and the rest of the stuff:
Screenshot 2024-10-19 at 5 35 28 PM

`;

export const ButtonContainer = styled.div`
display: flex;
justify-content: flex-end;
height: 80%;
`;

export const ContinueButton = styled.button`
width: 5.5rem;
height: 2.25rem;
background-color: ${COLORS.gray11};
border-color: ${COLORS.gray11};
border-style: solid;
border-radius: 8px;
display: inline-flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 10px;
cursor: pointer;
`;

export const ContinueText = styled.p`
color: white;
font-size: 14px;
padding: 10px;
`;