From 3535bd3a588dc2281bc6a94fb89e5c731003f0d7 Mon Sep 17 00:00:00 2001 From: Andre H Date: Wed, 28 Feb 2024 10:53:05 +0700 Subject: [PATCH 01/11] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20GitTeaIcon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/CustomIcon/GitTeaIcon.tsx | 27 +++++++++++++++++++ .../src/components/shared/CustomIcon/index.ts | 1 + 2 files changed, 28 insertions(+) create mode 100644 packages/frontend/src/components/shared/CustomIcon/GitTeaIcon.tsx diff --git a/packages/frontend/src/components/shared/CustomIcon/GitTeaIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/GitTeaIcon.tsx new file mode 100644 index 00000000..6131822a --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/GitTeaIcon.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const GitTeaIcon: 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 5de3702d..057c3e4e 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -23,6 +23,7 @@ export * from './EllipsesIcon'; export * from './SnowballIcon'; export * from './NotificationBellIcon'; export * from './GithubIcon'; +export * from './GitTeaIcon'; export * from './LockIcon'; export * from './PencilIcon'; export * from './CheckRadioIcon'; From 3b67396c433cac7158e56d8ae9a7d99acb7add55 Mon Sep 17 00:00:00 2001 From: Andre H Date: Wed, 28 Feb 2024 10:55:10 +0700 Subject: [PATCH 02/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20reskin=20con?= =?UTF-8?q?nect=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 = ({ // TODO: Use correct height return (
-
-
- +
+ {/** Icons */} +
+
+
+ +
+ +
+
+ +
- -
- + {/** Text */} +
+

+ 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 + {/** CTA Buttons */} +
+ {}} + title="Snowball" + width={1000} + height={1000} + > + + +
-
- Once connected, you can import a repository from your account or start - with one of our templates. -
-
-
- {}} - title="Snowball" - width={1000} - height={1000} - > - - -
{/* TODO: Add ConnectAccountTabPanel */} From 89306ddcc727210e6736f12250487004c96425ce Mon Sep 17 00:00:00 2001 From: Andre H Date: Wed, 28 Feb 2024 11:19:09 +0700 Subject: [PATCH 03/11] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20toast?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/projects/create/ConnectAccount.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx index e09d3dab..2882ef9c 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx +++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx @@ -10,6 +10,7 @@ import { GithubIcon, GitTeaIcon, } from 'components/shared/CustomIcon'; +import { useToast } from 'components/shared/Toast'; const SCOPES = 'repo user'; const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${ @@ -25,12 +26,20 @@ const ConnectAccount: React.FC = ({ }: ConnectAccountInterface) => { const client = useGQLClient(); + const { toast, dismiss } = useToast(); + const handleCode = async (code: string) => { // Pass code to backend and get access token const { authenticateGitHub: { token }, } = await client.authenticateGitHub(code); onToken(token); + toast({ + onDismiss: dismiss, + id: 'connected-to-github', + title: 'The Git account is connected.', + variant: 'success', + }); }; // TODO: Use correct height From 2585418ed62e3f77322927dddb74dd8b4b5b5336 Mon Sep 17 00:00:00 2001 From: Andre H Date: Wed, 28 Feb 2024 13:39:30 +0700 Subject: [PATCH 04/11] =?UTF-8?q?=F0=9F=94=A7=20chore:=20implement=20IconW?= =?UTF-8?q?ithFrame=20common=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/IconWithFrame/IconWithFrame.tsx | 32 +++++++++++++++++++ .../components/shared/IconWithFrame/index.ts | 1 + 2 files changed, 33 insertions(+) create mode 100644 packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx create mode 100644 packages/frontend/src/components/shared/IconWithFrame/index.ts diff --git a/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx b/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx new file mode 100644 index 00000000..ab3f6a9a --- /dev/null +++ b/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx @@ -0,0 +1,32 @@ +import React, { ReactNode } from 'react'; +import { cn } from 'utils/classnames'; + +interface IconWithFrameProps { + icon: ReactNode; + bgClass?: string; + hasHighlight?: boolean; +} + +export const IconWithFrame = ({ + icon, + bgClass = 'bg-controls-secondary ', + hasHighlight = true, +}: IconWithFrameProps) => { + return ( +
+ {hasHighlight && ( +
+ )} + {icon} +
+ ); +}; diff --git a/packages/frontend/src/components/shared/IconWithFrame/index.ts b/packages/frontend/src/components/shared/IconWithFrame/index.ts new file mode 100644 index 00000000..a7d3a98e --- /dev/null +++ b/packages/frontend/src/components/shared/IconWithFrame/index.ts @@ -0,0 +1 @@ +export * from './IconWithFrame'; From c5273ff530ca21317a85104323c8735b24c17cc5 Mon Sep 17 00:00:00 2001 From: Andre H Date: Wed, 28 Feb 2024 13:39:50 +0700 Subject: [PATCH 05/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20use=20Ic?= =?UTF-8?q?onWithFrame?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/projects/create/ConnectAccount.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx index 2882ef9c..eede598a 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx +++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx @@ -11,6 +11,7 @@ import { GitTeaIcon, } from 'components/shared/CustomIcon'; import { useToast } from 'components/shared/Toast'; +import { IconWithFrame } from 'components/shared/IconWithFrame'; const SCOPES = 'repo user'; const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${ @@ -48,15 +49,9 @@ const ConnectAccount: React.FC = ({
{/** Icons */}
-
-
- -
+ } /> -
-
- -
+ } />
{/** Text */}
From 319822c8e62ef060a35218f9b1102a35a54c7335 Mon Sep 17 00:00:00 2001 From: Andre H Date: Wed, 28 Feb 2024 13:46:09 +0700 Subject: [PATCH 06/11] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20shadow=20to?= =?UTF-8?q?=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/projects/create/ConnectAccount.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx index eede598a..fce56015 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx +++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx @@ -74,7 +74,7 @@ const ConnectAccount: React.FC = ({ height={1000} >
{/** Text */}
-

+ Connect to your Git account -

+

Once connected, you can import a repository from your account or start with one of our templates. From 3493d735b94b04e8114fa4365bfefb752e15c28c Mon Sep 17 00:00:00 2001 From: Andre H Date: Wed, 28 Feb 2024 14:19:02 +0700 Subject: [PATCH 09/11] =?UTF-8?q?=F0=9F=94=A7=20chore:=20replace=20bgClass?= =?UTF-8?q?=20with=20className?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/projects/create/ConnectAccount.tsx | 6 +++--- .../components/shared/IconWithFrame/IconWithFrame.tsx | 9 ++++----- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx index 3d550867..6b38deb4 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx +++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx @@ -52,11 +52,11 @@ const ConnectAccount: React.FC = ({

} /> - } /> + } />
{/** Text */}
- + Connect to your Git account

@@ -65,7 +65,7 @@ const ConnectAccount: React.FC = ({

{/** CTA Buttons */} -
+
{ return ( @@ -18,9 +18,8 @@ export const IconWithFrame = ({ 'relative justify-center items-center gap-2.5 inline-flex', 'w-16 h-16 rounded-2xl shadow-inner', 'border border-b-[3px] border-border-interactive border-opacity-10', - { - [bgClass]: true, - }, + 'bg-controls-secondary', + className, )} > {hasHighlight && ( From 4a87c100d67cf67944248b76c6673a43e5038865 Mon Sep 17 00:00:00 2001 From: Andre H Date: Wed, 28 Feb 2024 14:20:12 +0700 Subject: [PATCH 10/11] =?UTF-8?q?=F0=9F=94=A7=20chore:=20use=20proper=20ty?= =?UTF-8?q?pe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/shared/IconWithFrame/IconWithFrame.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx b/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx index 10eba40c..77bea57a 100644 --- a/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx +++ b/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx @@ -1,9 +1,8 @@ -import React, { ReactNode } from 'react'; +import React, { ComponentPropsWithoutRef, ReactNode } from 'react'; import { cn } from 'utils/classnames'; -interface IconWithFrameProps { +interface IconWithFrameProps extends ComponentPropsWithoutRef<'div'> { icon: ReactNode; - className?: string; hasHighlight?: boolean; } @@ -11,6 +10,7 @@ export const IconWithFrame = ({ icon, className, hasHighlight = true, + ...props }: IconWithFrameProps) => { return (
{hasHighlight && (
From bd4a51c830c7de8aafd29220a5fa358f4a908d2e Mon Sep 17 00:00:00 2001 From: Zachery Ng Date: Wed, 28 Feb 2024 15:45:57 +0800 Subject: [PATCH 11/11] style: update tertiary button --- .../src/components/projects/create/ConnectAccount.tsx | 4 ++-- .../src/components/shared/Button/Button.theme.ts | 11 ++++------- packages/frontend/tailwind.config.js | 2 +- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx index 6b38deb4..1fc099a2 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx +++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx @@ -75,7 +75,7 @@ const ConnectAccount: React.FC = ({ height={1000} >