cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

⚡️ feat: reskin connect github

Browse Source
This commit is contained in:
Andre H 2024-02-28 10:55:10 +07:00
parent 3535bd3a58
commit 3b67396c43
1 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/frontend/src/components/projects/create/ConnectAccount.tsx
View File

@ -7,6 +7,8 @@ import {
GitIcon, GitIcon,
EllipsesIcon, EllipsesIcon,
SnowballIcon, SnowballIcon,
GithubIcon,
GitTeaIcon,
} from 'components/shared/CustomIcon'; } from 'components/shared/CustomIcon';
const SCOPES = 'repo user'; const SCOPES = 'repo user';
@ -34,25 +36,31 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
// TODO: Use correct height // TODO: Use correct height
return ( return (
<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 className="bg-gray-100 flex flex-col p-4 gap-7 justify-center items-center text-center text-sm h-full rounded-2xl">
<div className="w-52 h-16 justify-center items-center gap-4 inline-flex"> <div className="flex flex-col items-center max-w-[420px]">
<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"> {/** Icons */}
<div className="w-52 h-16 justify-center items-center gap-4 inline-flex mb-7">
<div className="relative w-16 h-16 bg-controls-secondary rounded-2xl shadow-inner border border-b-[3px] border-border-interactive border-opacity-10 justify-center items-center gap-2.5 inline-flex">
<div className="bottom-0 absolute w-[37px] h-px bg-gradient-to-r from-gray-0/0 via-gray-0/50 to-gray-0/0" />
<GitIcon /> <GitIcon />
</div> </div>
<EllipsesIcon className="items-center gap-1.5 flex" /> <EllipsesIcon className="items-center gap-1.5 flex" />
<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"> <div className="relative w-16 h-16 bg-blue-400 rounded-2xl shadow-inner border border-b-[3px] border-border-interactive border-opacity-10 justify-center items-center gap-2.5 flex">
<div className="bottom-0 absolute w-[37px] h-px bg-gradient-to-r from-gray-0/0 via-gray-0/50 to-gray-0/0" />
<SnowballIcon /> <SnowballIcon />
</div> </div>
</div> </div>
<div> {/** Text */}
<div className="text-center text-slate-900 text-xl font-medium leading-7"> <div className="flex flex-col gap-1.5 mb-6">
<h1 className="text-center text-slate-900 text-xl font-medium leading-7">
Connect to your Git account Connect to your Git account
</h1>
<p className="text-center text-elements-mid-em">
Once connected, you can import a repository from your account or
start with one of our templates.
</p>
</div> </div>
<div className="text-center text-slate-600 text-base font-normal leading-normal"> {/** CTA Buttons */}
Once connected, you can import a repository from your account or start <div className="mt-2 flex flex-col w-full sm:w-auto sm:flex-row gap-3">
with one of our templates.
</div>
</div>
<div className="mt-2 flex gap-3">
<OauthPopup <OauthPopup
url={GITHUB_OAUTH_URL} url={GITHUB_OAUTH_URL}
onCode={handleCode} onCode={handleCode}
@ -61,9 +69,22 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
width={1000} width={1000}
height={1000} height={1000}
> >
<Button>Connect to GitHub</Button> <Button
className="w-full sm:w-auto"
leftIcon={<GithubIcon />}
variant="tertiary"
>
Connect to GitHub
</Button>
</OauthPopup> </OauthPopup>
<Button>Connect to Gitea</Button> <Button
className="w-full sm:w-auto"
leftIcon={<GitTeaIcon />}
variant="tertiary"
>
Connect to GitTea
</Button>
</div>
</div> </div>
{/* TODO: Add ConnectAccountTabPanel */} {/* TODO: Add ConnectAccountTabPanel */}