Merge pull request #6 from jacksors/itinerary-styling

itinerary styling
jacksors · Jan 28, 2024 · db027eb · db027eb
2 parents b2df174 + 296d113
commit db027eb
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 35 deletions.
diff --git a/components/itinerary/flightadd.tsx b/components/itinerary/flightadd.tsx
@@ -58,15 +58,16 @@ export function FlightAdd({airports, setFlightCallback, deleteCallback}: Props)
     }
 
     return (
-        <div className={'m-2'}>
+        <div className={'flex flex-row flex-wrap'}>
             <Card className={'flex flex-col justify-center items-center p-4 bg-secondary'}>
-                <div className={'grid grid-cols-3 items-center justify-items-center mb-2 w-full'}>
-                    <Button className='p-2 bg-red-500 shadow' onClick={deleteThis}>
+                <div className={'flex flex-row items-center justify-center mb-2 w-full'}>
+                    <div className='w-1/6 '> </div>
+                    <h2 className={'text-xl text-center w-2/3'}>Date</h2>
+                    <Button className='w-1/6 bg-destructive' onClick={deleteThis}>
                         <span className="material-symbols-outlined">
                             close
                         </span>
                     </Button>
-                    <h2 className={'text-xl'}>Date</h2>
                 </div>
                 <Calendar
                     mode="single"
@@ -75,7 +76,7 @@ export function FlightAdd({airports, setFlightCallback, deleteCallback}: Props)
                     className={'rounded-md border shadow bg-blue-900 bg-background drop-shadow-md'}
 
                 />
-                <h2 className={'text-xl mt-4'}>Origin airport</h2>
+                <h2 className={'text-xl mt-4 pb-2'}>Origin airport</h2>
                 <Popover open={originOpen} onOpenChange={setOriginOpen}>
                     <PopoverTrigger asChild>
                         <Button
@@ -111,7 +112,7 @@ export function FlightAdd({airports, setFlightCallback, deleteCallback}: Props)
                         </Command>
                     </PopoverContent>
                 </Popover>
-                <h2 className={'text-xl mt-4'}>Destination airport</h2>
+                <h2 className={'text-xl mt-4 pb-2'}>Destination airport</h2>
                 <Popover open={destinationOpen} onOpenChange={setDestinationOpen}>
                     <PopoverTrigger asChild>
                         <Button

diff --git a/components/itinerary/itinerarycard.tsx b/components/itinerary/itinerarycard.tsx
@@ -23,6 +23,8 @@ export interface Props {
                 }
             }
         }[]
+        social: boolean,
+        reviews: boolean
     };
 }
 
