updated success page to be responsive

Gaurav4604 · Sep 18, 2023 · 43f206b · 43f206b · vercel · Sep 18, 2023
1 parent f045808
commit 43f206b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 14 deletions.
diff --git a/Junior/newsletter-sign-up/src/app/ThemeRegistry.tsx b/Junior/newsletter-sign-up/src/app/ThemeRegistry.tsx
@@ -114,6 +114,12 @@ const theme = createTheme({
               bottom: "3rem",
               mb: "unset",
               width: "calc(100vw - 3rem)",
+              [theme.breakpoints.up("md")]: {
+                width: "100%",
+                position: "relative",
+                left: "unset",
+                bottom: "unset",
+              },
             },
             ":hover": {
               bgcolor: "transparent",
@@ -146,7 +152,7 @@ const theme = createTheme({
             position: "absolute",
             [theme.breakpoints.up("md")]: {
               minWidth: "30px",
-              top: "0.45rem",
+              top: "0.35rem",
             },
             "& .MuiAvatar-root": {
               height: "1.5rem",
@@ -219,11 +225,17 @@ const theme = createTheme({
                 mb: "3rem",
                 pt: "25vh",
                 height: "unset",
+                [theme.breakpoints.up("md")]: {
+                  pt: "unset",
+                  width: "4rem",
+                  mb: "1rem",
+                },
               },
               [theme.breakpoints.up("md")]: {
                 minHeight: "unset",
                 maxHeight: "768px",
                 maxWidth: "920px",
+                minWidth: 0,
                 overflow: "hidden",
                 position: "absolute",
                 left: "50%",
@@ -249,12 +261,30 @@ const theme = createTheme({
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "start",
-                justifyContent: "end",
                 height: "80%",
                 px: "3rem",
               },
             }),
         },
+        {
+          props: {
+            component: "main",
+            id: "success",
+          },
+          style: ({ theme }) =>
+            theme.unstable_sx({
+              px: "1.5rem",
+              [theme.breakpoints.up("md")]: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "start",
+                justifyContent: "center",
+                px: "3rem",
+                width: "25rem",
+                height: "30rem",
+              },
+            }),
+        },
       ],
     },
   },
@@ -268,7 +298,7 @@ theme.typography.h1 = {
   [theme.breakpoints.up("md")]: {
     margin: "unset",
     fontSize: "3rem",
-    marginBottom: "0.5rem",
+    marginBottom: "1rem",
   },
 };
 theme.typography.body1 = {

diff --git a/Junior/newsletter-sign-up/src/app/layout.tsx b/Junior/newsletter-sign-up/src/app/layout.tsx
@@ -1,7 +1,8 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import ThemeRegistry from "./ThemeRegistry";
-import { Card, Container, Typography } from "@mui/material";
+import { Container } from "@mui/material";
+import { usePathname } from "next/navigation";
 
 export const metadata: Metadata = {
   title: "Newsletter Sign-up",
@@ -30,11 +31,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <ThemeRegistry options={{ key: "mui" }}>
-          <Container component="main" disableGutters>
-            {children}
-          </Container>
-        </ThemeRegistry>
+        <ThemeRegistry options={{ key: "mui" }}>{children}</ThemeRegistry>
       </body>
     </html>
   );

diff --git a/Junior/newsletter-sign-up/src/app/signup/page.tsx b/Junior/newsletter-sign-up/src/app/signup/page.tsx
@@ -6,7 +6,7 @@ import { Container, List, Typography } from "@mui/material";
 
 export default function Home() {
   return (
-    <>
+    <Container component="main" disableGutters>
       <Image />
       <Container component={"section"} disableGutters>
         <Typography variant="h1">Stay updated!</Typography>
@@ -20,6 +20,6 @@ export default function Home() {
         </List>
         <TextField />
       </Container>
-    </>
+    </Container>
   );
 }
diff --git a/Junior/newsletter-sign-up/src/app/success/page.tsx b/Junior/newsletter-sign-up/src/app/success/page.tsx
@@ -16,12 +16,12 @@ const Page = () => {
     ) {
       router.replace("/signup");
     }
-  }, []);
+  }, [params, router]);
 
   return (
     <>
       {params.get("mail") !== undefined && (
-        <Container component={"section"}>
+        <Container component={"main"} id="success">
           <NextImage
             alt="success-illustration"
             id="success-image"
@@ -30,7 +30,9 @@ const Page = () => {
             height="0"
             priority
           />
-          <Typography variant="h1">Thanks for subscribing!</Typography>
+          <Typography variant="h1" id="success">
+            Thanks for subscribing!
+          </Typography>
           <Typography variant="body2">
             A confirmation email has been sent to <b>{params.get("mail")}. </b>
             Please open it and click the button inside to confirm your