Merge pull request #158 from snowball-tools/andrehadianto/T-4961-create-project-success-page

[T-4961] create project success page

packages/frontend/package.json

@@ -32,6 +32,7 @@
     "downshift": "^8.3.2",
     "eslint-config-react-app": "^7.0.1",
     "gql-client": "^1.0.0",
+    "lottie-react": "^2.4.0",
     "luxon": "^3.4.4",
     "octokit": "^3.1.2",
     "react": "^18.2.0",

packages/frontend/src/components/shared/CustomIcon/ArrowLeftCircleFilledIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ArrowLeftCircleFilledIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM10.4697 15.7803C10.7626 16.0732 11.2374 16.0732 11.5303 15.7803C11.8232 15.4874 11.8232 15.0126 11.5303 14.7197L9.56066 12.75H16.25C16.6642 12.75 17 12.4142 17 12C17 11.5858 16.6642 11.25 16.25 11.25H9.56066L11.5303 9.28033C11.8232 8.98744 11.8232 8.51256 11.5303 8.21967C11.2374 7.92678 10.7626 7.92678 10.4697 8.21967L7.21967 11.4697C6.92678 11.7626 6.92678 12.2374 7.21967 12.5303L10.4697 15.7803Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};

packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundFilledIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const QuestionMarkRoundFilledIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM10 7C9.62268 7 9.29263 7.2086 9.12148 7.52152C8.85646 8.00606 8.24881 8.18401 7.76427 7.91899C7.27973 7.65396 7.10178 7.04632 7.3668 6.56178C7.87463 5.63331 8.86264 5 10 5C11.5148 5 12.5669 6.00643 12.8664 7.189C13.1676 8.37785 12.7101 9.76299 11.3416 10.4472C11.1323 10.5519 11 10.7659 11 11C11 11.5523 10.5523 12 10 12C9.44772 12 9.00001 11.5523 9.00001 11C9.00001 10.0084 9.56027 9.10183 10.4472 8.65836C10.902 8.43099 11.0188 8.03973 10.9277 7.6801C10.835 7.31417 10.5283 7 10 7ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};

packages/frontend/src/components/shared/CustomIcon/index.ts

@@ -18,6 +18,7 @@ export * from './FolderIcon';
 export * from './SettingsSlidersIcon';
 export * from './LifeBuoyIcon';
 export * from './QuestionMarkRoundIcon';
+export * from './QuestionMarkRoundFilledIcon';
 export * from './GitIcon';
 export * from './EllipseIcon';
 export * from './EllipsesIcon';
@@ -38,6 +39,7 @@ export * from './WarningDiamondIcon';
 export * from './ArrowRightCircleIcon';
 export * from './ClockOutlineIcon';
 export * from './ArrowRightCircleFilledIcon';
+export * from './ArrowLeftCircleFilledIcon';
 export * from './GithubStrokeIcon';
 export * from './BranchStrokeIcon';
 export * from './StorageIcon';

packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx

@@ -1,82 +1,106 @@
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
+import Lottie from 'lottie-react';
 
