diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx index ac22a0eb..084cd23b 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx +++ b/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 = ({ + 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 ( -
-
^
-
-

Connect to your git account

-

- Once connected, you can import a repository from your -
- account or start with one of our templates. -

+
+
+
+ +
+ +
+ +
-
+
+
+ Connect to your Git account +
+
+ Once connected, you can import a repository from your account or start + with one of our templates. +
+
+
{ width={1000} height={1000} > - {/* TODO: figure out what placeholder is for */} - + - {/* TODO: figure out what placeholder is for */} - +
- + + {/* TODO: Add ConnectAccountTabPanel */} + {/*
+ +
*/}
); }; diff --git a/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx b/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx index 37730d8d..f7706520 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx +++ b/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 ( - - - - Import a repository - - - Start with a template - - - {/* */} - {/* TODO: Add content */} - {/* */} + + + {[ + { title: 'Import a repository' }, + { title: 'Start with a template' }, + ].map(({ title }, index) => ( + + {title} + + ))} + ); }; diff --git a/packages/frontend/src/components/projects/create/Deploy.tsx b/packages/frontend/src/components/projects/create/Deploy.tsx index 51845369..67698959 100644 --- a/packages/frontend/src/components/projects/create/Deploy.tsx +++ b/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 = () => { diff --git a/packages/frontend/src/components/shared/CustomIcon/EllipseIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/EllipseIcon.tsx new file mode 100644 index 00000000..5e274364 --- /dev/null +++ b/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 = (props) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/EllipsesIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/EllipsesIcon.tsx new file mode 100644 index 00000000..c6cd58b5 --- /dev/null +++ b/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 = (props) => { + return ( + + + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/GitIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/GitIcon.tsx new file mode 100644 index 00000000..df23b2f2 --- /dev/null +++ b/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 = (props) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/SnowballIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/SnowballIcon.tsx new file mode 100644 index 00000000..343e412b --- /dev/null +++ b/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 = (props) => { + return ( + + + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index 881656db..ed646966 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/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';