From e6ad5caa881745b0866e1129413fc3b5c8076b84 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Tue, 30 Jul 2024 13:31:09 +0200
Subject: [PATCH 01/12] Add .nvmrc file

---
 .nvmrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..67d2ffed
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v20.13.1
\ No newline at end of file

From a72e6f6ed35e854a9c2feec3bd73a446159ccb39 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Thu, 1 Aug 2024 13:56:42 +0200
Subject: [PATCH 02/12] Create page & feature New Project

---
 .../(authed)/(home)/[[...slug]]/layout.tsx    |  2 +-
 src/app/(authed)/(home)/new/page.tsx          | 62 +++---------
 src/app/auth/signin/page.tsx                  | 33 ++-----
 src/common/ui/MessageLinkFooter.tsx           | 34 +++++++
 src/features/new-project/NewProject.tsx       | 48 +++++++++
 src/features/new-project/data/index.ts        | 33 +++++++
 .../new-project/view/NewProjectForm.tsx       | 93 +++++++++++++++++
 .../new-project/view/NewProjectSteps.tsx      | 99 +++++++++++++++++++
 .../sidebar/view/internal/sidebar/Header.tsx  | 11 +--
 9 files changed, 335 insertions(+), 80 deletions(-)
 create mode 100644 src/common/ui/MessageLinkFooter.tsx
 create mode 100644 src/features/new-project/NewProject.tsx
 create mode 100644 src/features/new-project/data/index.ts
 create mode 100644 src/features/new-project/view/NewProjectForm.tsx
 create mode 100644 src/features/new-project/view/NewProjectSteps.tsx

diff --git a/src/app/(authed)/(home)/[[...slug]]/layout.tsx b/src/app/(authed)/(home)/[[...slug]]/layout.tsx
index 36fb09c1..2e89f12a 100644
--- a/src/app/(authed)/(home)/[[...slug]]/layout.tsx
+++ b/src/app/(authed)/(home)/[[...slug]]/layout.tsx
@@ -12,7 +12,7 @@ export default function Page({ children }: { children: React.ReactNode }) {
   }
   return (
     <>
-      <SecondarySplitHeader mobileToolbar=<MobileToolbar/>>
+      <SecondarySplitHeader mobileToolbar={<MobileToolbar/>}>
         <TrailingToolbarItem/>
       </SecondarySplitHeader>
       <main style={{ flexGrow: "1", overflowY: "auto" }}>
diff --git a/src/app/(authed)/(home)/new/page.tsx b/src/app/(authed)/(home)/new/page.tsx
index bdbbd356..ccfc7ca8 100644
--- a/src/app/(authed)/(home)/new/page.tsx
+++ b/src/app/(authed)/(home)/new/page.tsx
@@ -1,56 +1,20 @@
-import Link from "next/link"
 import { env, splitOwnerAndRepository } from "@/common"
+import { Box } from "@mui/material"
+import NewProject from "@/features/new-project/NewProject";
 
 const Page = () => {
   const repositoryNameSuffix = env.getOrThrow("REPOSITORY_NAME_SUFFIX")
   const templateName = env.get("NEW_PROJECT_TEMPLATE_REPOSITORY")
-  const projectName = "Nordisk Film"
-  const suffixedRepositoryName = makeFullRepositoryName({
-    name: projectName,
-    suffix: repositoryNameSuffix
-  })
-  const newGitHubRepositoryLink = makeNewGitHubRepositoryLink({
-    templateName,
-    repositoryName: suffixedRepositoryName,
-    description: `Contains OpenAPI specifications for ${projectName}`
-  })
-  return (
-    <Link href={newGitHubRepositoryLink}>
-      {newGitHubRepositoryLink}
-    </Link>
-  )
-}
+  const ownerRepository = templateName ? splitOwnerAndRepository(templateName)?.owner : undefined
 
-export default Page
-
-function makeFullRepositoryName({ name, suffix }: { name: string, suffix: string }) {
-  const safeRepositoryName = name
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9-]+/g, "")
-    .replace(/\s+/g, "-")
-  return `${safeRepositoryName}${suffix}`
-}
+return (
+    <Box display="flex" alignItems="center" justifyContent="center" height="100vh">
+      <NewProject
+        repositoryNameSuffix={repositoryNameSuffix}
+        templateName={templateName}
+        ownerRepository={ownerRepository}
+      />
+    </Box>
+  )}
 
-function makeNewGitHubRepositoryLink({
-  templateName,
-  repositoryName,
-  description
-}: {
-  templateName?: string,
-  repositoryName: string,
-  description: string
-}) {
-  let url = `https://github.com/new`
-    + `?name=${encodeURIComponent(repositoryName)}`
-    + `&description=${encodeURIComponent(description)}`
-    + `&visibility=private`
-  if (templateName) {
-    const templateRepository = splitOwnerAndRepository(templateName)
-    if (templateRepository) {
-      url += `&template_owner=${encodeURIComponent(templateRepository.owner)}`
-      url += `&template_name=${encodeURIComponent(templateRepository.repository)}`
-    }
-  }
-  return url
-}
+export default Page
diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx
index cf08105e..af252ce6 100644
--- a/src/app/auth/signin/page.tsx
+++ b/src/app/auth/signin/page.tsx
@@ -1,11 +1,11 @@
 import Image from "next/image"
-import Link from "next/link"
 import { Box, Button, Stack, Typography } from "@mui/material"
 import { signIn } from "@/composition"
 import { env } from "@/common"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import SignInTexts from "@/features/auth/view/SignInTexts"
+import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
 
 const SITE_NAME = env.getOrThrow("NEXT_PUBLIC_SHAPE_DOCS_TITLE")
 const HELP_URL = env.get("NEXT_PUBLIC_SHAPE_DOCS_HELP_URL")
@@ -74,9 +74,14 @@ const SignInColumn = () => {
           <SignInWithGitHub />
         </Stack>
       </Box>
-      <Box sx={{ marginBottom: 2 }}>
-        <Footer/>
-      </Box>
+      {HELP_URL && (
+        <Box sx={{ marginBottom: 2 }}>
+          <MessageLinkFooter 
+            url={HELP_URL}
+            content={`Learn more about ${SITE_NAME}`}
+          />
+        </Box>
+      )}  
     </Box>
   )
 }
@@ -99,24 +104,4 @@ const SignInWithGitHub = () => {
       </Button>
     </form>
   )
-}
-
-const Footer = () => {
-  return (
-    <Stack direction="row">
-      {HELP_URL && 
-        <Link href={HELP_URL} target="_blank" rel="noopener">
-          <Typography variant="body2" sx={{
-            opacity: 0.5,
-            transition: "opacity 0.3s ease",
-            "&:hover": {
-              opacity: 1
-            }
-          }}>
-            Learn more about {SITE_NAME}
-          </Typography>
-        </Link>
-      }
-    </Stack>
-  )
 }
