cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki 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,
EllipsesIcon,
SnowballIcon,
GithubIcon,
GitTeaIcon,
} from 'components/shared/CustomIcon';
const SCOPES = 'repo user';
@ -34,25 +36,31 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
// TODO: Use correct height
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="w-52 h-16 justify-center items-center gap-4 inline-flex">
<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">
<div className="flex flex-col items-center max-w-[420px]">
{/** 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 />
</div>
<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 />
</div>
</div>
<div>
<div className="text-center text-slate-900 text-xl font-medium leading-7">
{/** Text */}
<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
</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 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">
{/** CTA Buttons */}
<div className="mt-2 flex flex-col w-full sm:w-auto sm:flex-row gap-3">
<OauthPopup
url={GITHUB_OAUTH_URL}
onCode={handleCode}
@ -61,9 +69,22 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
width={1000}
height={1000}
>
<Button>Connect to GitHub</Button>
<Button
className="w-full sm:w-auto"
leftIcon={<GithubIcon />}
variant="tertiary"
>
Connect to GitHub
</Button>
</OauthPopup>
<Button>Connect to Gitea</Button>
<Button
className="w-full sm:w-auto"
leftIcon={<GitTeaIcon />}
variant="tertiary"
>
Connect to GitTea
</Button>
</div>
</div>
{/* TODO: Add ConnectAccountTabPanel */}