diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx index 084cd23b..1fc099a2 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx +++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx @@ -7,7 +7,12 @@ import { GitIcon, EllipsesIcon, SnowballIcon, + GithubIcon, + GitTeaIcon, } from 'components/shared/CustomIcon'; +import { useToast } from 'components/shared/Toast'; +import { IconWithFrame } from 'components/shared/IconWithFrame'; +import { Heading } from 'components/shared/Heading'; const SCOPES = 'repo user'; const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${ @@ -23,47 +28,68 @@ 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 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 */} diff --git a/packages/frontend/src/components/shared/Button/Button.theme.ts b/packages/frontend/src/components/shared/Button/Button.theme.ts index a2cc19ca..5d5ba72e 100644 --- a/packages/frontend/src/components/shared/Button/Button.theme.ts +++ b/packages/frontend/src/components/shared/Button/Button.theme.ts @@ -14,6 +14,8 @@ export const buttonTheme = tv( 'whitespace-nowrap', 'focus-ring', 'disabled:cursor-not-allowed', + 'transition-colors', + 'duration-150', ], variants: { size: { @@ -61,14 +63,13 @@ export const buttonTheme = tv( tertiary: [ 'text-elements-on-tertiary', 'border', - 'border-border-interactive/10', + 'border-border-interactive', 'bg-controls-tertiary', + 'shadow-button', 'hover:bg-controls-tertiary-hovered', 'hover:border-border-interactive-hovered', - 'hover:border-border-interactive-hovered/[0.14]', 'focus-visible:bg-controls-tertiary-hovered', 'focus-visible:border-border-interactive-hovered', - 'focus-visible:border-border-interactive-hovered/[0.14]', 'disabled:text-elements-on-disabled', 'disabled:bg-controls-disabled', 'disabled:border-transparent', @@ -81,10 +82,8 @@ export const buttonTheme = tv( 'bg-transparent', 'hover:bg-controls-tertiary-hovered', 'hover:border-border-interactive-hovered', - 'hover:border-border-interactive-hovered/[0.14]', 'focus-visible:bg-controls-tertiary-hovered', 'focus-visible:border-border-interactive-hovered', - 'focus-visible:border-border-interactive-hovered/[0.14]', 'disabled:text-elements-on-disabled', 'disabled:bg-controls-disabled', 'disabled:border-transparent', @@ -109,10 +108,8 @@ export const buttonTheme = tv( 'bg-transparent', 'hover:bg-controls-tertiary-hovered', 'hover:border-border-interactive-hovered', - 'hover:border-border-interactive-hovered/[0.14]', 'focus-visible:bg-controls-tertiary-hovered', 'focus-visible:border-border-interactive-hovered', - 'focus-visible:border-border-interactive-hovered/[0.14]', 'disabled:text-elements-on-disabled', 'disabled:bg-controls-disabled', 'disabled:border-transparent', 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 2493420c..72205c83 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'; 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..77bea57a --- /dev/null +++ b/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx @@ -0,0 +1,32 @@ +import React, { ComponentPropsWithoutRef, ReactNode } from 'react'; +import { cn } from 'utils/classnames'; + +interface IconWithFrameProps extends ComponentPropsWithoutRef<'div'> { + icon: ReactNode; + hasHighlight?: boolean; +} + +export const IconWithFrame = ({ + icon, + className, + hasHighlight = true, + ...props +}: 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'; diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js index 3b39ddf5..eb0bb315 100644 --- a/packages/frontend/tailwind.config.js +++ b/packages/frontend/tailwind.config.js @@ -152,7 +152,7 @@ export default withMT({ }, boxShadow: { button: - 'inset 0px 0px 4px rgba(255, 255, 255, 0.25), inset 0px -2px 0px rgba(0, 0, 0, 0.04)', + '0px -2px 0px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 4px 0px rgba(255, 255, 255, 0.25) inset', dropdown: '0px 3px 20px rgba(8, 47, 86, 0.1), 0px 0px 4px rgba(8, 47, 86, 0.14)', field: '0px 1px 2px rgba(0, 0, 0, 0.04)',