\ No newline at end of file
diff --git a/src/common/ui/MessageLinkFooter.tsx b/src/common/ui/MessageLinkFooter.tsx
new file mode 100644
index 00000000..e3873674
--- /dev/null
+++ b/src/common/ui/MessageLinkFooter.tsx
@@ -0,0 +1,34 @@
+import {
+  Typography,
+  Stack
+} from "@mui/material"
+import Link from "next/link"
+
+interface MessageLinkFooterProps {
+  url: string
+  content: string
+}
+
+const MessageLinkFooter = ({
+  url,
+  content,
+}: MessageLinkFooterProps) => {
+
+return (
+  <Stack direction="row">
+    <Link href={url} target="_blank" rel="noopener">
+      <Typography variant="body2" sx={{
+        opacity: 0.5,
+        transition: "opacity 0.3s ease",
+        "&:hover": {
+          opacity: 1
+        }
+      }}>
+        {content}
+      </Typography>
+    </Link>
+  </Stack>
+
+  )}
+
+export default MessageLinkFooter
\ No newline at end of file
diff --git a/src/features/new-project/NewProject.tsx b/src/features/new-project/NewProject.tsx
new file mode 100644
index 00000000..2bb79a1c
--- /dev/null
+++ b/src/features/new-project/NewProject.tsx
@@ -0,0 +1,48 @@
+import {
+  Box,
+  Typography,
+} from "@mui/material"
+import NewProjectSteps from "./view/NewProjectSteps"
+import { env } from "@/common"
+import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
+
+const SITE_NAME = env.getOrThrow("NEXT_PUBLIC_SHAPE_DOCS_TITLE")
+const HELP_URL = env.get("NEXT_PUBLIC_SHAPE_DOCS_HELP_URL")
+
+interface NewProjectProps {
+  repositoryNameSuffix: string
+  templateName?: string
+  ownerRepository?: string
+}
+
+const NewProject = ({
+  repositoryNameSuffix,
+  templateName,
+  ownerRepository
+}: NewProjectProps) => {
+  const title = "Add a new project to "
+
+return (
+    <Box display="flex" alignItems="start" justifyContent="center" flexDirection="column" height="100vh" gap={6}>
+      <Typography variant="h4" sx={{
+        display: { xs: "none", sm: "none", md: "flex" },
+      }}>
+        {title}
+        {SITE_NAME}
+      </Typography>
+      <NewProjectSteps 
+        repositoryNameSuffix={repositoryNameSuffix}
+        templateName={templateName}
+        ownerRepository={ownerRepository}
+        helpURL={HELP_URL}
+      />
+      {HELP_URL && 
+        <MessageLinkFooter 
+          url={HELP_URL}
+          content={`Read more about Adding Documentation to ${SITE_NAME}`}
+        />
+      }
+    </Box>
+  )}
+
+export default NewProject
\ No newline at end of file
diff --git a/src/features/new-project/data/index.ts b/src/features/new-project/data/index.ts
new file mode 100644
index 00000000..409e8eb7
--- /dev/null
+++ b/src/features/new-project/data/index.ts
@@ -0,0 +1,33 @@
+import { splitOwnerAndRepository } from "@/common"
+
+export function makeFullRepositoryName({ name, suffix }: { name: string, suffix: string }) {
+  const safeRepositoryName = name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, "")
+    .replace(/\s+/g, "-")
+  return `${safeRepositoryName}${suffix}`
+}
+
+export function makeNewGitHubRepositoryLink({
+  templateName,
+  repositoryName,
+  description
+}: {
+  templateName?: string,
+  repositoryName: string,
+  description: string
+}) {
+  let url = `https://github.com/new`
+    + `?name=${encodeURIComponent(repositoryName)}`
+    + `&description=${encodeURIComponent(description)}`
+    + `&visibility=private`
+  if (templateName) {
+    const templateRepository = splitOwnerAndRepository(templateName)
+    if (templateRepository) {
+      url += `&template_owner=${encodeURIComponent(templateRepository.owner)}`
+      url += `&template_name=${encodeURIComponent(templateRepository.repository)}`
+    }
+  }
+  return url
+}
diff --git a/src/features/new-project/view/NewProjectForm.tsx b/src/features/new-project/view/NewProjectForm.tsx
new file mode 100644
index 00000000..23e849f0
--- /dev/null
+++ b/src/features/new-project/view/NewProjectForm.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import {
+  TextField,
+  Box,
+  OutlinedInput,
+  InputAdornment,
+  Tooltip,
+  Button,
+} from "@mui/material"
+import LockIcon from '@mui/icons-material/Lock';
+import { useState } from 'react'
+import { makeFullRepositoryName, makeNewGitHubRepositoryLink } from "../data";
+import Link from "next/link";
+
+interface NewProjectFormProps {
+  repositoryNameSuffix: string
+  templateName?: string
+  ownerRepository?: string
+}
+
+const NewProjectForm = ({
+  repositoryNameSuffix,
+  templateName,
+  ownerRepository
+}: NewProjectFormProps) => {
+  const [projectName, setProjectName] = useState("")
+
+  const suffixedRepositoryName = makeFullRepositoryName({
+    name: projectName,
+    suffix: repositoryNameSuffix
+  })
+  const newGitHubRepositoryLink = makeNewGitHubRepositoryLink({
+    templateName,
+    repositoryName: suffixedRepositoryName,
+    description: `Contains OpenAPI specifications for ${projectName}`
+  })
+
+return (
+    <Box display="flex" flexDirection="column" gap={2} width={550}>
+      <Box display="flex" flexDirection="row" gap={2}>
+        <Tooltip title="If is another one, change it on next step">
+          <TextField
+            disabled
+            id="owner-repository"
+            value={ownerRepository || ""}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <LockIcon />
+                </InputAdornment>
+              ),
+            }}
+            variant="outlined"
+            sx={{ width: 300 }}
+          />
+        </Tooltip>
+        <OutlinedInput
+          id="project-name"
+          endAdornment={
+            <InputAdornment position="end" sx={{ marginRight: 2 }}>
+              {repositoryNameSuffix}
+            </InputAdornment>
+          }
+          aria-describedby="repository-namet"
+          inputProps={{
+            'aria-label': 'repository-name',
+          }}
+          placeholder="project-name"
+          value={projectName}
+          onChange={(e) => setProjectName(e.target.value)}
+          fullWidth
+          sx={{ paddingLeft: 2 }}
+        />
+      </Box>
+      <Button
+        disabled={projectName.length == 0}
+        type="button"
+        component={Link}
+        href={newGitHubRepositoryLink}
+        target="_blank" 
+        rel="noopener noreferrer"
+        variant="contained"
+        color="primary"
+        size="large"
+        sx={{ width: 1, height: 56 }}
+      >
+        Create Repository
+      </Button>
+    </Box>
+  )}
+
+export default NewProjectForm
\ No newline at end of file
diff --git a/src/features/new-project/view/NewProjectSteps.tsx b/src/features/new-project/view/NewProjectSteps.tsx
new file mode 100644
index 00000000..f3ad5609
--- /dev/null
+++ b/src/features/new-project/view/NewProjectSteps.tsx
@@ -0,0 +1,99 @@
+import {
+  Box,
+  Typography,
+} from "@mui/material"
+import NewProjectForm from "./NewProjectForm"
+import { splitOwnerAndRepository } from "@/common"
+import Link from "next/link"
+
+interface NewProjectStepsProps {
+  repositoryNameSuffix: string
+  templateName?: string
+  ownerRepository?: string
+  helpURL?: string
+}
+
+type StepType = {
+  id?: string,
+  content: string,
+  highlight: string,
+  helpURL?: string
+}
+
+const NewProjectSteps = ({
+  repositoryNameSuffix,
+  templateName,
+  ownerRepository,
+  helpURL,
+}: NewProjectStepsProps) => {
+  const steps: StepType[] = [
+    {
+      id: "create-new-repository",
+      content: `Create a new repository using our ${templateName ? splitOwnerAndRepository(templateName)?.repository : ""} template`,
+      highlight: `${templateName ? splitOwnerAndRepository(templateName)?.repository : ""}`,
+      helpURL: helpURL ? `${helpURL}/Adding-Documentation-to-Shape-Docs#create-a-repository` : undefined
+    },
+    {
+      content: "Add OpenAPI specification",
+      highlight: "OpenAPI",
+      helpURL: helpURL ? `${helpURL}/Adding-Documentation-to-Shape-Docs#add-an-openapi-specification` : undefined
+    },
+    {
+      content: "Customize Your Project",
+      highlight: "Customize",
+      helpURL: helpURL ? `${helpURL}/Adding-Documentation-to-Shape-Docs#customize-the-project` : undefined
+
+    },
+    {
+      content: "Ready to start!",
+      highlight: "",
+    }
+  ]
+
+  const isCreateRepositoryStep = (step: StepType) => step.id && step.id === steps[0].id
+
+  const getStepContent = (step: StepType, index: number) => (
+    <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
+      <Typography sx={{
+        display: { xs: "none", sm: "none", md: "flex" },
+        fontSize: 20
+      }}>
+        {`${index + 1}. `}
+        {step.content}
+      </Typography>
+      {step.helpURL && <Link
+          style={{ 
+            fontSize: 14,
+            color: "gray"
+          }}
+          aria-label="help"
+          href={step.helpURL}
+          target="_blank" 
+          rel="noopener noreferrer"  
+        >
+          (?)
+        </Link>}
+    </Box>
+  )
+
+return (
+    <Box display="flex" alignItems="start" justifyContent="center" flexDirection="column" gap={4}>
+        {steps.map((step: StepType, index: number) => 
+          <>
+            {isCreateRepositoryStep(step) ? 
+              <Box display="flex" flexDirection="column" gap={2}>
+                  {getStepContent(step, index)}
+                <NewProjectForm
+                  repositoryNameSuffix={repositoryNameSuffix}
+                  templateName={templateName}
+                  ownerRepository={ownerRepository}
+                />
+              </Box> :
+              getStepContent(step, index)
+            }
+          </>
+        )}
+    </Box>
+  )}
+
+export default NewProjectSteps
\ No newline at end of file
diff --git a/src/features/sidebar/view/internal/sidebar/Header.tsx b/src/features/sidebar/view/internal/sidebar/Header.tsx
index f266aff5..43457d71 100644
--- a/src/features/sidebar/view/internal/sidebar/Header.tsx
+++ b/src/features/sidebar/view/internal/sidebar/Header.tsx
@@ -1,9 +1,8 @@
 import Image from "next/image"
 import Link from "next/link"
-import { Box, Typography } from "@mui/material"
-// import { Box, Typography, IconButton, Tooltip } from "@mui/material"
-// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-// import { faPlus } from "@fortawesome/free-solid-svg-icons"
+import { Box, Typography, IconButton, Tooltip } from "@mui/material"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
 
 const Header = () => {
   const siteName = process.env.NEXT_PUBLIC_SHAPE_DOCS_TITLE
@@ -41,13 +40,13 @@ const Header = () => {
           {siteName}
         </Typography>
       </Link>
-      {/* <Tooltip title="New Project">
+      <Tooltip title="New Project">
         <Link href="/new">
           <IconButton color="primary" size="small" aria-label="New Project">
             <FontAwesomeIcon icon={faPlus} size="xs" style={{ aspectRatio: 1, padding: 2 }} />
           </IconButton>
         </Link>
-      </Tooltip> */}
+      </Tooltip>
     </Box>
   )
 }

From e3fbdb768dd5af7d1cb2521dcd14c558fcc56a38 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Thu, 1 Aug 2024 14:48:23 +0200
Subject: [PATCH 03/12] Move to theme file BASE_COLORS array

---
 src/common/theme/theme.tsx             | 2 ++
 src/features/auth/view/SignInTexts.tsx | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/common/theme/theme.tsx b/src/common/theme/theme.tsx
index 8d5752b4..0476a2fd 100644
--- a/src/common/theme/theme.tsx
+++ b/src/common/theme/theme.tsx
@@ -2,6 +2,8 @@ import { createTheme } from "@mui/material/styles"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons"
 
+export const BASE_COLORS = ["#01BBFE", "#00AE47", "#FCB23D"]
+
 export const softPaperSx = {
   boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.1)",
   border: "1px solid rgba(0, 0, 0, 0.05)",
diff --git a/src/features/auth/view/SignInTexts.tsx b/src/features/auth/view/SignInTexts.tsx
index 66bc0bab..01220579 100644
--- a/src/features/auth/view/SignInTexts.tsx
+++ b/src/features/auth/view/SignInTexts.tsx
@@ -1,11 +1,12 @@
 "use client"
 
