From 3214cfc1d43bf0294f81786ef526b4ddc70fa02b Mon Sep 17 00:00:00 2001 From: Cody Bender Date: Wed, 23 Oct 2024 15:44:47 -0400 Subject: [PATCH] style: projects and settings --- packages/frontend/index.html | 8 +- packages/frontend/src/components/Logo.tsx | 1 - packages/frontend/src/components/Stepper.tsx | 4 +- .../projects/ProjectCard/ProjectCard.theme.ts | 22 +++- .../projects/ProjectCard/ProjectCard.tsx | 11 +- .../project/overview/Activity/Activity.tsx | 2 +- .../project/overview/Activity/AuctionCard.tsx | 37 ++++-- .../project/overview/OverviewInfo.tsx | 2 +- .../project/settings/AddMemberDialog.tsx | 6 +- .../settings/DisplayEnvironmentVariables.tsx | 4 +- .../projects/project/settings/MemberCard.tsx | 2 +- .../projects/project/settings/SetupDomain.tsx | 4 +- .../components/shared/Avatar/Avatar.theme.ts | 7 +- .../components/shared/Button/Button.theme.ts | 5 +- .../components/shared/Calendar/Calendar.css | 12 +- .../shared/Calendar/Calendar.theme.ts | 5 + .../components/shared/Calendar/Calendar.tsx | 12 +- .../shared/Checkbox/Checkbox.theme.ts | 14 ++- .../shared/Heading/Heading.theme.ts | 7 +- .../components/shared/Input/Input.theme.ts | 7 +- .../components/shared/Modal/Modal.theme.ts | 10 +- .../components/shared/Radio/Radio.theme.ts | 9 +- .../components/shared/Select/Select.theme.ts | 29 ++++- .../Select/SelectItem/SelectItem.theme.ts | 9 +- .../src/components/shared/Sidebar/Sidebar.tsx | 8 +- .../components/shared/Switch/Switch.theme.ts | 1 + .../components/shared/Table/Table.theme.ts | 4 + .../src/components/shared/Tabs/Tabs.theme.ts | 2 + .../shared/Tooltip/Tooltip.theme.ts | 2 + packages/frontend/src/index.css | 1 + packages/frontend/src/pages/AuthPage.tsx | 1 - packages/frontend/src/pages/index.tsx | 111 +++--------------- .../frontend/src/pages/org-slug/index.tsx | 5 +- .../src/pages/org-slug/projects/Id.tsx | 21 ++-- .../org-slug/projects/id/Deployments.tsx | 11 +- .../pages/org-slug/projects/id/Overview.tsx | 38 +++--- .../src/pages/org-slug/projects/id/routes.tsx | 2 +- .../projects/id/settings/Collaborators.tsx | 5 +- .../id/settings/EnvironmentVariables.tsx | 10 +- .../id/settings/EnvironmentVariablesForm.tsx | 12 +- .../org-slug/projects/id/settings/General.tsx | 10 +- .../org-slug/projects/id/settings/Git.tsx | 20 ++-- .../id/settings/domains/add/Config.tsx | 3 +- .../id/settings/domains/add/index.tsx | 20 +++- packages/frontend/tailwind.config.js | 3 +- 45 files changed, 293 insertions(+), 226 deletions(-) diff --git a/packages/frontend/index.html b/packages/frontend/index.html index c844ebad..a7b6d0ff 100644 --- a/packages/frontend/index.html +++ b/packages/frontend/index.html @@ -1,5 +1,5 @@ - + @@ -10,6 +10,12 @@ Laconic + + +
diff --git a/packages/frontend/src/components/Logo.tsx b/packages/frontend/src/components/Logo.tsx index 4f1dbec8..f4957f14 100644 --- a/packages/frontend/src/components/Logo.tsx +++ b/packages/frontend/src/components/Logo.tsx @@ -1,5 +1,4 @@ import { Link } from 'react-router-dom'; -import { Heading } from './shared/Heading'; interface LogoProps { orgSlug?: string; diff --git a/packages/frontend/src/components/Stepper.tsx b/packages/frontend/src/components/Stepper.tsx index 0c866202..31e7e717 100644 --- a/packages/frontend/src/components/Stepper.tsx +++ b/packages/frontend/src/components/Stepper.tsx @@ -24,8 +24,8 @@ const Stepper = ({ activeStep, stepperValues }: StepperProps) => {
{stepperValue.label} diff --git a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts index 117a2cde..db96fc91 100644 --- a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts +++ b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts @@ -4,7 +4,9 @@ export const projectCardTheme = tv({ slots: { wrapper: [ 'bg-surface-card', + 'dark:bg-overlay2', 'shadow-card', + 'dark:shadow-background', 'rounded-2xl', 'flex', 'flex-col', @@ -17,10 +19,16 @@ export const projectCardTheme = tv({ 'text-sm', 'font-medium', 'text-elements-high-em', + 'dark:text-foreground', 'tracking-[-0.006em]', 'truncate', ], - description: ['text-xs', 'text-elements-low-em', 'truncate'], + description: [ + 'text-xs', + 'text-elements-low-em', + 'dark:text-foreground-secondary', + 'truncate', + ], icons: ['flex', 'items-center', 'gap-1'], lowerContent: [ 'transition-colors', @@ -32,6 +40,7 @@ export const projectCardTheme = tv({ 'gap-2', 'rounded-b-2xl', 'group-hover:bg-surface-card-hovered', + 'dark:group-hover:bg-overlay3', ], latestDeployment: ['flex', 'items-center', 'gap-2'], deploymentStatusContainer: [ @@ -42,10 +51,15 @@ export const projectCardTheme = tv({ 'justify-center', ], deploymentStatus: ['w-1', 'h-1', 'rounded-full'], - deploymentName: ['text-xs', 'text-elements-low-em'], + deploymentName: [ + 'text-xs', + 'text-elements-low-em', + 'dark:text-foreground-secondary', + ], deploymentText: [ 'text-xs', 'text-elements-low-em', + 'dark:text-foreground-secondary', 'font-mono', 'flex', 'items-center', @@ -53,9 +67,11 @@ export const projectCardTheme = tv({ ], wavyBorder: [ 'bg-surface-card', + 'dark:bg-background', 'transition-colors', 'duration-150', 'group-hover:bg-surface-card-hovered', + 'dark:group-hover:bg-overlay2', ], }, variants: { @@ -67,7 +83,7 @@ export const projectCardTheme = tv({ deploymentStatus: ['bg-orange-400'], }, failure: { - deploymentStatus: ['bg-rose-500'], + deploymentStatus: ['bg-error'], }, pending: { deploymentStatus: ['bg-gray-500'], diff --git a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx index e1987d2c..c7798279 100644 --- a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx +++ b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx @@ -88,7 +88,7 @@ export const ProjectCard = ({
{/* Icons */}
- {hasError && } + {hasError && } - - + + Project settings Delete project diff --git a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx index 82d5e016..a8188270 100644 --- a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx +++ b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx @@ -16,7 +16,7 @@ export const Activity = ({
Activity
diff --git a/packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx b/packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx index b5e9ab39..9dd11859 100644 --- a/packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx +++ b/packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx @@ -18,7 +18,6 @@ import { Button, Heading, Tag } from 'components/shared'; const WAIT_DURATION = 5000; const DIALOG_STYLE = { - backgroundColor: 'rgba(0,0,0, .9)', padding: '2em', borderRadius: '0.5em', marginLeft: '0.5em', @@ -86,27 +85,27 @@ export const AuctionCard = ({ project }: { project: Project }) => { return ( <> -
+
Auction details
- + Auction Id - + {project.auctionId}
- + Auction Status
{renderAuctionStatus()}
@@ -116,17 +115,20 @@ export const AuctionCard = ({ project }: { project: Project }) => { <> {deployers?.length > 0 ? (
- + Deployer LRNs {deployers.map((deployer, index) => ( -

+

{'\u2022'} {deployer.deployerLrn}

))}
- + Deployer Funds Status
@@ -141,7 +143,7 @@ export const AuctionCard = ({ project }: { project: Project }) => {
) : (
- + No winning deployers
@@ -155,15 +157,24 @@ export const AuctionCard = ({ project }: { project: Project }) => { onClose={handleCloseDialog} fullWidth maxWidth="md" + PaperProps={{ + className: 'dark:bg-overlay2', + }} > - Auction Details + + Auction Details + {auctionDetails && ( - 
{JSON.stringify(auctionDetails, null, 2)}
+ 
+              {JSON.stringify(auctionDetails, null, 2)}
+
)} - + diff --git a/packages/frontend/src/components/projects/project/overview/OverviewInfo.tsx b/packages/frontend/src/components/projects/project/overview/OverviewInfo.tsx index f926072e..6b565e21 100644 --- a/packages/frontend/src/components/projects/project/overview/OverviewInfo.tsx +++ b/packages/frontend/src/components/projects/project/overview/OverviewInfo.tsx @@ -18,7 +18,7 @@ export const OverviewInfo = ({ return (
-
+
{styledIcon} {label}
diff --git a/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx b/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx index e5599e57..718e2585 100644 --- a/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx +++ b/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx @@ -93,11 +93,11 @@ const AddMemberDialog = ({ /> - - diff --git a/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx b/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx index 1b3deb4d..7fb24409 100644 --- a/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx +++ b/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx @@ -24,7 +24,7 @@ const DisplayEnvironmentVariables = ({ return ( <>
setOpenCollapse((cur) => !cur)} > {openCollapse ? : } @@ -33,7 +33,7 @@ const DisplayEnvironmentVariables = ({
{variables.length === 0 ? ( -
+
No environment variables added yet. Once you add them, they'll show up here.
diff --git a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx index bf6e598f..12c714b0 100644 --- a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx +++ b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx @@ -80,7 +80,7 @@ const MemberCard = ({ return (
{member.name && ( diff --git a/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx b/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx index 099a0c54..03c9b331 100644 --- a/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx +++ b/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx @@ -102,8 +102,8 @@ const SetupDomain = () => { )}
-
diff --git a/packages/frontend/src/components/shared/Avatar/Avatar.theme.ts b/packages/frontend/src/components/shared/Avatar/Avatar.theme.ts index a72a1bc7..e859c846 100644 --- a/packages/frontend/src/components/shared/Avatar/Avatar.theme.ts +++ b/packages/frontend/src/components/shared/Avatar/Avatar.theme.ts @@ -30,7 +30,12 @@ export const avatarTheme = tv( fallback: ['text-elements-warning', 'bg-base-bg-emphasized-warning'], }, blue: { - fallback: ['text-elements-info', 'bg-base-bg-emphasized-info'], + fallback: [ + 'text-elements-info', + 'bg-base-bg-emphasized-info', + 'dark:text-foreground', + 'dark:bg-primary', + ], }, }, size: { diff --git a/packages/frontend/src/components/shared/Button/Button.theme.ts b/packages/frontend/src/components/shared/Button/Button.theme.ts index bbc45c6b..27ef01eb 100644 --- a/packages/frontend/src/components/shared/Button/Button.theme.ts +++ b/packages/frontend/src/components/shared/Button/Button.theme.ts @@ -16,6 +16,7 @@ export const buttonTheme = tv( 'disabled:cursor-not-allowed', 'transition-colors', 'duration-150', + 'font-mono', ], variants: { size: { @@ -28,7 +29,7 @@ export const buttonTheme = tv( true: 'w-full', }, shape: { - default: 'rounded-lg', + default: 'rounded', rounded: 'rounded-full', }, iconOnly: { @@ -95,7 +96,7 @@ export const buttonTheme = tv( 'text-elements-on-danger', 'border', 'border-transparent', - 'bg-border-danger', + 'bg-error', 'hover:bg-controls-danger-hovered', 'focus-visible:bg-controls-danger-hovered', 'disabled:text-elements-on-disabled', diff --git a/packages/frontend/src/components/shared/Calendar/Calendar.css b/packages/frontend/src/components/shared/Calendar/Calendar.css index 49bf10d3..c8f73226 100644 --- a/packages/frontend/src/components/shared/Calendar/Calendar.css +++ b/packages/frontend/src/components/shared/Calendar/Calendar.css @@ -40,11 +40,11 @@ abbr[title] { } .react-calendar__tile { - @apply h-12 w-12 text-elements-high-em; + @apply h-12 w-12 text-elements-high-em dark:text-foreground; } .react-calendar__tile:hover { - @apply bg-base-bg-emphasized rounded-lg; + @apply bg-base-bg-emphasized dark:bg-overlay3 rounded-lg; } .react-calendar__tile:focus-visible { @@ -52,7 +52,7 @@ abbr[title] { } .react-calendar__tile--now { - @apply bg-base-bg-emphasized text-elements-high-em rounded-lg; + @apply bg-base-bg-emphasized dark:bg-overlay3 text-elements-high-em rounded-lg; } .react-calendar__tile--now:hover { @@ -77,7 +77,7 @@ abbr[title] { /* Range -- START */ .react-calendar__tile--range { - @apply bg-controls-secondary text-elements-on-secondary rounded-none; + @apply bg-controls-secondary dark:bg-overlay3 text-elements-on-secondary rounded-none; } .react-calendar__tile--range:hover { @@ -89,7 +89,7 @@ abbr[title] { } .react-calendar__tile--rangeStart { - @apply bg-controls-primary text-elements-on-primary rounded-lg; + @apply bg-controls-primary dark:bg-primary text-elements-on-primary rounded-lg; } .react-calendar__tile--rangeStart:hover { @@ -101,7 +101,7 @@ abbr[title] { } .react-calendar__tile--rangeEnd { - @apply bg-controls-primary text-elements-on-primary rounded-lg; + @apply bg-controls-primary dark:bg-primary text-elements-on-primary rounded-lg; } .react-calendar__tile--rangeEnd:hover { diff --git a/packages/frontend/src/components/shared/Calendar/Calendar.theme.ts b/packages/frontend/src/components/shared/Calendar/Calendar.theme.ts index 88feb6e5..e9b5b262 100644 --- a/packages/frontend/src/components/shared/Calendar/Calendar.theme.ts +++ b/packages/frontend/src/components/shared/Calendar/Calendar.theme.ts @@ -5,7 +5,9 @@ export const calendarTheme = tv({ wrapper: [ 'max-w-[352px]', 'bg-surface-floating', + 'dark:bg-overlay2', 'shadow-dropdown', + 'dark:shadow-background', 'rounded-xl', ], calendar: ['flex', 'flex-col', 'py-2', 'px-2', 'gap-2'], @@ -28,9 +30,12 @@ export const calendarTheme = tv({ 'border', 'border-border-interactive', 'text-elements-high-em', + 'dark:text-foreground', 'shadow-field', 'bg-white', + 'dark:bg-overlay3', 'hover:bg-base-bg-alternate', + 'dark:hover:bg-foreground-secondary', 'focus-visible:bg-base-bg-alternate', ], footer: [ diff --git a/packages/frontend/src/components/shared/Calendar/Calendar.tsx b/packages/frontend/src/components/shared/Calendar/Calendar.tsx index 4ccb8655..43406464 100644 --- a/packages/frontend/src/components/shared/Calendar/Calendar.tsx +++ b/packages/frontend/src/components/shared/Calendar/Calendar.tsx @@ -280,6 +280,7 @@ export const Calendar = ({ showNavigation={false} selectRange={selectRange} onChange={handleChange} + // tileClassName="dark:text-foreground-secondary dark:hover:bg-overlay3" onClickMonth={(date) => handleChangeNavigation('month', date)} onClickYear={(date) => handleChangeNavigation('year', date)} /> @@ -297,19 +298,20 @@ export const Calendar = ({ ) : ( <> {value && ( - )}
-
diff --git a/packages/frontend/src/components/shared/Checkbox/Checkbox.theme.ts b/packages/frontend/src/components/shared/Checkbox/Checkbox.theme.ts index e39b66f3..4304e1eb 100644 --- a/packages/frontend/src/components/shared/Checkbox/Checkbox.theme.ts +++ b/packages/frontend/src/components/shared/Checkbox/Checkbox.theme.ts @@ -11,7 +11,9 @@ export const getCheckboxVariant = tv({ 'focus-visible:text-controls-disabled', 'group-focus-visible:text-controls-disabled', 'data-[state=checked]:text-elements-on-primary', + 'dark:data-[state=checked]:text-foreground', 'data-[state=checked]:group-focus-visible:text-elements-on-primary', + 'dark:data-[state=checked]:group-focus-visible:text-foreground', 'data-[state=indeterminate]:text-elements-on-primary', 'data-[state=checked]:data-[disabled]:text-elements-on-disabled-active', ], @@ -23,6 +25,7 @@ export const getCheckboxVariant = tv({ 'border', 'border-border-interactive/10', 'bg-controls-tertiary', + 'dark:bg-background', 'rounded-md', 'transition-all', 'duration-150', @@ -30,9 +33,13 @@ export const getCheckboxVariant = tv({ 'shadow-button', 'group-hover:border-border-interactive/[0.14]', 'group-hover:bg-controls-tertiary', + 'dark:group-hover:bg-overlay', 'data-[state=checked]:bg-controls-primary', + 'dark:data-[state=checked]:bg-primary', 'data-[state=checked]:hover:bg-controls-primary-hovered', + 'dark:data-[state=checked]:hover:bg-primary-hovered', 'data-[state=checked]:focus-visible:bg-controls-primary-hovered', + 'dark:data-[state=checked]:focus-visible:bg-primary-hovered', 'data-[disabled]:bg-controls-disabled', 'data-[disabled]:shadow-none', 'data-[disabled]:hover:border-border-interactive/10', @@ -43,12 +50,17 @@ export const getCheckboxVariant = tv({ 'text-sm', 'tracking-[-0.006em]', 'text-elements-high-em', + 'dark:text-foreground', 'flex', 'flex-col', 'gap-1', 'px-1', ], - description: ['text-xs', 'text-elements-low-em'], + description: [ + 'text-xs', + 'text-elements-low-em', + 'dark:text-foreground-secondary', + ], }, variants: { disabled: { diff --git a/packages/frontend/src/components/shared/Heading/Heading.theme.ts b/packages/frontend/src/components/shared/Heading/Heading.theme.ts index 5ce5bb5c..f8b434f3 100644 --- a/packages/frontend/src/components/shared/Heading/Heading.theme.ts +++ b/packages/frontend/src/components/shared/Heading/Heading.theme.ts @@ -1,7 +1,12 @@ import { tv, type VariantProps } from 'tailwind-variants'; export const headingTheme = tv({ - base: ['text-elements-high-em', 'font-display', 'font-normal'], + base: [ + 'text-elements-high-em', + 'dark:text-foreground', + 'font-display', + 'font-normal', + ], }); export type HeadingVariants = VariantProps; diff --git a/packages/frontend/src/components/shared/Input/Input.theme.ts b/packages/frontend/src/components/shared/Input/Input.theme.ts index 323b9773..60ec115f 100644 --- a/packages/frontend/src/components/shared/Input/Input.theme.ts +++ b/packages/frontend/src/components/shared/Input/Input.theme.ts @@ -14,10 +14,15 @@ export const inputTheme = tv( 'disabled:cursor-not-allowed', 'disabled:bg-controls-disabled', ], - label: ['text-sm', 'text-elements-high-em'], + label: [ + 'text-sm', + 'text-elements-high-em', + 'dark:text-foreground-secondary', + ], description: ['text-xs', 'text-elements-low-em'], input: [ 'focus-ring', + 'dark:focus:ring-0', 'block', 'w-full', 'h-full', diff --git a/packages/frontend/src/components/shared/Modal/Modal.theme.ts b/packages/frontend/src/components/shared/Modal/Modal.theme.ts index 4552ff70..144c2098 100644 --- a/packages/frontend/src/components/shared/Modal/Modal.theme.ts +++ b/packages/frontend/src/components/shared/Modal/Modal.theme.ts @@ -31,6 +31,7 @@ export const modalTheme = tv({ 'sm:px-6', 'sm:py-5', 'bg-base-bg-alternate', + 'dark:bg-overlay2', ], headerTitle: [ 'text-base', @@ -39,7 +40,11 @@ export const modalTheme = tv({ 'sm:tracking-normal', 'text-elements-high-em', ], - headerDescription: ['text-sm', 'text-elements-low-em'], + headerDescription: [ + 'text-sm', + 'text-elements-low-em', + 'dark:text-foreground-secondary', + ], footer: ['flex', 'gap-3', 'px-4', 'pb-4', 'pt-7', 'sm:pb-6', 'sm:px-6'], content: [ 'h-fit', @@ -53,8 +58,11 @@ export const modalTheme = tv({ 'sm:max-w-[562px]', 'rounded-2xl', 'bg-base-bg', + 'dark:bg-overlay', 'shadow-card', + 'dark:shadow-background', 'text-elements-high-em', + 'dark:text-foreground-secondary', ], body: ['flex-1', 'px-4', 'pt-4', 'sm:pt-6', 'sm:px-6'], }, diff --git a/packages/frontend/src/components/shared/Radio/Radio.theme.ts b/packages/frontend/src/components/shared/Radio/Radio.theme.ts index 84d8fd01..864ad37a 100644 --- a/packages/frontend/src/components/shared/Radio/Radio.theme.ts +++ b/packages/frontend/src/components/shared/Radio/Radio.theme.ts @@ -4,7 +4,12 @@ export const radioTheme = tv({ slots: { root: ['flex', 'gap-3'], wrapper: ['flex', 'items-center', 'gap-2', 'group'], - label: ['text-sm', 'tracking-[-0.006em]', 'text-elements-high-em'], + label: [ + 'text-sm', + 'tracking-[-0.006em]', + 'text-elements-high-em', + 'dark:text-foreground', + ], radio: [ 'w-5', 'h-5', @@ -17,6 +22,7 @@ export const radioTheme = tv({ 'focus-ring', // Checked 'data-[state=checked]:bg-controls-primary', + 'data-[state=checked]:bg-controls-primary', 'data-[state=checked]:group-hover:bg-controls-primary-hovered', ], indicator: [ @@ -36,6 +42,7 @@ export const radioTheme = tv({ 'after:group-focus-visible:bg-controls-disabled', // Checked 'after:data-[state=checked]:bg-elements-on-primary', + 'dark:after:data-[state=checked]:bg-primary-hovered', 'after:data-[state=checked]:group-hover:bg-elements-on-primary', 'after:data-[state=checked]:group-focus-visible:bg-elements-on-primary', ], diff --git a/packages/frontend/src/components/shared/Select/Select.theme.ts b/packages/frontend/src/components/shared/Select/Select.theme.ts index 56b54f24..e04742ef 100644 --- a/packages/frontend/src/components/shared/Select/Select.theme.ts +++ b/packages/frontend/src/components/shared/Select/Select.theme.ts @@ -3,8 +3,16 @@ import { VariantProps, tv } from 'tailwind-variants'; export const selectTheme = tv({ slots: { container: ['flex', 'flex-col', 'relative', 'gap-2', 'w-full'], - label: ['text-sm', 'text-elements-high-em'], - description: ['text-xs', 'text-elements-low-em'], + label: [ + 'text-sm', + 'text-elements-high-em', + 'dark:text-foreground-secondary', + ], + description: [ + 'text-xs', + 'text-elements-low-em', + 'dark:text-foreground-secondary', + ], inputWrapper: [ 'relative', 'flex', @@ -14,6 +22,7 @@ export const selectTheme = tv({ 'w-full', 'rounded-lg', 'bg-transparent', + 'dark:bg-overlay2', 'text-elements-mid-em', 'shadow-sm', 'border', @@ -22,7 +31,7 @@ export const selectTheme = tv({ 'disabled:shadow-none', 'disabled:border-none', ], - input: ['outline-none'], + input: ['outline-none', 'dark:bg-overlay2', 'dark:text-foreground'], iconContainer: [ 'absolute', 'inset-y-0', @@ -32,9 +41,15 @@ export const selectTheme = tv({ 'z-10', 'cursor-pointer', ], - icon: ['text-elements-mid-em'], + icon: ['text-elements-mid-em', 'dark:text-foreground-secondary'], helperIcon: [], - helperText: ['flex', 'gap-2', 'items-center', 'text-elements-low-em'], + helperText: [ + 'flex', + 'gap-2', + 'items-center', + 'text-elements-low-em', + 'dark:text-foreground-secondary', + ], popover: [ 'z-20', 'absolute', @@ -44,12 +59,14 @@ export const selectTheme = tv({ 'gap-0.5', 'min-w-full', 'bg-surface-floating', + 'dark:bg-overlay2', 'shadow-dropdown', 'w-auto', 'max-h-60', 'overflow-auto', 'border', 'border-gray-200', + 'dark:border-overlay', 'rounded-xl', ], }, @@ -79,7 +96,7 @@ export const selectTheme = tv({ 'shadow-none', 'focus:outline-border-danger', ], - helperText: ['text-elements-danger'], + helperText: ['text-error'], }, }, size: { diff --git a/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.theme.ts b/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.theme.ts index 75ac68df..8238eef8 100644 --- a/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.theme.ts +++ b/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.theme.ts @@ -12,11 +12,12 @@ export const selectItemTheme = tv({ 'group', 'data-[disabled]:cursor-not-allowed', ], - icon: ['h-4.5', 'w-4.5', 'text-elements-high-em'], + icon: ['h-4.5', 'w-4.5', 'text-elements-high-em', 'dark:text-foreground'], content: ['flex', 'flex-1', 'whitespace-nowrap'], label: [ 'text-sm', 'text-elements-high-em', + 'dark:text-foreground', 'tracking-[-0.006em]', 'data-[disabled]:text-elements-disabled', ], @@ -47,7 +48,11 @@ export const selectItemTheme = tv({ }, active: { true: { - wrapper: ['bg-base-bg-emphasized', 'data-[disabled]:bg-transparent'], + wrapper: [ + 'bg-base-bg-emphasized', + 'dark:bg-overlay3', + 'data-[disabled]:bg-transparent', + ], }, }, }, diff --git a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx index 15e88d16..b5d88ca4 100644 --- a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx +++ b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx @@ -87,15 +87,15 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => { value="" className="hidden lg:flex" > - - Log Out + + LOG OUT } value=""> - Documentation + DOCUMENTATION } value=""> - Support + SUPPORT diff --git a/packages/frontend/src/components/shared/Switch/Switch.theme.ts b/packages/frontend/src/components/shared/Switch/Switch.theme.ts index 87fbd092..49bb7cbc 100644 --- a/packages/frontend/src/components/shared/Switch/Switch.theme.ts +++ b/packages/frontend/src/components/shared/Switch/Switch.theme.ts @@ -45,6 +45,7 @@ export const switchTheme = tv({ true: { switch: [ 'bg-controls-primary', + 'dark:bg-primary', 'hover:bg-controls-primary-hovered', 'focus-visible:bg-controls-primary-hovered', ], diff --git a/packages/frontend/src/components/shared/Table/Table.theme.ts b/packages/frontend/src/components/shared/Table/Table.theme.ts index 1cbefd80..2b97ad8f 100644 --- a/packages/frontend/src/components/shared/Table/Table.theme.ts +++ b/packages/frontend/src/components/shared/Table/Table.theme.ts @@ -8,6 +8,7 @@ export const tableTheme = tv({ 'border-b', 'border-sky-950/opacity-5', 'text-sky-950', + 'dark:text-foreground-secondary', 'text-sm', 'font-medium', 'leading-tight', @@ -17,6 +18,7 @@ export const tableTheme = tv({ columnHeaderCell: [ 'p-4', 'text-sky-950', + 'dark:text-foreground-secondary', 'text-sm', 'font-medium', 'uppercase', @@ -26,6 +28,7 @@ export const tableTheme = tv({ rowHeaderCell: [ 'p-4', 'text-slate-600', + 'dark:text-foreground', 'text-sm', 'font-normal', 'leading-tight', @@ -36,6 +39,7 @@ export const tableTheme = tv({ 'whitespace-nowrap', 'text-sm', 'text-slate-600', + 'dark:text-foreground', 'font-normal', 'text-left', ], diff --git a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts index ea944c0b..e5852019 100644 --- a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts +++ b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts @@ -11,6 +11,7 @@ export const tabsTheme = tv({ 'cursor-default', 'select-none', 'text-elements-low-em', + 'dark:text-foreground', 'border-b-2', 'border-transparent', 'hover:border-border-interactive/10', @@ -20,6 +21,7 @@ export const tabsTheme = tv({ 'data-[state=active]:font-medium', 'data-[state=active]:text-elements-high-em', 'data-[state=active]:border-elements-high-em', + 'data-[state=active]:border-primary', // Vertical 'data-[orientation=vertical]:px-3', 'data-[orientation=vertical]:py-3', diff --git a/packages/frontend/src/components/shared/Tooltip/Tooltip.theme.ts b/packages/frontend/src/components/shared/Tooltip/Tooltip.theme.ts index c4c1c5e0..38a8d17a 100644 --- a/packages/frontend/src/components/shared/Tooltip/Tooltip.theme.ts +++ b/packages/frontend/src/components/shared/Tooltip/Tooltip.theme.ts @@ -6,8 +6,10 @@ export const tooltipTheme = tv({ 'z-tooltip', 'rounded-md', 'bg-surface-high-contrast', + 'dark:bg-overlay3', 'p-2', 'text-elements-on-high-contrast', + 'dark:text-foreground-secondary', ], arrow: ['fill-surface-high-contrast'], }, diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css index a7775b42..1c87f2bc 100644 --- a/packages/frontend/src/index.css +++ b/packages/frontend/src/index.css @@ -144,6 +144,7 @@ @layer utilities { .focus-ring { @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none; + @apply focus-visible:ring-[3px] dark:focus-visible:ring-primary focus-visible:ring-offset-1 dark:focus-visible:ring-offset-primary focus-visible:outline-none; } @keyframes dialog-overlay-show { diff --git a/packages/frontend/src/pages/AuthPage.tsx b/packages/frontend/src/pages/AuthPage.tsx index d942962b..39b3ed89 100644 --- a/packages/frontend/src/pages/AuthPage.tsx +++ b/packages/frontend/src/pages/AuthPage.tsx @@ -1,4 +1,3 @@ -import { CloudyFlow } from 'components/CloudyFlow'; import { Login } from './auth/Login'; const AuthPage = () => { diff --git a/packages/frontend/src/pages/index.tsx b/packages/frontend/src/pages/index.tsx index 17db31b3..a300e873 100644 --- a/packages/frontend/src/pages/index.tsx +++ b/packages/frontend/src/pages/index.tsx @@ -3,105 +3,28 @@ import { Navigate } from 'react-router-dom'; import { useGQLClient } from '../context/GQLClientContext'; import { Organization } from 'gql-client'; -const owner = { - id: 'user', - name: 'Cody', - email: 'cody@cfb.dev', - isVerified: true, - createdAt: '2024-10-22-12:00:00Z', - updatedAt: '2024-10-22-12:00:00Z', - gitHubToken: 'token', -}; - -const domain = { - id: 'domain', - branch: 'idk', - name: 'Domain', - status: 'Live', - redirectTo: null, - createdAt: '2024-10-22-12:00:00Z', - updatedAt: '2024-10-22-12:00:00Z', -}; -const deployment = { - id: 'deployment', - domain, - branch: 'branch', - commitHash: 'beefb0d', - commitMessage: 'beef', - deployerLrn: 'deployer', - environment: 'Development', - isCurrent: true, - status: 'Ready', - createdBy: owner, - createdAt: '2024-10-22-12:00:00Z', - updatedAt: '2024-10-22-12:00:00Z', -}; -const member = { - id: 'member_id', - member: owner, - permissions: ['Edit'], - isPending: false, - createdAt: '2024-10-22-12:00:00Z', - updatedAt: '2024-10-22-12:00:00Z', -}; - -const environmentVariable = { - id: 'env_var_id', - environment: 'Development', - key: 'key', - value: 'value', - createdAt: '2024-10-22-12:00:00Z', - updatedAt: '2024-10-22-12:00:00Z', -}; -const project = { - id: 'project', - owner, - deployments: [deployment], - name: 'Project', - repository: 'snowball', - prodBranch: 'main', - description: 'description', - template: 'template', - framework: 'framework', - webhooks: ['webhook'], - members: [member], - environmentVariables: [environmentVariable], - createdAt: '2024-10-22-12:00:00Z', - updatedAt: '2024-10-22-12:00:00Z', -}; - -const organizationMember = { - id: 'member_id', - member: owner, - role: 'Owner', - createdAt: '2024-10-22-12:00:00Z', - updatedAt: '2024-10-22-12:00:00Z', -}; -const testOrg = { - id: 'org_id', - name: 'Test Org', - slug: 'test', - projects: [project], - createdAt: '2024-10-22-12:00:00Z', - updatedAt: '2024-10-22-12:00:00Z', - members: [organizationMember], -}; const Index = () => { const client = useGQLClient(); - // const [organization, setOrganization] = useState(testOrg); + const [organization, setOrganization] = useState(); - // const fetchUserOrganizations = useCallback(async () => { - // const { organizations } = await client.getOrganizations(); - // // By default information of first organization displayed - // setOrganization(organizations[0]); - // }, []); - // - // useEffect(() => { - // fetchUserOrganizations(); - // }, []); + const fetchUserOrganizations = useCallback(async () => { + const { organizations } = await client.getOrganizations(); + // By default information of first organization displayed + setOrganization(organizations[0]); + }, []); + + useEffect(() => { + fetchUserOrganizations(); + }, []); return ( - <>{Boolean(testOrg) ? : <>Loading} + <> + {Boolean(organization) ? ( + + ) : ( + <>Loading + )} + ); }; diff --git a/packages/frontend/src/pages/org-slug/index.tsx b/packages/frontend/src/pages/org-slug/index.tsx index cc5c6084..3331f6cd 100644 --- a/packages/frontend/src/pages/org-slug/index.tsx +++ b/packages/frontend/src/pages/org-slug/index.tsx @@ -6,11 +6,12 @@ import { Heading, Badge, Button } from 'components/shared'; import { PlusIcon } from 'components/shared/CustomIcon'; import { useGQLClient } from 'context/GQLClientContext'; import { Project } from 'gql-client'; +import { project as mockProject } from 'pages/index'; const Projects = () => { const client = useGQLClient(); const { orgSlug } = useParams(); - const [projects, setProjects] = useState([]); + const [projects, setProjects] = useState([mockProject]); const fetchProjects = useCallback(async () => { const { projectsInOrganization } = await client.getProjectsInOrganization( @@ -39,7 +40,7 @@ const Projects = () => {
- +
{/* List of projects */} diff --git a/packages/frontend/src/pages/org-slug/projects/Id.tsx b/packages/frontend/src/pages/org-slug/projects/Id.tsx index 468453b5..9abce252 100644 --- a/packages/frontend/src/pages/org-slug/projects/Id.tsx +++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx @@ -78,7 +78,7 @@ const Id = () => { leftIcon={} onClick={() => navigate(-1)} /> - + {project?.name}
@@ -88,17 +88,24 @@ const Id = () => { {...buttonSize} className="h-11 transition-colors" variant="tertiary" + shape="default" > - Open repo + OPEN REPO - {(project.deployments.length > 0) && - - - } + )}
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx b/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx index 66638354..ed0d152f 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx @@ -121,21 +121,22 @@ const DeploymentsTabPanel = () => { }) ) : ( // TODO: Update the height based on the layout, need to re-styling the layout similar to create project layout -
+
-

+

No deployments found

-

+

Please change your search query or filters.

)} 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 ab78cc11..a129250f 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx @@ -126,7 +126,7 @@ const OverviewTabPanel = () => { type="blue" />
- + {project.name} {project.deployments && @@ -136,7 +136,7 @@ const OverviewTabPanel = () => { {deployment.deployer.baseDomain} @@ -161,7 +161,7 @@ const OverviewTabPanel = () => { variant="tertiary" size="sm" > - Setup + SETUP
)} @@ -171,8 +171,8 @@ const OverviewTabPanel = () => { {/* SOURCE */} }>
- - + + {project.deployments[0]?.branch}
@@ -180,23 +180,25 @@ const OverviewTabPanel = () => { {/* DEPLOYMENT */} }> - {project.deployments && - project.deployments.length > 0 && - project.deployments.map((deployment) => ( -
- - - {`https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`} - - - -
- ))} + {project.deployments && + project.deployments.length > 0 && + project.deployments.map((deployment) => ( +
+ + + {`https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`} + + + +
+ ))} {/* DEPLOYMENT DATE */} }> -
+
{relativeTimeMs(project.deployments[0].createdAt)} by ( -
+
Content of integrations tab

There are many variations of passages of Lorem Ipsum available. diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx index 7bb8722c..764c9107 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx @@ -117,9 +117,10 @@ const CollaboratorsTabPanel = () => { size="md" onClick={() => setAddMemberDialogOpen((preVal) => !preVal)} leftIcon={} - variant="secondary" + variant="primary" + shape="default" > - Add member + ADD MEMBER } > diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx index e76aa364..4458fa5c 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx @@ -111,10 +111,10 @@ export const EnvironmentVariablesTabPanel = () => { return ( -

+

A new deployment is required for your changes to take effect.

-
+
setCreateNewVariable((cur) => !cur)} className="p-4" @@ -131,12 +131,12 @@ export const EnvironmentVariablesTabPanel = () => { createEnvironmentVariablesHandler(data), )} > -
+
-
diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx index 447d76fd..e27d5ff3 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx @@ -1,13 +1,11 @@ import { useEffect, useMemo } from 'react'; import { useFieldArray, useFormContext } from 'react-hook-form'; -// TODO: Use custom checkbox component -import { Checkbox } from '@snowballtools/material-tailwind-react-fork'; - import { Button } from 'components/shared/Button'; import { InlineNotification } from 'components/shared/InlineNotification'; import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow'; import { EnvironmentVariablesFormValues } from 'types/types'; +import { Checkbox } from 'components/shared/Checkbox'; const EnvironmentVariablesForm = () => { const { @@ -54,8 +52,12 @@ const EnvironmentVariablesForm = () => { /> ))}
-
{isFieldEmpty && ( diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx index 92f6d708..4b886151 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx @@ -18,6 +18,7 @@ const GeneralTabPanel = () => { const client = useGQLClient(); const { toast } = useToast(); const { project, onUpdate } = useOutletContext(); + console.log(project); const [transferOrganizations, setTransferOrganizations] = useState< SelectOption[] @@ -157,8 +158,9 @@ const GeneralTabPanel = () => { type="submit" size="md" disabled={!updateProjectFormState.isDirty} + shape="default" > - Save + SAVE
{ setSelectedTransferOrganization(value as SelectOption) } /> -
{ onClick={handleDeleteProjectDialog} leftIcon={} > - Delete project + DELETE PROJECT {
-

+

Pull request comments

@@ -153,7 +153,7 @@ const GitTabPanel = () => {
-

+

Commit comments

@@ -171,18 +171,18 @@ const GitTabPanel = () => { className="space-y-3" > -

+

By default, each commit pushed to the{' '} {project.prodBranch} branch initiates a production deployment. You can opt for a different branch for deployment in the settings.

-

+

Branch name

- @@ -191,21 +191,21 @@ const GitTabPanel = () => { className="space-y-3" > -

+

{' '} Webhooks configured to trigger when there is a change in a project's build or deployment status.

-

+

Webhook URL

-
diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx index c63efb17..6ad7f445 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx @@ -102,9 +102,10 @@ const Config = () => { className="w-fit" onClick={handleSubmitDomain} variant="primary" + shape="default" rightIcon={} > - Finish + FINISH ); diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx index 12afcc96..558d2dc7 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx @@ -33,19 +33,29 @@ const AddDomain = () => { return (
- Add Domain + + Add Domain + - + X
-
+
- ^ - + + ^ + + Project Name
diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js index 13a49999..f3adf49e 100644 --- a/packages/frontend/tailwind.config.js +++ b/packages/frontend/tailwind.config.js @@ -13,6 +13,7 @@ export default withMT({ background: '#0F0F0F', overlay: '#18181A', overlay2: '#29292E', + overlay3: '#48474F', primary: '#0000F4', 'primary-hovered': '#0000F4AA', foreground: '#FBFBFB', @@ -30,7 +31,7 @@ export default withMT({ fontFamily: { sans: ['Inter', 'sans-serif'], display: ['Inter Display', 'sans-serif'], - mono: ['JetBrains Mono', 'monospace'], + mono: ['DM Mono', 'monospace'], }, fontSize: { '2xs': '0.625rem',