feat: Welcome & Not Found page (#311)

* Adapt HighlightText to receive arrays on highlight and color props * Change double brackets on slug file so "/" route has own page * Create welcome page * Add layout to welcome page & make it responsive * Add another tip on ShowSectionsLayer * Create Not Found page * Adapt icon Menu on mobile for all pages * Change text tips on welcome page --------- Co-authored-by: Simon B. Støvring <[email protected]>
shapehq · Aug 20, 2024 · 34b9f5e · 34b9f5e
1 parent d73f0e7
commit 34b9f5e
Show file tree

Hide file tree

Showing 15 changed files with 366 additions and 20 deletions.
diff --git a/public/images/arrow_04.png b/public/images/arrow_04.png
diff --git a/public/images/arrow_07.png b/public/images/arrow_07.png
diff --git a/public/images/arrow_26.png b/public/images/arrow_26.png
diff --git a/src/app/(authed)/(home)/(welcome)/layout.tsx b/src/app/(authed)/(home)/(welcome)/layout.tsx
@@ -0,0 +1,21 @@
+import SecondarySplitHeader from "@/features/sidebar/view/SecondarySplitHeader"
+import { Box } from "@mui/material"
+
+export default function Page({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Box width={1} display={{ xs: "flex", sm: "flex", md: "none"}}>
+        <SecondarySplitHeader showDivider={false} />
+      </Box>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        padding={{ xs: 4 }}
+        height={1}
+      >
+        {children}
+      </Box>
+    </>
+  )
+}
diff --git a/src/app/(authed)/(home)/(welcome)/page.tsx b/src/app/(authed)/(home)/(welcome)/page.tsx
@@ -0,0 +1,22 @@
+import WelcomePage from "@/features/welcome"
+import { Box } from "@mui/material"
+
+const Page = () => {
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      height={1}
+      width={1}
+      gap={10}
+    >
+      <WelcomePage />
+    </Box>
+  )
+}
+
+export default Page
+
diff --git a/...pp/(authed)/(home)/[[...slug]]/layout.tsx → src/app/(authed)/(home)/[...slug]/layout.tsx b/...pp/(authed)/(home)/[[...slug]]/layout.tsx → src/app/(authed)/(home)/[...slug]/layout.tsx
@@ -4,11 +4,21 @@ import SecondarySplitHeader from "@/features/sidebar/view/SecondarySplitHeader"
 import TrailingToolbarItem from "@/features/projects/view/toolbar/TrailingToolbarItem"
 import MobileToolbar from "@/features/projects/view/toolbar/MobileToolbar"
 import { useProjectSelection } from "@/features/projects/data"
