github page (#114)

* ss

* comment out connect account tab model for now

packages/frontend/src/components/projects/create/ConnectAccount.tsx

@@ -1,9 +1,13 @@
-import { Button } from '@material-tailwind/react';
 import React from 'react';
 import OauthPopup from 'react-oauth-popup';
 
 import { useGQLClient } from '../../../context/GQLClientContext';
-import ConnectAccountTabPanel from './ConnectAccountTabPanel';
+import { Button } from 'components/shared/Button';
+import {
+  GitIcon,
+  EllipsesIcon,
+  SnowballIcon,
+} from 'components/shared/CustomIcon';
 
 const SCOPES = 'repo user';
 const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${
@@ -14,7 +18,9 @@ interface ConnectAccountInterface {
   onAuth: (token: string) => void;
 }
 
-const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
+const ConnectAccount: React.FC<ConnectAccountInterface> = ({
+  onAuth: onToken,
+}: ConnectAccountInterface) => {
   const client = useGQLClient();
 
   const handleCode = async (code: string) => {
@@ -27,17 +33,26 @@ const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
 
   // TODO: Use correct height
   return (
-    <div className="bg-gray-100 flex flex-col p-4 justify-center items-center text-center text-sm h-full rounded-2xl">
+    <div className="bg-gray-100 flex flex-col p-4 gap-7 justify-center items-center text-center text-sm h-full rounded-2xl">
-      <div>^</div>
+      <div className="w-52 h-16 justify-center items-center gap-4 inline-flex">
-      <div>
+        <div className="w-16 h-16 bg-blue-100 rounded-2xl shadow-inner border border-sky-950 border-opacity-10 justify-center items-center gap-2.5 inline-flex">
-        <p>Connect to your git account</p>
+          <GitIcon />
-        <p>
+        </div>
-          Once connected, you can import a repository from your
+        <EllipsesIcon className="items-center gap-1.5 flex" />
-          <br />
+        <div className="w-16 h-16 bg-blue-400 rounded-2xl shadow-inner border border-sky-950 border-opacity-10 justify-center items-center gap-2.5 flex">
-          account or start with one of our templates.
+          <SnowballIcon />
-        </p>
+        </div>
       </div>
-      <div className="mt-2 flex">
+      <div>
+        <div className="text-center text-slate-900 text-xl font-medium leading-7">
+          Connect to your Git account
+        </div>
+        <div className="text-center text-slate-600 text-base font-normal leading-normal">
+          Once connected, you can import a repository from your account or start
+          with one of our templates.
+        </div>
+      </div>
+      <div className="mt-2 flex gap-3">
         <OauthPopup
           url={GITHUB_OAUTH_URL}
           onCode={handleCode}
@@ -46,17 +61,15 @@ const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
           width={1000}
           height={1000}
         >
-          {/* TODO: figure out what placeholder is for */}
+          <Button>Connect to GitHub</Button>
-          <Button className="rounded-full mx-2" placeholder={''}>
-            Connect to Github
-          </Button>
         </OauthPopup>
-        {/* TODO: figure out what placeholder is for */}
+        <Button>Connect to Gitea</Button>
-        <Button className="rounded-full mx-2" placeholder={''}>
-          Connect to Gitea
-        </Button>
       </div>
-      <ConnectAccountTabPanel />
+
+      {/* TODO: Add ConnectAccountTabPanel */}
+      {/* <div className="rounded-l shadow p-2 flex-col justify-start items-start gap-2 inline-flex">
+        <ConnectAccountTabPanel />
+      </div> */}
     </div>
   );
 };

packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx

@@ -1,21 +1,24 @@
 import React from 'react';
 
-import { Tabs, TabsHeader, Tab } from '@material-tailwind/react';
+import { Tabs } from 'components/shared/Tabs';
 
-const ConnectAccountTabPanel = () => {
+const ConnectAccountTabPanel: React.FC = () => {
   return (
-    <Tabs className="grid bg-white h-32 p-2 m-4 rounded-md" value="import">
+    <Tabs
-      <TabsHeader className="grid grid-cols-2" placeholder={''}>
+      defaultValue="Connect Accounts Tab Panel"
-        <Tab className="row-span-1" value="import" placeholder={''}>
+      orientation="horizontal"
-          Import a repository
+      className="mt-10"
-        </Tab>
+    >
-        <Tab className="row-span-2" value="template" placeholder={''}>
+      <Tabs.List>
-          Start with a template
+        {[
-        </Tab>
+          { title: 'Import a repository' },
-      </TabsHeader>
+          { title: 'Start with a template' },
-      {/* <TabsBody> */}
+        ].map(({ title }, index) => (
-      {/* TODO: Add content */}
+          <Tabs.Trigger value={title} key={index}>
-      {/* </TabsBody> */}
+            {title}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
     </Tabs>
   );
 };

packages/frontend/src/components/projects/create/Deploy.tsx

@@ -5,7 +5,7 @@ import { Button, Typography } from '@material-tailwind/react';
 
 import { DeployStep, DeployStatus } from './DeployStep';
 import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
-import ConfirmDialog from '../../shared/ConfirmDialog';
+import ConfirmDialog from 'components/shared/ConfirmDialog';
 
 const TIMEOUT_DURATION = 5000;
 const Deploy = () => {

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const EllipseIcon: React.FC<CustomIconProps> = (props) => {
+  return (
+    <CustomIcon width="9" height="8" viewBox="0 0 9 8" fill="none" {...props}>
+      <circle cx="4.5" cy="4" r="4" fill="#082F56" fillOpacity="0.1" />
+    </CustomIcon>
+  );
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+import { EllipseIcon } from './EllipseIcon';
+
+export const EllipsesIcon: React.FC<CustomIconProps> = (props) => {
+  return (
+    <CustomIcon width="51" height="8" viewBox="0 0 51 8" fill="none" {...props}>
+      <EllipseIcon />
+      <EllipseIcon x="14" />
+      <EllipseIcon x="28" />
+      <EllipseIcon x="42" />
+    </CustomIcon>
+  );
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const GitIcon: React.FC<CustomIconProps> = (props) => {
+  return (
+    <CustomIcon
+      width="37"
+      height="36"
+      viewBox="0 0 37 36"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M35.7782 16.4219L20.0791 0.723956C19.864 0.508762 19.6087 0.338053 19.3276 0.221583C19.0466 0.105114 18.7453 0.045166 18.4411 0.045166C18.1368 0.045166 17.8356 0.105114 17.5545 0.221583C17.2735 0.338053 17.0181 0.508762 16.8031 0.723956L13.5443 3.9843L17.6788 8.11882C18.1649 7.95374 18.6875 7.92797 19.1875 8.04442C19.6874 8.16088 20.1448 8.41491 20.5079 8.77778C20.8731 9.14329 21.128 9.60418 21.2435 10.1077C21.359 10.6113 21.3304 11.1372 21.161 11.6253L25.1473 15.6103C25.6355 15.4408 26.1616 15.4122 26.6653 15.5279C27.169 15.6437 27.6299 15.899 27.9952 16.2646C28.251 16.5204 28.454 16.8241 28.5925 17.1584C28.7309 17.4926 28.8022 17.8509 28.8022 18.2127C28.8022 18.5745 28.7309 18.9328 28.5925 19.267C28.454 19.6013 28.251 19.905 27.9952 20.1608C27.4779 20.6776 26.7766 20.9678 26.0455 20.9678C25.3143 20.9678 24.6131 20.6776 24.0958 20.1608C23.7116 19.7759 23.4497 19.286 23.3434 18.7526C23.237 18.2192 23.2907 17.6663 23.4979 17.1634L19.7805 13.4472V23.2287C20.1729 23.4225 20.5134 23.707 20.7739 24.0586C21.0345 24.4103 21.2075 24.8189 21.2786 25.2507C21.3497 25.6825 21.317 26.1251 21.183 26.5417C21.0491 26.9583 20.8178 27.337 20.5083 27.6465C20.2525 27.9023 19.9488 28.1053 19.6146 28.2438C19.2803 28.3822 18.922 28.4535 18.5602 28.4535C18.1984 28.4535 17.8402 28.3822 17.5059 28.2438C17.1716 28.1053 16.8679 27.9023 16.6121 27.6465C16.3562 27.3907 16.1532 27.0869 16.0147 26.7526C15.8762 26.4183 15.8049 26.06 15.8049 25.6982C15.8049 25.3363 15.8762 24.978 16.0147 24.6437C16.1532 24.3094 16.3562 24.0057 16.6121 23.7499C16.8699 23.4916 17.1763 23.2869 17.5137 23.1477V13.2762C17.1777 13.1378 16.8724 12.9344 16.6153 12.6777C16.3582 12.421 16.1543 12.116 16.0154 11.7802C15.8765 11.4445 15.8053 11.0846 15.8059 10.7212C15.8065 10.3579 15.8789 9.9982 16.0189 9.66291L11.9423 5.58552L1.17673 16.3483C0.742912 16.783 0.499268 17.372 0.499268 17.9862C0.499268 18.6003 0.742912 19.1893 1.17673 19.624L16.8766 35.3239C17.3113 35.7576 17.9002 36.0011 18.5143 36.0011C19.1283 36.0011 19.7172 35.7576 20.1519 35.3239L35.7782 19.6975C36.212 19.2629 36.4557 18.6738 36.4557 18.0597C36.4557 17.4456 36.212 16.8566 35.7782 16.4219Z"
+        fill="#158FFF"
+      />
+    </CustomIcon>
+  );
+};

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const SnowballIcon: React.FC<CustomIconProps> = (props) => {
+  return (
+    <CustomIcon
+      width="41"
+      height="28"
+      viewBox="0 0 41 28"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.2898 0.0141679C16.9879 0.197656 19.8512 2.8136 22.4926 5.37543C25.1675 7.96975 27.9859 10.7641 28.1852 14.4608C28.3924 18.3031 26.397 21.9641 23.5274 24.5678C20.7709 27.0689 17.0322 27.8722 13.2898 27.9763C9.40947 28.0842 5.13223 27.9321 2.45841 25.1539C-0.178535 22.414 0.162951 18.2384 0.282169 14.4608C0.396158 10.8489 0.681118 7.11475 3.11295 4.41388C5.67064 1.57324 9.44481 -0.176604 13.2898 0.0141679Z"
+        fill="#4BA4F7"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.4897 0.0139543C21.1879 0.197442 24.0511 2.81338 26.6926 5.37521C29.3675 7.96953 32.1858 10.7639 32.3852 14.4606C32.5923 18.3029 30.597 21.9638 27.7274 24.5676C24.9709 27.0687 21.2321 27.872 17.4897 27.9761C13.6094 28.084 9.33219 27.9319 6.65836 25.1537C4.02142 22.4138 4.3629 18.2382 4.48212 14.4606C4.59611 10.8487 4.88107 7.11454 7.3129 4.41367C9.87059 1.57303 13.6448 -0.176818 17.4897 0.0139543Z"
+        fill="#8AC4FA"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.6899 0.0139543C25.3881 0.197442 28.2513 2.81338 30.8928 5.37521C33.5677 7.96953 36.386 10.7639 36.5853 14.4606C36.7925 18.3029 34.7972 21.9638 31.9276 24.5676C29.1711 27.0687 25.4323 27.872 21.6899 27.9761C17.8096 28.084 13.5324 27.9319 10.8586 25.1537C8.22161 22.4138 8.5631 18.2382 8.68232 14.4606C8.7963 10.8487 9.08126 7.11454 11.5131 4.41367C14.0708 1.57303 17.845 -0.176818 21.6899 0.0139543Z"
+        fill="#CAE4FD"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M25.8899 0.0139543C29.588 0.197442 32.4513 2.81338 35.0927 5.37521C37.7676 7.96953 40.586 10.7639 40.7853 14.4606C40.9925 18.3029 38.9971 21.9638 36.1275 24.5676C33.371 27.0687 29.6323 27.872 25.8899 27.9761C22.0096 28.084 17.7323 27.9319 15.0585 25.1537C12.4216 22.4138 12.763 18.2382 12.8823 14.4606C12.9963 10.8487 13.2812 7.11454 15.7131 4.41367C18.2707 1.57303 22.0449 -0.176818 25.8899 0.0139543Z"
+        fill="white"
+      />
+    </CustomIcon>
+  );
+};

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

@@ -17,3 +17,7 @@ export * from './FolderIcon';
 export * from './SettingsSlidersIcon';
 export * from './LifeBuoyIcon';
 export * from './QuestionMarkRoundIcon';
+export * from './GitIcon';
+export * from './EllipseIcon';
+export * from './EllipsesIcon';
+export * from './SnowballIcon';