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/projects/project/ActivityCard.tsx b/packages/frontend/src/components/projects/project/ActivityCard.tsx index 5fa5ae82..3f3cc55e 100644 --- a/packages/frontend/src/components/projects/project/ActivityCard.tsx +++ b/packages/frontend/src/components/projects/project/ActivityCard.tsx @@ -1,45 +1,85 @@ import React from 'react'; - -import { Typography, IconButton, Avatar } from '@material-tailwind/react'; - -import { relativeTimeISO } from '../../../utils/time'; +import { Link } from 'react-router-dom'; import { GitCommitWithBranch } from '../../../types'; +import { Avatar } from 'components/shared/Avatar'; +import { Button } from 'components/shared/Button'; +import { + ArrowRightCircleFilledIcon, + BranchIcon, +} from 'components/shared/CustomIcon'; +import { formatDistance } from 'date-fns'; +import { getInitials } from 'utils/geInitials'; interface ActivityCardProps { activity: GitCommitWithBranch; } const ActivityCard = ({ activity }: ActivityCardProps) => { + const formattedDate = formatDistance( + new Date(activity.commit.author!.date!), + new Date(), + { + addSuffix: true, + }, + ); + return ( -
-
- + +
+ +
+
+ + {activity.commit.author?.name} + + + + {formattedDate} + + {/* Dot */} + + +
+ +
+ + {activity.branch.name} + + + +

+ {activity.commit.message} +

+
+
-
- {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/Button/Button.theme.ts b/packages/frontend/src/components/shared/Button/Button.theme.ts index e3d79527..262cb8f9 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/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/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 e6dc3937..754404be 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'; @@ -34,6 +35,7 @@ export * from './HorizontalDotIcon'; export * from './WarningDiamondIcon'; export * from './ArrowRightCircleIcon'; export * from './ClockOutlineIcon'; +export * from './ArrowRightCircleFilledIcon'; // Templates export * from './templates'; 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/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 ( - - - + ); })}
diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js index 8746e19b..c362e898 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)',