[T-4910: feat] Re-styling dashboard, create project layout, project template card (#135)

* 🎨 style: adjust wavy border and add layout wavy border * ♻️ refactor: change sidebar to use `nav` * ♻️ refactor: org slug dashboard layout * ♻️ refactor: create project layout and restyling it * ♻️ refactor: remove unused style * ⚡️ feat: restyling template card * ⚡️ feat: create template icon component * ⚡️ feat: use `h2` for layout title * ⚡️ feat: Add isComingSoon property to templates and handle click event in TemplateCard component * ♻️ refactor: WavyBorder component and update CreateProjectLayout * 🎨 style: update button medium size padding * 🎨 style: update layout shadow and add new shadow for the template card * ⚡️ feat: add wavy border gradient and line svg assets * refactor: update wavy border svg * 🎨 style: adjust template card name and arrow also responsive of the list of template --------- Co-authored-by: Zachery Ng <zachery.ng@gmail.com>
2024-02-28 16:22:54 +07:00
parent 33aa75e341
commit 8ee61c0c85
31 changed files with 859 additions and 166 deletions
@@ -1,7 +1,6 @@
 import React from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';

-import OrgSlug from './pages/OrgSlug';
 import Projects from './pages/org-slug';
 import Settings from './pages/org-slug/Settings';
 import {
@@ -11,11 +10,12 @@ import {
 import ProjectSearchLayout from './layouts/ProjectSearch';
 import Index from './pages';
 import Login from './pages/Login';
+import { DashboardLayout } from 'pages/org-slug/layout';

 const router = createBrowserRouter([
  {
    path: ':orgSlug',
-    element: <OrgSlug />,
+    element: <DashboardLayout />,
    children: [
      {
        element: <ProjectSearchLayout />,
@@ -2,31 +2,36 @@ export default [
  {
    id: '1',
    name: 'Progressive Web App (PWA)',
-    icon: '^',
+    icon: 'pwa',
    repoFullName: `${process.env.REACT_APP_GITHUB_PWA_TEMPLATE_REPO}`,
+    isComingSoon: false,
  },
  {
    id: '2',
    name: 'Image Upload PWA',
-    icon: '^',
+    icon: 'pwa',
    repoFullName: `${process.env.REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
+    isComingSoon: false,
  },
  {
    id: '3',
    name: 'Kotlin',
-    icon: '^',
+    icon: 'kotlin',
    repoFullName: '',
+    isComingSoon: false,
  },
  {
    id: '4',
    name: 'React Native',
-    icon: '^',
+    icon: 'react-native',
    repoFullName: '',
+    isComingSoon: false,
  },
  {
    id: '5',
    name: 'Swift',
-    icon: '^',
+    icon: 'swift',
    repoFullName: '',
+    isComingSoon: true,
  },
 ];
@@ -87,7 +87,10 @@ export const ProjectCard = ({
        </div>
      </div>
      {/* Wave */}
-      <WavyBorder />
+      <WavyBorder
+        variant="stroke-and-fill"
+        className="bg-surface-card-hovered"
+      />
      {/* Lower content */}
      <div className={theme.lowerContent()}>
        {/* Latest deployment */}
@@ -1,53 +0,0 @@
-import React from 'react';
-import toast from 'react-hot-toast';
-
-import { IconButton, Typography } from '@material-tailwind/react';
-
-import { Link } from 'react-router-dom';
-
-interface TemplateDetails {
-  id: string;
-  name: string;
-  icon: string;
-}
-interface TemplateCardProps {
-  template: TemplateDetails;
-  isGitAuth: boolean;
-}
-
-const CardDetails = ({ template }: { template: TemplateDetails }) => {
-  return (
-    <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
-      <Typography className="grow" placeholder={''}>
-        {template.icon} {template.name}
-      </Typography>
-      <div>
-        <IconButton
-          size="sm"
-          className="rounded-full hidden group-hover:block"
-          placeholder={''}
-        >
-          {'>'}
-        </IconButton>
-      </div>
-    </div>
-  );
-};
-
-const TemplateCard: React.FC<TemplateCardProps> = ({ template, isGitAuth }) => {
-  return isGitAuth ? (
-    <Link to={`template?templateId=${template.id}`}>
-      <CardDetails template={template} />
-    </Link>
-  ) : (
-    <a
-      onClick={() =>
-        toast.error('Connect Git account to start with a template')
-      }
-    >
-      <CardDetails template={template} />
-    </a>
-  );
-};
-
-export default TemplateCard;
@@ -0,0 +1,85 @@
+import { Button } from 'components/shared/Button';
+import {
+  ArrowRightCircleIcon,
+  ClockOutlineIcon,
+  TemplateIcon,
+  TemplateIconType,
+} from 'components/shared/CustomIcon';
+import { Tag } from 'components/shared/Tag';
+import React, { ComponentPropsWithoutRef, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useToast } from 'components/shared/Toast';
+import { cn } from 'utils/classnames';
+
+export interface TemplateDetail {
+  id: string;
+  name: string;
+  icon: string;
+  repoFullName?: string;
+  isComingSoon?: boolean;
+}
+
+export interface TemplateCardProps extends ComponentPropsWithoutRef<'div'> {
+  template: TemplateDetail;
+  isGitAuth: boolean;
+}
+
+export const TemplateCard = ({ template, isGitAuth }: TemplateCardProps) => {
+  const { toast, dismiss } = useToast();
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(() => {
+    if (template?.isComingSoon) {
+      return toast({
+        id: 'coming-soon',
+        title: 'This template is coming soon',
+        variant: 'info',
+        onDismiss: dismiss,
+      });
+    }
+    if (isGitAuth) {
+      return navigate(`/template?templateId=${template.id}`);
+    }
+    return toast({
+      id: 'connect-git-account',
+      title: 'Connect Git account to start with a template',
+      variant: 'error',
+      onDismiss: dismiss,
+    });
+  }, [isGitAuth, navigate, template, toast]);
+
+  return (
+    <button
+      className={cn(
+        'flex items-center gap-3 px-3 py-3 bg-base-bg-alternate hover:bg-base-bg-emphasized rounded-2xl group relative',
+        {
+          'cursor-default': template?.isComingSoon,
+        },
+      )}
+      onClick={handleClick}
+    >
+      {/* Icon */}
+      <div className="px-1 py-1 rounded-xl bg-base-bg border border-border-interactive/10 shadow-card-sm">
+        <TemplateIcon type={template.icon as TemplateIconType} />
+      </div>
+      {/* Name */}
+      <p className="flex-1 text-left text-sm tracking-tighter text-elements-high-em">
+        {template.name}
+      </p>
+      {template?.isComingSoon ? (
+        <Tag size="xs" type="neutral" leftIcon={<ClockOutlineIcon />}>
+          Soon
+        </Tag>
+      ) : (
+        <Button
+          variant="tertiary"
+          size="sm"
+          iconOnly
+          className="group-hover:flex hidden absolute right-3"
+        >
+          <ArrowRightCircleIcon />
+        </Button>
+      )}
+    </button>
+  );
+};
@@ -0,0 +1 @@
+export * from './TemplateCard';
@@ -150,7 +150,7 @@ export const buttonTheme = tv(
      {
        size: 'md',
        iconOnly: true,
-        class: ['py-3.25', 'px-3.25'],
+        class: ['py-3', 'px-3'],
      },
      {
        size: 'sm',
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ArrowRightCircleIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.3333 8C15.3333 4.3181 12.3486 1.33333 8.66667 1.33333C4.98477 1.33333 2 4.3181 2 8C2 11.6819 4.98477 14.6667 8.66667 14.6667C12.3486 14.6667 15.3333 11.6819 15.3333 8ZM10.2929 8.5L8.97978 9.81311C8.78452 10.0084 8.78452 10.325 8.97978 10.5202C9.17504 10.7155 9.49162 10.7155 9.68689 10.5202L11.3821 8.82495C11.8378 8.36934 11.8378 7.63065 11.3821 7.17504L9.68689 5.47977C9.49162 5.28451 9.17504 5.28451 8.97978 5.47977C8.78452 5.67504 8.78452 5.99162 8.97978 6.18688L10.2929 7.5H5.83333C5.55719 7.5 5.33333 7.72385 5.33333 8C5.33333 8.27614 5.55719 8.5 5.83333 8.5H10.2929Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ClockOutlineIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M7.99984 5V8L9.99984 10M14.3332 8C14.3332 11.4978 11.4976 14.3333 7.99984 14.3333C4.50203 14.3333 1.6665 11.4978 1.6665 8C1.6665 4.5022 4.50203 1.66667 7.99984 1.66667C11.4976 1.66667 14.3332 4.5022 14.3332 8Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </CustomIcon>
+  );
+};
@@ -33,4 +33,9 @@ export * from './GitHubLogo';
 export * from './ClockIcon';
 export * from './HorizontalDotIcon';
 export * from './WarningDiamondIcon';
+export * from './ArrowRightCircleIcon';
+export * from './ClockOutlineIcon';
 export * from './ArrowRightCircleFilledIcon';
+
+// Templates
+export * from './templates';
@@ -0,0 +1,130 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from '../CustomIcon';
+
+export const KotlinIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="41"
+      height="40"
+      viewBox="0 0 41 40"
+      fill="none"
+      {...props}
+    >
+      <g filter="url(#filter0_ii_417_1111)">
+        <rect
+          x="0.333496"
+          width="40"
+          height="40"
+          rx="8"
+          fill="url(#paint0_linear_417_1111)"
+        />
+        <rect
+          x="0.74421"
+          y="0.410714"
+          width="39.1786"
+          height="39.1786"
+          rx="7.58929"
+          stroke="#082F56"
+          strokeOpacity="0.1"
+          strokeWidth="0.821429"
+        />
+        <g clipPath="url(#clip0_417_1111)">
+          <path
+            d="M30.1908 29.8591H10.4766V10.1448H30.1908L20.3337 20.0019L30.1908 29.8591Z"
+            fill="url(#paint1_linear_417_1111)"
+          />
+          <path
+            d="M30.1908 29.8591H10.4766V10.1448H30.1908L20.3337 20.0019L30.1908 29.8591Z"
+            fill="white"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_ii_417_1111"
+          x="0.333496"
+          y="0"
+          width="40"
+          height="40"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="-2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_417_1111"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="effect1_innerShadow_417_1111"
+            result="effect2_innerShadow_417_1111"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_417_1111"
+          x1="40.3335"
+          y1="-1.19209e-06"
+          x2="0.333497"
+          y2="40"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.00343514" stopColor="#E44857" />
+          <stop offset="0.4689" stopColor="#C711E1" />
+          <stop offset="1" stopColor="#7F52FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_417_1111"
+          x1="30.1908"
+          y1="10.1448"
+          x2="10.4766"
+          y2="29.8591"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.00343514" stopColor="#E44857" />
+          <stop offset="0.4689" stopColor="#C711E1" />
+          <stop offset="1" stopColor="#7F52FF" />
+        </linearGradient>
+        <clipPath id="clip0_417_1111">
+          <rect
+            width="19.7143"
+            height="19.7143"
+            fill="white"
+            transform="translate(10.4766 10.1429)"
+          />
+        </clipPath>
+      </defs>
+    </CustomIcon>
+  );
+};
@@ -0,0 +1,88 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from '../CustomIcon';
+
+export const PWAIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      {...props}
+    >
+      <g filter="url(#filter0_ii_417_1121)">
+        <rect width="40" height="40" rx="8" fill="#12B785" />
+        <rect
+          x="0.410714"
+          y="0.410714"
+          width="39.1786"
+          height="39.1786"
+          rx="7.58929"
+          stroke="#082F56"
+          strokeOpacity="0.1"
+          strokeWidth="0.821429"
+        />
+        <path
+          d="M24.5832 26.25H26.2498M12.9165 24.5833V14.5833C12.9165 13.6628 13.6627 12.9167 14.5832 12.9167H25.4165C26.337 12.9167 27.0832 13.6628 27.0832 14.5833V17.0833M12.9165 24.5833H11.6665V25.4167C11.6665 26.3371 12.4127 27.0833 13.3332 27.0833H22.0832M12.9165 24.5833H22.0832M27.0832 17.0833H23.7498C22.8294 17.0833 22.0832 17.8295 22.0832 18.75V26.25C22.0832 27.1705 22.8294 27.9167 23.7498 27.9167H27.0832C28.0036 27.9167 28.7498 27.1705 28.7498 26.25V18.75C28.7498 17.8295 28.0036 17.0833 27.0832 17.0833Z"
+          stroke="white"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_ii_417_1121"
+          x="0"
+          y="0"
+          width="40"
+          height="40"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="-2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_417_1121"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="effect1_innerShadow_417_1121"
+            result="effect2_innerShadow_417_1121"
+          />
+        </filter>
+      </defs>
+    </CustomIcon>
+  );
+};
@@ -0,0 +1,98 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from '../CustomIcon';
+
+export const ReactNativeIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      {...props}
+    >
+      <g filter="url(#filter0_ii_417_1095)">
+        <rect width="40" height="40" rx="8" fill="#00C0F5" />
+        <rect
+          x="0.410714"
+          y="0.410714"
+          width="39.1786"
+          height="39.1786"
+          rx="7.58929"
+          stroke="#082F56"
+          strokeOpacity="0.1"
+          strokeWidth="0.821429"
+        />
+        <path
+          d="M20.0004 21.7819C20.9849 21.7819 21.783 20.9838 21.783 19.9993C21.783 19.0148 20.9849 18.2167 20.0004 18.2167C19.0159 18.2167 18.2178 19.0148 18.2178 19.9993C18.2178 20.9838 19.0159 21.7819 20.0004 21.7819Z"
+          fill="white"
+        />
+        <path
+          d="M19.9998 23.6515C25.2825 23.6515 29.565 22.0164 29.565 19.9993C29.565 17.9823 25.2825 16.3472 19.9998 16.3472C14.7171 16.3472 10.4346 17.9823 10.4346 19.9993C10.4346 22.0164 14.7171 23.6515 19.9998 23.6515Z"
+          stroke="white"
+        />
+        <path
+          d="M16.8372 21.8246C19.4786 26.3996 23.0359 29.2908 24.7827 28.2822C26.5295 27.2737 25.8043 22.7474 23.163 18.1724C20.5216 13.5975 16.9643 10.7063 15.2175 11.7148C13.4707 12.7233 14.1959 17.2496 16.8372 21.8246Z"
+          stroke="white"
+        />
+        <path
+          d="M16.837 18.173C14.1956 22.7479 13.4704 27.2742 15.2172 28.2828C16.964 29.2913 20.5213 26.4001 23.1627 21.8251C25.8041 17.2502 26.5292 12.7238 24.7824 11.7153C23.0356 10.7068 19.4783 13.598 16.837 18.173Z"
+          stroke="white"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_ii_417_1095"
+          x="0"
+          y="0"
+          width="40"
+          height="40"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="-2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_417_1095"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="effect1_innerShadow_417_1095"
+            result="effect2_innerShadow_417_1095"
+          />
+        </filter>
+      </defs>
+    </CustomIcon>
+  );
+};
@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { CustomIconProps } from '../CustomIcon';
+import { ReactNativeIcon } from './ReactNativeIcon';
+import { cloneIcon } from 'utils/cloneIcon';
+import { PWAIcon } from './PWAIcon';
+import { WebAppIcon } from './WebAppIcon';
+import { KotlinIcon } from './KotlinIcon';
+import { SwitfIcon } from './SwiftIcon';
+
+const TEMPLATE_ICONS = [
+  'react-native',
+  'pwa',
+  'web',
+  'kotlin',
+  'swift',
+] as const;
+export type TemplateIconType = (typeof TEMPLATE_ICONS)[number];
+
+export interface TemplateIconProps extends CustomIconProps {
+  type: TemplateIconType;
+}
+
+export const TemplateIcon = ({ type, ...props }: TemplateIconProps) => {
+  const renderIcon = useMemo(() => {
+    switch (type) {
+      case 'react-native':
+        return <ReactNativeIcon />;
+      case 'pwa':
+        return <PWAIcon />;
+      case 'web':
+        return <WebAppIcon />;
+      case 'kotlin':
+        return <KotlinIcon />;
+      case 'swift':
+        return <SwitfIcon />;
+      default:
+        throw new Error(`Invalid template icon type: ${type}`);
+    }
+  }, [type]);
+
+  return cloneIcon(renderIcon, props) as JSX.Element;
+};
@@ -0,0 +1,87 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from '../CustomIcon';
+
+export const WebAppIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="41"
+      height="40"
+      viewBox="0 0 41 40"
+      fill="none"
+      {...props}
+    >
+      <g filter="url(#filter0_ii_417_1126)">
+        <rect x="0.666504" width="40" height="40" rx="8" fill="#F63184" />
+        <rect
+          x="1.07722"
+          y="0.410714"
+          width="39.1786"
+          height="39.1786"
+          rx="7.58929"
+          stroke="#082F56"
+          strokeOpacity="0.1"
+          strokeWidth="0.821429"
+        />
+        <path
+          d="M20.6667 27.9167C25.0389 27.9167 28.5833 24.3723 28.5833 20C28.5833 15.6278 25.0389 12.0833 20.6667 12.0833M20.6667 27.9167C16.2944 27.9167 12.75 24.3723 12.75 20C12.75 15.6278 16.2944 12.0833 20.6667 12.0833M20.6667 27.9167C18.8257 27.9167 17.3333 24.3723 17.3333 20C17.3333 15.6278 18.8257 12.0833 20.6667 12.0833M20.6667 27.9167C22.5076 27.9167 24 24.3723 24 20C24 15.6278 22.5076 12.0833 20.6667 12.0833M28.1667 20H13.1667"
+          stroke="white"
+          strokeLinecap="square"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_ii_417_1126"
+          x="0.666504"
+          y="0"
+          width="40"
+          height="40"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="-2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_417_1126"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="effect1_innerShadow_417_1126"
+            result="effect2_innerShadow_417_1126"
+          />
+        </filter>
+      </defs>
+    </CustomIcon>
+  );
+};
@@ -0,0 +1 @@
+export * from './TemplateIcon';
@@ -43,7 +43,7 @@ export const Sidebar = () => {
  }, [disconnect, navigate]);

  return (
-    <div className="flex flex-col h-full px-6 py-8 gap-9">
+    <nav className="flex flex-col h-full px-6 py-8 gap-9">
      {/* Logo */}
      <Link to={`/${orgSlug}`}>
        <div className="flex items-center gap-3 px-2">
@@ -138,6 +138,6 @@ export const Sidebar = () => {
          </Tabs.List>
        </Tabs>
      </div>
-    </div>
+    </nav>
  );
 };
@@ -1,16 +1,44 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, useMemo } from 'react';
 import { cn } from 'utils/classnames';

-export interface WavyBorderProps extends ComponentPropsWithoutRef<'div'> {}
+type WaveBorderVariant = 'stroke' | 'stroke-and-fill';
+
+export interface WavyBorderProps extends ComponentPropsWithoutRef<'div'> {
+  variant?: WaveBorderVariant;
+}

 export const WavyBorder = ({
  className,
-  children,
+  variant = 'stroke',
  ...props
 }: WavyBorderProps) => {
+  const imageSrc = useMemo(() => {
+    switch (variant) {
+      case 'stroke-and-fill':
+        return '/wavy-border-line-and-fill.svg';
+      case 'stroke':
+      default:
+        return '/wavy-border-line.svg';
+    }
+  }, [variant]);
+
  return (
-    <div {...props} className={cn('wave', className)}>
-      {children}
+    <div
+      {...props}
+      className={cn(className)}
+      style={{
+        // If adding background beneath the wave, we use mask
+        mask: `url(/wavy-border-fill.svg) repeat-x top`,
+        WebkitMask: `url(/wavy-border-fill.svg) repeat-x top`,
+      }}
+    >
+      {/* Wave */}
+      <div
+        className="h-1 w-full bg-repeat-x bg-top"
+        style={{
+          backgroundImage: `url(${imageSrc})`,
+        }}
+      />
    </div>
  );
 };
@@ -153,12 +153,4 @@
  .focus-ring {
    @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none;
  }
-
-  .wave {
-    background-image: url('../public/wave-border.svg');
-    background-repeat: repeat-x;
-    background-position: top;
-    background-size: cover;
-    @apply w-full h-1;
-  }
 }
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-
-import { OctokitProvider } from 'context/OctokitContext';
-import { Sidebar } from 'components/shared/Sidebar';
-
-const OrgSlug = () => {
-  return (
-    <div className="grid grid-cols-5 h-screen bg-snowball-50">
-      <>
-        <div className="h-full">
-          <Sidebar />
-        </div>
-        <div className="col-span-4 h-full p-3 overflow-y-hidden">
-          <div className="bg-white rounded-3xl h-full overflow-y-auto shadow-sm">
-            <OctokitProvider>
-              <Outlet />
-            </OctokitProvider>
-          </div>
-        </div>
-      </>
-    </div>
-  );
-};
-
-export default OrgSlug;
@@ -0,0 +1,31 @@
+import { Sidebar } from 'components/shared/Sidebar';
+import { OctokitProvider } from 'context/OctokitContext';
+import React, { ComponentPropsWithoutRef } from 'react';
+import { Outlet } from 'react-router-dom';
+import { cn } from 'utils/classnames';
+
+export interface DashboardLayoutProps
+  extends ComponentPropsWithoutRef<'section'> {}
+
+export const DashboardLayout = ({
+  className,
+  children,
+  ...props
+}: DashboardLayoutProps) => {
+  return (
+    <section
+      {...props}
+      className={cn('grid grid-cols-5 h-screen bg-snowball-50', className)}
+    >
+      <Sidebar />
+      <div className="col-span-4 h-full px-3 py-3 overflow-y-hidden">
+        <div className="rounded-3xl bg-base-bg h-full shadow-card overflow-y-auto relative">
+          <OctokitProvider>
+            <Outlet />
+          </OctokitProvider>
+        </div>
+      </div>
+      {children}
+    </section>
+  );
+};
@@ -1,34 +0,0 @@
-import React from 'react';
-import { Outlet, Link, useParams } from 'react-router-dom';
-
-import { IconButton } from '@material-tailwind/react';
-
-import HorizontalLine from '../../../components/HorizontalLine';
-
-const CreateProject = () => {
-  const { orgSlug } = useParams();
-  return (
-    <div className="h-full">
-      <div className="flex p-4 items-center">
-        <div className="grow">
-          <h3 className="text-gray-750 text-2xl">Create new project</h3>
-        </div>
-        <div>
-          <Link to={`/${orgSlug}`}>
-            <IconButton
-              className="rounded-full"
-              variant="outlined"
-              placeholder={''}
-            >
-              X
-            </IconButton>
-          </Link>
-        </div>
-      </div>
-      <HorizontalLine />
-      <Outlet />
-    </div>
-  );
-};
-
-export default CreateProject;
@@ -1,29 +1,36 @@
 import React from 'react';

-import templates from '../../../../assets/templates';
-import TemplateCard from '../../../../components/projects/create/TemplateCard';
-import RepositoryList from '../../../../components/projects/create/RepositoryList';
-import ConnectAccount from '../../../../components/projects/create/ConnectAccount';
-import { useOctokit } from '../../../../context/OctokitContext';
+import templates from 'assets/templates';
+import { RepositoryList } from 'components/projects/create/RepositoryList';
+import ConnectAccount from 'components/projects/create/ConnectAccount';
+import { useOctokit } from 'context/OctokitContext';
+import { Heading } from 'components/shared/Heading';
+import { TemplateCard } from 'components/projects/create/TemplateCard';

 const NewProject = () => {
  const { octokit, updateAuth, isAuth } = useOctokit();

  return isAuth ? (
    <>
-      <h5 className="mt-4 ml-4">Start with template</h5>
-      <div className="grid grid-cols-3 p-4 gap-4">
-        {templates.map((template) => {
-          return (
-            <TemplateCard
-              isGitAuth={Boolean(octokit)}
-              template={template}
-              key={template.id}
-            />
-          );
-        })}
+      <div className="space-y-3">
+        <Heading as="h3" className="font-medium text-lg">
+          Start with template
+        </Heading>
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
+          {templates.map((template) => {
+            return (
+              <TemplateCard
+                isGitAuth={Boolean(octokit)}
+                template={template}
+                key={template.id}
+              />
+            );
+          })}
+        </div>
      </div>
-      <h5 className="mt-4 ml-4">Import a repository</h5>
+      <Heading as="h3" className="font-medium text-lg mt-10">
+        Import a repository
+      </Heading>
      <RepositoryList octokit={octokit} />
    </>
  ) : (
@@ -0,0 +1,39 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { Link, Outlet, useParams } from 'react-router-dom';
+
+import { Heading } from 'components/shared/Heading';
+import { WavyBorder } from 'components/shared/WavyBorder';
+import { Button } from 'components/shared/Button';
+import { CrossIcon } from 'components/shared/CustomIcon';
+import { cn } from 'utils/classnames';
+
+export interface CreateProjectLayoutProps
+  extends ComponentPropsWithoutRef<'section'> {}
+
+export const CreateProjectLayout = ({
+  className,
+  ...props
+}: CreateProjectLayoutProps) => {
+  const { orgSlug } = useParams();
+
+  return (
+    <section {...props} className={cn('h-full flex flex-col', className)}>
+      <div className="sticky top-0">
+        <div className="flex px-6 py-4 bg-base-bg items-center gap-4">
+          <Heading as="h2" className="flex-1 text-[24px] font-medium">
+            Create new project
+          </Heading>
+          <Link to={`/${orgSlug}`}>
+            <Button iconOnly variant="tertiary">
+              <CrossIcon size={18} />
+            </Button>
+          </Link>
+        </div>
+        <WavyBorder />
+      </div>
+      <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
+        <Outlet />
+      </section>
+    </section>
+  );
+};
@@ -1,16 +1,16 @@
 import React from 'react';

-import CreateProject from './Create';
 import Id from './Id';
 import AddDomain from './id/settings/domains/add';
 import { createProjectRoutes } from './create/routes';
 import { projectTabRoutes } from './id/routes';
 import { addDomainRoutes } from './id/settings/domains/add/routes';
+import { CreateProjectLayout } from './create/layout';

 export const projectsRoutesWithoutSearch = [
  {
    path: 'create',
-    element: <CreateProject />,
+    element: <CreateProjectLayout />,
    children: createProjectRoutes,
  },
  {