From 42477900b39bf96523104a252c872efd7c16b6dd Mon Sep 17 00:00:00 2001 From: aidenm1 <65800707+aidenm1@users.noreply.github.com> Date: Sat, 7 Dec 2024 14:11:36 -0800 Subject: [PATCH 1/4] feat: availability card component and display (#38) * created querying functions * created AvailabilityCard component and added to general page * changed styling and updates colors file to include new pomegranate color * resolved ESLint errors * added message for no availabilities * updated to reflect new design and implemented content moving when menubar is expanded * changed design for date range on availability card --- api/supabase/queries/availability.ts | 40 +++++ app/(auth)/auth-styles.ts | 2 +- app/availability/general/page.tsx | 138 ++++++++++++++++++ app/availability/general/styles.ts | 45 ++++++ app/onboarding/finalize/styles.ts | 7 +- app/onboarding/styles.ts | 4 +- .../AvailabilityCard/AvailabilityCard.tsx | 86 +++++++++++ components/AvailabilityCard/styles.ts | 65 +++++++++ components/MenuBar/MenuBar.tsx | 11 +- components/MenuBar/styles.ts | 5 +- public/images/add.svg | 5 + public/images/additionalinfo.svg | 5 + public/images/clock.svg | 8 + styles/colors.ts | 3 +- types/schema.d.ts | 2 + 15 files changed, 416 insertions(+), 10 deletions(-) create mode 100644 app/availability/general/page.tsx create mode 100644 app/availability/general/styles.ts create mode 100644 components/AvailabilityCard/AvailabilityCard.tsx create mode 100644 components/AvailabilityCard/styles.ts create mode 100644 public/images/add.svg create mode 100644 public/images/additionalinfo.svg create mode 100644 public/images/clock.svg diff --git a/api/supabase/queries/availability.ts b/api/supabase/queries/availability.ts index 4d57d5d..9ac5a78 100644 --- a/api/supabase/queries/availability.ts +++ b/api/supabase/queries/availability.ts @@ -23,3 +23,43 @@ export async function fetchAvailabilitiesByFacilityId(facility_id: UUID) { return null; // Return null on unexpected error } } + +export async function fetchAllAvailabilities() { + try { + const { data, error } = await supabase.from('availabilities').select('*'); + if (error) { + throw new Error(error.message); + } + if (data && data.length == 0) { + console.log('No availabilities found'); + return []; + } + return data; + } catch (error) { + console.error('An unexpected error occured:', error); + return null; + } +} + +export async function fetchDatesByAvailabilityID(availability_id: UUID) { + try { + const { data, error } = await supabase + .from('available_dates') + .select('*') + .eq('availability_id', availability_id); + if (error) { + throw new Error(error.message); + } + if (data && data.length == 0) { + console.log( + 'No dates found for this availability id or availability_id is undefined', + availability_id, + ); + return []; + } + return data; + } catch (error) { + console.error('An unexpected error occured:', error); + return null; + } +} diff --git a/app/(auth)/auth-styles.ts b/app/(auth)/auth-styles.ts index 617990e..b10782a 100644 --- a/app/(auth)/auth-styles.ts +++ b/app/(auth)/auth-styles.ts @@ -79,7 +79,7 @@ export const Input = styled.input` export const Button = styled.button` font-family: ${Sans.style.fontFamily}; - background-color: ${COLORS.pomegranate}; + background-color: ${COLORS.pomegranate12}; color: white; font-size: 1rem; padding: 0.75rem; diff --git a/app/availability/general/page.tsx b/app/availability/general/page.tsx new file mode 100644 index 0000000..0c65c42 --- /dev/null +++ b/app/availability/general/page.tsx @@ -0,0 +1,138 @@ +'use client'; + +import React, { useEffect, useState } from 'react'; +import { + fetchAllAvailabilities, + fetchDatesByAvailabilityID, +} from '@/api/supabase/queries/availability'; +import AvailabilityCard from '@/components/AvailabilityCard/AvailabilityCard'; +import MenuBar from '@/components/MenuBar/MenuBar'; +import Add from '@/public/images/add.svg'; +import COLORS from '@/styles/colors'; +import { H3 } from '@/styles/text'; +import { Availabilities, AvailableDates } from '@/types/schema'; +import * as styles from './styles'; + +type AvailabilitiesByYear = { + [year: string]: { + availability: Availabilities; + available_dates: AvailableDates[]; + }[]; +}; + +export default function AvailabilityPage() { + const [groupedByYear, setGroupedByYear] = useState({}); + const [isLoading, setIsLoading] = useState(true); + const [menuExpanded, setMenuExpanded] = useState(false); // Track the expanded state of the menu + + useEffect(() => { + async function fetchAndGroupData() { + try { + // Step 1: Fetch all availabilities + const availabilities = await fetchAllAvailabilities(); + + if (!availabilities) { + return; + } + + // Step 2: Group by year while fetching associated dates + const grouped: AvailabilitiesByYear = {}; + for (const availability of availabilities) { + const availableDates = await fetchDatesByAvailabilityID( + availability.availability_id, + ); + + const year = availableDates?.[0]?.available_date + ? new Date(availableDates[0].available_date) + .getFullYear() + .toString() + : null; + + //don't display availability cards that have no availabilities associated + if (year == null) { + continue; + } + + if (!grouped[year]) { + grouped[year] = []; + } + + grouped[year].push({ + availability, + available_dates: availableDates ?? [], + }); + } + for (const year in grouped) { + grouped[year].sort((a, b) => { + const firstDateA = new Date( + a.available_dates[0]?.available_date ?? 0, + ).getTime(); + const firstDateB = new Date( + b.available_dates[0]?.available_date ?? 0, + ).getTime(); + return firstDateA - firstDateB; + }); + } + + setGroupedByYear(grouped); + setIsLoading(false); // Stop loading after data fetch + } catch (error) { + console.error('Error fetching data:', error); + } + } + + fetchAndGroupData(); + }, []); + + return ( +
+ {' '} + {/* Pass function to update state */} + + + +

+ Availabilities +

+ + + {/* Check if there are no availabilities */} + {isLoading ? ( + + Loading availabilities... + + ) : Object.keys(groupedByYear).length === 0 ? ( + + No availabilities yet, +
+ add one with the plus sign! + + ) : ( + Object.entries(groupedByYear).map(([year, availabilities]) => ( +
+ + {year} + + {availabilities.map(({ availability, available_dates }) => ( + + ))} +
+ )) + )} + + +
+ ); +} diff --git a/app/availability/general/styles.ts b/app/availability/general/styles.ts new file mode 100644 index 0000000..e219b00 --- /dev/null +++ b/app/availability/general/styles.ts @@ -0,0 +1,45 @@ +'use client'; + +import NextImage from 'next/image'; +import styled from 'styled-components'; +import { H6, P } from '@/styles/text'; + +export const Page = styled.main<{ $menuExpanded: boolean }>` + display: flex; + min-width: 100%; + min-height: 100vh; + justify-content: center; + overflow: hidden; + margin-left: ${({ $menuExpanded }) => + $menuExpanded ? '10%' : '0'}; /* Fixed margin for the expanded menu */ + transition: margin-left 0.3s ease; /* Smooth transition */ +`; + +export const AllAvailabilitiesHolder = styled.main` + display: flex; + width: 28.75%; + flex-direction: column; +`; + +export const TitleContainer = styled.main` + display: flex; + margin-top: 4.43rem; + margin-bottom: 2.62rem; + justify-content: space-between; + align-items: center; + width: 100%; +`; + +export const YearText = styled(H6)` + margin-bottom: 1.5rem; +`; + +export const AddImage = styled(NextImage)` + width: 1.5rem; + height: 1.5rem; +`; + +export const message = styled(P)` + text-align: center; + margin-top: 5.75rem; +`; diff --git a/app/onboarding/finalize/styles.ts b/app/onboarding/finalize/styles.ts index 759e7ad..34635a6 100644 --- a/app/onboarding/finalize/styles.ts +++ b/app/onboarding/finalize/styles.ts @@ -64,8 +64,13 @@ export const ContinueButton = styled.button` justify-content: center; align-items: center; align-self: stretch; +<<<<<<< HEAD:app/onboarding/yay/styles.ts + border-radius: 99999px; + background: ${COLORS.pomegranate12}; +======= border-radius: 8px; - background: ${COLORS.pomegranate}; + background: ${COLORS.pomegranate12}; +>>>>>>> c33d5a0fb4596e1d2e004014b99e33e17cee93e9:app/onboarding/finalize/styles.ts border-style: solid; border-color: ${COLORS.gray12}; cursor: pointer; diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts index 2eefc8b..659830e 100644 --- a/app/onboarding/styles.ts +++ b/app/onboarding/styles.ts @@ -150,9 +150,9 @@ export const Button = styled.button<{ disabled?: boolean }>` width: 30%; height: 2.75rem; background-color: ${({ disabled }) => - disabled ? COLORS.pomegranate10 : COLORS.pomegranate}; + disabled ? COLORS.pomegranate10 : COLORS.pomegranate12}; border-color: ${({ disabled }) => - disabled ? COLORS.pomegranate10 : COLORS.pomegranate}; + disabled ? COLORS.pomegranate10 : COLORS.pomegranate12}; border-style: solid; border-radius: 8px; display: inline-flex; diff --git a/components/AvailabilityCard/AvailabilityCard.tsx b/components/AvailabilityCard/AvailabilityCard.tsx new file mode 100644 index 0000000..c13da6c --- /dev/null +++ b/components/AvailabilityCard/AvailabilityCard.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import Arrow from '@/public/images/white_back.svg'; +import COLORS from '@/styles/colors'; +import { H5, P } from '@/styles/text'; +import { Availabilities, AvailableDates } from '@/types/schema'; +import * as styles from './styles'; + +interface AvailabilityCardProps { + availability: Availabilities; + availableDates: AvailableDates[]; +} + +export default function AvailabilityCard({ + availability, + availableDates, +}: AvailabilityCardProps) { + const dateRange = + availableDates.length > 0 + ? { + earliest: new Date( + Math.min( + ...availableDates.map(date => + new Date(date.available_date).getTime(), + ), + ), + ), + latest: new Date( + Math.max( + ...availableDates.map(date => + new Date(date.available_date).getTime(), + ), + ), + ), + } + : null; + + // Format the dates + let formattedRange = dateRange + ? `${dateRange.earliest.toLocaleString('default', { + month: 'short', + day: 'numeric', + })} - ${dateRange.latest.toLocaleString('default', { + month: 'short', + day: 'numeric', + })}` + : 'No dates available'; + + if (dateRange && dateRange.earliest.getDate() == dateRange.latest.getDate()) { + formattedRange = `${dateRange.earliest.toLocaleString('default', { + month: 'short', + day: 'numeric', + })}`; + } + + return ( + + + +
+ {availability.name} +
+

+ {formattedRange} +

+ + + + +
+ +

+ Description +

+ + {availability.additional_info} + + +
+ + + ); +} diff --git a/components/AvailabilityCard/styles.ts b/components/AvailabilityCard/styles.ts new file mode 100644 index 0000000..be08d1f --- /dev/null +++ b/components/AvailabilityCard/styles.ts @@ -0,0 +1,65 @@ +'use client'; + +import NextImage from 'next/image'; +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; +import { SMALL } from '@/styles/text'; + +export const AvailabilityContainer = styled.main` + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 1.5rem; + border-radius: 16px; + width: 100%; + background: ${COLORS.bread1}; + margin-bottom: 3rem; + box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.08); +`; + +export const AvailabilityHeader = styled.main` + display: flex; + padding: 16px 24px; + justify-content: space-between; + align-items: center; + background: ${COLORS.pomegranate11}; + border-radius: 16px 16px 0 0; + width: 100%; +`; + +export const AvailabilityTitle = styled.main` + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; +`; + +export const Content = styled.main` + padding: 0px 24px 24px 24px; + display: flex; + flex-direction: column; + gap: 1.5rem; +`; + +export const SubHeader = styled.main` + display: flex; + flex-direction: column; + gap: 4px; + justify-content: start; + margin-bottom: 0.25rem; +`; + +export const Arrow = styled(NextImage)` + width: 24px; + height: 24px; + transform: rotate(180deg); +`; + +export const TruncatedText = styled(SMALL)` + display: -webkit-box; + -webkit-line-clamp: 2; /* Limit to 2 lines */ + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; +`; diff --git a/components/MenuBar/MenuBar.tsx b/components/MenuBar/MenuBar.tsx index 44813d0..aad6b6e 100644 --- a/components/MenuBar/MenuBar.tsx +++ b/components/MenuBar/MenuBar.tsx @@ -12,14 +12,19 @@ import { ToggleButton, } from './styles'; -const MenuBar: React.FC = () => { +const MenuBar: React.FC<{ setMenuExpanded?: (expanded: boolean) => void }> = ({ + setMenuExpanded = () => {}, // Default to a no-op function +}) => { const [expanded, setExpanded] = useState(false); const [activeItem, setActiveItem] = useState(null); const router = useRouter(); - const toggleMenu = () => setExpanded(!expanded); + const toggleMenu = () => { + const newExpanded = !expanded; + setExpanded(newExpanded); + setMenuExpanded(newExpanded); // Update parent component about expanded state + }; - // TODO: add navigation by passing in path prop const handleClick = (item: string, path: string) => { setActiveItem(item); router.push(path); diff --git a/components/MenuBar/styles.ts b/components/MenuBar/styles.ts index cf8e665..173e705 100644 --- a/components/MenuBar/styles.ts +++ b/components/MenuBar/styles.ts @@ -8,7 +8,7 @@ export const MenuContainer = styled.div<{ $expanded: boolean }>` height: 100vh; z-index: 9999; background-color: ${({ $expanded }) => - $expanded ? COLORS.pomegranate : 'transparent'}; + $expanded ? COLORS.pomegranate12 : 'transparent'}; display: flex; flex-direction: column; padding-left: 1.25rem; @@ -47,7 +47,8 @@ export const MenuIconWrapper = styled.div<{ $expanded: boolean }>` width: 20px; height: 20px; & svg path { - fill: ${({ $expanded }) => ($expanded ? COLORS.gray3 : COLORS.pomegranate)}; + fill: ${({ $expanded }) => + $expanded ? COLORS.gray3 : COLORS.pomegranate12}; } `; diff --git a/public/images/add.svg b/public/images/add.svg new file mode 100644 index 0000000..8aa80d3 --- /dev/null +++ b/public/images/add.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/additionalinfo.svg b/public/images/additionalinfo.svg new file mode 100644 index 0000000..0811a52 --- /dev/null +++ b/public/images/additionalinfo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/clock.svg b/public/images/clock.svg new file mode 100644 index 0000000..e911704 --- /dev/null +++ b/public/images/clock.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/styles/colors.ts b/styles/colors.ts index 1f35755..0f9b245 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -51,8 +51,9 @@ const COLORS = { lilac11: '#423EAF', lilac12: '#383975', - pomegranate: '#342A2F', pomegranate10: '#6F585E', + pomegranate11: '#633A4F', + pomegranate12: '#342A2F', }; export default COLORS; diff --git a/types/schema.d.ts b/types/schema.d.ts index 6e6c04e..533adb6 100644 --- a/types/schema.d.ts +++ b/types/schema.d.ts @@ -76,6 +76,8 @@ export interface AvailableDates { date_id: UUID; availability_id: UUID; available_date: string; //date + test_col: string; //timestamptz + test_col2: string; //timestamptz } export interface Event { From 4596b05e245096acb162e4c48b86c62686755a9b Mon Sep 17 00:00:00 2001 From: Celine Ji-Won Choi <107969914+celinechoiii@users.noreply.github.com> Date: Sat, 7 Dec 2024 14:13:31 -0800 Subject: [PATCH 2/4] fix: update continue button style --- app/onboarding/finalize/styles.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/app/onboarding/finalize/styles.ts b/app/onboarding/finalize/styles.ts index 34635a6..f0678ad 100644 --- a/app/onboarding/finalize/styles.ts +++ b/app/onboarding/finalize/styles.ts @@ -64,13 +64,8 @@ export const ContinueButton = styled.button` justify-content: center; align-items: center; align-self: stretch; -<<<<<<< HEAD:app/onboarding/yay/styles.ts - border-radius: 99999px; - background: ${COLORS.pomegranate12}; -======= border-radius: 8px; background: ${COLORS.pomegranate12}; ->>>>>>> c33d5a0fb4596e1d2e004014b99e33e17cee93e9:app/onboarding/finalize/styles.ts border-style: solid; border-color: ${COLORS.gray12}; cursor: pointer; From 21840afce3ef6c660b2651d3b498aaf697b79377 Mon Sep 17 00:00:00 2001 From: Celine Ji-Won Choi <107969914+celinechoiii@users.noreply.github.com> Date: Sat, 7 Dec 2024 16:21:19 -0800 Subject: [PATCH 3/4] feat: role selection component + sign in error messages (#40) * refactor: create role selection component * feat: error messages in login screen * feat: availability card component and display (#38) * created querying functions * created AvailabilityCard component and added to general page * changed styling and updates colors file to include new pomegranate color * resolved ESLint errors * added message for no availabilities * updated to reflect new design and implemented content moving when menubar is expanded * changed design for date range on availability card * fix: update continue button style * temp feat: added discover to menu bar --------- Co-authored-by: aidenm1 <65800707+aidenm1@users.noreply.github.com> --- app/(auth)/auth-styles.ts | 29 +++---- app/(auth)/signin/page.tsx | 93 +++++++++++++++++------ app/(auth)/signup/page.tsx | 4 +- app/availability/{ => calendar}/page.tsx | 0 app/availability/{ => calendar}/styles.ts | 2 +- app/availability/general/styles.ts | 13 +++- app/discover/page.tsx | 63 ++++++--------- app/discover/styles.ts | 19 ++++- app/events/page.tsx | 7 +- app/events/styles.ts | 25 ++++-- app/onboarding/additional-info/page.tsx | 2 +- app/onboarding/basic-information/page.tsx | 1 + app/onboarding/performance/page.tsx | 2 +- app/onboarding/review/page.tsx | 2 +- app/onboarding/role-selection/page.tsx | 62 ++++++--------- app/onboarding/role-selection/styles.ts | 54 ------------- app/onboarding/show-preference/page.tsx | 2 +- app/onboarding/styles.ts | 20 ++++- components/MenuBar/MenuBar.tsx | 16 +++- components/RoleSelector/RoleSelector.tsx | 51 +++++++++++++ components/RoleSelector/styles.ts | 77 +++++++++++++++++++ package.json | 4 +- pnpm-lock.yaml | 23 +++++- public/images/discover.svg | 4 + styles/colors.ts | 1 + 25 files changed, 369 insertions(+), 207 deletions(-) rename app/availability/{ => calendar}/page.tsx (100%) rename app/availability/{ => calendar}/styles.ts (97%) create mode 100644 components/RoleSelector/RoleSelector.tsx create mode 100644 components/RoleSelector/styles.ts create mode 100644 public/images/discover.svg diff --git a/app/(auth)/auth-styles.ts b/app/(auth)/auth-styles.ts index b10782a..7223bac 100644 --- a/app/(auth)/auth-styles.ts +++ b/app/(auth)/auth-styles.ts @@ -1,4 +1,5 @@ import Image from 'next/image'; +import NextLink from 'next/link'; import styled from 'styled-components'; import COLORS from '@/styles/colors'; import { Sans } from '@/styles/fonts'; @@ -39,8 +40,9 @@ export const Header = styled(H3)` 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); + border-radius: 16px; + border: 1px solid ${COLORS.gray2}; + box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.08); max-width: 400px; width: 100%; box-sizing: border-box; @@ -49,7 +51,7 @@ export const Card = styled.div` align-items: center; `; -export const Form = styled.div` +export const Form = styled.form` display: flex; flex-direction: column; align-items: stretch; @@ -59,7 +61,7 @@ export const Form = styled.div` export const Fields = styled.div` display: flex; flex-direction: column; - gap: 1.75rem; + gap: 1.5rem; `; export const Label = styled(P)` @@ -75,6 +77,7 @@ export const Input = styled.input` border-radius: 8px; width: 100%; box-sizing: border-box; + margin-bottom: 0.2rem; `; export const Button = styled.button` @@ -90,13 +93,7 @@ export const Button = styled.button` width: 100%; `; -export const ForgotPassword = styled(SMALL)` - margin-top: 0.25rem; - font-weight: 400; - text-align: right; -`; - -export const Link = styled.a` +export const Link = styled(NextLink)` color: ${COLORS.lilac9}; text-decoration: none; @@ -105,18 +102,16 @@ export const Link = styled.a` } `; -// TODO: Temporarily added to verify that supabase login functionality actually works -export const LoginMessage = styled(SMALL)<{ $isError: boolean }>` - color: ${({ $isError }) => ($isError ? 'red' : 'green')}; +export const ErrorMessage = styled(SMALL)<{ $isError: boolean }>` + color: ${COLORS.rose11}; font-weight: 400; text-align: left; - margin-bottom: 1.5rem; + margin-bottom: 1rem; `; export const Footer = styled.div` - font-family: ${Sans.style.fontFamily}; text-align: center; - margin-top: 1rem; + margin-top: 2rem; width: 100%; padding: 0.5rem; `; diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx index a0b85e6..f48c209 100644 --- a/app/(auth)/signin/page.tsx +++ b/app/(auth)/signin/page.tsx @@ -2,21 +2,22 @@ import { useState } from 'react'; import { useRouter } from 'next/navigation'; +import isEmail from 'validator/lib/isEmail'; import { handleSignIn as signInUser } from '@/api/supabase/queries/auth'; import BRLogo from '@/public/images/b&r-logo.png'; -import { H5 } from '@/styles/text'; +import COLORS from '@/styles/colors'; +import { H5, SMALL } from '@/styles/text'; import { Button, Card, Container, + ErrorMessage, Fields, Footer, - ForgotPassword, Form, Input, Label, Link, - LoginMessage, Logo, TitleUnderline, } from '../auth-styles'; @@ -25,36 +26,61 @@ export default function SignIn() { const router = useRouter(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); - const [message, setMessage] = useState(''); - const [isError, setIsError] = useState(false); + const [emailError, setEmailError] = useState(''); + const [passwordError, setPasswordError] = useState(''); + const [errorMessage, setErrorMessage] = useState(''); + const [isLoggingIn, setIsLoggingIn] = useState(false); - const handleSignIn = async () => { - setMessage(''); - setIsError(false); + const validEmail = (e: string) => e !== '' && isEmail(e); - const { success, message } = await signInUser(email, password); + const handleSignIn = async (e: React.FormEvent) => { + e.preventDefault(); + setEmailError(''); + setPasswordError(''); + setErrorMessage(''); - setMessage(message); - setIsError(!success); + let hasError = false; + if (!email) { + setEmailError('Email is required'); + hasError = true; + } else if (!validEmail(email)) { + setEmailError('Invalid email'); + hasError = true; + } - if (success) { - router.push('/discover'); + if (!password) { + setPasswordError('Password is required'); + hasError = true; } + + if (hasError) return; + + setIsLoggingIn(true); + + const { success, message } = await signInUser(email, password); + + if (!success) { + setErrorMessage(message); + setIsLoggingIn(false); + return; + } + + // Navigate on success + setErrorMessage(''); + router.push('/discover'); + setIsLoggingIn(false); }; return ( -
+
Login
- {/* Show error or success message */} - {message && ( - - {message} - + {errorMessage && ( + {errorMessage} )} @@ -70,6 +96,15 @@ export default function SignIn() { value={email} aria-label="Email" /> + {emailError && ( + + {emailError} + + )}
@@ -84,20 +119,28 @@ export default function SignIn() { value={password} aria-label="Password" /> + {passwordError && ( + + {password} + + )}
- {/* Forgot Password Link */} - + Forgot Password? - + - {/* Submit Button */} - +
- {/* Footer */}
Don’t have an account? Sign up!
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx index f600f19..08a6f01 100644 --- a/app/(auth)/signup/page.tsx +++ b/app/(auth)/signup/page.tsx @@ -9,13 +9,13 @@ import { Button, Card, Container, + ErrorMessage, Fields, Footer, Form, Input, Label, Link, - LoginMessage, Logo, TitleUnderline, } from '../auth-styles'; @@ -56,7 +56,7 @@ export default function SignUp() {
Sign Up
- {message && {message}} + {message && {message}}
diff --git a/app/availability/page.tsx b/app/availability/calendar/page.tsx similarity index 100% rename from app/availability/page.tsx rename to app/availability/calendar/page.tsx diff --git a/app/availability/styles.ts b/app/availability/calendar/styles.ts similarity index 97% rename from app/availability/styles.ts rename to app/availability/calendar/styles.ts index 4a360c9..86386f6 100644 --- a/app/availability/styles.ts +++ b/app/availability/calendar/styles.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import COLORS from '../../styles/colors'; +import COLORS from '@/styles/colors'; export const Container = styled.div` width: 500px; diff --git a/app/availability/general/styles.ts b/app/availability/general/styles.ts index e219b00..687bcdd 100644 --- a/app/availability/general/styles.ts +++ b/app/availability/general/styles.ts @@ -10,15 +10,22 @@ export const Page = styled.main<{ $menuExpanded: boolean }>` min-height: 100vh; justify-content: center; overflow: hidden; - margin-left: ${({ $menuExpanded }) => - $menuExpanded ? '10%' : '0'}; /* Fixed margin for the expanded menu */ - transition: margin-left 0.3s ease; /* Smooth transition */ + + @media (min-width: 1024px) { + margin-left: ${({ $menuExpanded }) => + $menuExpanded ? '10%' : '0'}; /* Fixed margin for the expanded menu */ + transition: margin-left 0.3s ease; /* Smooth transition */ + } `; export const AllAvailabilitiesHolder = styled.main` display: flex; width: 28.75%; flex-direction: column; + + @media (max-width: 900px) { + width: 80%; + } `; export const TitleContainer = styled.main` diff --git a/app/discover/page.tsx b/app/discover/page.tsx index a5a37de..a7d5592 100644 --- a/app/discover/page.tsx +++ b/app/discover/page.tsx @@ -7,32 +7,17 @@ import MenuBar from '@/components/MenuBar/MenuBar'; import { H6, SMALL } from '@/styles/text'; import { Event } from '@/types/schema'; import { - Container, Discover, + DiscoverHolder, EventListingDiv, + Page, SearchBar, TitleBar, } from './styles'; -// function MenuBar() { -// return ( -// -// -// -// ); -// } - export default function ActiveEventsPage() { const [events, setEvents] = useState([]); + const [menuExpanded, setMenuExpanded] = useState(false); // Track the expanded state of the menu useEffect(() => { const getActiveEvents = async () => { @@ -44,26 +29,28 @@ export default function ActiveEventsPage() { return (
- - - Discover - - Search... - - -
Near You
- show all - - - {events.map(event => ( - - ))} - - + + + + Discover + + Search... + + +
Near You
+ show all + + + {events.map(event => ( + + ))} + + +
); } diff --git a/app/discover/styles.ts b/app/discover/styles.ts index 632c468..5e6be37 100644 --- a/app/discover/styles.ts +++ b/app/discover/styles.ts @@ -30,10 +30,23 @@ export const TitleBar = styled.div` margin-bottom: 0.25rem; `; -export const Container = styled.div` - flex-direction: column; +export const Page = styled.main<{ $menuExpanded: boolean }>` + display: flex; + min-width: 90%; + min-height: 100vh; + justify-content: center; overflow: hidden; - padding: 3rem; + margin-left: ${({ $menuExpanded }) => + $menuExpanded ? '15%' : '0px'}; /* Adjust margin based on menu expansion */ + transition: margin-left 0.3s ease; /* Smooth transition for menu toggle */ +`; + +export const DiscoverHolder = styled.main` + display: flex; + flex-direction: column; + width: 80%; + padding: 2rem; + box-sizing: border-box; `; export const Discover = styled(H3)` diff --git a/app/events/page.tsx b/app/events/page.tsx index ce5c6f9..913de8f 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -14,6 +14,7 @@ type GroupedEvents = { export default function EventPage() { const [data, setData] = useState([]); + const [menuExpanded, setMenuExpanded] = useState(false); // Track the expanded state of the menu useEffect(() => { fetchAcceptedEventsByVolunteer('11d219d9-bf05-4a06-a23e-89fd566c7a04').then( @@ -61,11 +62,11 @@ export default function EventPage() { return (
- - + + - Upcoming Events + My Events {sortedEntries.map(([month, events]) => (
diff --git a/app/events/styles.ts b/app/events/styles.ts index 914c0d3..8a71e3d 100644 --- a/app/events/styles.ts +++ b/app/events/styles.ts @@ -10,24 +10,33 @@ export const MenuImage = styled(NextImage)` margin: 1rem; `; -export const Page = styled.main` - flex-direction: column; +export const Page = styled.main<{ $menuExpanded: boolean }>` + display: flex; min-width: 100%; - min-height: 100svh; + min-height: 100vh; + justify-content: center; overflow: hidden; - padding: 2rem; + + @media (min-width: 1024px) { + margin-left: ${({ $menuExpanded }) => + $menuExpanded ? '10%' : '0'}; /* Fixed margin for the expanded menu */ + transition: margin-left 0.3s ease; /* Smooth transition */ + } `; export const AllEventsHolder = styled.main` - padding-left: 1.5rem; - padding-right: 1.5rem; display: flex; + width: 28.75%; flex-direction: column; - gap: 1.5rem; + + @media (max-width: 900px) { + width: 80%; + } `; export const Title = styled(H3)` - margin-top: 2rem; + margin-top: 4rem; + margin-bottom: 2rem; font-style: normal; line-height: normal; `; diff --git a/app/onboarding/additional-info/page.tsx b/app/onboarding/additional-info/page.tsx index a6250d6..dcdb1ab 100644 --- a/app/onboarding/additional-info/page.tsx +++ b/app/onboarding/additional-info/page.tsx @@ -83,7 +83,7 @@ export default function Onboarding() { skip - diff --git a/app/onboarding/basic-information/page.tsx b/app/onboarding/basic-information/page.tsx index 0fa5650..67eab65 100644 --- a/app/onboarding/basic-information/page.tsx +++ b/app/onboarding/basic-information/page.tsx @@ -114,6 +114,7 @@ export default function Onboarding() { diff --git a/app/onboarding/review/page.tsx b/app/onboarding/review/page.tsx index 602ac7c..8ebc357 100644 --- a/app/onboarding/review/page.tsx +++ b/app/onboarding/review/page.tsx @@ -88,7 +88,7 @@ export default function Review() { - diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts index 659830e..98d97e9 100644 --- a/app/onboarding/styles.ts +++ b/app/onboarding/styles.ts @@ -92,6 +92,17 @@ export const Container = styled.main` } `; +export const RoleContainer = styled.main` + display: flex; + flex-direction: column; + align-items: start; + margin: 42px 0px; + justify-content: space-between; + border-radius: 8px; + gap: 16px; + height: 100%; +`; + export const Input = styled.input` font-family: ${Sans.style.fontFamily}; padding: 0.5rem; @@ -144,10 +155,13 @@ export const ButtonContainer = styled.div` width: 100%; `; -export const Button = styled.button<{ disabled?: boolean }>` - position: fixed; +export const Button = styled.button<{ + disabled?: boolean; + position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'; +}>` + position: ${({ position = 'fixed' }) => position}; bottom: 70px; - width: 30%; + width: ${({ position }) => (position === 'fixed' ? '30%' : '100%')}; height: 2.75rem; background-color: ${({ disabled }) => disabled ? COLORS.pomegranate10 : COLORS.pomegranate12}; diff --git a/components/MenuBar/MenuBar.tsx b/components/MenuBar/MenuBar.tsx index aad6b6e..1cd98f5 100644 --- a/components/MenuBar/MenuBar.tsx +++ b/components/MenuBar/MenuBar.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { useRouter } from 'next/navigation'; import Availability from '@/public/images/availabilities.svg'; +import Discover from '@/public/images/discover.svg'; import Settings from '@/public/images/settings.svg'; import Events from '@/public/images/upcoming-events.svg'; import { @@ -52,7 +53,18 @@ const MenuBar: React.FC<{ setMenuExpanded?: (expanded: boolean) => void }> = ({ <> handleClick('availabilities', 'discover')} + onClick={() => handleClick('discover', '/discover')} + > + + + Discover + + + + handleClick('availabilities', '/availability/general') + } > void }> = ({ > - Upcoming Events + My Events ) => void; + shape?: 'circle' | 'square'; +} + +const RoleSelector: React.FC = ({ + isSelected, + name, + title, + description, + iconSrc, + onChange, + shape = 'square', +}) => { + return ( + + + + +
{title}
+ {description} + + + + + ); +}; + +export default RoleSelector; diff --git a/components/RoleSelector/styles.ts b/components/RoleSelector/styles.ts new file mode 100644 index 0000000..d0c61c6 --- /dev/null +++ b/components/RoleSelector/styles.ts @@ -0,0 +1,77 @@ +'use client'; + +import Image from 'next/image'; +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; + +export const BoxContainer = styled.div<{ isSelected: boolean }>` + display: flex; + padding: 12px 16px; + align-items: center; + justify-content: space-between; + gap: 16px; + width: 100%; + border-radius: 8px; + border: 1px solid + ${({ isSelected }) => (isSelected ? COLORS.rose10 : COLORS.gray6)}; + background: ${({ isSelected }) => + isSelected ? COLORS['bread1.5'] : COLORS.bread2}; + transition: all 0.3s ease; + + ${({ isSelected }) => + isSelected && + ` + box-shadow: 0px 0px 8px 0px rgba(227, 66, 66, 0.25); = + `} +`; + +export const RoleContainer = styled.div` + display: flex; + flex-direction: row; + height: 100%; + align-items: center; + gap: 15px; +`; + +export const TextContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; +`; + +export const Container = styled.main` + display: flex; + flex-direction: column; + align-items: start; + margin: 42px 0px; + justify-content: space-between; + border-radius: 8px; + gap: 16px; + height: 100%; +`; + +export const Icon = styled(Image)` + width: 30px; + height: 30px; + display: block; + object-fit: contain; +`; + +interface CheckboxProps { + shape?: 'circle' | 'square'; +} + +export const Checkbox = styled.input.attrs({ type: 'checkbox' })` + width: 20px; + height: 20px; + border: 2px solid ${COLORS.rose10}; + border-radius: ${({ shape }) => (shape === 'circle' ? '50%' : '4px')}; + appearance: none; + outline: none; + cursor: pointer; + + &:checked { + background-color: ${COLORS.rose10}; + border-color: ${COLORS.rose10}; + } +`; diff --git a/package.json b/package.json index 4eb62c5..9ef9bcd 100644 --- a/package.json +++ b/package.json @@ -31,13 +31,15 @@ "react": "^18", "react-dom": "^18", "react-select": "^5.8.3", - "styled-components": "^6.1.13" + "styled-components": "^6.1.13", + "validator": "^13.12.0" }, "devDependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.3.1", "@types/node": "^20.16.5", "@types/react": "^18.3.5", "@types/react-dom": "^18.3.0", + "@types/validator": "^13.12.2", "eslint": "^8", "eslint-config-next": "14.2.8", "eslint-config-prettier": "^9.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cdfc39f..3add9d5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,6 +62,9 @@ importers: styled-components: specifier: ^6.1.13 version: 6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + validator: + specifier: ^13.12.0 + version: 13.12.0 devDependencies: '@ianvs/prettier-plugin-sort-imports': specifier: ^4.3.1 @@ -75,6 +78,9 @@ importers: '@types/react-dom': specifier: ^18.3.0 version: 18.3.0 + '@types/validator': + specifier: ^13.12.2 + version: 13.12.2 eslint: specifier: ^8 version: 8.57.0 @@ -778,6 +784,9 @@ packages: '@types/stylis@4.2.5': resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} + '@types/validator@13.12.2': + resolution: {integrity: sha512-6SlHBzUW8Jhf3liqrGGXyTJSIFe4nqlJ5A5KaMZ2l/vbM3Wh3KSybots/wfWVzNLK4D1NZluDlSQIbIEPx6oyA==} + '@types/ws@8.5.12': resolution: {integrity: sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==} @@ -2244,6 +2253,10 @@ packages: '@types/react': optional: true + validator@13.12.0: + resolution: {integrity: sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==} + engines: {node: '>= 0.10'} + webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} @@ -3016,6 +3029,8 @@ snapshots: '@types/stylis@4.2.5': {} + '@types/validator@13.12.2': {} + '@types/ws@8.5.12': dependencies: '@types/node': 20.16.5 @@ -3578,7 +3593,7 @@ snapshots: debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.0 - eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.2.1 @@ -3591,7 +3606,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: @@ -3613,7 +3628,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -4744,6 +4759,8 @@ snapshots: optionalDependencies: '@types/react': 18.3.5 + validator@13.12.0: {} + webidl-conversions@3.0.1: {} whatwg-url@5.0.0: diff --git a/public/images/discover.svg b/public/images/discover.svg new file mode 100644 index 0000000..6641321 --- /dev/null +++ b/public/images/discover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/styles/colors.ts b/styles/colors.ts index 0f9b245..c2bcd25 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -1,5 +1,6 @@ const COLORS = { bread1: '#FEFDFC', + 'bread1.5': 'FCFCFC', bread2: '#F5F5F3', bread3: '#EBE8DE', bread4: '#EDE6D5', From 42f8ef10d345ded66fc9b2d581b3ea656c549a72 Mon Sep 17 00:00:00 2001 From: aidenm1 <65800707+aidenm1@users.noreply.github.com> Date: Mon, 30 Dec 2024 00:31:14 -0800 Subject: [PATCH 4/4] created desktop view for specific event in myevents page (#41) --- app/events/[event_id]/page.tsx | 341 +++++++++++++++++-------------- app/events/[event_id]/styles.ts | 73 +++++-- components/MyEventCard/styles.ts | 2 +- 3 files changed, 249 insertions(+), 167 deletions(-) diff --git a/app/events/[event_id]/page.tsx b/app/events/[event_id]/page.tsx index b22c80b..b0eba0d 100644 --- a/app/events/[event_id]/page.tsx +++ b/app/events/[event_id]/page.tsx @@ -12,6 +12,7 @@ import { fetchFacilityContactByID, } from '@/api/supabase/queries/facilities'; import { fetchPerformer } from '@/api/supabase/queries/volunteers'; +import Back from '@/public/images/back.svg'; import LocPin from '@/public/images/black_loc_pin.svg'; import BPLogo from '@/public/images/bp-logo.png'; import Calendar from '@/public/images/calendar_icon.svg'; @@ -19,7 +20,6 @@ import FacilityContactPin from '@/public/images/facility_contact_icon.svg'; import HostPin from '@/public/images/host_icon.svg'; import ProducerIcon from '@/public/images/producer_icon.svg'; import PerformerPin from '@/public/images/volunteer_performer_icon.svg'; -import WhiteBack from '@/public/images/white_back.svg'; import COLORS from '@/styles/colors'; import { Event, @@ -38,6 +38,7 @@ export default function EventDisplay({ const [event, setEvent] = useState(); const [facility, setFacility] = useState(); const [facility_contact, setFacilityContact] = useState(); + const [host_email, setHostEmail] = useState(); const [host_name, setHostName] = useState(); const [host_phone_number, setHostPhoneNumber] = useState(); const [performer, setPerformer] = useState(); @@ -56,9 +57,11 @@ export default function EventDisplay({ if (fetchedEvent.needs_host) { const host: Volunteers = await fetchEventHostByID(params.event_id); + setHostEmail(host.email); setHostName(`${host.first_name} ${host.last_name}`); setHostPhoneNumber(host.phone_number); } else { + setHostEmail('email column needs to be added to facility table'); setHostName(fetchedFacility.host_name); setHostPhoneNumber(fetchedFacility.host_contact); } @@ -81,7 +84,6 @@ export default function EventDisplay({ new Date(event.end_date_time), true, ); - const location = facility.street_address_1 + ', ' + facility.city; return ( @@ -89,192 +91,227 @@ export default function EventDisplay({ - - - - - Event Title Here - - - - - {time} - - - - - + + + + + + Event Title Here + + + - {facility.name} + {time} - - {location} - - - - - - Notes - -
- - Notes from the facility - - - Facility notes go here - -
-
- - Notes from the producer - - - {event.notes} - -
- - - - Contacts - - - - + + + + - {facility_contact.first_name} {facility_contact.last_name} - - - Facility Contact - - - {facility_contact.phone_number} - - - - - - - - {host_name} + {facility.name} - - Event Host - - {/* Should this be fixed, or should it changed based on needs_host? */} - - {host_phone_number} - - - - - - + {facility.street_address_1} +
+ {facility.city} + + + + + + Notes + +
- {performer.first_name} {performer.last_name} + Facility Notes - - Volunteer Performer - - {/* Should this be fixed, or should it changed based on needs_host? */} - - {performer.phone_number} - - - - - - + Facility notes go here + +
+
- Producer Name + Producer Notes - - Show Producer - - {/* Should this be fixed, or should it changed based on needs_host? */} - - Producer Number - - - - + {event.notes} + +
+ + + + + + Contacts + + + + + + {facility_contact.first_name} {facility_contact.last_name} + + + Facility Contact + + + {facility_contact.email} + + + {facility_contact.phone_number} + + + + + + + + {host_name} + + + Event Host + + + {host_email} + + + {host_phone_number} + + + + + + + + {performer.first_name} {performer.last_name} + + + Volunteer Performer + + + {performer.email} + + + {performer.phone_number} + + + + + + + + Producer Name + + + Show Producer + + + producer@email.com + + + 800-867-5309 + + + + + ); diff --git a/app/events/[event_id]/styles.ts b/app/events/[event_id]/styles.ts index 36315b2..8f66d11 100644 --- a/app/events/[event_id]/styles.ts +++ b/app/events/[event_id]/styles.ts @@ -6,12 +6,10 @@ import COLORS from '@/styles/colors'; import { H4, H5, P, SMALL } from '@/styles/text'; export const BackImage = styled(NextImage)` - position: absolute; - top: 0; - left: 0; width: 1.5rem; height: 1.5rem; - margin: 1rem; + z-index: 3; + margin-top: 1.5rem; `; export const ImageWrapper = styled.div` @@ -34,6 +32,7 @@ export const GradientOverlay = styled.div` left: 0; width: 100%; height: 100%; + z-index: 1; background: linear-gradient( 0deg, rgba(0, 0, 0, 0.35) 0%, @@ -43,35 +42,64 @@ export const GradientOverlay = styled.div` export const Page = styled.div` flex-direction: column; + display: flex; min-width: 100%; min-height: 100svh; overflow: hidden; - margin-bottom: 3.75rem; + @media (max-width: 768px) { + margin-bottom: 3.75rem; + } +`; + +export const LeftWrapper = styled.div` + @media (min-width: 768px) { + width: 50%; + } +`; + +export const RightWrapper = styled.div` + @media (min-width: 768px) { + padding-left: 3.875rem; + display: flex; + flex-direction: column; + align-items: flex-end; + border-left: 1px solid ${COLORS.gray6}; + } `; export const Container = styled.div` - padding-left: 1.75rem; - padding-right: 1.75rem; display: flex; - flex-direction: column; + @media (max-width: 768px) { + flex-direction: column; + margin-left: 1.75rem; + margin-right: 1.75rem; + } + @media (min-width: 768px) { + margin-left: 9.1875rem; + margin-right: 5.1875rem; + } + justify-content: space-between; `; export const Curve = styled.div` - z-index: 10; + z-index: 2; margin: -1.5rem 0; position: relative; padding: 0.75rem 2rem 1rem 2rem; display: flex; flex-direction: column; - border-radius: 20px 20px 0 0; + @media (max-width: 768px) { + border-radius: 20px 20px 0 0; + } background: ${COLORS.gray1}; `; export const EventText = styled(H4)` font-style: normal; line-height: normal; - margin-top: 1.5rem; - margin-bottom: 0.5rem; + margin-top: 1rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid ${COLORS.gray6}; `; export const CalLocPin = styled(NextImage)` @@ -85,6 +113,7 @@ export const DateLocation = styled.div` display: flex; align-items: flex-start; justify-content: left; + margin-top: 1rem; `; export const ParaText = styled(P)` @@ -100,9 +129,16 @@ export const LocationDetails = styled.div` `; export const SubHeadingText = styled(H5)` - padding-top: 2.5rem; + margin-top: 3rem; border-bottom: 1px solid ${COLORS.gray6}; - padding-bottom: 0.25rem; + margin-bottom: 0.25rem; +`; + +export const ContactsSubHeadingText = styled(SubHeadingText)` + @media (min-width: 768px) { + padding-right: 13rem; + margin-top: 5rem; + } `; export const AllNotesAndContactsContainer = styled.div` @@ -134,3 +170,12 @@ export const ContactTypeText = styled(SMALL)` export const PhoneNumberText = styled(P)` padding-top: 0.125rem; `; + +export const EmailText = styled(P)` + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-skip-ink: none; + text-decoration-thickness: auto; + text-underline-offset: auto; + text-underline-position: from-font; +`; diff --git a/components/MyEventCard/styles.ts b/components/MyEventCard/styles.ts index 28e278a..d974dfc 100644 --- a/components/MyEventCard/styles.ts +++ b/components/MyEventCard/styles.ts @@ -7,7 +7,7 @@ import { P, SMALLER } from '@/styles/text'; export const EventImage = styled(NextImage)` width: 20%; - height: 90%; + height: auto; `; export const EventContainer = styled.main`