From 3b67396c433cac7158e56d8ae9a7d99acb7add55 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Wed, 28 Feb 2024 10:55:10 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20reskin=20connect?=
 =?UTF-8?q?=20github?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projects/create/ConnectAccount.tsx        | 75 ++++++++++++-------
 1 file changed, 48 insertions(+), 27 deletions(-)

diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx
index 084cd23b..e09d3dab 100644
--- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx
+++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx
@@ -7,6 +7,8 @@ import {
   GitIcon,
   EllipsesIcon,
   SnowballIcon,
+  GithubIcon,
+  GitTeaIcon,
 } from 'components/shared/CustomIcon';
 
 const SCOPES = 'repo user';
@@ -34,36 +36,55 @@ 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">
-          <GitIcon />
+      <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="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>
-        <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">
-          <SnowballIcon />
+        {/** 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>
-      <div>
-        <div className="text-center text-slate-900 text-xl font-medium leading-7">
-          Connect to your Git account
+        {/** 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}
+            onClose={() => {}}
+            title="Snowball"
+            width={1000}
+            height={1000}
+          >
+            <Button
+              className="w-full sm:w-auto"
+              leftIcon={<GithubIcon />}
+              variant="tertiary"
+            >
+              Connect to GitHub
+            </Button>
+          </OauthPopup>
+          <Button
+            className="w-full sm:w-auto"
+            leftIcon={<GitTeaIcon />}
+            variant="tertiary"
+          >
+            Connect to GitTea
+          </Button>
         </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}
-          onClose={() => {}}
-          title="Snowball"
-          width={1000}
-          height={1000}
-        >
-          <Button>Connect to GitHub</Button>
-        </OauthPopup>
-        <Button>Connect to Gitea</Button>
       </div>
 
       {/* TODO: Add ConnectAccountTabPanel */}