+import { BASE_COLORS } from "@/common/theme/theme"
 import { Box, Typography, SxProps } from "@mui/material"
 import { useEffect, useState, useMemo } from "react"
 
 const SignInTexts = ({ prefix }: { prefix: string }) => {
   const getRandomTextColor = ({ excluding }: { excluding?: string }) => {
-    const colors = ["#01BBFE", "#00AE47", "#FCB23D"]
+    const colors = BASE_COLORS
       .filter(e => e !== excluding)
     return colors[Math.floor(Math.random() * colors.length)]
   }

From 7db05edffa41eeb0912a7fd7ad930129e58f5c86 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Thu, 1 Aug 2024 14:49:13 +0200
Subject: [PATCH 04/12] Move functions to its own files on utils folder

---
 src/common/utils/makeFullRepositoryName.ts    | 22 +++++++++++
 .../utils/makeNewGitHubRepositoryLink.ts      | 38 +++++++++++++++++++
 src/features/new-project/data/index.ts        | 33 ----------------
 .../new-project/view/NewProjectForm.tsx       |  7 ++--
 4 files changed, 64 insertions(+), 36 deletions(-)
 create mode 100644 src/common/utils/makeFullRepositoryName.ts
 create mode 100644 src/common/utils/makeNewGitHubRepositoryLink.ts
 delete mode 100644 src/features/new-project/data/index.ts

diff --git a/src/common/utils/makeFullRepositoryName.ts b/src/common/utils/makeFullRepositoryName.ts
new file mode 100644
index 00000000..21a0a120
--- /dev/null
+++ b/src/common/utils/makeFullRepositoryName.ts
@@ -0,0 +1,22 @@
+/**
+ * Constructs a safe and standardized GitHub repository name with a given suffix.
+ * 
+ * This function takes a project name and a suffix, sanitizes the project name by
+ * removing any non-alphanumeric characters (except dashes) and spaces, and then
+ * concatenates it with the provided suffix to form a standardized repository name.
+ * 
+ * @param {Object} params - The parameters for generating the full repository name.
+ * @param {string} params.name - The base name of the repository.
+ * @param {string} params.suffix - The suffix to append to the sanitized repository name.
+ * 
+ * @returns {string} - A sanitized and standardized repository name with the provided suffix.
+ */
+
+export function makeFullRepositoryName({ name, suffix }: { name: string, suffix: string }) {
+  const safeRepositoryName = name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, "")
+    .replace(/\s+/g, "-")
+  return `${safeRepositoryName}${suffix}`
+}
\ No newline at end of file
diff --git a/src/common/utils/makeNewGitHubRepositoryLink.ts b/src/common/utils/makeNewGitHubRepositoryLink.ts
new file mode 100644
index 00000000..12ff989e
--- /dev/null
+++ b/src/common/utils/makeNewGitHubRepositoryLink.ts
@@ -0,0 +1,38 @@
+/**
+ * Generates a URL to create a new GitHub repository using an optional template repository.
+ * 
+ * This function constructs a URL that directs to GitHub's new repository creation page. 
+ * It supports creating a repository with a specific name, description, and optional template repository.
+ * 
+ * @param {Object} params - The parameters for generating the GitHub repository URL.
+ * @param {string} [params.templateName] - The name of the template repository to use (optional).
+ * @param {string} params.repositoryName - The name for the new repository.
+ * @param {string} params.description - The description for the new repository.
+ * 
+ * @returns {string} - A URL string that directs to the GitHub new repository creation page with the provided parameters.
+ */
+
+import { splitOwnerAndRepository } from "@/common"
+
+export function makeNewGitHubRepositoryLink({
+  templateName,
+  repositoryName,
+  description
+}: {
+  templateName?: string,
+  repositoryName: string,
+  description: string
+}) {
+  let url = `https://github.com/new`
+    + `?name=${encodeURIComponent(repositoryName)}`
+    + `&description=${encodeURIComponent(description)}`
+    + `&visibility=private`
+  if (templateName) {
+    const templateRepository = splitOwnerAndRepository(templateName)
+    if (templateRepository) {
+      url += `&template_owner=${encodeURIComponent(templateRepository.owner)}`
+      url += `&template_name=${encodeURIComponent(templateRepository.repository)}`
+    }
+  }
+  return url
+}
diff --git a/src/features/new-project/data/index.ts b/src/features/new-project/data/index.ts
deleted file mode 100644
index 409e8eb7..00000000
--- a/src/features/new-project/data/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { splitOwnerAndRepository } from "@/common"
-
-export function makeFullRepositoryName({ name, suffix }: { name: string, suffix: string }) {
-  const safeRepositoryName = name
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9-]+/g, "")
-    .replace(/\s+/g, "-")
-  return `${safeRepositoryName}${suffix}`
-}
-
-export function makeNewGitHubRepositoryLink({
-  templateName,
-  repositoryName,
-  description
-}: {
-  templateName?: string,
-  repositoryName: string,
-  description: string
-}) {
-  let url = `https://github.com/new`
-    + `?name=${encodeURIComponent(repositoryName)}`
-    + `&description=${encodeURIComponent(description)}`
-    + `&visibility=private`
-  if (templateName) {
-    const templateRepository = splitOwnerAndRepository(templateName)
-    if (templateRepository) {
-      url += `&template_owner=${encodeURIComponent(templateRepository.owner)}`
-      url += `&template_name=${encodeURIComponent(templateRepository.repository)}`
-    }
-  }
-  return url
-}
diff --git a/src/features/new-project/view/NewProjectForm.tsx b/src/features/new-project/view/NewProjectForm.tsx
index 23e849f0..c38d5442 100644
--- a/src/features/new-project/view/NewProjectForm.tsx
+++ b/src/features/new-project/view/NewProjectForm.tsx
@@ -8,10 +8,11 @@ import {
   Tooltip,
   Button,
 } from "@mui/material"
-import LockIcon from '@mui/icons-material/Lock';
+import LockIcon from '@mui/icons-material/Lock'
 import { useState } from 'react'