-import { Button } from '@material-tailwind/react';
+import { Badge } from 'components/shared/Badge';
+import { Button } from 'components/shared/Button';
+import {
+  ArrowLeftCircleFilledIcon,
+  LinkChainIcon,
+  QuestionMarkRoundFilledIcon,
+} from 'components/shared/CustomIcon';
+import { Heading } from 'components/shared/Heading';
+
+import logoAnimation from 'components/../../public/lottie/logo.json';
 
 const Id = () => {
   const { id, orgSlug } = useParams();
+
+  const handleSetupDomain = () => {
+    //TODO: Implement this
+  };
   return (
-    <div className="flex justify-center">
-      <div className="w-1/2">
-        <div className="flex justify-center">^</div>
-        <div className="flex flex-col items-center my-10">
-          <div>
-            <h4>Project deployed successfully.</h4>
-          </div>
-          <div>
-            <span>
-              Your project has been deployed at{' '}
-              <Link to="https://www.iglootools.snowballtools.xyz">
-                <span className="text-blue-600">
-                  ^ www.iglootools.snowballtools.xyz
-                </span>
-              </Link>
-            </span>
+    <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
+      {/* Icon */}
+      <div className="flex justify-center">
+        <Lottie animationData={logoAnimation} loop={false} size={40} />
+      </div>
+
+      {/* Heading */}
+      <div className="flex flex-col items-center gap-1.5">
+        <Heading as="h3" className="font-medium text-xl">
+          Project deployed successfully.
+        </Heading>
+        <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
+          Your project has been deployed at{' '}
+          <Button
+            className="no-underline text-elements-link"
+            // TODO: use dynamic value
+            href="https://www.iglootools.snowballtools.xyz"
+            as="a"
+            variant="link-emphasized"
+            external
+            leftIcon={<LinkChainIcon />}
+          >
+            {/* // TODO: use dynamic value */}
+            www.iglootools.snowballtools.xyz
+          </Button>
+        </p>
+      </div>
+
+      {/* Card */}
+      <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
+        {/* Trigger question */}
+        <div className="flex gap-2 justify-center items-center py-3">
+          <div className="h-5 w-5">
+            <QuestionMarkRoundFilledIcon size={18} />
           </div>
+          <Heading as="h5" className="font-sans font-medium text-sm">
+            {`Wondering what's next?`}
+          </Heading>
         </div>
 
-        <div className="bg-gray-100 rounded border w-full">
-          <div className="flex justify-center items-center h-14">
-            ^?&nbsp;<h6>Wondering what’s next?</h6>
-          </div>
-          <div className="bg-white rounded border w-full">
-            <div className="flex p-4">
-              <div className="w-6"> 1</div>
-              <div className="grow">
-                <h6>Add a custom domain</h6>
-                <p className="text-sm text-gray-500">
+        {/* CTA card */}
+        <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
+          <div className="flex gap-2">
+            <Badge variant="secondary">1</Badge>
+            <div className="space-y-3">
+              <div className="flex flex-col gap-1">
+                <Heading as="h6" className="text-sm font-sans">
+                  Add a custom domain
+                </Heading>
+                <p className="text-xs text-elements-low-em font-sans">
                   Make it easy for your visitors to remember your URL with a
                   custom domain.
                 </p>
-                <div className="my-2">
-                  <Button
-                    className="rounded-full"
-                    variant="outlined"
-                    size="sm"
-                    placeholder={''}
-                  >
-                    Setup domain
-                  </Button>
-                </div>
               </div>
+              <Button onClick={handleSetupDomain} variant="tertiary" size="sm">
+                Setup domain
+              </Button>
             </div>
           </div>
         </div>
+      </div>
 
-        <div className="flex justify-center p-4 gap-2 my-5">
-          <div>
-            <Link to="/">
-              <Button
-                className="rounded-full"
-                variant="outlined"
-                placeholder={''}
-              >
-                ^Back to projects
-              </Button>
-            </Link>
-          </div>
-          <div>
-            <Link to={`/${orgSlug}/projects/${id}`}>
-              <Button
-                className="rounded-full"
-                variant="gradient"
-                color="blue"
-                placeholder={''}
-              >
-                View project
-              </Button>
-            </Link>
-          </div>
+      {/* CTA Buttons */}
+      <div className="flex flex-col lg:flex-row justify-center gap-3">
+        <div className="w-full lg:w-fit">
+          <Link to="/">
+            <Button
+              leftIcon={<ArrowLeftCircleFilledIcon />}
+              fullWidth
+              variant="tertiary"
+            >
+              Back to projects
+            </Button>
+          </Link>
+        </div>
+        <div className="w-full lg:w-fit">
+          <Link to={`/${orgSlug}/projects/${id}`}>
+            <Button fullWidth variant="primary">
+              View project
+            </Button>
+          </Link>
         </div>
       </div>
     </div>

yarn.lock

@@ -13006,6 +13006,18 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-react@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lottie-react/-/lottie-react-2.4.0.tgz#f7249eee2b1deee70457a2d142194fdf2456e4bd"
+  integrity sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==
+  dependencies:
+    lottie-web "^5.10.2"
+
+lottie-web@^5.10.2:
+  version "5.12.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"