diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx index 9011719..08a6f01 100644 --- a/app/(auth)/signup/page.tsx +++ b/app/(auth)/signup/page.tsx @@ -44,7 +44,7 @@ export default function SignUp() { setIsError(!success); if (success) { - router.push('/onboarding/volunteer-role-selection'); + router.push('/onboarding/role-selection'); } }; 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 e73ef47..67eab65 100644 --- a/app/onboarding/basic-information/page.tsx +++ b/app/onboarding/basic-information/page.tsx @@ -52,7 +52,7 @@ export default function Onboarding() { }; const handleBack = () => { - router.push('/onboarding/volunteer-role-selection'); + router.push('/onboarding/role-selection'); }; return ( @@ -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 3cbf76a..98d97e9 100644 --- a/app/onboarding/styles.ts +++ b/app/onboarding/styles.ts @@ -155,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 + + +