feat: review and yay screen

calblueprint · Oct 26, 2024 · fc20985 · fc20985
1 parent c420286
commit fc20985
Show file tree

Hide file tree

Showing 6 changed files with 239 additions and 5 deletions.
diff --git a/app/onboarding/preferences/page.tsx b/app/onboarding/preferences/page.tsx
@@ -10,6 +10,7 @@ import {
   InlineContainer,
   Input,
   Rectangle,
+  StyledLink,
   Title,
 } from '../styles';
 
@@ -40,11 +41,13 @@ export default function Onboarding() {
           <text>Genre</text>
           <Input />
         </Container>
-        <ButtonContainer>
-          <ContinueButton>
-            <ContinueText>Continue</ContinueText>
-          </ContinueButton>
-        </ButtonContainer>
+        <StyledLink href="/onboarding/review">
+          <ButtonContainer>
+            <ContinueButton>
+              <ContinueText>Continue</ContinueText>
+            </ContinueButton>
+          </ButtonContainer>
+        </StyledLink>
       </InlineContainer>
     </Background>
   );

diff --git a/app/onboarding/review/page.tsx b/app/onboarding/review/page.tsx
@@ -0,0 +1,59 @@
+import Link from 'next/link';
+import Back from '@/public/images/back.svg';
+import { Background, InlineContainer, Rectangle, StyledLink } from '../styles';
+import {
+  ConfirmButton,
+  ConfirmText,
+  Image,
+  Line,
+  ReviewContainer,
+  SmallText,
+  Title,
+} from './styles';
+
+export default function Review() {
+  return (
+    <Background>
+      <InlineContainer>
+        <div>
+          <Rectangle variant="dark" widthPercentage="100%" />
+        </div>
+
+        <Link href="/onboarding/preferences">
+          <Image src={Back} alt="Back icon" />
+        </Link>
+
+        <ReviewContainer>
+          <Title>Did we get everything?</Title>
+          <text>First Name</text>
+          <SmallText>Lorem Ipsum</SmallText>
+          <text>Last Name</text>
+          <SmallText>Lorem Ipsum</SmallText>
+          <text>Phone Number</text>
+          <SmallText>Lorem Ipsum</SmallText>
+
+          <Line />
+
+          <text>Facility Type</text>
+          <SmallText>Lorem Ipsum</SmallText>
+          <text>Preferred Location</text>
+          <SmallText>Lorem Ipsum</SmallText>
+          <text>Audience</text>
+          <SmallText>Lorem Ipsum</SmallText>
+          <text>Preferred Equipment</text>
+          <SmallText>Lorem Ipsum</SmallText>
+          <text>Type of Act</text>
+          <SmallText>Lorem Ipsum</SmallText>
+          <text>Genre</text>
+          <SmallText>Lorem Ipsum</SmallText>
+
+          <StyledLink href="/onboarding/yay">
+            <ConfirmButton>
+              <ConfirmText>Confirm</ConfirmText>
+            </ConfirmButton>
+          </StyledLink>
+        </ReviewContainer>
+      </InlineContainer>
+    </Background>
+  );
+}
diff --git a/app/onboarding/review/styles.ts b/app/onboarding/review/styles.ts
@@ -0,0 +1,73 @@
+'use client';
+
+import NextImage from 'next/image';
+import styled from 'styled-components';
+import { Sans } from '@/styles/fonts';
+import COLORS from '../../../styles/colors';
+
+export const Image = styled(NextImage)`
+  width: 20px;
+  height: 20px;
+  margin-top: 1rem;
+`;
+
+export const Title = styled.h1`
+  font-size: 24px;
+  text-align: start;
+  color: ${COLORS.gray11};
+  margin-top: 0;
+  font-weight: 500;
+  margin-bottom: 28px;
+`;
+
+export const ReviewContainer = styled.main`
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  display: flex;
+  padding: 32px 32px 32px 32px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background: #fefdfc;
+  border-radius: 16px;
+  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
+`;
+
+export const SmallText = styled.text`
+  color: #515151;
+  font-size: 14px;
+  line-height: normal;
+  margin-bottom: 28px;
+`;
+
+export const Line = styled.main`
+  width: 362px;
+  height: 2px;
+  color: black;
+  background: linear-gradient(
+    90deg,
+    rgba(184, 184, 184, 0) 0%,
+    #b8b8b8 50%,
+    rgba(184, 184, 184, 0) 100%
+  );
+  margin-bottom: 28px;
+`;
+
+export const ConfirmButton = styled.button`
+  display: flex;
+  width: 100%;
+  padding: 12px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background: ${COLORS.gray12};
+  border-style: solid;
+  border-color: ${COLORS.gray12};
+  cursor: pointer;
+`;
+
+export const ConfirmText = styled.text`
+  ${Sans.style}
+  color: white;
+  font-size: 14px;
+`;
diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts
@@ -111,4 +111,5 @@ export const ContinueText = styled.text`
 
 export const StyledLink = styled(Link)`
   text-decoration: none;
+  width: 100%;
 `;
diff --git a/app/onboarding/yay/page.tsx b/app/onboarding/yay/page.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable react/no-unescaped-entities */
+import { Background } from '../styles';
+import {
+  Circle,
+  ContinueButton,
+  ContinueText,
+  InlineContainer,
+  ReviewContainer,
+  Title,
+} from './styles';
+
+export default function Onboarding() {
+  return (
+    <Background>
+      <Circle />
+      <InlineContainer>
+        <ReviewContainer>
+          <Title>You're all set!</Title>
+          <text>
+            Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore.
+          </text>
+          <ContinueButton>
+            <ContinueText>Continue</ContinueText>
+          </ContinueButton>
+        </ReviewContainer>
+      </InlineContainer>
+    </Background>
+  );
+}
diff --git a/app/onboarding/yay/styles.ts b/app/onboarding/yay/styles.ts
@@ -0,0 +1,68 @@
+'use client';
+
+import styled from 'styled-components';
+import { Sans } from '@/styles/fonts';
+import COLORS from '../../../styles/colors';
+
+export const Title = styled.h1`
+  font-size: 24px;
+  text-align: start;
+  color: ${COLORS.gray11};
+  font-weight: 500;
+`;
+
+export const InlineContainer = styled.main`
+  width: 25%;
+  flex-direction: column;
+  margin-top: 2%;
+  margin-bottom: 2%;
+  @media (max-width: 1200px) {
+    width: 30%;
+  }
+  @media (max-width: 768px) {
+    width: 55%;
+  }
+`;
+
+export const Circle = styled.main`
+  width: 85px;
+  height: 85px;
+  flex-shrink: 0;
+  background-color: #f7c1bd;
+  border-radius: 100%;
+  position: relative;
+  top: 60px;
+  z-index: 1;
+`;
+
+export const ReviewContainer = styled.main`
+  position: relative; /* This makes the Circle position relative to this container */
+  display: flex;
+  padding: 60px 32px 32px 32px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  gap: 20px;
+  border-radius: 16px;
+  background: var(--bread-1, #fefdfc);
+  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
+`;
+
+export const ContinueButton = styled.button`
+  display: flex;
+  padding: 12px 16px;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 99999px;
+  background: var(--gray-12, #202020);
+  border-style: solid;
+  border-color: ${COLORS.gray12};
+  cursor: pointer;
+`;
+
+export const ContinueText = styled.text`
+  ${Sans.style}
+  color: white;
+  font-size: 14px;
+`;