Merge pull request #86 from chingu-voyages/css/views

CSS: Views (Except Dashboard)

client/app/admin-dashboard/page.jsx

@@ -1,8 +1,8 @@
 import { Suspense } from "react";
-import { CircularProgress, Typography, Box } from "@mui/material";
-import { spacing } from "@mui/system";
+import { Typography, Box } from "@mui/material";
 import ReservationTable from "../../components/admin_dashboard/ReservationTable";
 import Map from "../../components/admin_dashboard/Map";
+import Spinner from "@/components/Spinner";
 import { fetchAppointments } from "@/actions/form";
 
 async function Dashboard() {
@@ -22,7 +22,7 @@ export default async function AdminDashboardView() {
   return (
     <div>
       <Typography variant="h1">Reservations:</Typography>
-      <Suspense fallback={<CircularProgress />}>
+      <Suspense fallback={<Spinner />}>
         <Dashboard />
       </Suspense>
     </div>

client/app/globals.css

@@ -4,6 +4,7 @@
 
 :root {
   --background: #ffffff;
+  --background-accent: #f9f9f9;
   --foreground: #171717;
   --branding: #eab308;
   --branding-dark: #e89900;

client/app/layout.js

@@ -3,6 +3,7 @@ import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
 import { Container, Stack } from "@mui/material";
 import { StyledRoot } from "./StyledRoot";
 import Header from "@/components/layout/Header";
+import Splash from "@/components/landing/Splash";
 import Footer from "@/components/layout/Footer";
 
 export const metadata = {
@@ -18,6 +19,7 @@ export default function RootLayout({ children }) {
           <StyledRoot>
             <Stack className="min-h-[calc(100vh-var(--footer-height))]">
               <Header />
+              <Splash />
               <Container
                 component="main"
                 maxWidth="xl"

client/app/my-appointments/page.jsx

@@ -4,6 +4,7 @@ import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/auth";
 import MyAppointment from "@/components/appointment/MyAppointment";
+import Spinner from "@/components/Spinner";
 
 export default async function MyAppointmentView() {
   const session = await getServerSession(authOptions);
@@ -40,7 +41,7 @@ export default async function MyAppointmentView() {
           </Stack>
         </Stack>
 
-        <Suspense fallback={<p>Loading...</p>}>
+        <Suspense fallback={<Spinner />}>
           <MyAppointment email={session.user.email} />
         </Suspense>
       </Stack>

client/app/new-appointment/page.jsx

@@ -1,16 +1,33 @@
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/auth";
 import Form from "@/components/form/Form";
+import { Box, Stack, Typography } from "@mui/material";
 
 export default async function FormView() {
   const session = await getServerSession(authOptions);
   if (!session) {
     return <p>You must be signed in to make an appointment</p>;
   }
   return (
-    <div>
-      <h1>Form View</h1>
-      <Form email={session.user.email} />
-    </div>
+    <Box
+      sx={{
+        width: { xs: 1, sm: 4 / 5, md: 3 / 4, lg: 3 / 5 },
+        marginY: { xs: 2, lg: 4 },
+        marginX: "auto",
+      }}
+    >
+      <Stack direction="column">
+        <Stack gap={2}>
+          <Typography
+            component="h1"
+            variant="h1"
+            sx={{ fontSize: { xs: "2rem", sm: "2.5rem", md: "3rem" } }}
+          >
+            Request Service
+          </Typography>
+        </Stack>
+        <Form email={session.user.email} />
+      </Stack>
+    </Box>
   );
 }

client/app/page.js

@@ -1,79 +1,25 @@
-"use client"
-
-import { Stack, Typography } from "@mui/material/";
-import AutoFixHighRoundedIcon from "@mui/icons-material/AutoFixHighRounded";
-import ConstructionRoundedIcon from "@mui/icons-material/ConstructionRounded";
-import ThumbUpAltRoundedIcon from "@mui/icons-material/ThumbUpAltRounded";
-
-//left side page content
-const items = [
-  {
-    icon: <ConstructionRoundedIcon sx={{ color: "#1565c0" }} />,
-    title: "Premium Quality Craftsmanship",
-    description: "Experience unmatched durability and a long lasting product.",
-  },
-  {
-    icon: <ThumbUpAltRoundedIcon sx={{ color: "#1565c0" }} />,
-    title: "Save Energy and Money",
-    description:
-      "Lower your carbon footprint and electric bill by harnessing the power of the sun!",
-  },
-  {
-    icon: <AutoFixHighRoundedIcon sx={{ color: "#1565c0" }} />,
-    title: "Have Independence",
-    description: "Keep the lights on even when the grid goes dark.",
-  },
-];
+import { Button, Stack, Typography } from "@mui/material";
+import SiteInfo from "@/components/landing/SiteInfo";
+import NewAppointment from "@/components/appointment/NewAppointment";
 
 export default function LandingView() {
   return (
-    <div>
-      <Stack
-        direction="column"
-        component="main"
-        sx={[
-          {
-            height: "calc((1 - var(--template-frame-height, 0)) * 100%)",
-            marginTop: "max(40px - var(--template-frame-height, 0px), 0px)",
-            minHeight: "100%",
-          },
-        ]}
-      >
-        <Stack
-          direction={{ xs: "column-reverse", md: "row" }}
-          sx={{
-            justifyContent: "center",
-            gap: { xs: 6, sm: 12 },
-            p: { xs: 2, sm: 5 },
-          }}
-        >
-          <Stack
-            sx={{
-              flexDirection: "column",
-              alignSelf: "center",
-              gap: 4,
-            }}
-          >
-            <Typography variant="h1">
-              <Typography variant="h1" component="span" color={theme => theme.palette.branding} >Ray</Typography>Volution
-            </Typography>
-            {items.map((item, index) => (
-              <Stack key={index} direction="row" sx={{ gap: 1 }}>
-                {item.icon}
-                <div>
-                  <Typography gutterBottom sx={{ fontWeight: "medium" }}>
-                    {item.title}
-                  </Typography>
-                  <Typography variant="body2" sx={{ color: "text.secondary" }}>
-                    {item.description}
-                  </Typography>
-                </div>
-              </Stack>
-            ))}
-          </Stack>
-        </Stack>
+    <Stack
+      gap={4}
+      sx={{
+        width: { xs: 19 / 20, md: 3 / 4 },
+        marginY: { xs: 4, lg: 8 },
+        marginX: { xs: "auto", lg: 4, xl: 0 },
+      }}
+    >
+      <SiteInfo />
+      <Stack>
+        <Typography>
+          <span className="text-branding">Ready to make an appointment?</span>{" "}
+          Please click the button below.
+        </Typography>
+        <NewAppointment />
       </Stack>
-    </div>
+    </Stack>
   );
 }
-

client/app/signIn/page.jsx

@@ -1,7 +1,19 @@
-import SignInCard from "@/components/signInCard";
+import { Stack } from "@mui/material";
+import SiteInfo from "@/components/landing/SiteInfo";
+import Auth from "@/components/landing/Auth";
 
 export default function signIn() {
-    return (
-        <SignInCard />
-    );
-}
+  return (
+    <Stack
+      gap={4}
+      sx={{
+        width: { xs: 19 / 20, md: 3 / 4 },
+        marginY: { xs: 4, lg: 8 },
+        marginX: { xs: "auto", lg: 4, xl: 0 },
+      }}
+    >
+      <SiteInfo />
+      <Auth />
+    </Stack>
+  );
+}

client/components/Spinner.jsx

@@ -0,0 +1,9 @@
+import { Box, CircularProgress } from "@mui/material";
+
+export default function Spinner() {
+  return (
+    <Box sx={{ marginTop: 12, marginX: "auto" }}>
+      <CircularProgress sx={{ color: "var(--branding)" }} />
+    </Box>
+  );
+}

client/components/appointment/NewAppointment.jsx

@@ -7,7 +7,7 @@ export default function NewAppointment() {
     redirect("/new-appointment");
   }
   return (
-    <Button onClick={handleClick} sx={{ width: "fit-content" }}>
+    <Button onClick={handleClick} sx={{ width: "fit-content", marginY: 2 }}>
       + New Appointment
     </Button>
   );

client/components/form/Form.jsx

@@ -64,7 +64,7 @@ export default function Form({ email }) {
   const [isPending, setIsPending] = useState(false);
 
   function handleCancel() {
-    router.push("/new-appointment/cancel");
+    router.push("/");
   }
 
   async function handleSubmit(e) {
@@ -119,10 +119,7 @@ export default function Form({ email }) {
         toastMsg={toastMsg}
         setToastMsg={setToastMsg}
       />
-      <Stack
-        gap={2}
-        sx={{ width: { xs: 1, md: 1 / 2 }, marginX: "auto", marginY: 8 }}
-      >
+      <Stack gap={2} sx={{ width: { xs: 1 }, marginX: "auto", marginY: 8 }}>
         <Box>
           <Typography color="textSecondary">Email: {email}</Typography>
         </Box>

client/components/landing/Auth.jsx

@@ -0,0 +1,14 @@
+import { Stack, Typography } from "@mui/material";
+import SignIn from "./SignIn";
+
+export default function () {
+  return (
+    <Stack gap={4} sx={{ marginY: 4 }}>
+      <Typography>
+        <span className="text-branding">Ready to learn more?</span> Please sign
+        in with your Google account to get started.
+      </Typography>
+      <SignIn />
+    </Stack>
+  );
+}

client/components/landing/SignIn.jsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Button } from "@mui/material/";
+import GoogleIcon from "@mui/icons-material/Google";
+import { signIn } from "next-auth/react";
+
+export default function SignIn() {
+  const handleSubmit = () => {
+    signIn("google");
+  };
+
+  return (
+    <Button
+      size="large"
+      variant="outlined"
+      startIcon={<GoogleIcon sx={{ color: "var(--branding)" }} />}
+      sx={{
+        color: "var(--accent)",
+        borderColor: "var(--accent)",
+        borderRadius: 2,
+        width: { xs: 1, lg: 300 },
+      }}
+      onClick={handleSubmit}
+    >
+      Sign in with Google
+    </Button>
+  );
+}