From e7eedec7d496a6ce1fdd98cf270e40f0739f048c Mon Sep 17 00:00:00 2001 From: aidenm1 Date: Wed, 16 Oct 2024 18:48:15 -0700 Subject: [PATCH 01/10] Created EventListingCard & styled webpage --- api/supabase/queries/events.ts | 33 +++++++++++- app/events/page.style.ts | 95 +++++++++++++++++++++++++++++++++ app/events/page.tsx | 42 ++++----------- assets/images/bp-logo.png | Bin 0 -> 25532 bytes components/MyEventCard.tsx | 58 ++++++++++++++++++++ 5 files changed, 193 insertions(+), 35 deletions(-) create mode 100644 app/events/page.style.ts create mode 100644 assets/images/bp-logo.png create mode 100644 components/MyEventCard.tsx diff --git a/api/supabase/queries/events.ts b/api/supabase/queries/events.ts index cd98466..6cc5aa4 100644 --- a/api/supabase/queries/events.ts +++ b/api/supabase/queries/events.ts @@ -1,12 +1,41 @@ +import { UUID } from 'crypto'; import supabase from '../createClient'; export async function fetchAllEvents() { const { data, error } = await supabase.from('events').select('*'); if (error) { - console.error('An error occurred trying to read events:', error); - return null; + throw error; } return data; } + +export async function fetchAcceptedEventsByVolunteer(volunteer_id: UUID) { + const { data, error } = await supabase + .from('event_signups') + .select('*') + .eq('volunteer_id', volunteer_id) + .eq('is_accepted', true); + + if (error) { + throw error; + } + if (!data || data.length === 0) { + //No accepted events for volunteer found + return []; + } + + const eventIDs = data.map(data => data.event_id); + + const { data: events, error: eventsError } = await supabase + .from('events') + .select('*') + .in('event_id', eventIDs); + + if (eventsError) { + throw eventsError; + } + + return events; +} diff --git a/app/events/page.style.ts b/app/events/page.style.ts new file mode 100644 index 0000000..9be1cfb --- /dev/null +++ b/app/events/page.style.ts @@ -0,0 +1,95 @@ +'use client'; + +import styled from 'styled-components'; +import COLORS from '../../styles/colors'; +import { BespokeSans } from '../../styles/fonts'; + +export const Page = styled.main` + background: ${COLORS.gray1}; +`; + +export const Title = styled.main` + color: #000; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 32px; + font-style: normal; + font-weight: 500; + line-height: normal; + text-align: left; + height: 50px; +`; + +export const EventContainer = styled.main` + margin: auto; + width: 100%; + display: flex; + padding: 16px; + justify-content: flex-start; + align-items: flex-start; +`; + +export const DateContainer = styled.main` + width: 10%; +`; + +export const EventCardContainer = styled.main` + width: 65%; + padding: 16px; + background: ${COLORS.bread1}; + border-radius: 8px; + display: flex; + justify-content: space-between; + align-items: center; +`; + +export const MonthText = styled.main` + color: #000; + text-align: center; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +export const DateText = styled.main` + color: #000; + text-align: center; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +export const TimeText = styled.main` + color: #000; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +export const EventDescriptionText = styled.main` + color: #000; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +export const LocationText = styled.main` + color: ${COLORS.gray10}; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +export const EventLogoWrapper = styled.main` + width: 20%; + height: 90%; +`; diff --git a/app/events/page.tsx b/app/events/page.tsx index 424a624..9bf17b4 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -2,9 +2,11 @@ import React, { useEffect, useState } from 'react'; import { fetchAllEvents } from '../../api/supabase/queries/events'; +import MyEventCard from '../../components/MyEventCard'; import { Event } from '../../types/schema'; +import * as styles from './page.style'; -export default function Page() { +export default function EventPage() { const [data, setData] = useState([]); useEffect(() => { @@ -14,37 +16,11 @@ export default function Page() { }, []); return ( -
- - - - - - - - - - - - - - - - {data.map(d => ( - - - - - - - - - - - - ))} - -
event_idfacility_idstart_date_timeend_date_timetype_of_actgenreneeds_hostperformer_typeevent_status
{d.event_id}{d.facility_id}{d.start_date_time}{d.end_date_time}{d.type_of_act}{d.genre}{d.needs_host}{d.performer_type}{d.event_status}
-
+ + Upcoming Events + {data.map(d => ( + + ))} + ); } diff --git a/assets/images/bp-logo.png b/assets/images/bp-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..d816f9ad288096ff92f860dc7beeacc2ebb8c003 GIT binary patch literal 25532 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 A`2YX_ literal 0 HcmV?d00001 diff --git a/components/MyEventCard.tsx b/components/MyEventCard.tsx new file mode 100644 index 0000000..fa1b8e7 --- /dev/null +++ b/components/MyEventCard.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import Image from 'next/Image'; +import BPLogo from '@/assets/images/bp-logo.png'; +import * as styles from '../app/events/page.style'; +import { Event } from '../types/schema'; + +export default function MyEventCard(eventData: Event) { + const eventStart = new Date(eventData.start_date_time); + const eventEnd = new Date(eventData.end_date_time); + + const startTime = eventStart.toLocaleTimeString([], { + hour: 'numeric', + minute: '2-digit', + hour12: true, + }); + const endTime = eventEnd.toLocaleTimeString([], { + hour: 'numeric', + minute: '2-digit', + hour12: true, + }); + + const monthNames = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', + ]; + const monthText = monthNames[eventStart.getMonth()]; + + return ( + + + {monthText} + {eventStart.getDate()} + + +
+ + {startTime} - {endTime} + + placeholder + placeholder +
+ + Blueprint Logo + + + + ); +} From 0157dcec72119c0bc0a6851a9ef1c7723de2788a Mon Sep 17 00:00:00 2001 From: aidenm1 Date: Wed, 16 Oct 2024 19:11:36 -0700 Subject: [PATCH 02/10] fixed ESLint error --- app/events/page.style.ts | 12 +++++++----- components/MyEventCard.tsx | 5 +---- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/app/events/page.style.ts b/app/events/page.style.ts index 9be1cfb..8d83e6d 100644 --- a/app/events/page.style.ts +++ b/app/events/page.style.ts @@ -1,9 +1,16 @@ 'use client'; +import NextImage from 'next/image'; import styled from 'styled-components'; import COLORS from '../../styles/colors'; import { BespokeSans } from '../../styles/fonts'; +export const Image = styled(NextImage)` + layout: responsive; + width: 20%; + height: 90%; +`; + export const Page = styled.main` background: ${COLORS.gray1}; `; @@ -88,8 +95,3 @@ export const LocationText = styled.main` font-weight: 400; line-height: normal; `; - -export const EventLogoWrapper = styled.main` - width: 20%; - height: 90%; -`; diff --git a/components/MyEventCard.tsx b/components/MyEventCard.tsx index fa1b8e7..9e7a89f 100644 --- a/components/MyEventCard.tsx +++ b/components/MyEventCard.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import Image from 'next/Image'; import BPLogo from '@/assets/images/bp-logo.png'; import * as styles from '../app/events/page.style'; import { Event } from '../types/schema'; @@ -49,9 +48,7 @@ export default function MyEventCard(eventData: Event) { placeholder placeholder - - Blueprint Logo - + ); From bfb523546c53a4200cd34461a88d1c8840d41c1e Mon Sep 17 00:00:00 2001 From: aidenm1 Date: Sun, 20 Oct 2024 21:32:35 -0700 Subject: [PATCH 03/10] created separate styling file for event card --- app/events/page.style.ts | 70 --------------- app/events/page.tsx | 2 +- .../{ => eventcardcomponent}/MyEventCard.tsx | 4 +- .../eventcardcomponent/eventcard.style.ts | 89 +++++++++++++++++++ 4 files changed, 92 insertions(+), 73 deletions(-) rename components/{ => eventcardcomponent}/MyEventCard.tsx (93%) create mode 100644 components/eventcardcomponent/eventcard.style.ts diff --git a/app/events/page.style.ts b/app/events/page.style.ts index 8d83e6d..1d800fd 100644 --- a/app/events/page.style.ts +++ b/app/events/page.style.ts @@ -25,73 +25,3 @@ export const Title = styled.main` text-align: left; height: 50px; `; - -export const EventContainer = styled.main` - margin: auto; - width: 100%; - display: flex; - padding: 16px; - justify-content: flex-start; - align-items: flex-start; -`; - -export const DateContainer = styled.main` - width: 10%; -`; - -export const EventCardContainer = styled.main` - width: 65%; - padding: 16px; - background: ${COLORS.bread1}; - border-radius: 8px; - display: flex; - justify-content: space-between; - align-items: center; -`; - -export const MonthText = styled.main` - color: #000; - text-align: center; - font-family: ${BespokeSans.style.fontFamily}; - font-size: 12px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; - -export const DateText = styled.main` - color: #000; - text-align: center; - font-family: ${BespokeSans.style.fontFamily}; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; - -export const TimeText = styled.main` - color: #000; - font-family: ${BespokeSans.style.fontFamily}; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: normal; -`; - -export const EventDescriptionText = styled.main` - color: #000; - font-family: ${BespokeSans.style.fontFamily}; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; - -export const LocationText = styled.main` - color: ${COLORS.gray10}; - font-family: ${BespokeSans.style.fontFamily}; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: normal; -`; diff --git a/app/events/page.tsx b/app/events/page.tsx index 9bf17b4..7441f5c 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import { fetchAllEvents } from '../../api/supabase/queries/events'; -import MyEventCard from '../../components/MyEventCard'; +import MyEventCard from '../../components/eventcardcomponent/MyEventCard'; import { Event } from '../../types/schema'; import * as styles from './page.style'; diff --git a/components/MyEventCard.tsx b/components/eventcardcomponent/MyEventCard.tsx similarity index 93% rename from components/MyEventCard.tsx rename to components/eventcardcomponent/MyEventCard.tsx index 9e7a89f..4554a02 100644 --- a/components/MyEventCard.tsx +++ b/components/eventcardcomponent/MyEventCard.tsx @@ -1,7 +1,7 @@ import React from 'react'; import BPLogo from '@/assets/images/bp-logo.png'; -import * as styles from '../app/events/page.style'; -import { Event } from '../types/schema'; +import { Event } from '../../types/schema'; +import * as styles from './eventcard.style'; export default function MyEventCard(eventData: Event) { const eventStart = new Date(eventData.start_date_time); diff --git a/components/eventcardcomponent/eventcard.style.ts b/components/eventcardcomponent/eventcard.style.ts new file mode 100644 index 0000000..bab7676 --- /dev/null +++ b/components/eventcardcomponent/eventcard.style.ts @@ -0,0 +1,89 @@ +'use client'; + +import NextImage from 'next/image'; +import styled from 'styled-components'; +import COLORS from '../../styles/colors'; +import { BespokeSans } from '../../styles/fonts'; + +export const Image = styled(NextImage)` + layout: responsive; + width: 20%; + height: 90%; +`; + +export const EventContainer = styled.main` + margin: auto; + width: 100%; + display: flex; + padding: 16px; + justify-content: flex-start; + align-items: flex-start; +`; + +export const DateContainer = styled.main` + width: 10%; +`; + +export const EventCardContainer = styled.main` + width: 65%; + padding: 16px; + background: ${COLORS.bread1}; + border-radius: 8px; + display: flex; + justify-content: space-between; + align-items: center; +`; + +export const MonthText = styled.main` + color: #000; + text-align: center; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +export const DateText = styled.main` + color: #000; + text-align: center; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +export const TimeText = styled.main` + color: #000; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +export const EventDescriptionText = styled.main` + color: #000; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +export const LocationText = styled.main` + color: ${COLORS.gray10}; + font-family: ${BespokeSans.style.fontFamily}; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +export const EventModalBox = styled.main` + display: flex; + width: 80%; + padding: 24px; + gap: 24px; +`; From bb5fee7e219e9d018eb711f69af6bb6cb4fcffa8 Mon Sep 17 00:00:00 2001 From: aidenm1 Date: Sat, 26 Oct 2024 15:55:09 -0700 Subject: [PATCH 04/10] created event display page --- app/events/page.style.ts | 17 +++++++- app/events/page.tsx | 45 ++++++++++++++------ components/MyEventCard/MyEventCard.tsx | 54 +++++++++++++++--------- components/MyEventCard/style.ts | 57 +++++--------------------- styles/text.ts | 10 ++++- 5 files changed, 100 insertions(+), 83 deletions(-) diff --git a/app/events/page.style.ts b/app/events/page.style.ts index 666cca6..64312fd 100644 --- a/app/events/page.style.ts +++ b/app/events/page.style.ts @@ -12,15 +12,30 @@ export const Image = styled(NextImage)` `; export const Page = styled.main` - background: ${COLORS.gray1}; + background-color: ${COLORS.gray1}; + flex-direction: column; + min-width: 100%; + min-height: 100svh; + overflow: hidden; +`; + +export const AllEventsHolder = styled.main` + padding: 24px; + display: flex; + flex-direction: column; + gap: 24px; `; export const Title = styled(H3)` font-style: normal; line-height: normal; + height: 50px; `; export const MonthYear = styled(H6)` font-style: normal; line-height: normal; + gap: 24px; + display: flex; + margin-top: 24px; `; diff --git a/app/events/page.tsx b/app/events/page.tsx index ab3cc48..916110a 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -37,21 +37,40 @@ export default function EventPage() { const eventsByMonth = groupEventsByMonth(data); + // Sort the events by month + const sortedEntries = Object.entries(eventsByMonth).sort((a, b) => { + const dateA = new Date(a[0]); // Month Year string from a + const dateB = new Date(b[0]); // Month Year string from b + return dateA.getTime() - dateB.getTime(); // Compare timestamps + }); + + // Sort events within each month by their start date + sortedEntries.forEach(([, events]) => { + events.sort((a, b) => { + return ( + new Date(a.start_date_time).getTime() - + new Date(b.start_date_time).getTime() + ); + }); + }); + return ( - - Upcoming Events - - {Object.entries(eventsByMonth).map(([month, events]) => ( -
- - {month} - - {events.map(event => ( - - ))} -
- ))} + + + Upcoming Events + + {sortedEntries.map(([month, events]) => ( +
+ + {month} + + {events.map(event => ( + + ))} +
+ ))} + ); } diff --git a/components/MyEventCard/MyEventCard.tsx b/components/MyEventCard/MyEventCard.tsx index 78ae41d..cbda095 100644 --- a/components/MyEventCard/MyEventCard.tsx +++ b/components/MyEventCard/MyEventCard.tsx @@ -1,22 +1,28 @@ import React from 'react'; import BPLogo from '@/assets/images/bp-logo.png'; -import { Event } from '../../types/schema'; +import COLORS from '@/styles/colors'; +import { Event } from '@/types/schema'; import * as styles from './style'; export default function MyEventCard(eventData: Event) { const eventStart = new Date(eventData.start_date_time); const eventEnd = new Date(eventData.end_date_time); - const startTime = eventStart.toLocaleTimeString([], { - hour: 'numeric', - minute: '2-digit', - hour12: true, - }); - const endTime = eventEnd.toLocaleTimeString([], { - hour: 'numeric', - minute: '2-digit', - hour12: true, - }); + const formatTime = (date: Date) => { + const hour = date.toLocaleTimeString([], { hour: 'numeric', hour12: true }); + const minutes = date.getMinutes(); + + return minutes === 0 + ? hour + : date.toLocaleTimeString([], { + hour: 'numeric', + minute: '2-digit', + hour12: true, + }); + }; + + const startTime = formatTime(eventStart); + const endTime = formatTime(eventEnd); const monthNames = [ 'Jan', @@ -36,19 +42,27 @@ export default function MyEventCard(eventData: Event) { return ( - - {monthText} - {eventStart.getDate()} - +
- - {startTime} - {endTime} + + {monthText} {eventStart.getDate()}, {startTime} - {endTime} - placeholder - placeholder + + placeholder + + + placeholder +
- ); diff --git a/components/MyEventCard/style.ts b/components/MyEventCard/style.ts index bab7676..c563584 100644 --- a/components/MyEventCard/style.ts +++ b/components/MyEventCard/style.ts @@ -2,10 +2,10 @@ import NextImage from 'next/image'; import styled from 'styled-components'; +import { P, SMALLER } from '@/styles/text'; import COLORS from '../../styles/colors'; -import { BespokeSans } from '../../styles/fonts'; -export const Image = styled(NextImage)` +export const BPImage = styled(NextImage)` layout: responsive; width: 20%; height: 90%; @@ -14,70 +14,33 @@ export const Image = styled(NextImage)` export const EventContainer = styled.main` margin: auto; width: 100%; - display: flex; - padding: 16px; - justify-content: flex-start; - align-items: flex-start; -`; - -export const DateContainer = styled.main` - width: 10%; + padding-top: 24px; `; - export const EventCardContainer = styled.main` - width: 65%; + width: 100%; padding: 16px; background: ${COLORS.bread1}; border-radius: 8px; display: flex; - justify-content: space-between; + justify-content: flex-start; align-items: center; + box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15); + gap: 1.5rem; `; -export const MonthText = styled.main` - color: #000; - text-align: center; - font-family: ${BespokeSans.style.fontFamily}; - font-size: 12px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; - -export const DateText = styled.main` - color: #000; - text-align: center; - font-family: ${BespokeSans.style.fontFamily}; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; - -export const TimeText = styled.main` - color: #000; - font-family: ${BespokeSans.style.fontFamily}; - font-size: 12px; +export const TimeText = styled(SMALLER)` font-style: normal; - font-weight: 400; line-height: normal; `; -export const EventDescriptionText = styled.main` - color: #000; - font-family: ${BespokeSans.style.fontFamily}; - font-size: 16px; +export const EventDescriptionText = styled(P)` font-style: normal; - font-weight: 500; line-height: normal; `; -export const LocationText = styled.main` +export const LocationText = styled(SMALLER)` color: ${COLORS.gray10}; - font-family: ${BespokeSans.style.fontFamily}; - font-size: 12px; font-style: normal; - font-weight: 400; line-height: normal; `; diff --git a/styles/text.ts b/styles/text.ts index 5be3e7d..6d1ae6a 100644 --- a/styles/text.ts +++ b/styles/text.ts @@ -51,11 +51,17 @@ export const H6 = styled.h6` export const P = styled.p` ${TextStyles} font-size: 1rem; - font-weight: 400; + // font-weight: 400; `; export const SMALL = styled.p` ${TextStyles} font-size: .875rem; - font-weight: 400; + // font-weight: 400; +`; + +export const SMALLER = styled.p` + ${TextStyles} + font-size: .75rem; + // font-weight: 400; `; From 08d94b6fe5cda774cc3714ad456d92f9143fe7f8 Mon Sep 17 00:00:00 2001 From: RohinJ444 <41976755+RohinJ444@users.noreply.github.com> Date: Sat, 26 Oct 2024 11:00:12 -0700 Subject: [PATCH 05/10] [feat + style] Sign Up + Sign In page: basic implementation w/ Supabase and styling (#16) * [feat + style] user authentication + styling * eslint style fixes * typo in text for signup page * forgot to capitalize the 'in' in 'Sign In' * updated imports + links + added exclamation points * updated imports + links + added exclamation points --------- Co-authored-by: Rohin Juneja --- app/(auth)/auth-styles.ts | 129 +++++++++++++++++++++++++++++++++++++ app/(auth)/signin/page.tsx | 89 +++++++++++++++++++++++++ app/(auth)/signup/page.tsx | 106 ++++++++++++++++++++++++++++++ app/page.tsx | 1 - 4 files changed, 324 insertions(+), 1 deletion(-) create mode 100644 app/(auth)/auth-styles.ts create mode 100644 app/(auth)/signin/page.tsx create mode 100644 app/(auth)/signup/page.tsx diff --git a/app/(auth)/auth-styles.ts b/app/(auth)/auth-styles.ts new file mode 100644 index 0000000..4b497aa --- /dev/null +++ b/app/(auth)/auth-styles.ts @@ -0,0 +1,129 @@ +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; +import { BespokeSans } from '@/styles/fonts'; +import { H3, P } from '@/styles/text'; + +export const Container = styled.div` + font-family: ${BespokeSans.style.fontFamily}, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + background-color: ${COLORS.gray2}; + padding: 1rem; +`; + +export const Header = styled(H3)` + margin-bottom: 1rem; + text-align: center; +`; + +export const Card = styled.div` + background-color: ${COLORS.bread1}; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + max-width: 400px; + width: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; +`; + +export const Form = styled.div` + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + gap: 0.5rem; +`; + +export const Label = styled(P)` + font-family: ${BespokeSans.style.fontFamily}; + font-weight: 500; + margin-bottom: -0.2rem; +`; + +export const Input = styled.input` + font-family: ${BespokeSans.style.fontFamily}; + padding: 0.7rem; + border: 1px solid ${COLORS.gray4}; + border-radius: 8px; + width: 100%; + margin-bottom: 0.6rem; + box-sizing: border-box; +`; + +export const Button = styled.button` + font-family: ${BespokeSans.style.fontFamily}; + background-color: ${COLORS.gray12}; + color: white; + font-size: 1rem; + padding: 0.75rem; + border: none; + border-radius: 8px; + cursor: pointer; + margin-top: 0.8rem; + width: 100%; +`; + +export const GoogleButton = styled(Button)` + background-color: ${COLORS.bread1}; + color: ${COLORS.gray12}; + font-size: 1rem; + // TODO: Update to COLORS.black if that gets added + border: 1px solid #000000; + margin-top: 0rem; +`; + +export const Separator = styled.div` + display: flex; + align-items: center; + text-align: center; + margin: 0.2rem; + + &::before, + &::after { + content: ''; + flex: 1; + border-bottom: 1px solid ${COLORS.gray5}; + } + + span { + margin: 0 0.5rem; + color: ${COLORS.gray7}; + } +`; + +export const Link = styled.a` + font-family: ${BespokeSans.style.fontFamily}; + // TODO: CHANGE COLOR TO BLUE ONCE COLORS.TS IS UPDATED + color: #3978ff; + text-decoration: none; + + &:hover { + text-decoration: underline; + } +`; + +export const SmallBuffer = styled.div` + height: 0.5rem; +`; + +// TODO: Temporarily added to verify that supabase login functionality actually works +export const LoginMessage = styled(P)<{ isError: boolean }>` + font-family: ${BespokeSans.style.fontFamily}; + color: ${({ isError }) => (isError ? 'red' : 'green')}; + text-align: center; + margin-top: 0.5rem; +`; + +export const Footer = styled.div` + font-family: ${BespokeSans.style.fontFamily}; + text-align: center; + margin-top: 1rem; + width: 100%; + padding: 0.5rem; +`; diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx new file mode 100644 index 0000000..e4e47ea --- /dev/null +++ b/app/(auth)/signin/page.tsx @@ -0,0 +1,89 @@ +'use client'; + +import { useState } from 'react'; +import supabase from '@/api/supabase/createClient'; +import { H5 } from '@/styles/text'; +import { + Button, + Card, + Container, + Footer, + Form, + GoogleButton, + Header, + Input, + Label, + Link, + LoginMessage, + Separator, + SmallBuffer, +} from '../auth-styles'; + +export default function SignIn() { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [message, setMessage] = useState(''); + const [isError, setIsError] = useState(false); + + // handle sign in w/ supabase, borrowed from Immigration Justice PR + const handleSignIn = async () => { + setMessage(''); + setIsError(false); + const { error } = await supabase.auth.signInWithPassword({ + email, + password, + }); + + // Ik this wasn't part of the sprint but I added so I could verify that supabase functionality is working + if (error) { + setMessage(`Login failed: ${error.message}`); + setIsError(true); + } else { + setMessage('Login successful!'); + setIsError(false); + } + }; + + // Front-end interface + return ( + +
Welcome Back!
+ + +
+
Login
+ + + setEmail(e.target.value)} + value={email} + /> + + setPassword(e.target.value)} + value={password} + /> + + + or + + Continue with Google + {message && {message}} + +
+ +
+ Don’t have an account? Sign up! +
+ + ); +} diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx new file mode 100644 index 0000000..3a9cfaa --- /dev/null +++ b/app/(auth)/signup/page.tsx @@ -0,0 +1,106 @@ +'use client'; + +import { useState } from 'react'; +import supabase from '@/api/supabase/createClient'; +import { H5 } from '@/styles/text'; +import { + Button, + Card, + Container, + Footer, + Form, + GoogleButton, + Header, + Input, + Label, + Link, + LoginMessage, + Separator, + SmallBuffer, +} from '../auth-styles'; + +export default function SignUp() { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [confirmedPassword, setConfirmedPassword] = useState(''); + const [message, setMessage] = useState(''); + const [isError, setIsError] = useState(false); + + const handleSignUp = async () => { + setMessage(''); + setIsError(false); + + if (password !== confirmedPassword) { + setMessage('Sign-up failed: Passwords do not match'); + setIsError(true); + return; + } + + const { error } = await supabase.auth.signUp({ + email, + password, + }); + + // Ik this wasn't part of the sprint but I added so I could verify that supabase functionality is working + if (error) { + setMessage(`Sign-up failed: ${error.message}`); + setIsError(true); + } else { + setMessage('Sign-up successful!'); + setIsError(false); + } + }; + + // Front-end interface + return ( + +
Welcome!
+ + +
+
Sign Up
+ + + setEmail(e.target.value)} + value={email} + /> + + setPassword(e.target.value)} + value={password} + /> + + setConfirmedPassword(e.target.value)} + value={confirmedPassword} + /> + + + or + + Continue with Google + {message && {message}} + +
+ +
+ Already have an account? Sign in! +
+ + ); +} diff --git a/app/page.tsx b/app/page.tsx index bb96b28..b4ae2cf 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,7 +7,6 @@ export default function Home() { Blueprint Logo

Open up app/page.tsx to get started!

- From 56216a00fe14174caed244fce07ec50ba2515c3c Mon Sep 17 00:00:00 2001 From: Justin Xue <67207128+jxmoose@users.noreply.github.com> Date: Sat, 26 Oct 2024 12:00:36 -0700 Subject: [PATCH 06/10] fix: change font name (#17) --- app/(auth)/auth-styles.ts | 16 ++++++++-------- app/layout.tsx | 4 ++-- app/onboarding/styles.ts | 4 ++-- styles/fonts.ts | 6 +++--- styles/text.ts | 4 ++-- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/app/(auth)/auth-styles.ts b/app/(auth)/auth-styles.ts index 4b497aa..8388fa6 100644 --- a/app/(auth)/auth-styles.ts +++ b/app/(auth)/auth-styles.ts @@ -1,10 +1,10 @@ import styled from 'styled-components'; import COLORS from '@/styles/colors'; -import { BespokeSans } from '@/styles/fonts'; +import { Sans } from '@/styles/fonts'; import { H3, P } from '@/styles/text'; export const Container = styled.div` - font-family: ${BespokeSans.style.fontFamily}, sans-serif; + font-family: ${Sans.style.fontFamily}, sans-serif; display: flex; flex-direction: column; align-items: center; @@ -41,13 +41,13 @@ export const Form = styled.div` `; export const Label = styled(P)` - font-family: ${BespokeSans.style.fontFamily}; + font-family: ${Sans.style.fontFamily}; font-weight: 500; margin-bottom: -0.2rem; `; export const Input = styled.input` - font-family: ${BespokeSans.style.fontFamily}; + font-family: ${Sans.style.fontFamily}; padding: 0.7rem; border: 1px solid ${COLORS.gray4}; border-radius: 8px; @@ -57,7 +57,7 @@ export const Input = styled.input` `; export const Button = styled.button` - font-family: ${BespokeSans.style.fontFamily}; + font-family: ${Sans.style.fontFamily}; background-color: ${COLORS.gray12}; color: white; font-size: 1rem; @@ -98,7 +98,7 @@ export const Separator = styled.div` `; export const Link = styled.a` - font-family: ${BespokeSans.style.fontFamily}; + font-family: ${Sans.style.fontFamily}; // TODO: CHANGE COLOR TO BLUE ONCE COLORS.TS IS UPDATED color: #3978ff; text-decoration: none; @@ -114,14 +114,14 @@ export const SmallBuffer = styled.div` // TODO: Temporarily added to verify that supabase login functionality actually works export const LoginMessage = styled(P)<{ isError: boolean }>` - font-family: ${BespokeSans.style.fontFamily}; + font-family: ${Sans.style.fontFamily}; color: ${({ isError }) => (isError ? 'red' : 'green')}; text-align: center; margin-top: 0.5rem; `; export const Footer = styled.div` - font-family: ${BespokeSans.style.fontFamily}; + font-family: ${Sans.style.fontFamily}; text-align: center; margin-top: 1rem; width: 100%; diff --git a/app/layout.tsx b/app/layout.tsx index 735d836..af25d98 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,6 @@ import type { Metadata } from 'next'; import StyledComponentsRegistry from '@/lib/registry'; -import { BespokeSans } from '../styles/fonts'; +import { Sans } from '../styles/fonts'; import '../styles/global.css'; // site metadata - what shows up on embeds @@ -16,7 +16,7 @@ export default function RootLayout({ }>) { return ( - + {children} diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts index e7ce020..8468a97 100644 --- a/app/onboarding/styles.ts +++ b/app/onboarding/styles.ts @@ -3,7 +3,7 @@ import NextImage from 'next/image'; import Link from 'next/link'; import styled from 'styled-components'; -import { BespokeSans } from '@/styles/fonts'; +import { Sans } from '@/styles/fonts'; import COLORS from '../../styles/colors'; export const Background = styled.main` @@ -102,7 +102,7 @@ export const ContinueButton = styled.button` `; export const ContinueText = styled.text` - ${BespokeSans.style} + ${Sans.style} color: white; font-size: 14px; padding: 10px; diff --git a/styles/fonts.ts b/styles/fonts.ts index 48143bf..79e9c1c 100644 --- a/styles/fonts.ts +++ b/styles/fonts.ts @@ -1,6 +1,6 @@ import localFont from 'next/font/local'; -const BespokeSans = localFont({ +const Sans = localFont({ src: [ { path: '../public/fonts/BespokeSans_Complete/Fonts/OTF/BespokeSans-Light.otf', @@ -30,7 +30,7 @@ const BespokeSans = localFont({ ], }); -const BespokeSerif = localFont({ +const Serif = localFont({ src: [ { path: '../public/fonts/BespokeSerif_Complete/Fonts/OTF/BespokeSerif-Light.otf', @@ -85,4 +85,4 @@ const ClashGrotesk = localFont({ ], }); -export { BespokeSans, BespokeSerif, ClashGrotesk }; +export { Sans, Serif, ClashGrotesk }; diff --git a/styles/text.ts b/styles/text.ts index 6d1ae6a..a3a3d75 100644 --- a/styles/text.ts +++ b/styles/text.ts @@ -1,7 +1,7 @@ 'use client'; import styled, { css } from 'styled-components'; -import { BespokeSans } from './fonts'; +import { Sans } from './fonts'; interface TextProps { $color?: string; @@ -10,7 +10,7 @@ interface TextProps { } const TextStyles = css` - ${BespokeSans.style} + ${Sans.style} font-weight: ${({ $fontWeight }) => $fontWeight || '700'}; color: ${({ $color }) => $color || 'black'}; text-align: ${({ $align }) => $align}; From 1e448023027d35786feee7516be2344158c2c2a1 Mon Sep 17 00:00:00 2001 From: Melissa <122945886+me-liu@users.noreply.github.com> Date: Sat, 26 Oct 2024 15:35:06 -0700 Subject: [PATCH 07/10] Feat: onboarding context (#18) * onboarding context * feat: more global colors --- app/layout.tsx | 5 +- app/onboarding/general/page.tsx | 43 ++++++++++-- app/onboarding/preferences/page.tsx | 50 ++++++++++++-- styles/colors.ts | 25 +++++++ utils/onboardingContext.tsx | 102 ++++++++++++++++++++++++++++ 5 files changed, 214 insertions(+), 11 deletions(-) create mode 100644 utils/onboardingContext.tsx diff --git a/app/layout.tsx b/app/layout.tsx index af25d98..7be9d86 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from 'next'; import StyledComponentsRegistry from '@/lib/registry'; import { Sans } from '../styles/fonts'; import '../styles/global.css'; +import { OnboardingProvider } from '../utils/onboardingContext'; // site metadata - what shows up on embeds export const metadata: Metadata = { @@ -17,7 +18,9 @@ export default function RootLayout({ return ( - {children} + + {children} + ); diff --git a/app/onboarding/general/page.tsx b/app/onboarding/general/page.tsx index 63d22b1..473e26a 100644 --- a/app/onboarding/general/page.tsx +++ b/app/onboarding/general/page.tsx @@ -1,5 +1,9 @@ /* eslint-disable react/no-unescaped-entities */ +'use client'; + +import { useContext } from 'react'; import Back from '@/public/images/back.svg'; +import { OnboardingContext } from '@/utils/onboardingContext'; import { Background, ButtonContainer, @@ -16,6 +20,20 @@ import { import { Checkbox, RedAsterisk, UpdateContainer, UpdateText } from './styles'; export default function Onboarding() { + const onboardingContext = useContext(OnboardingContext); + + if (!onboardingContext) return null; + + const { generalInfo, setGeneralInfo } = onboardingContext; + + const handleChange = (e: React.ChangeEvent) => { + const { name, type, checked, value } = e.target; + setGeneralInfo({ + ...generalInfo, + [name]: type === 'checkbox' ? checked : value, + }); + }; + return ( @@ -30,19 +48,36 @@ export default function Onboarding() { {' '} First Name *{' '} - + {' '} Last Name *{' '} - + {' '} Phone Number *{' '} - + - + I want to get updated when there's an event that matches my interest! diff --git a/app/onboarding/preferences/page.tsx b/app/onboarding/preferences/page.tsx index f02e143..8f2e941 100644 --- a/app/onboarding/preferences/page.tsx +++ b/app/onboarding/preferences/page.tsx @@ -1,5 +1,9 @@ +'use client'; + +import { useContext } from 'react'; import Link from 'next/link'; import Back from '@/public/images/back.svg'; +import { OnboardingContext } from '@/utils/onboardingContext'; import { Background, ButtonContainer, @@ -14,6 +18,16 @@ import { } from '../styles'; export default function Onboarding() { + const onboardingContext = useContext(OnboardingContext); + + if (!onboardingContext) return null; + + const { preferences, setPreferences } = onboardingContext; + + const handleChange = (e: React.ChangeEvent) => { + setPreferences({ ...preferences, [e.target.name]: e.target.value }); + }; + return ( @@ -28,17 +42,41 @@ export default function Onboarding() { Help us tailor shows to you! Facility Type - + Preferred Location - + Audience - + Preferred Equipment - + Type of Act - + Genre - + diff --git a/styles/colors.ts b/styles/colors.ts index 242c22c..95ed867 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -1,5 +1,30 @@ const COLORS = { bread1: '#FEFDFC', + bread2: '#F5F5F3', + bread3: '#F6F3E9', + bread4: '#EDE6D5', + bread5: '#E6DCC4', + bread6: '#DED1AF', + bread7: '#D3C193', + bread8: '#C3AB6C', + bread9: '#A18740', + bread10: '#937B3B', + bread11: '#776534', + bread12: '#3A3528', + + rose1: '#FFFCFC', + rose2: '#FFF8F7', + rose3: '#FDEBE9', + rose4: '#FFDEDB', + rose5: '#FED0CD', + rose6: '#F7C1BD', + rose7: '#EEAEAA', + rose8: '#E39591', + rose9: '#A4031F', + rose10: '#91000F', + rose11: '#C6343B', + rose12: '#621D1E', + gray1: '#ECECEC', gray2: '#E7E7E7', gray3: '#DDDDDD', diff --git a/utils/onboardingContext.tsx b/utils/onboardingContext.tsx new file mode 100644 index 0000000..3dc3363 --- /dev/null +++ b/utils/onboardingContext.tsx @@ -0,0 +1,102 @@ +'use client'; + +import React, { createContext, ReactNode, useState } from 'react'; +import supabase from '@/api/supabase/createClient'; + +interface GeneralInfo { + firstName: string; + lastName: string; + phoneNumber: string; + notifications: boolean; +} + +interface Preferences { + facilityType: string; + location: string; + audience: string; + preferredEquipment: string; + typeOfAct: string; + genre: string; +} + +interface OnboardingContextType { + generalInfo: GeneralInfo; + setGeneralInfo: (info: GeneralInfo) => void; + preferences: Preferences; + setPreferences: (preferences: Preferences) => void; + submitOnboardingData: () => Promise; +} + +export const OnboardingContext = createContext< + OnboardingContextType | undefined +>(undefined); + +export const OnboardingProvider = ({ children }: { children: ReactNode }) => { + const [generalInfo, setGeneralInfo] = useState({ + firstName: '', + lastName: '', + phoneNumber: '', + notifications: false, + }); + + const [preferences, setPreferences] = useState({ + facilityType: '', + location: '', + audience: '', + preferredEquipment: '', + typeOfAct: '', + genre: '', + }); + + const submitOnboardingData = async () => { + try { + const { data: volunteerData, error: volunteerError } = await supabase + .from('volunteers') + .insert([ + { + first_name: generalInfo.firstName, + last_name: generalInfo.lastName, + phone_number: generalInfo.phoneNumber, + }, + ]); + + if (volunteerError) throw volunteerError; + + const { data: preferencesData, error: preferencesError } = await supabase + .from('volunteer_preferences') + .insert([ + { + facility_type: preferences.facilityType, + city: preferences.location, + audience: preferences.audience, + instruments: preferences.preferredEquipment, + type_of_act: preferences.typeOfAct, + genre: preferences.genre, + }, + ]); + + if (preferencesError) throw preferencesError; + + console.log('Onboarding data submitted successfully:', { + volunteerData, + preferencesData, + }); + } catch (error) { + console.error('Error submitting onboarding data:', error); + } + }; + + return ( + + {children} + + ); +}; From 342dbe1c4762364008ec1d6b60f47413f68a6bbf Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Sun, 27 Oct 2024 02:19:54 -0700 Subject: [PATCH 08/10] feat: expanding menu bar --- components/ExpandingMenu/ExpandingMenu.tsx | 77 ++++++++++++++++++++++ components/ExpandingMenu/styles.ts | 65 ++++++++++++++++++ public/images/availabilities.svg | 3 + public/images/menu.svg | 3 + public/images/settings.svg | 3 + public/images/upcoming-events.svg | 3 + styles/colors.ts | 2 + 7 files changed, 156 insertions(+) create mode 100644 components/ExpandingMenu/ExpandingMenu.tsx create mode 100644 components/ExpandingMenu/styles.ts create mode 100644 public/images/availabilities.svg create mode 100644 public/images/menu.svg create mode 100644 public/images/settings.svg create mode 100644 public/images/upcoming-events.svg diff --git a/components/ExpandingMenu/ExpandingMenu.tsx b/components/ExpandingMenu/ExpandingMenu.tsx new file mode 100644 index 0000000..8a4d32b --- /dev/null +++ b/components/ExpandingMenu/ExpandingMenu.tsx @@ -0,0 +1,77 @@ +import React, { useState } from 'react'; +import Availability from '@/public/images/availabilities.svg'; +import Events from '@/public/images/upcoming-events.svg'; +import Settings from '@/public/images/settings.svg'; +import { MenuContainer, ToggleButton, MenuItem, MenuLabel, MenuIconWrapper, Icon } from './styles'; + +const ExpandingMenu: React.FC = () => { + const [expanded, setExpanded] = useState(false); + const [activeItem, setActiveItem] = useState(null); + + const toggleMenu = () => setExpanded(!expanded); + + // TODO: add navigation by passing in path prop + const handleClick = (item: string) => { + setActiveItem(item); + }; + + return ( + + + + + + + + + {expanded && ( + <> + handleClick('availabilities')} + > + + + Availabilities + + + handleClick('events')} + > + + + Upcoming Events + + + handleClick('settings')} + > + + + Profile & Settings + + + + )} + + ); +}; + +export default ExpandingMenu; \ No newline at end of file diff --git a/components/ExpandingMenu/styles.ts b/components/ExpandingMenu/styles.ts new file mode 100644 index 0000000..6368f10 --- /dev/null +++ b/components/ExpandingMenu/styles.ts @@ -0,0 +1,65 @@ +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; +import Image from 'next/image'; +import { Sans } from '@/styles/fonts'; +import { P } from '@/styles/text'; + +export const MenuContainer = styled.div<{ $expanded: boolean }>` + height: 100vh; + background-color: ${({ $expanded }) => ($expanded ? COLORS.pomegranate : 'transparent')}; + display: flex; + flex-direction: column; + padding-left: 1.25rem; + gap: 1.5rem; + transition: width 0.3s ease, background-color 0.3s ease; + position: fixed; + + width: ${({ $expanded }) => ($expanded ? '20%' : '0')}; + + @media (max-width: 768px) { + width: ${({ $expanded }) => ($expanded ? '75%' : '0')}; + } +`; + +export const ToggleButton = styled.button` + background-color: transparent; + border: none; + cursor: pointer; + display: flex; + padding: 1rem 0; +`; + +export const MenuItem = styled.button<{ $expanded: boolean }>` + width: 100%; + background-color: transparent; + border-style: solid; + border-color: transparent; + color: ${COLORS.gray3}; + display: flex; + align-items: center; + justify-content: ${({ $expanded }) => ($expanded ? 'flex-start' : 'center')}; + cursor: pointer; +`; + +export const MenuIconWrapper = styled.div<{ $expanded: boolean }>` + width: 20px; + height: 20px; + + & svg path { + fill: ${({ $expanded }) => ($expanded ? COLORS.gray3 : COLORS.pomegranate)}; + } +`; + +export const Icon = styled(Image)` + width: 20px; + height: 20px; + margin-right: 0.625rem; +`; + +export const MenuLabel = styled(P)<{ $expanded: boolean; $active: boolean }>` + ${Sans.style} + color: ${COLORS.gray3}; + display: ${({ $expanded }) => ($expanded ? 'flex' : 'none')}; + font-weight: ${({ $active }) => ($active ? '600' : '400')}; + transition: font-weight 0.03s ease-in-out; +`; diff --git a/public/images/availabilities.svg b/public/images/availabilities.svg new file mode 100644 index 0000000..b3edc80 --- /dev/null +++ b/public/images/availabilities.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/menu.svg b/public/images/menu.svg new file mode 100644 index 0000000..02a24dd --- /dev/null +++ b/public/images/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/settings.svg b/public/images/settings.svg new file mode 100644 index 0000000..3f08fa3 --- /dev/null +++ b/public/images/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/upcoming-events.svg b/public/images/upcoming-events.svg new file mode 100644 index 0000000..6532db1 --- /dev/null +++ b/public/images/upcoming-events.svg @@ -0,0 +1,3 @@ + + + diff --git a/styles/colors.ts b/styles/colors.ts index 95ed867..8d8107d 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -37,6 +37,8 @@ const COLORS = { gray10: '#6D6D6D', gray11: '#515151', gray12: '#202020', + + pomegranate: '#342A2F' }; export default COLORS; From 37a5ee765d564c8bc272506126a10db72a582be0 Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Sun, 27 Oct 2024 02:23:02 -0700 Subject: [PATCH 09/10] feat: added pomegranate color and expanding menu component --- components/ExpandingMenu/ExpandingMenu.tsx | 45 +++++++++++----------- components/ExpandingMenu/styles.ts | 11 ++++-- styles/colors.ts | 2 +- 3 files changed, 31 insertions(+), 27 deletions(-) diff --git a/components/ExpandingMenu/ExpandingMenu.tsx b/components/ExpandingMenu/ExpandingMenu.tsx index 8a4d32b..7810ff0 100644 --- a/components/ExpandingMenu/ExpandingMenu.tsx +++ b/components/ExpandingMenu/ExpandingMenu.tsx @@ -1,8 +1,15 @@ import React, { useState } from 'react'; import Availability from '@/public/images/availabilities.svg'; -import Events from '@/public/images/upcoming-events.svg'; import Settings from '@/public/images/settings.svg'; -import { MenuContainer, ToggleButton, MenuItem, MenuLabel, MenuIconWrapper, Icon } from './styles'; +import Events from '@/public/images/upcoming-events.svg'; +import { + Icon, + MenuContainer, + MenuIconWrapper, + MenuItem, + MenuLabel, + ToggleButton, +} from './styles'; const ExpandingMenu: React.FC = () => { const [expanded, setExpanded] = useState(false); @@ -26,45 +33,39 @@ const ExpandingMenu: React.FC = () => { fill="none" xmlns="http://www.w3.org/2000/svg" > - + {expanded && ( <> - handleClick('availabilities')} > - Availabilities - + - handleClick('events')} - > + handleClick('events')}> - + Upcoming Events - handleClick('settings')} > - + Profile & Settings @@ -74,4 +75,4 @@ const ExpandingMenu: React.FC = () => { ); }; -export default ExpandingMenu; \ No newline at end of file +export default ExpandingMenu; diff --git a/components/ExpandingMenu/styles.ts b/components/ExpandingMenu/styles.ts index 6368f10..7cc3585 100644 --- a/components/ExpandingMenu/styles.ts +++ b/components/ExpandingMenu/styles.ts @@ -1,22 +1,25 @@ +import Image from 'next/image'; import styled from 'styled-components'; import COLORS from '@/styles/colors'; -import Image from 'next/image'; import { Sans } from '@/styles/fonts'; import { P } from '@/styles/text'; export const MenuContainer = styled.div<{ $expanded: boolean }>` height: 100vh; - background-color: ${({ $expanded }) => ($expanded ? COLORS.pomegranate : 'transparent')}; + background-color: ${({ $expanded }) => + $expanded ? COLORS.pomegranate : 'transparent'}; display: flex; flex-direction: column; padding-left: 1.25rem; gap: 1.5rem; - transition: width 0.3s ease, background-color 0.3s ease; + transition: + width 0.3s ease, + background-color 0.3s ease; position: fixed; width: ${({ $expanded }) => ($expanded ? '20%' : '0')}; - @media (max-width: 768px) { + @media (max-width: 768px) { width: ${({ $expanded }) => ($expanded ? '75%' : '0')}; } `; diff --git a/styles/colors.ts b/styles/colors.ts index 8d8107d..0ff646a 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -38,7 +38,7 @@ const COLORS = { gray11: '#515151', gray12: '#202020', - pomegranate: '#342A2F' + pomegranate: '#342A2F', }; export default COLORS; From 5cc2efa3d61eefaf888b2f5d816fceba73f4f086 Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Sun, 27 Oct 2024 21:15:30 -0700 Subject: [PATCH 10/10] chore: update layout and app background color --- app/layout.tsx | 12 ++++++++---- app/page.tsx | 23 +++++++++++------------ 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 7be9d86..80f5b27 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,13 +1,14 @@ import type { Metadata } from 'next'; import StyledComponentsRegistry from '@/lib/registry'; import { Sans } from '../styles/fonts'; +import COLORS from '@/styles/colors'; import '../styles/global.css'; import { OnboardingProvider } from '../utils/onboardingContext'; // site metadata - what shows up on embeds export const metadata: Metadata = { - title: 'Project Name', - description: 'Description of project', + title: 'Bread & Roses Presents', + description: 'Created by Blueprint', }; export default function RootLayout({ @@ -17,9 +18,12 @@ export default function RootLayout({ }>) { return ( - + - {children} + {children} diff --git a/app/page.tsx b/app/page.tsx index b4ae2cf..dddb38e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,15 +1,14 @@ -import Link from 'next/link'; -import BPLogo from '@/public/images/bp-logo.png'; -import { Container, Image } from './page.style'; +'use client'; + +import { useEffect } from 'react'; +import { useRouter } from 'next/navigation'; export default function Home() { - return ( - - Blueprint Logo -

Open up app/page.tsx to get started!

- - - - - ); + const router = useRouter(); + + useEffect(() => { + router.push('/signin'); + }, [router]); + + return null; }