From 3535bd3a588dc2281bc6a94fb89e5c731003f0d7 Mon Sep 17 00:00:00 2001 From: Andre H Date: Wed, 28 Feb 2024 10:53:05 +0700 Subject: [PATCH 01/12] =?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/12] =?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/12] =?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/12] =?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/12] =?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/12] =?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/12] =?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/12] =?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/12] 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} >
-
- {activity.commit.author?.name} - - {relativeTimeISO(activity.commit.author!.date!)} ^{' '} - {activity.branch.name} - - - {activity.commit.message} - -
-
- - {'>'} - -
-
+ + {/* Separator calc => 100% - 36px (avatar) - 12px (padding-left) - 8px (gap) + */} +
+ ); }; diff --git a/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleFilledIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleFilledIcon.tsx new file mode 100644 index 00000000..480f70e4 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleFilledIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const ArrowRightCircleFilledIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index 5de3702d..2493420c 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -32,3 +32,4 @@ export * from './GitHubLogo'; export * from './ClockIcon'; export * from './HorizontalDotIcon'; export * from './WarningDiamondIcon'; +export * from './ArrowRightCircleFilledIcon'; diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx index aee25875..21f281c1 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx @@ -1,15 +1,9 @@ import React, { useEffect, useState } from 'react'; import { Domain, DomainStatus } from 'gql-client'; -import { Link, useNavigate, useOutletContext } from 'react-router-dom'; +import { useNavigate, useOutletContext } from 'react-router-dom'; import { RequestError } from 'octokit'; -import { - Typography, - Button, - Chip, - Avatar, - Tooltip, -} from '@material-tailwind/react'; +import { Typography, Chip, Avatar, Tooltip } from '@material-tailwind/react'; import ActivityCard from '../../../../components/projects/project/ActivityCard'; import { relativeTimeMs } from '../../../../utils/time'; @@ -17,6 +11,8 @@ import { useOctokit } from '../../../../context/OctokitContext'; import { GitCommitWithBranch, OutletContextType } from '../../../../types'; import { useGQLClient } from '../../../../context/GQLClientContext'; import { formatAddress } from '../../../../utils/format'; +import { Button } from 'components/shared/Button'; +import { Heading } from 'components/shared/Heading'; const COMMITS_PER_PAGE = 4; @@ -107,9 +103,9 @@ const OverviewTabPanel = () => { }, [project]); return ( -
-
-
+
+
+
{ /> @@ -179,21 +174,17 @@ const OverviewTabPanel = () => {
No current deployment found
)}
-
-
- - Activity - - +
-
+
{activities.map((activity, index) => { return ( - - - + ); })}