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

* feat: preferences page, styling, and routing between onboarding * style: layout for onboarding folders, styling tweaks * styling: changed font of button
calblueprint · Oct 25, 2024 · b70429a · b70429a
1 parent 7d7a6b2
commit b70429a
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 39 deletions.
diff --git 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 → app/onboarding/general/page.tsx b/app/onboarding/page.tsx → app/onboarding/general/page.tsx
@@ -3,26 +3,23 @@ import Back from '@/assets/images/back.svg';
 import {
   Background,
   ButtonContainer,
-  Checkbox,
   Container,
   ContinueButton,
   ContinueText,
   Image,
   InlineContainer,
   Input,
   Rectangle,
-  RedAsterisk,
+  StyledLink,
   Title,
-  UpdateContainer,
-  UpdateText,
-} from './styles';
+} from '../styles';
+import { Checkbox, RedAsterisk, UpdateContainer, UpdateText } from './styles';
 
 export default function Onboarding() {
   return (
     <Background>
       <InlineContainer>
         <Image src={Back} alt="Back icon" />
-
         <div>
           <Rectangle variant="light" widthPercentage="25%" />
           <Rectangle variant="dark" widthPercentage="75%" />
@@ -52,11 +49,14 @@ export default function Onboarding() {
             </UpdateText>
           </UpdateContainer>
         </Container>
-        <ButtonContainer>
-          <ContinueButton>
-            <ContinueText>Continue</ContinueText>
-          </ContinueButton>
-        </ButtonContainer>
+
+        <StyledLink href="../onboarding/preferences">
+          <ButtonContainer>
+            <ContinueButton>
+              <ContinueText>Continue</ContinueText>
+            </ContinueButton>
+          </ButtonContainer>
+        </StyledLink>
       </InlineContainer>
     </Background>
   );

diff --git a/app/onboarding/general/styles.ts 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/onboarding/preferences/page.tsx b/app/onboarding/preferences/page.tsx
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+import Back from '@/assets/images/back.svg';
+import {
+  Background,
+  ButtonContainer,
+  Container,
+  ContinueButton,
+  ContinueText,
+  Image,
+  InlineContainer,
+  Input,
+  Rectangle,
+  Title,
+} from '../styles';
+
+export default function Onboarding() {
+  return (
+    <Background>
+      <InlineContainer>
+        <Link href="/onboarding/general" 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>
+          <text>Facility Type</text>
+          <Input />
+          <text>Preferred Location</text>
+          <Input />
+          <text>Audience</text>
+          <Input />
+          <text>Preferred Equipment</text>
+          <Input />
+          <text>Type of Act</text>
+          <Input />
+          <text>Genre</text>
+          <Input />
+        </Container>
+        <ButtonContainer>
+          <ContinueButton>
+            <ContinueText>Continue</ContinueText>
+          </ContinueButton>
+        </ButtonContainer>
+      </InlineContainer>
+    </Background>
+  );
+}
diff --git 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,8 +18,9 @@ export const Background = styled.main`
 
 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,36 +61,21 @@ 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`
   font-size: 28px;
   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`
@@ -111,14 +96,18 @@ export const ContinueButton = styled.button`
   justify-content: center;
   align-items: center;
   gap: 10px;
+  cursor: pointer;
+  text-decoration: none;
 `;
 
-export const ContinueText = styled.p`
+export const ContinueText = styled.text`
+  ${BespokeSans.style}
   color: white;
   font-size: 14px;
   padding: 10px;
+  text-decoration: none;
 `;
 
-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
@@ -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() {
       <Image src={BPLogo} alt="Blueprint Logo" />
       <p>Open up app/page.tsx to get started!</p>
 
-      <Link href="/onboarding">
+      <Link href="/onboarding/general">
         <button>Onboarding</button>
       </Link>
     </Container>