From 60132b60e95f8478520a3b370b959cb7a02daf09 Mon Sep 17 00:00:00 2001 From: Melissa Liu Date: Sat, 12 Oct 2024 16:45:41 -0700 Subject: [PATCH 1/3] feat: preferences page, styling, and routing between onboarding --- app/onboarding/page.tsx | 14 +++-- app/onboarding/styles.ts | 1 + app/preferences/page.tsx | 53 +++++++++++++++++++ app/preferences/styles.ts | 108 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 171 insertions(+), 5 deletions(-) create mode 100644 app/preferences/page.tsx create mode 100644 app/preferences/styles.ts diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx index 09b564c..23c128f 100644 --- a/app/onboarding/page.tsx +++ b/app/onboarding/page.tsx @@ -1,4 +1,5 @@ /* eslint-disable react/no-unescaped-entities */ +import Link from 'next/link'; import Back from '@/assets/images/back.svg'; import { Background, @@ -52,11 +53,14 @@ export default function Onboarding() { - - - Continue - - + + + + + Continue + + + ); diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts index 85ec29a..aad6386 100644 --- a/app/onboarding/styles.ts +++ b/app/onboarding/styles.ts @@ -111,6 +111,7 @@ export const ContinueButton = styled.button` justify-content: center; align-items: center; gap: 10px; + cursor: pointer; `; export const ContinueText = styled.p` diff --git a/app/preferences/page.tsx b/app/preferences/page.tsx new file mode 100644 index 0000000..9130ad8 --- /dev/null +++ b/app/preferences/page.tsx @@ -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 ( + + + + Back icon + + +
+ + +
+ + Help us tailor shows to you! + Facility Type + + Preferred Location + + Audience + + Preferred Equipment + + Type of Act + + Genre + + + + + Continue + + + + + ); +} diff --git a/app/preferences/styles.ts b/app/preferences/styles.ts new file mode 100644 index 0000000..0dcdcf7 --- /dev/null +++ b/app/preferences/styles.ts @@ -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; + 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%; + 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` + margin-top: 6%; +`; + +export const Input = styled.input` + width: 100%; + height: 22px; + border-color: ${COLORS.gray4}; + border-style: solid; + border-radius: 4px; +`; + +export const Title = styled.h1` + font-size: 28px; + text-align: start; + color: ${COLORS.gray11}; + margin-top: 0; +`; + +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; +`; From 4434befa628313018cfafe6d6f91558f8c6c4dd9 Mon Sep 17 00:00:00 2001 From: Melissa Liu Date: Sat, 19 Oct 2024 18:55:17 -0700 Subject: [PATCH 2/3] style: layout for onboarding folders, styling tweaks --- app/layout.tsx | 1 + app/onboarding/{ => general}/page.tsx | 18 ++-- app/onboarding/general/styles.ts | 25 +++++ app/{ => onboarding}/preferences/page.tsx | 18 ++-- app/onboarding/styles.ts | 38 +++----- app/page.tsx | 4 +- app/preferences/styles.ts | 108 ---------------------- 7 files changed, 57 insertions(+), 155 deletions(-) rename app/onboarding/{ => general}/page.tsx (82%) create mode 100644 app/onboarding/general/styles.ts rename app/{ => onboarding}/preferences/page.tsx (70%) delete mode 100644 app/preferences/styles.ts diff --git a/app/layout.tsx b/app/layout.tsx index 2d4d33c..735d836 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from 'next'; import StyledComponentsRegistry from '@/lib/registry'; import { BespokeSans } from '../styles/fonts'; +import '../styles/global.css'; // site metadata - what shows up on embeds export const metadata: Metadata = { diff --git a/app/onboarding/page.tsx b/app/onboarding/general/page.tsx similarity index 82% rename from app/onboarding/page.tsx rename to app/onboarding/general/page.tsx index 23c128f..b0007ac 100644 --- a/app/onboarding/page.tsx +++ b/app/onboarding/general/page.tsx @@ -1,10 +1,8 @@ /* eslint-disable react/no-unescaped-entities */ -import Link from 'next/link'; import Back from '@/assets/images/back.svg'; import { Background, ButtonContainer, - Checkbox, Container, ContinueButton, ContinueText, @@ -12,18 +10,16 @@ import { InlineContainer, Input, Rectangle, - RedAsterisk, + StyledLink, Title, - UpdateContainer, - UpdateText, -} from './styles'; +} from '../styles'; +import { Checkbox, RedAsterisk, UpdateContainer, UpdateText } from './styles'; export default function Onboarding() { return ( Back icon -
@@ -54,13 +50,15 @@ export default function Onboarding() { - + - Continue + + Continue + - + ); diff --git a/app/onboarding/general/styles.ts b/app/onboarding/general/styles.ts new file mode 100644 index 0000000..8be712c --- /dev/null +++ b/app/onboarding/general/styles.ts @@ -0,0 +1,25 @@ +'use client'; + +import styled from 'styled-components'; + +export const UpdateContainer = styled.main` + display: flex; + flex-direction: row; + align-items: flex-start; + margin-top: 0.5rem; +`; + +export const Checkbox = styled.input` + width: 25px; + height: 25px; + border-style: solid; +`; + +export const UpdateText = styled.text` + text-align: left; + margin-left: 15px; +`; + +export const RedAsterisk = styled.span` + color: #b22222; +`; diff --git a/app/preferences/page.tsx b/app/onboarding/preferences/page.tsx similarity index 70% rename from app/preferences/page.tsx rename to app/onboarding/preferences/page.tsx index 9130ad8..48d28c0 100644 --- a/app/preferences/page.tsx +++ b/app/onboarding/preferences/page.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/no-unescaped-entities */ import Link from 'next/link'; import Back from '@/assets/images/back.svg'; import { @@ -10,16 +9,15 @@ import { Image, InlineContainer, Input, - InputText, Rectangle, Title, -} from './styles'; +} from '../styles'; export default function Onboarding() { return ( - + Back icon @@ -29,17 +27,17 @@ export default function Onboarding() {
Help us tailor shows to you! - Facility Type + Facility Type - Preferred Location + Preferred Location - Audience + Audience - Preferred Equipment + Preferred Equipment - Type of Act + Type of Act - Genre + Genre diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts index aad6386..f581ce5 100644 --- a/app/onboarding/styles.ts +++ b/app/onboarding/styles.ts @@ -19,6 +19,8 @@ export const InlineContainer = styled.main` width: 30%; height: 85%; flex-direction: column; + margin-top: 2%; + margin-bottom: 2%; @media (max-width: 1200px) { width: 45%; @@ -47,8 +49,6 @@ export const Rectangle = styled.main<{ `; export const Container = styled.main` - width: 100%; - height: 53%; display: flex; flex-direction: column; align-items: start; @@ -61,11 +61,13 @@ export const Container = styled.main` export const Input = styled.input` width: 100%; - height: 22px; + height: 25px; border-color: ${COLORS.gray4}; border-style: solid; border-radius: 4px; - margin-bottom: 6%; + margin-bottom: 1.3rem; + margin-top: 0.25rem; + padding-left: 0.4rem; `; export const Title = styled.h1` @@ -73,24 +75,7 @@ export const Title = styled.h1` text-align: start; color: ${COLORS.gray11}; margin-top: 0; - margin-bottom: 5%; -`; - -export const UpdateContainer = styled.main` - display: flex; - flex-direction: row; - align-items: flex-start; -`; - -export const Checkbox = styled.input` - width: 25px; - height: 25px; - border-style: solid; -`; - -export const UpdateText = styled.text` - text-align: left; - margin-left: 15px; + margin-bottom: 2rem; `; export const ButtonContainer = styled.div` @@ -112,14 +97,17 @@ export const ContinueButton = styled.button` align-items: center; gap: 10px; cursor: pointer; + text-decoration: none; `; -export const ContinueText = styled.p` +export const ContinueText = styled.text` color: white; font-size: 14px; padding: 10px; + text-decoration: none; + font-family: 'BespokeSans-Regular' !important; `; -export const RedAsterisk = styled.span` - color: #b22222; +export const StyledLink = styled.a` + text-decoration: none; `; diff --git a/app/page.tsx b/app/page.tsx index 681ad72..bb96b28 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import BPLogo from '@/assets/images/bp-logo.png'; +import BPLogo from '@/public/images/bp-logo.png'; import { Container, Image } from './page.style'; export default function Home() { @@ -8,7 +8,7 @@ export default function Home() { Blueprint Logo

Open up app/page.tsx to get started!

- + diff --git a/app/preferences/styles.ts b/app/preferences/styles.ts deleted file mode 100644 index 0dcdcf7..0000000 --- a/app/preferences/styles.ts +++ /dev/null @@ -1,108 +0,0 @@ -'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; - 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%; - 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` - margin-top: 6%; -`; - -export const Input = styled.input` - width: 100%; - height: 22px; - border-color: ${COLORS.gray4}; - border-style: solid; - border-radius: 4px; -`; - -export const Title = styled.h1` - font-size: 28px; - text-align: start; - color: ${COLORS.gray11}; - margin-top: 0; -`; - -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; -`; From 7ecef5a6c41ae061556278f91466ce04de8b33f1 Mon Sep 17 00:00:00 2001 From: Melissa Liu Date: Tue, 22 Oct 2024 21:18:02 -0700 Subject: [PATCH 3/3] styling: changed font of button --- app/onboarding/general/page.tsx | 4 +--- app/onboarding/styles.ts | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/app/onboarding/general/page.tsx b/app/onboarding/general/page.tsx index b0007ac..4c13626 100644 --- a/app/onboarding/general/page.tsx +++ b/app/onboarding/general/page.tsx @@ -53,9 +53,7 @@ export default function Onboarding() { - - Continue - + Continue diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts index f581ce5..3fcdf8f 100644 --- a/app/onboarding/styles.ts +++ b/app/onboarding/styles.ts @@ -2,6 +2,7 @@ import NextImage from 'next/image'; import styled from 'styled-components'; +import { BespokeSans } from '@/styles/fonts'; import COLORS from '../../styles/colors'; export const Background = styled.main` @@ -17,7 +18,6 @@ export const Background = styled.main` export const InlineContainer = styled.main` width: 30%; - height: 85%; flex-direction: column; margin-top: 2%; margin-bottom: 2%; @@ -101,11 +101,11 @@ export const ContinueButton = styled.button` `; export const ContinueText = styled.text` + ${BespokeSans.style} color: white; font-size: 14px; padding: 10px; text-decoration: none; - font-family: 'BespokeSans-Regular' !important; `; export const StyledLink = styled.a`