Add responsiveness to new project page

Author: mpabarca

Diff for: src/app/(authed)/(home)/new/layout.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import SecondarySplitHeader, { HEIGHT_HEADER } from "@/features/sidebar/view/SecondarySplitHeader"
+import { Box } from "@mui/material"
+
+export default function Page({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <SecondarySplitHeader />
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        padding={{ xs: 4 }}
+        height={{md: `calc(100vh - ${HEIGHT_HEADER + 1}px)`}}
+      >
+        {children}
+      </Box>
+    </>
+  )
+}

Diff for: src/app/(authed)/(home)/new/page.tsx

@@ -1,5 +1,4 @@
 import { env, splitOwnerAndRepository } from "@/common"
-import { Box } from "@mui/material"
 import NewProject from "@/features/new-project/NewProject";
 
 const Page = () => {
@@ -8,13 +7,11 @@ const Page = () => {
   const ownerRepository = templateName ? splitOwnerAndRepository(templateName)?.owner : undefined
 
 return (
-    <Box display="flex" alignItems="center" justifyContent="center" height="100vh">
-      <NewProject
-        repositoryNameSuffix={repositoryNameSuffix}
-        templateName={templateName}
-        ownerRepository={ownerRepository}
-      />
-    </Box>
-  )}
+  <NewProject
+    repositoryNameSuffix={repositoryNameSuffix}
+    templateName={templateName}
+    ownerRepository={ownerRepository}
+  />
+)}
 
 export default Page

Diff for: src/common/ui/HighlightText.tsx

@@ -51,7 +51,7 @@ const HighlightText = ({
       variant={variant}
       sx={{
         ...sx,
-        display: { xs: "box", sm: "box", md: "flex" },
+        display: "inline",
         gap: 1,
       }}
     >

Diff for: src/features/new-project/NewProject.tsx

@@ -24,14 +24,22 @@ const NewProject = ({
   const title = "Add a new project to "
 
 return (
-    <Box display="flex" alignItems="start" justifyContent="center" flexDirection="column" height="100vh" gap={6}>
-        <HighlightText
-          content={`${title} ${SITE_NAME}`}
-          highlight={SITE_NAME}
-          color={BASE_COLORS[0]}
-          variant="h4"
-          isSolidOpacity
-        />
+    <Box
+      display="flex"
+      alignItems={{ xs: "start", md: "center"}}
+      justifyContent={{ xs: "start", md: "center"}}
+      flexDirection="column"
+      height={1}
+      width={1}
+      gap={6}
+    >
+      <HighlightText
+        content={`${title} ${SITE_NAME}`}
+        highlight={SITE_NAME}
+        color={BASE_COLORS[0]}
+        variant="h4"
+        isSolidOpacity
+      />
       <NewProjectSteps 
         repositoryNameSuffix={repositoryNameSuffix}
         templateName={templateName}
@@ -42,7 +50,6 @@ return (
         <MessageLinkFooter
           url={HELP_URL}
           content={`Read more about Adding Documentation to ${SITE_NAME}`}
-          sx={{ position: "absolute", bottom: 30 }}
         />
       }
     </Box>

Diff for: src/features/new-project/view/NewProjectSteps.tsx

@@ -57,41 +57,45 @@ const NewProjectSteps = ({
 
   const getStepContent = (step: StepType, index: number) => (
     <Box
-      display="flex"
+      display={{ xs: "inline", md: "flex"}}
       flexDirection="row"
       alignItems="center"
       gap={2}
-      sx={{ width: { xs: 1, sm: 1, md: 1 } }}
+      width={1}
     >
       {step.highlight ? 
         <HighlightText
           content={`${index + 1}. ${step.content}`}
           highlight={step.highlight}
           color={BASE_COLORS[2]}
           height="80%"
-          sx={{ fontSize: 20 }}
+          sx={{ fontSize: 20, marginRight: { xs: 1 } }}
           isBoldText
         /> :
         <Typography sx={{
-          display: { xs: "none", sm: "none", md: "flex" },
-          fontSize: 20
+          display: { md: "flex" },
+          fontSize: 20,
+          marginRight: { xs: 4 }
         }}>
           {`${index + 1}. `}
           {step.content}
         </Typography>
       }
-      {step.helpURL && <Link
-          style={{ 
-            fontSize: 14,
-            color: "gray"
+      {step.helpURL && 
+        <Typography
+          sx={{ 
+            fontSize: { xs: 16, sm: 14 },
+            color: "gray",
           }}
+          component={Link}
           aria-label="help"
           href={step.helpURL}
           target="_blank" 
           rel="noopener noreferrer"  
         >
           (?)
-        </Link>}
+        </Typography>
+      }
     </Box>
   )
 

Diff for: src/features/sidebar/view/SecondarySplitHeader.tsx

@@ -10,6 +10,8 @@ import { SidebarContext, isMac as checkIsMac } from "@/common"
 import { useSidebarOpen } from "@/features/sidebar/data"
 import ToggleMobileToolbarButton from "./internal/secondary/ToggleMobileToolbarButton"
 
+export const HEIGHT_HEADER = 80
+
 const Header = ({
   mobileToolbar,
   children
@@ -27,6 +29,7 @@ const Header = ({
   }, [isMac, setIsMac])
   const openCloseKeyboardShortcut = `(${isMac ? "⌘" : "^"} + .)`
   const theme = useTheme()
+
   return (
     <Box
       sx={{
@@ -40,7 +43,7 @@ const Header = ({
         padding: 2,
         maxWidth: "1460px",
         margin: "auto",
-        height: 80 
+        height: HEIGHT_HEADER
       }}>
         {isSidebarToggleable && !isSidebarOpen &&
           <Tooltip title={`Show Projects ${openCloseKeyboardShortcut}`}>