@@ -96,18 +98,20 @@ export const ItineraryCard = (props: Props) => {
     const { departTime, arriveTime } = findEarliestLatestTimes(props.itinerary);
 
     return (
-        <Card className="flex flex-col m-8">
-            <div className="flex flex-row">
-                <span className="material-symbols-outlined">
-                    flight_takeoff
-                </span>
-                <p>{initialOrigin} - {departTime?.toDateString()}</p>
+        <Card className="flex flex-col md:flex-row gap-10 h-fit md:h-36 py-12 w-full justify-around items-center bg-secondary hover:scale-105 transition-transform cursor-pointer">
+            <div className="flex flex-col items-center">
+                <div className='fill-foreground w-16'>
+                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"  viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M2.5,19h19v2h-19V19z M22.07,9.64c-0.21-0.8-1.04-1.28-1.84-1.06L14.92,10l-6.9-6.43L6.09,4.08l4.14,7.17l-4.97,1.33 l-1.97-1.54l-1.45,0.39l2.59,4.49c0,0,7.12-1.9,16.57-4.43C21.81,11.26,22.28,10.44,22.07,9.64z"/></g></g></g></svg>
+                </div>
+                <p className='text-3xl'>{initialOrigin}</p>
+                <p>{departTime?.toDateString()}</p>
             </div>
-            <div className="flex flex-row">
-                <span className="material-symbols-outlined">
-                    flight_land
-                </span>
-                <p>{finalDestination} - {arriveTime?.toDateString()}</p>
+            <div className="flex flex-col items-center">
+                <div className='fill-foreground w-16'>
+                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M2.5,19h19v2h-19V19z M19.34,15.85c0.8,0.21,1.62-0.26,1.84-1.06c0.21-0.8-0.26-1.62-1.06-1.84l-5.31-1.42l-2.76-9.02 L10.12,2v8.28L5.15,8.95L4.22,6.63L2.77,6.24v5.17L19.34,15.85z"/></g></g></g></svg>
+                </div>
+                <p className='text-3xl'>{finalDestination}</p>
+                <p>{arriveTime?.toDateString()}</p>
             </div>
         </Card>
     );

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -3,6 +3,8 @@ import type { AppProps } from "next/app";
 import {UserProvider} from "@auth0/nextjs-auth0/client";
 import { ThemeProvider } from "next-themes";
 import {Inter} from "next/font/google";
+import { Main } from "next/document";
+import MainNav from "@/components/main-nav";
 const inter = Inter({ subsets: ["latin"] });
 
 export default function App({ Component, pageProps }: AppProps) {
@@ -15,6 +17,7 @@ export default function App({ Component, pageProps }: AppProps) {
             disableTransitionOnChange
           >
           <UserProvider>
+            <MainNav />
             <Component {...pageProps} />
           </UserProvider>
         </ThemeProvider>

diff --git a/pages/itineraries/create.tsx b/pages/itineraries/create.tsx
@@ -121,24 +121,28 @@ const Create = () => {
     }
 
     return (
-            <div className={'flex flex-col justify-center items-center m-4'}>
+            <div className={'flex flex-col justify-center items-center m-4 pt-20'}>
+                <div className={'flex flex-row flex-wrap justify-center items-center gap-5'}>
                 {routes.map((route, index) => (
                     <FlightAdd key={index} airports={airports} deleteCallback={deleteFlight(index)} setFlightCallback={updateFlightNoAndDates(index)} />
                 ))}
-                <Button
-                    className={'mt-4 bg-accent p-3 rounded'}
-                    onClick={() => {
-                        setRoutes([...routes, {originCode: '', destinationCode: ''}]);
-                        setFlightNoAndDates([...flightNoAndDates, {flightNo: '', date: new Date(), originCode: '', destinationCode: ''}]);
-                    }}
-                    >
-                    Add flight
-                </Button>
-                <Button
-                    className={'mt-4 bg-accent p-3 rounded'}
-                    onClick={onSubmit}>
-                    Submit
-                </Button>
+                </div>
+                <div className='flex flex-row bottom-5 fixed gap-5'>
+                    <Button
+                        className={'mt-4 shadow outline-accent outline bg-secondary text-foreground hover:bg-background p-3 rounded'}
+                        onClick={() => {
+                            setRoutes([...routes, {originCode: '', destinationCode: ''}]);
+                            setFlightNoAndDates([...flightNoAndDates, {flightNo: '', date: new Date(), originCode: '', destinationCode: ''}]);
+                        }}
+                        >
+                        Add flight
+                    </Button>
+                    <Button
+                        className={'mt-4 shadow outline-accent outline bg-foreground text-secondary p-3 rounded'}
+                        onClick={onSubmit}>
+                        Submit
+                    </Button>
+                </div>
             </div>
     );
 };

diff --git a/pages/itineraries/index.tsx b/pages/itineraries/index.tsx
@@ -41,12 +41,12 @@ const Index = () => {
 
 
     return (
-        <div className='flex flex-col justify-center items-center'>
-            <h1>Current itineraries</h1>
+        <div className='flex flex-col justify-center items-center gap-5 px-24 py-12 pt-24'>
+            <h1 className='text-3xl'>Current Itineraries</h1>
             {itineraries.map((itinerary, index) => {
                 return <ItineraryCard key={'itinerary-' + index} itinerary={itinerary} />
             })}
-            <Button><Link href='/itineraries/create'>Create new</Link></Button>
+            <Button className='fixed bottom-3'><Link href='/itineraries/create'>Create New Itinerary</Link></Button>
         </div>
     );
 };