-import { makeFullRepositoryName, makeNewGitHubRepositoryLink } from "../data";
-import Link from "next/link";
+import { makeFullRepositoryName } from "@/common/utils/makeFullRepositoryName"
+import { makeNewGitHubRepositoryLink } from "@/common/utils/makeNewGitHubRepositoryLink"
+import Link from "next/link"
 
 interface NewProjectFormProps {
   repositoryNameSuffix: string

From e07ef214611d3589f363b2da9fd68549ebfcc3b7 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Thu, 1 Aug 2024 15:39:19 +0200
Subject: [PATCH 05/12] Create AnimatedHighlight component

---
 src/common/ui/AnimatedHighlight.tsx           | 75 +++++++++++++++++++
 src/features/new-project/NewProject.tsx       | 16 ++--
 .../new-project/view/NewProjectSteps.tsx      | 25 +++++--
 3 files changed, 102 insertions(+), 14 deletions(-)
 create mode 100644 src/common/ui/AnimatedHighlight.tsx

diff --git a/src/common/ui/AnimatedHighlight.tsx b/src/common/ui/AnimatedHighlight.tsx
new file mode 100644
index 00000000..9ca8cbf9
--- /dev/null
+++ b/src/common/ui/AnimatedHighlight.tsx
@@ -0,0 +1,75 @@
+"use client"
+import React from "react"
+import { SxProps, Typography, TypographyVariant } from "@mui/material"
+import styled from "@emotion/styled"
+
+interface AnimatedHighlightProps {
+  content: string
+  highlight: string
+  color: string
+  waitForHover: boolean
+  variant?: TypographyVariant
+  sx?: SxProps
+}
+
+const HighlightSpan = styled.span<{ color: string; waitForHover: boolean }>`
+  position: relative;
+  display: inline-block;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 50%;
+    width: 105%;
+    background-color: ${({ color }) => color};
+    transition: transform 0.5s ease, opacity 0.5s ease;
+    transform-origin: right;
+    transform: scaleX(0);
+    z-index: -10;
+    opacity: ${({ waitForHover }) => (waitForHover ? .2 : .7)};
+    ${({ waitForHover }) => !waitForHover && `transform: scaleX(1);`}
+  }
+  &:hover::before {
+    ${({ waitForHover }) =>
+      waitForHover &&
+      `
+      transform: scaleX(1);
+      opacity: .7;
+    `}
+  }
+`;
+
+const AnimatedHighlight = ({
+  content,
+  highlight,
+  color,
+  waitForHover,
+  variant,
+  sx
+}: AnimatedHighlightProps) => {
+  const parts = content.split(new RegExp(`(${highlight})`, 'gi'))
+
+  return (
+    <Typography
+      variant={variant}
+      sx={{
+        ...sx,
+        display: { xs: "none", sm: "none", md: "flex" },
+        gap: 1,
+      }}
+    >
+      {parts.map((part, index) =>
+        part.toLowerCase() === highlight.toLowerCase() ? (
+          <HighlightSpan key={index} color={color} waitForHover={waitForHover}>
+            {part}
+          </HighlightSpan>
+        ) : (
+          part
+        )
+      )}
+    </Typography>
+  );
+};
+
+export default AnimatedHighlight;
diff --git a/src/features/new-project/NewProject.tsx b/src/features/new-project/NewProject.tsx
index 2bb79a1c..6ad28ce2 100644
--- a/src/features/new-project/NewProject.tsx
+++ b/src/features/new-project/NewProject.tsx
@@ -1,10 +1,11 @@
 import {
   Box,
-  Typography,
 } from "@mui/material"
 import NewProjectSteps from "./view/NewProjectSteps"
 import { env } from "@/common"
 import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
+import AnimatedHighlight from "@/common/ui/AnimatedHighlight"
+import { BASE_COLORS } from "@/common/theme/theme"
 
 const SITE_NAME = env.getOrThrow("NEXT_PUBLIC_SHAPE_DOCS_TITLE")
 const HELP_URL = env.get("NEXT_PUBLIC_SHAPE_DOCS_HELP_URL")
@@ -24,12 +25,13 @@ const NewProject = ({
 
 return (
     <Box display="flex" alignItems="start" justifyContent="center" flexDirection="column" height="100vh" gap={6}>
-      <Typography variant="h4" sx={{
-        display: { xs: "none", sm: "none", md: "flex" },
-      }}>
-        {title}
-        {SITE_NAME}
-      </Typography>
+        <AnimatedHighlight
+          content={`${title} ${SITE_NAME}`}
+          highlight={SITE_NAME}
+          color={BASE_COLORS[0]}
+          variant="h4"
+          waitForHover={false}
+        />
       <NewProjectSteps 
         repositoryNameSuffix={repositoryNameSuffix}
         templateName={templateName}
diff --git a/src/features/new-project/view/NewProjectSteps.tsx b/src/features/new-project/view/NewProjectSteps.tsx
index f3ad5609..e3f13361 100644
--- a/src/features/new-project/view/NewProjectSteps.tsx
+++ b/src/features/new-project/view/NewProjectSteps.tsx
@@ -5,6 +5,8 @@ import {
 import NewProjectForm from "./NewProjectForm"
 import { splitOwnerAndRepository } from "@/common"
 import Link from "next/link"
+import AnimatedHighlight from "@/common/ui/AnimatedHighlight"
+import { BASE_COLORS } from "@/common/theme/theme"
 
 interface NewProjectStepsProps {
   repositoryNameSuffix: string
@@ -54,13 +56,22 @@ const NewProjectSteps = ({
 
   const getStepContent = (step: StepType, index: number) => (
     <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
-      <Typography sx={{
-        display: { xs: "none", sm: "none", md: "flex" },
-        fontSize: 20
-      }}>
-        {`${index + 1}. `}
-        {step.content}
-      </Typography>
+      {step.highlight ? 
+        <AnimatedHighlight
+          content={`${index + 1}. ${step.content}`}
+          highlight={step.highlight}
+          color={BASE_COLORS[2]}
+          sx={{ fontSize: 20 }}
+          waitForHover={false}
+        /> :
+        <Typography sx={{
+          display: { xs: "none", sm: "none", md: "flex" },
+          fontSize: 20
+        }}>
+          {`${index + 1}. `}
+          {step.content}
+        </Typography>
+      }
       {step.helpURL && <Link
           style={{ 
             fontSize: 14,

From b27221dba565fb63e1b1a834193377ee4deb8594 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Mon, 5 Aug 2024 11:08:16 +0200
Subject: [PATCH 06/12] Add style and props to HighlightText

---
 ...nimatedHighlight.tsx => HighlightText.tsx} | 45 +++++++++----------
 src/features/new-project/NewProject.tsx       |  6 +--
 .../new-project/view/NewProjectSteps.tsx      | 12 ++---
 3 files changed, 32 insertions(+), 31 deletions(-)
 rename src/common/ui/{AnimatedHighlight.tsx => HighlightText.tsx} (56%)

diff --git a/src/common/ui/AnimatedHighlight.tsx b/src/common/ui/HighlightText.tsx
similarity index 56%
rename from src/common/ui/AnimatedHighlight.tsx
rename to src/common/ui/HighlightText.tsx
index 9ca8cbf9..6a156ca1 100644
--- a/src/common/ui/AnimatedHighlight.tsx
+++ b/src/common/ui/HighlightText.tsx
@@ -3,51 +3,45 @@ import React from "react"
 import { SxProps, Typography, TypographyVariant } from "@mui/material"
 import styled from "@emotion/styled"
 
-interface AnimatedHighlightProps {
+interface HighlightTextProps {
   content: string
   highlight: string
   color: string
-  waitForHover: boolean
+  height?: string
+  isSolidOpacity?: boolean
+  isBoldText?: boolean
   variant?: TypographyVariant
   sx?: SxProps
 }
 
-const HighlightSpan = styled.span<{ color: string; waitForHover: boolean }>`
+const HighlightSpan = styled.span<{ color: string; isSolidOpacity: boolean; height: string; isBoldText: boolean }>`
   position: relative;
   display: inline-block;
+  ${({ isBoldText }) => isBoldText && "font-weight: 600"};
   &::before {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
-    height: 50%;
+    height: ${({ height }) => height};
     width: 105%;
     background-color: ${({ color }) => color};
-    transition: transform 0.5s ease, opacity 0.5s ease;
-    transform-origin: right;
-    transform: scaleX(0);
     z-index: -10;
-    opacity: ${({ waitForHover }) => (waitForHover ? .2 : .7)};
-    ${({ waitForHover }) => !waitForHover && `transform: scaleX(1);`}
+    opacity: ${({ isSolidOpacity }) => isSolidOpacity ? .7 : .3};
+    transform: scaleX(1);
   }
-  &:hover::before {
-    ${({ waitForHover }) =>
-      waitForHover &&
-      `
-      transform: scaleX(1);
-      opacity: .7;
-    `}
-  }
-`;
+}`;
 
-const AnimatedHighlight = ({
+const HighlightText = ({
   content,
   highlight,
   color,
-  waitForHover,
+  height="50%",
+  isSolidOpacity=false,
+  isBoldText=false,
   variant,
   sx
-}: AnimatedHighlightProps) => {
+}: HighlightTextProps) => {
   const parts = content.split(new RegExp(`(${highlight})`, 'gi'))
 
   return (
@@ -61,7 +55,12 @@ const AnimatedHighlight = ({
     >
       {parts.map((part, index) =>
         part.toLowerCase() === highlight.toLowerCase() ? (
-          <HighlightSpan key={index} color={color} waitForHover={waitForHover}>
+          <HighlightSpan
+            key={`highlight-span-${index}`}
+            color={color}
+            isSolidOpacity={isSolidOpacity}
+            height={height}
+            isBoldText={isBoldText}>
             {part}
           </HighlightSpan>
         ) : (
@@ -72,4 +71,4 @@ const AnimatedHighlight = ({
   );
 };
 
-export default AnimatedHighlight;
+export default HighlightText;
diff --git a/src/features/new-project/NewProject.tsx b/src/features/new-project/NewProject.tsx
index 6ad28ce2..7a5f0d47 100644
--- a/src/features/new-project/NewProject.tsx
+++ b/src/features/new-project/NewProject.tsx
@@ -4,7 +4,7 @@ import {
 import NewProjectSteps from "./view/NewProjectSteps"
 import { env } from "@/common"
 import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
-import AnimatedHighlight from "@/common/ui/AnimatedHighlight"
+import HighlightText from "@/common/ui/HighlightText"
 import { BASE_COLORS } from "@/common/theme/theme"
 
 const SITE_NAME = env.getOrThrow("NEXT_PUBLIC_SHAPE_DOCS_TITLE")
@@ -25,12 +25,12 @@ const NewProject = ({
 
 return (
     <Box display="flex" alignItems="start" justifyContent="center" flexDirection="column" height="100vh" gap={6}>
-        <AnimatedHighlight
+        <HighlightText
           content={`${title} ${SITE_NAME}`}
           highlight={SITE_NAME}
           color={BASE_COLORS[0]}
           variant="h4"
-          waitForHover={false}
+          isSolidOpacity
         />
       <NewProjectSteps 
         repositoryNameSuffix={repositoryNameSuffix}
diff --git a/src/features/new-project/view/NewProjectSteps.tsx b/src/features/new-project/view/NewProjectSteps.tsx
index e3f13361..1d0d3524 100644
--- a/src/features/new-project/view/NewProjectSteps.tsx
+++ b/src/features/new-project/view/NewProjectSteps.tsx
@@ -1,3 +1,4 @@
+"use client"
 import {
   Box,
   Typography,
@@ -5,7 +6,7 @@ import {
 import NewProjectForm from "./NewProjectForm"
 import { splitOwnerAndRepository } from "@/common"
 import Link from "next/link"
-import AnimatedHighlight from "@/common/ui/AnimatedHighlight"
+import HighlightText from "@/common/ui/HighlightText"
 import { BASE_COLORS } from "@/common/theme/theme"
 
 interface NewProjectStepsProps {
@@ -32,12 +33,12 @@ const NewProjectSteps = ({
     {
       id: "create-new-repository",
       content: `Create a new repository using our ${templateName ? splitOwnerAndRepository(templateName)?.repository : ""} template`,
-      highlight: `${templateName ? splitOwnerAndRepository(templateName)?.repository : ""}`,
+      highlight: "Create a new repository",
       helpURL: helpURL ? `${helpURL}/Adding-Documentation-to-Shape-Docs#create-a-repository` : undefined
     },
     {
       content: "Add OpenAPI specification",
-      highlight: "OpenAPI",
+      highlight: "Add OpenAPI",
       helpURL: helpURL ? `${helpURL}/Adding-Documentation-to-Shape-Docs#add-an-openapi-specification` : undefined
     },
     {
@@ -57,12 +58,13 @@ const NewProjectSteps = ({
   const getStepContent = (step: StepType, index: number) => (
     <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
       {step.highlight ? 
-        <AnimatedHighlight
+        <HighlightText
           content={`${index + 1}. ${step.content}`}
           highlight={step.highlight}
           color={BASE_COLORS[2]}
+          height="80%"
           sx={{ fontSize: 20 }}
-          waitForHover={false}
+          isBoldText
         /> :
         <Typography sx={{
           display: { xs: "none", sm: "none", md: "flex" },

From b521de42025148c47c6d8cc6282899f4fa5824b1 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Mon, 5 Aug 2024 14:04:44 +0200
Subject: [PATCH 07/12] Add validation to project-name input on new project
 page

---
 src/common/ui/HighlightText.tsx               |   6 +-
 src/common/ui/MessageLinkFooter.tsx           |   7 +-
 src/features/new-project/NewProject.tsx       |   3 +-
 .../new-project/view/NewProjectForm.tsx       | 134 +++++++++++-------
 .../new-project/view/NewProjectSteps.tsx      |   8 +-
 5 files changed, 99 insertions(+), 59 deletions(-)

diff --git a/src/common/ui/HighlightText.tsx b/src/common/ui/HighlightText.tsx
index 6a156ca1..c4ace4fb 100644
--- a/src/common/ui/HighlightText.tsx
+++ b/src/common/ui/HighlightText.tsx
@@ -14,7 +14,9 @@ interface HighlightTextProps {
   sx?: SxProps
 }
 
-const HighlightSpan = styled.span<{ color: string; isSolidOpacity: boolean; height: string; isBoldText: boolean }>`
+const HighlightSpan = styled.span<{
+    color: string; isSolidOpacity: boolean; height: string; isBoldText: boolean 
+  }>`
   position: relative;
   display: inline-block;
   ${({ isBoldText }) => isBoldText && "font-weight: 600"};
@@ -49,7 +51,7 @@ const HighlightText = ({
       variant={variant}
       sx={{
         ...sx,
-        display: { xs: "none", sm: "none", md: "flex" },
+        display: { xs: "box", sm: "box", md: "flex" },
         gap: 1,
       }}
     >
diff --git a/src/common/ui/MessageLinkFooter.tsx b/src/common/ui/MessageLinkFooter.tsx
index e3873674..d8b02587 100644
--- a/src/common/ui/MessageLinkFooter.tsx
+++ b/src/common/ui/MessageLinkFooter.tsx
@@ -1,21 +1,24 @@
 import {
   Typography,
-  Stack
+  Stack,
+  SxProps,
 } from "@mui/material"
 import Link from "next/link"
 
 interface MessageLinkFooterProps {
   url: string
   content: string
+  sx?: SxProps
 }
 
 const MessageLinkFooter = ({
   url,
   content,
+  sx,
 }: MessageLinkFooterProps) => {
 
 return (
-  <Stack direction="row">
+  <Stack direction="row" sx={{ ...sx }}>
     <Link href={url} target="_blank" rel="noopener">
       <Typography variant="body2" sx={{
         opacity: 0.5,
diff --git a/src/features/new-project/NewProject.tsx b/src/features/new-project/NewProject.tsx
index 7a5f0d47..656cabfc 100644
--- a/src/features/new-project/NewProject.tsx
+++ b/src/features/new-project/NewProject.tsx
@@ -39,9 +39,10 @@ return (
         helpURL={HELP_URL}
       />
       {HELP_URL && 
-        <MessageLinkFooter 
+        <MessageLinkFooter
           url={HELP_URL}
           content={`Read more about Adding Documentation to ${SITE_NAME}`}
+          sx={{ position: "absolute", bottom: 30 }}
         />
       }
     </Box>
diff --git a/src/features/new-project/view/NewProjectForm.tsx b/src/features/new-project/view/NewProjectForm.tsx
index c38d5442..a13dd490 100644
--- a/src/features/new-project/view/NewProjectForm.tsx
+++ b/src/features/new-project/view/NewProjectForm.tsx
@@ -1,18 +1,17 @@
 "use client"
 
 import {
-  TextField,
   Box,
   OutlinedInput,
   InputAdornment,
-  Tooltip,
   Button,
+  FormHelperText,
 } from "@mui/material"
-import LockIcon from '@mui/icons-material/Lock'
 import { useState } from 'react'
 import { makeFullRepositoryName } from "@/common/utils/makeFullRepositoryName"
 import { makeNewGitHubRepositoryLink } from "@/common/utils/makeNewGitHubRepositoryLink"
 import Link from "next/link"
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown'
 
 interface NewProjectFormProps {
   repositoryNameSuffix: string
@@ -20,12 +19,23 @@ interface NewProjectFormProps {
   ownerRepository?: string
 }
 
+const validateProjectName = (name: string): boolean => {
+  const regex = /^[a-zA-Z0-9]([a-zA-Z0-9-_]){0,99}$/;
+  return regex.test(name);
+}
+
 const NewProjectForm = ({
   repositoryNameSuffix,
   templateName,
-  ownerRepository
 }: NewProjectFormProps) => {
   const [projectName, setProjectName] = useState("")
+  const [isValid, setIsValid] = useState(true)
+
+  const handleProjectNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setProjectName(value);
+    setIsValid(validateProjectName(value));
+  }
 
   const suffixedRepositoryName = makeFullRepositoryName({
     name: projectName,
@@ -38,56 +48,74 @@ const NewProjectForm = ({
   })
 
 return (
-    <Box display="flex" flexDirection="column" gap={2} width={550}>
-      <Box display="flex" flexDirection="row" gap={2}>
-        <Tooltip title="If is another one, change it on next step">
-          <TextField
-            disabled
-            id="owner-repository"
-            value={ownerRepository || ""}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <LockIcon />
-                </InputAdornment>
-              ),
-            }}
-            variant="outlined"
-            sx={{ width: 300 }}
-          />
-        </Tooltip>
-        <OutlinedInput
-          id="project-name"
-          endAdornment={
-            <InputAdornment position="end" sx={{ marginRight: 2 }}>
-              {repositoryNameSuffix}
-            </InputAdornment>
-          }
-          aria-describedby="repository-namet"
-          inputProps={{
-            'aria-label': 'repository-name',
-          }}
-          placeholder="project-name"
-          value={projectName}
-          onChange={(e) => setProjectName(e.target.value)}
-          fullWidth
-          sx={{ paddingLeft: 2 }}
-        />
-      </Box>
-      <Button
-        disabled={projectName.length == 0}
-        type="button"
-        component={Link}
-        href={newGitHubRepositoryLink}
-        target="_blank" 
-        rel="noopener noreferrer"
-        variant="contained"
-        color="primary"
-        size="large"
-        sx={{ width: 1, height: 56 }}
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="space-between"
+      gap={2}
+      sx={{ width: { xs: 1, sm: 1, md: 1 } }}
+    >
+      <OutlinedInput
+        id="project-name"
+        endAdornment={
+          <InputAdornment position="end" sx={{ marginRight: 2 }}>
+            {repositoryNameSuffix}
+          </InputAdornment>
+        }
+        aria-describedby="repository-namet"
+        inputProps={{
+          'aria-label': 'repository-name',
+        }}
+        placeholder="project-name"
+        value={projectName}
+        onChange={handleProjectNameChange}
+        error={!isValid && projectName.length > 0}
+        sx={{ paddingLeft: 2, width: 1 }}
+      />
+      <Box
+        display="flex"
+        flexDirection="column"
+        gap={2}
       >
-        Create Repository
-      </Button>
+        {!isValid && projectName.length > 0 && (
+          <FormHelperText
+            error
+            id="repository-name-helper"
+            sx={{ width: 1, height: 60, margin: 0 }}>
+            - Project name must start with an alphanumeric character.
+            <br/>
+            - Can contain hyphens and underscores.
+            <br/>
+            - Length must be between 1 and 100 characters.
+          </FormHelperText>
+        )}
+        <Button
+          id="create-repository"
+          disabled={projectName.length == 0 || !isValid}
+          type="button"
+          component={Link}
+          href={newGitHubRepositoryLink}
+          target="_blank" 
+          rel="noopener noreferrer"
+          variant="contained"
+          color="primary"
+          size="large"
+          sx={{ height: 56, width: 1 }}
+        >
+          Create Repository
+        </Button>
+        {(isValid || projectName.length == 0 ) && (
+          <Box
+            width={1}
+            height={60}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <KeyboardDoubleArrowDownIcon color="disabled" sx={{ marginTop: 2 }} />
+          </Box>
+        )}
+      </Box>
     </Box>
   )}
 
diff --git a/src/features/new-project/view/NewProjectSteps.tsx b/src/features/new-project/view/NewProjectSteps.tsx
index 1d0d3524..b164ec07 100644
--- a/src/features/new-project/view/NewProjectSteps.tsx
+++ b/src/features/new-project/view/NewProjectSteps.tsx
@@ -56,7 +56,13 @@ const NewProjectSteps = ({
   const isCreateRepositoryStep = (step: StepType) => step.id && step.id === steps[0].id
 
   const getStepContent = (step: StepType, index: number) => (
-    <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
+    <Box
+      display="flex"
+      flexDirection="row"
+      alignItems="center"
+      gap={2}
+      sx={{ width: { xs: 1, sm: 1, md: 1 } }}
+    >
       {step.highlight ? 
         <HighlightText
           content={`${index + 1}. ${step.content}`}

From eb825fb410bfdc297de40ef818c315c86792e33e Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Mon, 5 Aug 2024 16:30:44 +0200
Subject: [PATCH 08/12] Add responsiveness to new project page

---
 src/app/(authed)/(home)/new/layout.tsx        | 21 ++++++++++++++++
 src/app/(authed)/(home)/new/page.tsx          | 15 +++++------
 src/common/ui/HighlightText.tsx               |  2 +-
 src/features/new-project/NewProject.tsx       | 25 ++++++++++++-------
 .../new-project/view/NewProjectSteps.tsx      | 24 ++++++++++--------
 .../sidebar/view/SecondarySplitHeader.tsx     |  5 +++-
 6 files changed, 62 insertions(+), 30 deletions(-)
 create mode 100644 src/app/(authed)/(home)/new/layout.tsx

diff --git a/src/app/(authed)/(home)/new/layout.tsx b/src/app/(authed)/(home)/new/layout.tsx
new file mode 100644
index 00000000..7ef69661
--- /dev/null
+++ b/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>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/app/(authed)/(home)/new/page.tsx b/src/app/(authed)/(home)/new/page.tsx
index ccfc7ca8..0d6def5d 100644
--- a/src/app/(authed)/(home)/new/page.tsx
+++ b/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 --git a/src/common/ui/HighlightText.tsx b/src/common/ui/HighlightText.tsx
index c4ace4fb..ba5140cf 100644
--- a/src/common/ui/HighlightText.tsx
+++ b/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 --git a/src/features/new-project/NewProject.tsx b/src/features/new-project/NewProject.tsx
index 656cabfc..f0c2635b 100644
--- a/src/features/new-project/NewProject.tsx
+++ b/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 --git a/src/features/new-project/view/NewProjectSteps.tsx b/src/features/new-project/view/NewProjectSteps.tsx
index b164ec07..30de7d05 100644
--- a/src/features/new-project/view/NewProjectSteps.tsx
+++ b/src/features/new-project/view/NewProjectSteps.tsx
@@ -57,11 +57,11 @@ 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
@@ -69,29 +69,33 @@ const NewProjectSteps = ({
           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 --git a/src/features/sidebar/view/SecondarySplitHeader.tsx b/src/features/sidebar/view/SecondarySplitHeader.tsx
index 785bce43..30fe7a87 100644
--- a/src/features/sidebar/view/SecondarySplitHeader.tsx
+++ b/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}`}>

From 0254d3fa0b322aa616c1c9ce9b9b52cee101929e Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Wed, 7 Aug 2024 12:00:13 +0200
Subject: [PATCH 09/12] Fix missing key on list map on NewProjectSteps

---
 src/features/new-project/view/NewProjectSteps.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/features/new-project/view/NewProjectSteps.tsx b/src/features/new-project/view/NewProjectSteps.tsx
index 30de7d05..c806f8da 100644
--- a/src/features/new-project/view/NewProjectSteps.tsx
+++ b/src/features/new-project/view/NewProjectSteps.tsx
@@ -8,6 +8,7 @@ import { splitOwnerAndRepository } from "@/common"
 import Link from "next/link"
 import HighlightText from "@/common/ui/HighlightText"
 import { BASE_COLORS } from "@/common/theme/theme"
+import { Fragment } from "react"
 
 interface NewProjectStepsProps {
   repositoryNameSuffix: string
@@ -102,7 +103,7 @@ const NewProjectSteps = ({
 return (
     <Box display="flex" alignItems="start" justifyContent="center" flexDirection="column" gap={4}>
         {steps.map((step: StepType, index: number) => 
-          <>
+          <Fragment key={`box-step-${index}`}>
             {isCreateRepositoryStep(step) ? 
               <Box display="flex" flexDirection="column" gap={2}>
                   {getStepContent(step, index)}
@@ -114,7 +115,7 @@ return (
               </Box> :
               getStepContent(step, index)
             }
-          </>
+          </Fragment>
         )}
     </Box>
   )}

From 704be964ef8edd781caea0f1e4118db049f12cee Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Tue, 13 Aug 2024 13:29:12 +0200
Subject: [PATCH 10/12] Add tiny changes on new project page & tests

---
 .../utils/makeFullRepositoryName.test.ts      | 51 +++++++++++++++
 .../utils/makeNewGitHubRepositoryLink.test.ts | 64 +++++++++++++++++++
 src/app/(authed)/(home)/new/layout.tsx        |  8 ++-
 src/common/ui/HighlightText.tsx               |  6 +-
 src/features/new-project/NewProject.tsx       |  7 +-
 .../new-project/view/NewProjectForm.tsx       |  2 +-
 .../new-project/view/NewProjectSteps.tsx      | 32 +---------
 .../sidebar/view/SecondarySplitHeader.tsx     | 12 ++--
 8 files changed, 137 insertions(+), 45 deletions(-)
 create mode 100644 __test__/common/utils/makeFullRepositoryName.test.ts
 create mode 100644 __test__/common/utils/makeNewGitHubRepositoryLink.test.ts

diff --git a/__test__/common/utils/makeFullRepositoryName.test.ts b/__test__/common/utils/makeFullRepositoryName.test.ts
new file mode 100644
index 00000000..b172452d
--- /dev/null
+++ b/__test__/common/utils/makeFullRepositoryName.test.ts
@@ -0,0 +1,51 @@
+import { makeFullRepositoryName } from "@/common/utils/makeFullRepositoryName";
+
+test("It returns a sanitized repository name with a suffix", async () => {
+  const result = makeFullRepositoryName({ name: "My Project", suffix: "-repo" });
+  expect(result).toEqual("myproject-repo");
+});
+
+test("It returns a lowercase repository name", async () => {
+  const result = makeFullRepositoryName({ name: "MyProject", suffix: "-repo" });
+  expect(result).toEqual("myproject-repo");
+});
+
+test("It trims spaces from the name", async () => {
+  const result = makeFullRepositoryName({ name: "  My Project  ", suffix: "-repo" });
+  expect(result).toEqual("myproject-repo");
+});
+
+test("It removes non-alphanumeric characters except dashes", async () => {
+  const result = makeFullRepositoryName({ name: "My!@#Pro$%^ject", suffix: "-repo" });
+  expect(result).toEqual("myproject-repo");
+});
+
+test("It replaces spaces with dashes", async () => {
+  const result = makeFullRepositoryName({ name: "My Project", suffix: "-repo" });
+  expect(result).toEqual("myproject-repo");
+});
+
+test("It handles names with multiple spaces correctly", async () => {
+  const result = makeFullRepositoryName({ name: "My    Project", suffix: "-repo" });
+  expect(result).toEqual("myproject-repo");
+});
+
+test("It handles names with no characters left after sanitization", async () => {
+  const result = makeFullRepositoryName({ name: "!@#$%^", suffix: "-repo" });
+  expect(result).toEqual("-repo");
+});
+
+test("It handles names that are already safe", async () => {
+  const result = makeFullRepositoryName({ name: "safe-project-name", suffix: "-repo" });
+  expect(result).toEqual("safe-project-name-repo");
+});
+
+test("It returns just the suffix if the name is an empty string", async () => {
+  const result = makeFullRepositoryName({ name: "", suffix: "-repo" });
+  expect(result).toEqual("-repo");
+});
+
+test("It handles a suffix with special characters correctly", async () => {
+  const result = makeFullRepositoryName({ name: "My Project", suffix: "!-repo" });
+  expect(result).toEqual("myproject!-repo");
+});
diff --git a/__test__/common/utils/makeNewGitHubRepositoryLink.test.ts b/__test__/common/utils/makeNewGitHubRepositoryLink.test.ts
new file mode 100644
index 00000000..f88a3d6a
--- /dev/null
+++ b/__test__/common/utils/makeNewGitHubRepositoryLink.test.ts
@@ -0,0 +1,64 @@
+import { makeNewGitHubRepositoryLink } from "@/common/utils/makeNewGitHubRepositoryLink";
+
+test("It generates a URL with repository name and description", async () => {
+  const result = makeNewGitHubRepositoryLink({
+    repositoryName: "test-repo",
+    description: "A test repository"
+  });
+  expect(result).toEqual(
+    "https://github.com/new?name=test-repo&description=A%20test%20repository&visibility=private"
+  );
+});
+
+test("It encodes special characters in the repository name and description", async () => {
+  const result = makeNewGitHubRepositoryLink({
+    repositoryName: "test repo",
+    description: "A test & description"
+  });
+  expect(result).toEqual(
+    "https://github.com/new?name=test%20repo&description=A%20test%20%26%20description&visibility=private"
+  );
+});
+
+test("It generates a URL with a template repository", async () => {
+  const result = makeNewGitHubRepositoryLink({
+    templateName: "owner/template-repo",
+    repositoryName: "test-repo",
+    description: "A test repository"
+  });
+  expect(result).toEqual(
+    "https://github.com/new?name=test-repo&description=A%20test%20repository&visibility=private&template_owner=owner&template_name=template-repo"
+  );
+});
+
+test("It handles template names with special characters", async () => {
+  const result = makeNewGitHubRepositoryLink({
+    templateName: "owner/template repo",
+    repositoryName: "test-repo",
+    description: "A test repository"
+  });
+  expect(result).toEqual(
+    "https://github.com/new?name=test-repo&description=A%20test%20repository&visibility=private&template_owner=owner&template_name=template%20repo"
+  );
+});
+
+test("It returns the URL without template parameters if templateName is not provided", async () => {
+  const result = makeNewGitHubRepositoryLink({
+    repositoryName: "test-repo",
+    description: "A test repository"
+  });
+  expect(result).toEqual(
+    "https://github.com/new?name=test-repo&description=A%20test%20repository&visibility=private"
+  );
+});
+
+test("It returns a URL even if the template name cannot be split into owner and repository", async () => {
+  const result = makeNewGitHubRepositoryLink({
+    templateName: "invalidTemplateName",
+    repositoryName: "test-repo",
+    description: "A test repository"
+  });
+  expect(result).toEqual(
+    "https://github.com/new?name=test-repo&description=A%20test%20repository&visibility=private"
+  );
+});
diff --git a/src/app/(authed)/(home)/new/layout.tsx b/src/app/(authed)/(home)/new/layout.tsx
index 7ef69661..4a2d7f6a 100644
--- a/src/app/(authed)/(home)/new/layout.tsx
+++ b/src/app/(authed)/(home)/new/layout.tsx
@@ -1,18 +1,20 @@
 "use client"
 
-import SecondarySplitHeader, { HEIGHT_HEADER } from "@/features/sidebar/view/SecondarySplitHeader"
+import SecondarySplitHeader from "@/features/sidebar/view/SecondarySplitHeader"
 import { Box } from "@mui/material"
 
 export default function Page({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <SecondarySplitHeader />
+      <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={{md: `calc(100vh - ${HEIGHT_HEADER + 1}px)`}}
+        height={1}
       >
         {children}
       </Box>
diff --git a/src/common/ui/HighlightText.tsx b/src/common/ui/HighlightText.tsx
index ba5140cf..b6289bb7 100644
--- a/src/common/ui/HighlightText.tsx
+++ b/src/common/ui/HighlightText.tsx
@@ -23,14 +23,14 @@ const HighlightSpan = styled.span<{
   &::before {
     content: '';
     position: absolute;
-    left: 0;
+    left: -1%;
     bottom: 0;
     height: ${({ height }) => height};
-    width: 105%;
+    width: 102%;
     background-color: ${({ color }) => color};
     z-index: -10;
     opacity: ${({ isSolidOpacity }) => isSolidOpacity ? .7 : .3};
-    transform: scaleX(1);
+    transform: skewX(-2deg);
   }
 }`;
 
diff --git a/src/features/new-project/NewProject.tsx b/src/features/new-project/NewProject.tsx
index f0c2635b..69092ae0 100644
--- a/src/features/new-project/NewProject.tsx
+++ b/src/features/new-project/NewProject.tsx
@@ -26,8 +26,8 @@ const NewProject = ({
 return (
     <Box
       display="flex"
-      alignItems={{ xs: "start", md: "center"}}
-      justifyContent={{ xs: "start", md: "center"}}
+      alignItems="center"
+      justifyContent="center"
       flexDirection="column"
       height={1}
       width={1}
@@ -44,12 +44,11 @@ return (
         repositoryNameSuffix={repositoryNameSuffix}
         templateName={templateName}
         ownerRepository={ownerRepository}
-        helpURL={HELP_URL}
       />
       {HELP_URL && 
         <MessageLinkFooter
           url={HELP_URL}
-          content={`Read more about Adding Documentation to ${SITE_NAME}`}
+          content="Need help? Explore our wiki for more info"
         />
       }
     </Box>
diff --git a/src/features/new-project/view/NewProjectForm.tsx b/src/features/new-project/view/NewProjectForm.tsx
index a13dd490..37968093 100644
--- a/src/features/new-project/view/NewProjectForm.tsx
+++ b/src/features/new-project/view/NewProjectForm.tsx
@@ -84,7 +84,7 @@ return (
             sx={{ width: 1, height: 60, margin: 0 }}>
             - Project name must start with an alphanumeric character.
             <br/>
-            - Can contain hyphens and underscores.
+            - Can only contain hyphens as non-alphanumeric character.
             <br/>
             - Length must be between 1 and 100 characters.
           </FormHelperText>
diff --git a/src/features/new-project/view/NewProjectSteps.tsx b/src/features/new-project/view/NewProjectSteps.tsx
index c806f8da..62837ef1 100644
--- a/src/features/new-project/view/NewProjectSteps.tsx
+++ b/src/features/new-project/view/NewProjectSteps.tsx
@@ -5,7 +5,6 @@ import {
 } from "@mui/material"
 import NewProjectForm from "./NewProjectForm"
 import { splitOwnerAndRepository } from "@/common"
-import Link from "next/link"
 import HighlightText from "@/common/ui/HighlightText"
 import { BASE_COLORS } from "@/common/theme/theme"
 import { Fragment } from "react"
@@ -14,38 +13,32 @@ interface NewProjectStepsProps {
   repositoryNameSuffix: string
   templateName?: string
   ownerRepository?: string
-  helpURL?: string
 }
 
 type StepType = {
   id?: string,
   content: string,
   highlight: string,
-  helpURL?: string
 }
 
 const NewProjectSteps = ({
   repositoryNameSuffix,
   templateName,
   ownerRepository,
-  helpURL,
 }: NewProjectStepsProps) => {
   const steps: StepType[] = [
     {
       id: "create-new-repository",
       content: `Create a new repository using our ${templateName ? splitOwnerAndRepository(templateName)?.repository : ""} template`,
       highlight: "Create a new repository",
-      helpURL: helpURL ? `${helpURL}/Adding-Documentation-to-Shape-Docs#create-a-repository` : undefined
     },
     {
       content: "Add OpenAPI specification",
       highlight: "Add OpenAPI",
-      helpURL: helpURL ? `${helpURL}/Adding-Documentation-to-Shape-Docs#add-an-openapi-specification` : undefined
     },
     {
       content: "Customize Your Project",
       highlight: "Customize",
-      helpURL: helpURL ? `${helpURL}/Adding-Documentation-to-Shape-Docs#customize-the-project` : undefined
 
     },
     {
@@ -57,13 +50,7 @@ const NewProjectSteps = ({
   const isCreateRepositoryStep = (step: StepType) => step.id && step.id === steps[0].id
 
   const getStepContent = (step: StepType, index: number) => (
-    <Box
-      display={{ xs: "inline", md: "flex"}}
-      flexDirection="row"
-      alignItems="center"
-      gap={2}
-      width={1}
-    >
+    <>
       {step.highlight ? 
         <HighlightText
           content={`${index + 1}. ${step.content}`}
@@ -82,22 +69,7 @@ const NewProjectSteps = ({
           {step.content}
         </Typography>
       }
-      {step.helpURL && 
-        <Typography
-          sx={{ 
-            fontSize: { xs: 16, sm: 14 },
-            color: "gray",
-          }}
-          component={Link}
-          aria-label="help"
-          href={step.helpURL}
-          target="_blank" 
-          rel="noopener noreferrer"  
-        >
-          (?)
-        </Typography>
-      }
-    </Box>
+    </>
   )
 
 return (
diff --git a/src/features/sidebar/view/SecondarySplitHeader.tsx b/src/features/sidebar/view/SecondarySplitHeader.tsx
index 30fe7a87..d809d3b0 100644
--- a/src/features/sidebar/view/SecondarySplitHeader.tsx
+++ b/src/features/sidebar/view/SecondarySplitHeader.tsx
@@ -14,10 +14,12 @@ export const HEIGHT_HEADER = 80
 
 const Header = ({
   mobileToolbar,
-  children
+  children,
+  showDivider=true,
 }: {
   mobileToolbar?: React.ReactNode
-  children?: React.ReactNode
+  children?: React.ReactNode,
+  showDivider?: boolean,
 }) => {
   const [isSidebarOpen, setSidebarOpen] = useSidebarOpen()
   const [isMac, setIsMac] = useState(false)
@@ -41,6 +43,7 @@ const Header = ({
         display: "flex",
         alignItems: "center",
         padding: 2,
+        paddingLeft: { xs: 4, md: 2 },
         maxWidth: "1460px",
         margin: "auto",
         height: HEIGHT_HEADER
@@ -100,9 +103,10 @@ const Header = ({
           </Box>
         </Collapse>
       }
-      <Divider/>
+      {showDivider && <Divider />}
+      
     </Box>
   )
 }
 
-export default Header
+export default Header
\ No newline at end of file

From 676c7cee18cc9212b6e18e22eac4fbecf8edf0c0 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Tue, 13 Aug 2024 16:06:54 +0200
Subject: [PATCH 11/12] Add custom font sizes on typography to project theme

---
 src/common/theme/theme.tsx                    | 279 ++++++++++--------
 src/common/ui/HighlightText.tsx               |   4 +-
 src/common/ui/MessageLinkFooter.tsx           |   2 +-
 .../new-project/view/NewProjectSteps.tsx      |  15 +-
 .../sidebar/projects/ProjectListItem.tsx      |   2 +-
 5 files changed, 172 insertions(+), 130 deletions(-)

diff --git a/src/common/theme/theme.tsx b/src/common/theme/theme.tsx
index 0476a2fd..87065fd4 100644
--- a/src/common/theme/theme.tsx
+++ b/src/common/theme/theme.tsx
@@ -10,140 +10,177 @@ export const softPaperSx = {
   borderRadius: "12px"
 }
 
+declare module "@mui/material/styles" {
+  interface TypographyVariants {
+    body0: React.CSSProperties;
+    body3: React.CSSProperties;
+  }
+
+  interface TypographyVariantsOptions {
+    body0?: React.CSSProperties;
+    body3?: React.CSSProperties;
+  }
+}
+
+// Extend the TypographyPropsVariantOverrides to include body3
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    body0: true;
+    body3: true;
+  }
+}
+
 const theme = () => createTheme({
-  palette: {
-    mode: "light",
-    primary: {
-      main: "#000000"
-    },
-    secondary: {
-      main: "#000000"
-    }
-  },
-  typography: {
-    fontFamily: [
-      "-apple-system",
-      "BlinkMacSystemFont",
-      "\"Segoe UI\"",
-      "Roboto",
-      "\"Helvetica Neue\"",
-      "Arial",
-      "sans-serif"
-    ].join(","),
-    button: {
-      textTransform: "none"
-    }
-  },
-  components: {
-    MuiButtonBase: {
-      defaultProps: {
-        disableRipple: true
+    palette: {
+      mode: "light",
+      primary: {
+        main: "#000000"
+      },
+      secondary: {
+        main: "#000000"
       }
     },
-    MuiSelect: {
-      styleOverrides: {
-        root: () => ({
-          borderRadius: "20px",
-          "&:hover": {
-            background: "rgba(0, 0, 0, 0.05)"
-          },
-          ".MuiOutlinedInput-notchedOutline": {
-            borderColor: "black"
+    typography: {
+      fontFamily: [
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "\"Segoe UI\"",
+        "Roboto",
+        "\"Helvetica Neue\"",
+        "Arial",
+        "sans-serif"
+      ].join(","),
+      button: {
+        textTransform: "none"
+      },
+      body0: {
+        fontSize: "0.875rem", // 14px
+        lineHeight: 1.5,
+      },
+      body1: {
+        fontSize: "1rem", // 16px based on 16px
+        lineHeight: 1.5,
+      },
+      body2: {
+        fontSize: "1.1rem", // 17.5px
+        lineHeight: 1.5,
+      },
+      body3: {
+        fontSize: "1.25rem", // 20px
+        lineHeight: 1.5,
+      },
+    },
+    components: {
+      MuiButtonBase: {
+        defaultProps: {
+          disableRipple: true
+        }
+      },
+      MuiSelect: {
+        styleOverrides: {
+          root: () => ({
+            borderRadius: "20px",
+            "&:hover": {
+              background: "rgba(0, 0, 0, 0.05)"
+            },
+            ".MuiOutlinedInput-notchedOutline": {
+              borderColor: "black"
+            },
+            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: "black",
+              borderWidth: "1px"
+            }
+          })
+        },
+        defaultProps: {
+          MenuProps: {
+            PaperProps: {
+              sx: softPaperSx
+            }
           },
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: "black",
-            borderWidth: "1px"
+          IconComponent: (props) => {
+            return (
+              <FontAwesomeIcon
+                icon={faCaretDown}
+                className={props.className}
+                style={{
+                  marginRight: "5px",
+                  color: "black"
+                }}
+              />
+            )
           }
-        })
+        }
       },
-      defaultProps: {
-        MenuProps: {
+      MuiMenu: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            margin: theme.spacing(0.5)
+          })
+        }
+      },
+      MuiList: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            padding: 0,
+            margin: 0,
+            marginTop: theme.spacing(1),
+            marginBottom: theme.spacing(1),
+            "& li": {
+              padding: 0,
+              paddingLeft: theme.spacing(1),
+              paddingRight: theme.spacing(1)
+            },
+            "& li.Mui-selected": {
+              background: "transparent",
+              fontWeight: "bold"
+            },
+            "& li:hover, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover, && .Mui-selected, && .Mui-selected:hover, & .MuiListItemButton-root:hover": { 
+              background: "transparent"
+            },
+            "& li:hover .hover-highlight, & li.Mui-selected:hover .hover-highlight": {
+              background: "rgba(0, 0, 0, 0.05)"
+            },
+            "& li:hover .hover-highlight-disabled, & li.Mui-selected:hover .hover-highlight-disabled": { 
+              background: "transparent"
+            },
+            // Used on mobile where we do not want hovering.
+            "& li:active .active-highlight, & li.Mui-selected:active .active-highlight": {
+              background: "rgba(0, 0, 0, 0.05)"
+            },
+            // Used on mobile where we do not want hovering.
+            "& li:active .active-highlight-disabled, & li.Mui-selected:active .active-highlight-disabled": { 
+              background: "transparent"
+            },
+            "& li .menu-item-highlight, & li .menu-item-highlight": {
+              paddingLeft: theme.spacing(1.25),
+              paddingRight: theme.spacing(1.25),
+              paddingTop: theme.spacing(1),
+              paddingBottom: theme.spacing(1),
+              borderRadius: "12px"
+            }
+          })
+        }
+      },
+      MuiPopover: {
+        defaultProps: {
           PaperProps: {
+            elevation: 0,
             sx: softPaperSx
           }
-        },
-        IconComponent: (props) => {
-          return (
-            <FontAwesomeIcon
-              icon={faCaretDown}
-              className={props.className}
-              style={{
-                marginRight: "5px",
-                color: "black"
-              }}
-            />
-          )
         }
       }
     },
-    MuiMenu: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          margin: theme.spacing(0.5)
-        })
-      }
-    },
-    MuiList: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          padding: 0,
-          margin: 0,
-          marginTop: theme.spacing(1),
-          marginBottom: theme.spacing(1),
-          "& li": {
-            padding: 0,
-            paddingLeft: theme.spacing(1),
-            paddingRight: theme.spacing(1)
-          },
-          "& li.Mui-selected": {
-            background: "transparent",
-            fontWeight: "bold"
-          },
-          "& li:hover, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover, && .Mui-selected, && .Mui-selected:hover, & .MuiListItemButton-root:hover": { 
-            background: "transparent"
-          },
-          "& li:hover .hover-highlight, & li.Mui-selected:hover .hover-highlight": {
-            background: "rgba(0, 0, 0, 0.05)"
-          },
-          "& li:hover .hover-highlight-disabled, & li.Mui-selected:hover .hover-highlight-disabled": { 
-            background: "transparent"
-          },
-          // Used on mobile where we do not want hovering.
-          "& li:active .active-highlight, & li.Mui-selected:active .active-highlight": {
-            background: "rgba(0, 0, 0, 0.05)"
-          },
-          // Used on mobile where we do not want hovering.
-          "& li:active .active-highlight-disabled, & li.Mui-selected:active .active-highlight-disabled": { 
-            background: "transparent"
-          },
-          "& li .menu-item-highlight, & li .menu-item-highlight": {
-            paddingLeft: theme.spacing(1.25),
-            paddingRight: theme.spacing(1.25),
-            paddingTop: theme.spacing(1),
-            paddingBottom: theme.spacing(1),
-            borderRadius: "12px"
-          }
-        })
-      }
-    },
-    MuiPopover: {
-      defaultProps: {
-        PaperProps: {
-          elevation: 0,
-          sx: softPaperSx
-        }
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 600,
+        md: 900,
+        lg: 1200,
+        xl: 1536
       }
     }
-  },
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 900,
-      lg: 1200,
-      xl: 1536
-    }
-  }
-})
+  })
+  
 
 export default theme
diff --git a/src/common/ui/HighlightText.tsx b/src/common/ui/HighlightText.tsx
index b6289bb7..0f3cd9ed 100644
--- a/src/common/ui/HighlightText.tsx
+++ b/src/common/ui/HighlightText.tsx
@@ -3,6 +3,8 @@ import React from "react"
 import { SxProps, Typography, TypographyVariant } from "@mui/material"
 import styled from "@emotion/styled"
 
+type CustomTypographyVariant = TypographyVariant | 'body0' | 'body3';
+
 interface HighlightTextProps {
   content: string
   highlight: string
@@ -10,7 +12,7 @@ interface HighlightTextProps {
   height?: string
   isSolidOpacity?: boolean
   isBoldText?: boolean
-  variant?: TypographyVariant
+  variant?: CustomTypographyVariant
   sx?: SxProps
 }
 
diff --git a/src/common/ui/MessageLinkFooter.tsx b/src/common/ui/MessageLinkFooter.tsx
index d8b02587..7434cdac 100644
--- a/src/common/ui/MessageLinkFooter.tsx
+++ b/src/common/ui/MessageLinkFooter.tsx
@@ -20,7 +20,7 @@ const MessageLinkFooter = ({
 return (
   <Stack direction="row" sx={{ ...sx }}>
     <Link href={url} target="_blank" rel="noopener">
-      <Typography variant="body2" sx={{
+      <Typography variant="body0" sx={{
         opacity: 0.5,
         transition: "opacity 0.3s ease",
         "&:hover": {
diff --git a/src/features/new-project/view/NewProjectSteps.tsx b/src/features/new-project/view/NewProjectSteps.tsx
index 62837ef1..ef1e6927 100644
--- a/src/features/new-project/view/NewProjectSteps.tsx
+++ b/src/features/new-project/view/NewProjectSteps.tsx
@@ -57,14 +57,17 @@ const NewProjectSteps = ({
           highlight={step.highlight}
           color={BASE_COLORS[2]}
           height="80%"
-          sx={{ fontSize: 20, marginRight: { xs: 1 } }}
+          variant="body3"
+          sx={{ marginRight: { xs: 1 } }}
           isBoldText
         /> :
-        <Typography sx={{
-          display: { md: "flex" },
-          fontSize: 20,
-          marginRight: { xs: 4 }
-        }}>
+        <Typography
+          variant="body3"
+          sx={{
+            display: { md: "flex" },
+            marginRight: { xs: 4 }
+          }}
+        >
           {`${index + 1}. `}
           {step.content}
         </Typography>
diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
index ba9c7291..ab238004 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
@@ -44,8 +44,8 @@ const ProjectListItem = ({
             <ListItemText
               primary={
                 <Typography
+                  variant="body2"
                   style={{
-                    fontSize: "1.1em",
                     fontWeight: isSelected ? 800 : 500,
                     letterSpacing: 0.1,
                     whiteSpace: "nowrap",

From 622849f02ea2004c79fb4bb78b10696e40494e68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20B=2E=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Wed, 14 Aug 2024 08:48:58 +0200
Subject: [PATCH 12/12] Update src/features/new-project/view/NewProjectForm.tsx

---
 src/features/new-project/view/NewProjectForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/new-project/view/NewProjectForm.tsx b/src/features/new-project/view/NewProjectForm.tsx
index 37968093..b0e35b3a 100644
--- a/src/features/new-project/view/NewProjectForm.tsx
+++ b/src/features/new-project/view/NewProjectForm.tsx
@@ -84,7 +84,7 @@ return (
             sx={{ width: 1, height: 60, margin: 0 }}>
             - Project name must start with an alphanumeric character.
             <br/>
-            - Can only contain hyphens as non-alphanumeric character.
+            - Can only contain hyphens and non-alphanumeric character.
             <br/>
             - Length must be between 1 and 100 characters.
           </FormHelperText>