+import NotFound from "@/features/projects/view/NotFound"
 
 export default function Page({ children }: { children: React.ReactNode }) {
   const { project } = useProjectSelection()
   if (!project) {
-    return <></>
+    return (
+      <>
+        <SecondarySplitHeader showDivider={false} >
+          <TrailingToolbarItem/>
+        </SecondarySplitHeader>
+        <main style={{ flexGrow: "1", overflowY: "auto" }}>
+          <NotFound />
+        </main>
+      </>
+    )
   }
   return (
     <>

diff --git a/src/app/(authed)/(home)/[[...slug]]/page.tsx → src/app/(authed)/(home)/[...slug]/page.tsx b/src/app/(authed)/(home)/[[...slug]]/page.tsx → src/app/(authed)/(home)/[...slug]/page.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -17,7 +17,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <ThemeRegistry options={{ key: "mui" }}>
-        <body>
+        <body style={{ overflow: "hidden" }}>
           <CssBaseline/>
           {children}
         </body>

diff --git a/src/common/ui/HighlightText.tsx b/src/common/ui/HighlightText.tsx
@@ -7,18 +7,18 @@ type CustomTypographyVariant = TypographyVariant | 'body0' | 'body3';
 
 interface HighlightTextProps {
   content: string
-  highlight: string
-  color: string
+  highlight: string[]
+  color: string[]
   height?: string
-  isSolidOpacity?: boolean
+  opacity?: number
   isBoldText?: boolean
   variant?: CustomTypographyVariant
   sx?: SxProps
 }
 
 const HighlightSpan = styled.span<{
-    color: string; isSolidOpacity: boolean; height: string; isBoldText: boolean 
-  }>`
+  color: string; opacity: number; height: string; isBoldText: boolean 
+}>`
   position: relative;
   display: inline-block;
   ${({ isBoldText }) => isBoldText && "font-weight: 600"};
@@ -31,7 +31,7 @@ const HighlightSpan = styled.span<{
     width: 102%;
     background-color: ${({ color }) => color};
     z-index: -10;
-    opacity: ${({ isSolidOpacity }) => isSolidOpacity ? .7 : .3};
+    opacity: ${({ opacity }) => opacity * 0.1};
     transform: skewX(-2deg);
   }
 }`;
@@ -41,12 +41,21 @@ const HighlightText = ({
   highlight,
   color,
   height="50%",
-  isSolidOpacity=false,
+  opacity=3,
   isBoldText=false,
   variant,
   sx
 }: HighlightTextProps) => {
-  const parts = content.split(new RegExp(`(${highlight})`, 'gi'))
+  if (!highlight.length || !color.length) {
+    return (
+      <Typography variant={variant} sx={{ ...sx }}>
+        {content}
+      </Typography>
+    );
+  }
+
+  const parts = content.split(new RegExp(`(${highlight.join('|')})`, 'gi'));
+  const getColor = (index: number) => color[index % color.length];
 
   return (
     <Typography
@@ -57,20 +66,21 @@ const HighlightText = ({
         gap: 1,
       }}
     >
-      {parts.map((part, index) =>
-        part.toLowerCase() === highlight.toLowerCase() ? (
+      {parts.map((part, index) => {
+        const highlightIndex = highlight.findIndex(h => h.toLowerCase() === part.toLowerCase());
+        return highlightIndex !== -1 ? (
           <HighlightSpan
             key={`highlight-span-${index}`}
-            color={color}
-            isSolidOpacity={isSolidOpacity}
+            color={getColor(highlightIndex)}
+            opacity={opacity}
             height={height}
             isBoldText={isBoldText}>
             {part}
           </HighlightSpan>
         ) : (
           part
         )
-      )}
+      })}
     </Typography>
   );
 };

diff --git a/src/features/new-project/NewProject.tsx b/src/features/new-project/NewProject.tsx
@@ -35,10 +35,10 @@ return (
     >
       <HighlightText
         content={`${title} ${SITE_NAME}`}
-        highlight={SITE_NAME}
-        color={BASE_COLORS[0]}
+        highlight={[SITE_NAME]}
+        color={[BASE_COLORS[0]]}
         variant="h4"
-        isSolidOpacity
+        opacity={7}
       />
       <NewProjectSteps 
         repositoryNameSuffix={repositoryNameSuffix}

diff --git a/src/features/new-project/view/NewProjectSteps.tsx b/src/features/new-project/view/NewProjectSteps.tsx
@@ -54,8 +54,8 @@ const NewProjectSteps = ({
       {step.highlight ? 
         <HighlightText
           content={`${index + 1}. ${step.content}`}
-          highlight={step.highlight}
-          color={BASE_COLORS[2]}
+          highlight={[step.highlight]}
+          color={[BASE_COLORS[2]]}
           height="80%"
           variant="body3"
           sx={{ marginRight: { xs: 1 } }}

diff --git a/src/features/projects/view/NotFound.tsx b/src/features/projects/view/NotFound.tsx
@@ -0,0 +1,50 @@
+import Link from 'next/link'
+import { BASE_COLORS } from "@/common/theme/theme"
+import { Box, Typography, Button } from "@mui/material"
+import HighlightText from "@/common/ui/HighlightText"
+
+export default function NotFound() {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      textAlign="center"    
+      height={1}
+      width={1}
+      gap={8}
+      padding={{ xs: 4, md: 0}}
+    >
+      <HighlightText
+        content="Oops! Page Not Found"
+        highlight={["Page Not Found"]}
+        color={[BASE_COLORS[2]]}
+        variant="h3"
+        opacity={7}
+        sx={{ textAlign: "center" }}
+      />
+      <Typography 
+        sx={{
+          display: { md: "flex" },
+          fontSize: 20,
+        }}
+      >
+        We couldn&apos;t find the project or page you&apos;re looking for.
+        It might have been moved or doesn&apos;t exist.
+      </Typography>
+      <Button
+        id="create-repository"
+        type="button"
+        component={Link}
+        href="/"
+        variant="contained"
+        color="primary"
+        size="large"
+        sx={{ height: 56, width: 300 }}
+      >
+        Return to Home
+      </Button>
+    </Box>
+  )
+}
diff --git a/src/features/welcome/index.tsx b/src/features/welcome/index.tsx
@@ -0,0 +1,33 @@
+import { grey } from "@mui/material/colors"
+import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
+import ShowSectionsLayer from "@/features/welcome/view/ShowSectionsLayer"
+import WelcomeContent from "@/features/welcome/view/WelcomeContent"
+import { env } from "@/common"
+import { Box } from "@mui/material"
+
+const HELP_URL = env.get("NEXT_PUBLIC_SHAPE_DOCS_HELP_URL")
+
+const WelcomePage = () => {
+  return (
+    <>
+      <ShowSectionsLayer />
+      <WelcomeContent />
+
+      {HELP_URL && 
+        <Box
+          position="absolute"
+          sx={{ color: grey[500] }}
+          bottom={30}
+          marginLeft="auto"
+        >
+          <MessageLinkFooter
+            url={`${HELP_URL}/Browsing-Documentation`}
+            content="Lost? Read more about it in our wiki documentation"
+          />
+        </Box>
+      }
+    </>
+  )
+}
+
+export default WelcomePage