From 6709e719c14ca097761f9eb1f81115c69dc369d4 Mon Sep 17 00:00:00 2001 From: Jonathan Brennan Date: Tue, 3 Feb 2026 10:00:15 -0600 Subject: [PATCH] Implement new color themes (#7592) --- .changeset/thin-animals-smell.md | 5 + .eslintrc.cjs | 6 +- .vscode/settings.json | 3 + packages/web/app/index.html | 10 +- .../app/src/components/admin/AdminStats.tsx | 2 +- packages/web/app/src/components/auth.tsx | 6 +- .../web/app/src/components/common/index.tsx | 16 +- packages/web/app/src/components/error.tsx | 2 +- .../src/components/get-started/trigger.tsx | 8 +- .../app/src/components/get-started/wizard.tsx | 10 +- .../layouts/organization-selectors.tsx | 19 +- .../src/components/layouts/organization.tsx | 75 +- .../components/layouts/project-selector.tsx | 23 +- .../app/src/components/layouts/project.tsx | 50 +- .../components/layouts/target-selector.tsx | 45 +- .../web/app/src/components/layouts/target.tsx | 54 +- .../app/src/components/navigation/header.tsx | 11 + .../navigation/primary-navigation-link.tsx | 18 + .../navigation/secondary-navigation.tsx | 11 + .../components/organization/Permissions.tsx | 4 +- .../billing/BillingPlanPicker.tsx | 12 +- .../organization/billing/PlanSummary.tsx | 4 +- .../organization/members/common.tsx | 6 +- .../organization/members/invitations.tsx | 16 +- .../components/organization/members/list.tsx | 16 +- .../members/member-role-picker.tsx | 4 +- .../members/permission-selector.tsx | 4 +- .../members/resource-selector.tsx | 38 +- .../components/organization/members/roles.tsx | 12 +- .../access-tokens/access-tokens-sub-page.tsx | 2 +- .../create-access-token-sheet-content.tsx | 6 +- .../access-tokens/permission-detail-view.tsx | 6 +- .../settings/oidc-integration-section.tsx | 20 +- ...te-personal-access-token-sheet-content.tsx | 6 +- .../personal-access-tokens-sub-page.tsx | 2 +- .../src/components/organization/support.tsx | 11 +- .../components/policy/policy-config-box.tsx | 2 +- .../components/policy/policy-list-item.tsx | 8 +- .../src/components/policy/policy-settings.tsx | 4 +- .../rules-configuration/boolean-config.tsx | 2 +- .../rules-configuration/enum-config.tsx | 8 +- .../multiselect-config.tsx | 2 +- .../naming-convention-rule-editor.tsx | 5 +- .../rules-configuration/severity-toggle.tsx | 12 +- .../rules-configuration/string-config.tsx | 2 +- .../project/alerts/channels-table.tsx | 2 +- .../project/alerts/create-channel.tsx | 6 +- ...ate-project-access-token-sheet-content.tsx | 6 +- .../project-access-tokens-sub-page.tsx | 2 +- .../project/settings/external-composition.tsx | 4 +- .../project/settings/legacy-composition.tsx | 2 +- .../project/settings/native-composition.tsx | 18 +- .../src/components/target/explorer/common.tsx | 40 +- .../src/components/target/explorer/filter.tsx | 6 +- .../target/explorer/graphql-arguments.tsx | 4 +- .../target/explorer/graphql-fields.tsx | 6 +- .../target/explorer/super-graph-metadata.tsx | 4 +- .../target/history/errors-and-changes.tsx | 70 +- .../components/target/insights/Filters.tsx | 24 +- .../src/components/target/insights/List.tsx | 4 +- .../src/components/target/insights/Stats.tsx | 54 +- .../target/laboratory/connect-lab-modal.tsx | 8 +- .../components/target/proposals/Review.tsx | 6 +- .../target/proposals/change-detail.tsx | 8 +- .../components/target/proposals/editor.tsx | 8 +- .../src/components/target/proposals/index.tsx | 4 +- .../proposals/schema-diff/components.tsx | 12 +- .../target/proposals/schema-diff/lines.tsx | 6 +- .../target/proposals/schema-diff/words.tsx | 2 +- .../proposals/stage-transition-select.tsx | 2 +- .../target/proposals/version-select.tsx | 2 +- .../target/settings/cdn-access-tokens.tsx | 2 +- .../target/settings/schema-contracts.tsx | 4 +- .../src/components/theme/theme-provider.tsx | 26 +- .../app/src/components/ui/alert-dialog.tsx | 6 +- packages/web/app/src/components/ui/alert.tsx | 6 +- packages/web/app/src/components/ui/badge.tsx | 18 +- packages/web/app/src/components/ui/button.tsx | 19 +- .../web/app/src/components/ui/calendar.tsx | 14 +- .../web/app/src/components/ui/callout.tsx | 8 +- packages/web/app/src/components/ui/card.tsx | 13 +- .../src/components/ui/changelog/changelog.tsx | 19 +- packages/web/app/src/components/ui/chart.tsx | 31 +- .../web/app/src/components/ui/checkbox.tsx | 2 +- packages/web/app/src/components/ui/code.tsx | 4 +- .../web/app/src/components/ui/command.tsx | 19 +- .../src/components/ui/date-range-picker.tsx | 6 +- packages/web/app/src/components/ui/dialog.tsx | 12 +- .../web/app/src/components/ui/docs-note.tsx | 8 +- .../src/components/ui/dotted-background.tsx | 4 +- .../app/src/components/ui/dropdown-menu.tsx | 16 +- .../web/app/src/components/ui/empty-list.tsx | 6 +- packages/web/app/src/components/ui/form.tsx | 15 +- .../web/app/src/components/ui/heading.tsx | 2 +- .../web/app/src/components/ui/hover-card.tsx | 2 +- packages/web/app/src/components/ui/icon.tsx | 4 +- .../web/app/src/components/ui/input-copy.tsx | 6 +- packages/web/app/src/components/ui/input.tsx | 2 +- packages/web/app/src/components/ui/label.tsx | 2 +- packages/web/app/src/components/ui/link.tsx | 4 +- .../web/app/src/components/ui/not-found.tsx | 2 +- .../src/components/ui/page-content-layout.tsx | 2 +- packages/web/app/src/components/ui/page.tsx | 2 +- .../web/app/src/components/ui/popover.tsx | 4 +- .../web/app/src/components/ui/query-error.tsx | 6 +- .../web/app/src/components/ui/radio-group.tsx | 2 +- .../web/app/src/components/ui/resizable.tsx | 4 +- .../src/components/ui/resource-details.tsx | 2 +- .../web/app/src/components/ui/scroll-area.tsx | 2 +- packages/web/app/src/components/ui/select.tsx | 12 +- .../web/app/src/components/ui/separator.tsx | 2 +- packages/web/app/src/components/ui/sheet.tsx | 20 +- .../web/app/src/components/ui/sidebar.tsx | 44 +- .../web/app/src/components/ui/skeleton.tsx | 2 +- .../web/app/src/components/ui/spinner.tsx | 2 +- .../web/app/src/components/ui/stepper.tsx | 10 +- packages/web/app/src/components/ui/switch.tsx | 4 +- packages/web/app/src/components/ui/table.tsx | 10 +- packages/web/app/src/components/ui/tabs.tsx | 12 +- packages/web/app/src/components/ui/text.tsx | 61 + .../web/app/src/components/ui/textarea.tsx | 2 +- packages/web/app/src/components/ui/toast.tsx | 17 +- .../web/app/src/components/ui/tooltip.tsx | 2 +- .../web/app/src/components/ui/user-menu.tsx | 17 +- .../web/app/src/components/v2/accordion.tsx | 6 +- .../app/src/components/v2/autocomplete.tsx | 18 +- packages/web/app/src/components/v2/avatar.tsx | 4 +- packages/web/app/src/components/v2/card.tsx | 2 +- .../web/app/src/components/v2/checkbox.tsx | 4 +- .../web/app/src/components/v2/combobox.tsx | 25 +- .../web/app/src/components/v2/diff-editor.tsx | 10 +- .../app/src/components/v2/graphql-block.tsx | 5 +- .../web/app/src/components/v2/inline-code.tsx | 4 +- packages/web/app/src/components/v2/input.tsx | 8 +- packages/web/app/src/components/v2/modal.tsx | 8 +- .../transfer-organization-ownership.tsx | 22 +- .../web/app/src/components/v2/radio-group.tsx | 4 +- .../app/src/components/v2/radix-button.tsx | 4 +- .../app/src/components/v2/radix-select.tsx | 8 +- packages/web/app/src/components/v2/select.tsx | 6 +- packages/web/app/src/components/v2/slider.tsx | 6 +- .../web/app/src/components/v2/sortable.tsx | 4 +- packages/web/app/src/components/v2/switch.tsx | 4 +- packages/web/app/src/components/v2/table.tsx | 4 +- packages/web/app/src/components/v2/tag.tsx | 4 +- .../web/app/src/components/v2/tooltip.tsx | 4 +- packages/web/app/src/index.css | 599 +++--- .../laboratory/components/graphql-type.tsx | 6 +- .../components/laboratory/builder.tsx | 56 +- .../components/laboratory/collections.tsx | 32 +- .../laboratory/components/laboratory/env.tsx | 2 +- .../components/laboratory/history.tsx | 24 +- .../components/laboratory/laboratory.tsx | 24 +- .../components/laboratory/operation.tsx | 24 +- .../components/laboratory/preflight.tsx | 14 +- .../components/laboratory/settings.tsx | 2 +- .../laboratory/components/laboratory/tabs.tsx | 21 +- .../app/src/laboratory/components/tabs.tsx | 10 +- .../laboratory/components/ui/alert-dialog.tsx | 6 +- .../src/laboratory/components/ui/badge.tsx | 11 +- .../laboratory/components/ui/button-group.tsx | 4 +- .../src/laboratory/components/ui/button.tsx | 16 +- .../app/src/laboratory/components/ui/card.tsx | 4 +- .../src/laboratory/components/ui/checkbox.tsx | 2 +- .../src/laboratory/components/ui/command.tsx | 14 +- .../laboratory/components/ui/context-menu.tsx | 18 +- .../src/laboratory/components/ui/dialog.tsx | 8 +- .../components/ui/dropdown-menu.tsx | 16 +- .../src/laboratory/components/ui/empty.tsx | 4 +- .../src/laboratory/components/ui/field.tsx | 12 +- .../laboratory/components/ui/input-group.tsx | 8 +- .../src/laboratory/components/ui/input.tsx | 4 +- .../laboratory/components/ui/resizable.tsx | 4 +- .../laboratory/components/ui/scroll-area.tsx | 2 +- .../src/laboratory/components/ui/select.tsx | 10 +- .../laboratory/components/ui/separator.tsx | 2 +- .../src/laboratory/components/ui/sonner.tsx | 6 +- .../src/laboratory/components/ui/switch.tsx | 4 +- .../app/src/laboratory/components/ui/tabs.tsx | 4 +- .../src/laboratory/components/ui/textarea.tsx | 2 +- .../src/laboratory/components/ui/toggle.tsx | 4 +- .../src/laboratory/components/ui/tooltip.tsx | 4 +- .../use-operation-collections-plugin.tsx | 8 +- .../app/src/lib/preflight/graphiql-plugin.tsx | 4 +- packages/web/app/src/pages/auth-oidc.tsx | 2 +- .../web/app/src/pages/auth-reset-password.tsx | 2 +- packages/web/app/src/pages/auth-sign-in.tsx | 38 +- packages/web/app/src/pages/auth.tsx | 27 +- packages/web/app/src/pages/dev.tsx | 2 +- .../web/app/src/pages/organization-join.tsx | 6 +- .../app/src/pages/organization-members.tsx | 2 +- .../web/app/src/pages/organization-new.tsx | 6 +- .../app/src/pages/organization-settings.tsx | 26 +- .../organization-subscription-manage.tsx | 8 +- .../src/pages/organization-subscription.tsx | 2 +- .../src/pages/organization-support-ticket.tsx | 26 +- .../app/src/pages/organization-support.tsx | 18 +- .../app/src/pages/organization-transfer.tsx | 4 +- packages/web/app/src/pages/organization.tsx | 28 +- packages/web/app/src/pages/project-alerts.tsx | 7 +- .../web/app/src/pages/project-settings.tsx | 24 +- packages/web/app/src/pages/project.tsx | 24 +- .../web/app/src/pages/target-app-version.tsx | 14 +- packages/web/app/src/pages/target-apps.tsx | 2 +- .../target-checks-affected-deployments.tsx | 12 +- .../app/src/pages/target-checks-single.tsx | 64 +- packages/web/app/src/pages/target-checks.tsx | 19 +- .../src/pages/target-explorer-deprecated.tsx | 6 +- .../app/src/pages/target-explorer-unused.tsx | 8 +- .../app/src/pages/target-history-version.tsx | 30 +- packages/web/app/src/pages/target-history.tsx | 12 +- .../app/src/pages/target-insights-client.tsx | 34 +- .../src/pages/target-insights-coordinate.tsx | 34 +- .../src/pages/target-insights-operation.tsx | 2 +- .../app/src/pages/target-laboratory-new.tsx | 19 +- .../web/app/src/pages/target-laboratory.tsx | 30 +- .../app/src/pages/target-proposal-checks.tsx | 10 +- .../web/app/src/pages/target-proposal.tsx | 10 +- .../app/src/pages/target-proposals-new.tsx | 8 +- .../web/app/src/pages/target-proposals.tsx | 14 +- .../web/app/src/pages/target-settings.tsx | 46 +- packages/web/app/src/pages/target-trace.tsx | 128 +- packages/web/app/src/pages/target-traces.tsx | 46 +- packages/web/app/src/pages/target.tsx | 6 +- .../src/pages/traces/target-traces-filter.tsx | 40 +- .../web/app/src/stories/changelog.stories.tsx | 2 +- .../app/src/stories/get-started.stories.tsx | 2 +- .../src/stories/sub-page-layout.stories.tsx | 2 +- pnpm-lock.yaml | 1872 +++++++++-------- tsconfig.eslint.json | 1 + 230 files changed, 2729 insertions(+), 2576 deletions(-) create mode 100644 .changeset/thin-animals-smell.md create mode 100644 packages/web/app/src/components/navigation/header.tsx create mode 100644 packages/web/app/src/components/navigation/primary-navigation-link.tsx create mode 100644 packages/web/app/src/components/navigation/secondary-navigation.tsx create mode 100644 packages/web/app/src/components/ui/text.tsx diff --git a/.changeset/thin-animals-smell.md b/.changeset/thin-animals-smell.md new file mode 100644 index 000000000..95189420c --- /dev/null +++ b/.changeset/thin-animals-smell.md @@ -0,0 +1,5 @@ +--- +'hive': patch +--- + +added light mode to console diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 7a38d50ae..0c863d9b3 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -161,7 +161,7 @@ module.exports = { rules: { // conflicts with official prettier-plugin-tailwindcss and tailwind v3 'better-tailwindcss/enforce-consistent-class-order': 'off', - 'better-tailwindcss/enforce-canonical-classes': 'warn', + 'better-tailwindcss/enforce-canonical-classes': 'off', // keeping classes in one line helps prettier-plugin-tailwindcss // enable wrapping in text editors to make classes human readable 'better-tailwindcss/enforce-consistent-line-wrapping': 'off', @@ -214,10 +214,6 @@ module.exports = { { ignore: [ 'drag-none', - // Tailwind v4 semantic colors from @theme in index.css - // Regex patterns to match all utility variants (bg-*, text-*, border-*, etc.) - // Includes optional opacity modifier (/40, /60, etc.) - '(bg|text|border|ring|outline|shadow|from|via|to|fill|stroke|caret|accent|divide|placeholder)-(background|foreground|card|card-foreground|popover|popover-foreground|primary|primary-foreground|secondary|secondary-foreground|muted|muted-foreground|accent|accent-foreground|destructive|destructive-foreground|border|input|ring|sidebar|sidebar-background|sidebar-foreground|sidebar-primary|sidebar-primary-foreground|sidebar-accent|sidebar-accent-foreground|sidebar-border|sidebar-ring|chart-1|chart-2)(/.*)?', // Animation utilities (from index.css, replaces tailwindcss-animate) 'animate-in', 'animate-out', diff --git a/.vscode/settings.json b/.vscode/settings.json index 9d4b46150..4e85c9c39 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -36,6 +36,9 @@ "typescript.tsdk": "node_modules/typescript/lib", "typescript.enablePromptUseWorkspaceTsdk": true, "git.mergeEditor": false, + "tailwindCSS.experimental.configFile": { + "packages/web/app/src/index.css": "packages/web/app/**" + }, "tailwindCSS.classFunctions": ["cva", "cx", "cn", "clsx"], "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" diff --git a/packages/web/app/index.html b/packages/web/app/index.html index ba6848858..a57b8462e 100644 --- a/packages/web/app/index.html +++ b/packages/web/app/index.html @@ -2,8 +2,12 @@ - - + + + -
+
diff --git a/packages/web/app/src/components/admin/AdminStats.tsx b/packages/web/app/src/components/admin/AdminStats.tsx index 7b6fa75b5..84a08e2fc 100644 --- a/packages/web/app/src/components/admin/AdminStats.tsx +++ b/packages/web/app/src/components/admin/AdminStats.tsx @@ -426,7 +426,7 @@ export function AdminStats({ {({ data }) => (
-
+
diff --git a/packages/web/app/src/components/auth.tsx b/packages/web/app/src/components/auth.tsx index eaf72c484..8506fdf59 100644 --- a/packages/web/app/src/components/auth.tsx +++ b/packages/web/app/src/components/auth.tsx @@ -28,9 +28,9 @@ export function AuthCardStack(props: { children: React.ReactNode }) { export function AuthOrSeparator() { return (
-
-
or
-
+
+
or
+
); } diff --git a/packages/web/app/src/components/common/index.tsx b/packages/web/app/src/components/common/index.tsx index 00acfa9e1..3b6ea768c 100644 --- a/packages/web/app/src/components/common/index.tsx +++ b/packages/web/app/src/components/common/index.tsx @@ -5,7 +5,7 @@ export function Label({ className, children, ...props }: ComponentProps<'span'>) return (
-

{title}

- {subtitle} +

{title}title

+ {subtitle}
{actions}
{noPadding ? ( children ) : ( -
+
{children}
)} @@ -54,17 +54,17 @@ export const Page = ({ export const Section = { Title: ({ className, children, ...props }: ComponentProps<'h3'>): ReactElement => ( -

+

{children}

), BigTitle: ({ className, children, ...props }: ComponentProps<'h2'>): ReactElement => ( -

+

{children}

), Subtitle: ({ className, children, ...props }: ComponentProps<'div'>): ReactElement => ( -
+
{children}
), @@ -86,7 +86,7 @@ export function Scale({ {new Array(size).fill(null).map((_, i) => (
= i * (max / size) ? 'bg-emerald-400' : 'bg-gray-200')} + className={cn('h-4 w-1', value >= i * (max / size) ? 'bg-emerald-400' : 'bg-neutral-10')} /> ))}
diff --git a/packages/web/app/src/components/error.tsx b/packages/web/app/src/components/error.tsx index 8611a4f49..a776e0e0d 100644 --- a/packages/web/app/src/components/error.tsx +++ b/packages/web/app/src/components/error.tsx @@ -48,7 +48,7 @@ export function ErrorComponent(props: { error: any; message?: string }) {

{commonErrorStrings.reported}

{commonErrorStrings.track}{' '} - . diff --git a/packages/web/app/src/components/get-started/trigger.tsx b/packages/web/app/src/components/get-started/trigger.tsx index ffa3d470c..4821b8cbb 100644 --- a/packages/web/app/src/components/get-started/trigger.tsx +++ b/packages/web/app/src/components/get-started/trigger.tsx @@ -45,14 +45,14 @@ export function GetStartedProgress(props: { props.className, )} > -

Get Started
-
+
Get Started
+
{remaining} remaining task{remaining > 1 ? 's' : ''}
-
+
diff --git a/packages/web/app/src/components/get-started/wizard.tsx b/packages/web/app/src/components/get-started/wizard.tsx index 6b4902e7f..5d9812880 100644 --- a/packages/web/app/src/components/get-started/wizard.tsx +++ b/packages/web/app/src/components/get-started/wizard.tsx @@ -100,19 +100,19 @@ function Task({ target="_blank" rel="noreferrer" className={cn( - 'relative block rounded-lg border border-gray-800 bg-gray-900 p-4 hover:bg-gray-800', + 'border-neutral-5 hover:bg-neutral-5 bg-neutral-4 relative block rounded-lg border p-4', completed ? 'opacity-70' : null, )} >
{completed ? ( - + ) : ( - + )}
-

{title}

-

{description}

+

{title}

+

{description}

diff --git a/packages/web/app/src/components/layouts/organization-selectors.tsx b/packages/web/app/src/components/layouts/organization-selectors.tsx index aa7b4145b..da7b61a74 100644 --- a/packages/web/app/src/components/layouts/organization-selectors.tsx +++ b/packages/web/app/src/components/layouts/organization-selectors.tsx @@ -1,6 +1,7 @@ +import { PrimaryNavigationLink } from '@/components/navigation/primary-navigation-link'; import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'; import { FragmentType, graphql, useFragment } from '@/gql'; -import { Link, useRouter } from '@tanstack/react-router'; +import { useRouter } from '@tanstack/react-router'; const OrganizationSelector_OrganizationConnectionFragment = graphql(` fragment OrganizationSelector_OrganizationConnectionFragment on OrganizationConnection { @@ -27,18 +28,18 @@ export function OrganizationSelector(props: { ); if (!organizations) { - return
; + return
; } if (props.isOIDCUser) { return ( - - {props.currentOrganizationSlug} - + ); } diff --git a/packages/web/app/src/components/layouts/organization.tsx b/packages/web/app/src/components/layouts/organization.tsx index c03c79f35..cc9c26258 100644 --- a/packages/web/app/src/components/layouts/organization.tsx +++ b/packages/web/app/src/components/layouts/organization.tsx @@ -4,6 +4,8 @@ import { useForm, UseFormReturn } from 'react-hook-form'; import { useMutation, useQuery } from 'urql'; import { z } from 'zod'; import { NotFoundContent } from '@/components/common/not-found-content'; +import { Header } from '@/components/navigation/header'; +import { SecondaryNavigation } from '@/components/navigation/secondary-navigation'; import { Button } from '@/components/ui/button'; import { Dialog, @@ -123,26 +125,22 @@ export function OrganizationLayout({ return ( <> -
-
-
- - -
-
- -
+
+
+ +
-
-
+ +
+
{currentOrganization ? ( @@ -198,19 +196,14 @@ export function OrganizationLayout({ ) : (
-
-
-
+
+
+
)} {currentOrganization?.viewerCanCreateProject ? ( <> - @@ -224,8 +217,8 @@ export function OrganizationLayout({ ) : null}
-
-
+ +
{currentOrganization ? ( <> @@ -297,15 +290,15 @@ function ProjectTypeCard(props: { }) { return ( - + -
- {props.icon} +
+ {props.icon}
- {props.title} -

{props.description}

+ {props.title} +

{props.description}

@@ -427,7 +420,9 @@ export function CreateProjectModalContent(props: { description="Single GraphQL schema developed as a monolith" icon={ } /> @@ -437,7 +432,9 @@ export function CreateProjectModalContent(props: { description="Project developed according to Apollo Federation specification" icon={ } /> @@ -447,7 +444,9 @@ export function CreateProjectModalContent(props: { description="Project that stitches together multiple GraphQL APIs" icon={ } /> diff --git a/packages/web/app/src/components/layouts/project-selector.tsx b/packages/web/app/src/components/layouts/project-selector.tsx index 7a795486b..5ecb97d20 100644 --- a/packages/web/app/src/components/layouts/project-selector.tsx +++ b/packages/web/app/src/components/layouts/project-selector.tsx @@ -1,6 +1,7 @@ +import { PrimaryNavigationLink } from '@/components/navigation/primary-navigation-link'; import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'; import { FragmentType, graphql, useFragment } from '@/gql'; -import { Link, useRouter } from '@tanstack/react-router'; +import { useRouter } from '@tanstack/react-router'; const ProjectSelector_OrganizationConnectionFragment = graphql(` fragment ProjectSelector_OrganizationConnectionFragment on OrganizationConnection { @@ -43,19 +44,19 @@ export function ProjectSelector(props: { return ( <> {currentOrganization ? ( - - {currentOrganization.slug} - + ) : ( -
+
)} {projectEdges?.length && currentProject ? ( <> -
/
+
/
) : ( -
+
)} ); diff --git a/packages/web/app/src/components/layouts/project.tsx b/packages/web/app/src/components/layouts/project.tsx index 8802a3f78..8bb6119d7 100644 --- a/packages/web/app/src/components/layouts/project.tsx +++ b/packages/web/app/src/components/layouts/project.tsx @@ -2,6 +2,8 @@ import { ReactNode } from 'react'; import { useForm, UseFormReturn } from 'react-hook-form'; import { useMutation, useQuery } from 'urql'; import { z } from 'zod'; +import { Header } from '@/components/navigation/header'; +import { SecondaryNavigation } from '@/components/navigation/secondary-navigation'; import { Button } from '@/components/ui/button'; import { Dialog, @@ -86,32 +88,30 @@ export function ProjectLayout({ return ( <> -
-
-
- - -
-
- -
+
+
+ +
-
+
+ +
+
{query.fetching === false && query.stale === false && (currentProject === null || currentOrganization === null) ? ( ) : ( <> -
+
{currentOrganization && currentProject ? ( @@ -155,13 +155,13 @@ export function ProjectLayout({ ) : (
-
-
-
+
+
+
)} {currentProject?.viewerCanCreateTarget ? ( - @@ -173,8 +173,8 @@ export function ProjectLayout({ toggleModalOpen={toggleModalOpen} />
-
-
+ +
{children}
diff --git a/packages/web/app/src/components/layouts/target-selector.tsx b/packages/web/app/src/components/layouts/target-selector.tsx index d5673cc06..fb2362ee0 100644 --- a/packages/web/app/src/components/layouts/target-selector.tsx +++ b/packages/web/app/src/components/layouts/target-selector.tsx @@ -1,6 +1,7 @@ +import { PrimaryNavigationLink } from '@/components/navigation/primary-navigation-link'; import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'; import { FragmentType, graphql, useFragment } from '@/gql'; -import { Link, useRouter } from '@tanstack/react-router'; +import { useRouter } from '@tanstack/react-router'; const TargetSelector_OrganizationConnectionFragment = graphql(` fragment TargetSelector_OrganizationConnectionFragment on OrganizationConnection { @@ -53,34 +54,32 @@ export function TargetSelector(props: { return ( <> {currentOrganization ? ( - - {currentOrganization.slug} - + linkText={currentOrganization.slug} + /> ) : ( -
+
)} -
/
+
/
{currentOrganization && currentProject ? ( - - {currentProject.slug} - + linkText={currentProject.slug} + /> ) : ( -
+
)} -
/
+
/
{targetEdges?.length && currentOrganization && currentProject && currentTarget ? ( <> The Guild @@ -84,16 +84,16 @@ function Plan(plan: { ) : ( <> ${plan.price} - /mo + /mo )}
-
{plan.description}
+
{plan.description}
{plan.features.map((feature, i) => (
- + {feature}
@@ -102,8 +102,8 @@ function Plan(plan: {
{plan.footer && (
-
-
{plan.footer}
+
+
{plan.footer}
)}
diff --git a/packages/web/app/src/components/organization/billing/PlanSummary.tsx b/packages/web/app/src/components/organization/billing/PlanSummary.tsx index 05c404840..68d11dd2a 100644 --- a/packages/web/app/src/components/organization/billing/PlanSummary.tsx +++ b/packages/web/app/src/components/organization/billing/PlanSummary.tsx @@ -37,7 +37,7 @@ function PriceEstimationTable(props: { - Base price (unlimited seats) + Base price (unlimited seats) {CurrencyFormatter.format(plan.basePrice ?? 0)} @@ -46,7 +46,7 @@ function PriceEstimationTable(props: { {includedOperationsInMillions > 0 && ( - Included Operations (free) + Included Operations (free) {includedOperationsInMillions}M {CurrencyFormatter.format(0)} diff --git a/packages/web/app/src/components/organization/members/common.tsx b/packages/web/app/src/components/organization/members/common.tsx index cb65bc450..5d65a78d7 100644 --- a/packages/web/app/src/components/organization/members/common.tsx +++ b/packages/web/app/src/components/organization/members/common.tsx @@ -61,7 +61,7 @@ export function RoleSelector(props: { > {props.defaultRole?.name ?? 'Select role'} - + @@ -81,7 +81,7 @@ export function RoleSelector(props: { }} >

None

-

Do not assign a role

+

Do not assign a role

) : null} {props.roles.map(role => { @@ -118,7 +118,7 @@ export function RoleSelector(props: { disabled={!isActive} >

{role.name}

-

{role.description}

+

{role.description}

{reason} diff --git a/packages/web/app/src/components/organization/members/invitations.tsx b/packages/web/app/src/components/organization/members/invitations.tsx index 72b5a6cb4..fbbe54fa2 100644 --- a/packages/web/app/src/components/organization/members/invitations.tsx +++ b/packages/web/app/src/components/organization/members/invitations.tsx @@ -132,7 +132,7 @@ function MemberInvitationForm(props: { return ( <>
Viewer role not found in organization member roles
-
Please contact support.
+
Please contact support.
); } @@ -190,7 +190,7 @@ function MemberInvitationForm(props: { return ( <>
Viewer role not found in organization member roles
-
Please contact support.
+
Please contact support.
); } @@ -423,13 +423,13 @@ function Invitation(props: { {invitation.role.name} - + {DateFormatter.format(new Date(invitation.expiresAt))} - @@ -494,7 +494,7 @@ export function OrganizationInvitations(props: { /> {organization.invitations.edges.length > 0 ? ( - +
@@ -503,7 +503,7 @@ export function OrganizationInvitations(props: { - + {organization.invitations.edges.map(edge => (
- +

No invitations

-

+

Invitations to join this organization will appear here.

diff --git a/packages/web/app/src/components/organization/members/list.tsx b/packages/web/app/src/components/organization/members/list.tsx index 828a9e57d..12499a5ed 100644 --- a/packages/web/app/src/components/organization/members/list.tsx +++ b/packages/web/app/src/components/organization/members/list.tsx @@ -176,7 +176,7 @@ const OrganizationMemberRow = memo(function OrganizationMemberRow(props: { -
Email

{member.user.displayName}

-

{member.user.email}

+

{member.user.email}

 {member.isOwner ? ( @@ -199,7 +199,7 @@ const OrganizationMemberRow = memo(function OrganizationMemberRow(props: { {member.viewerCanRemove && ( - @@ -264,7 +264,7 @@ function MemberRole(props: { {organization.viewerCanAssignUserRoles && ( setIsOpen(isOpen)}> - @@ -377,7 +377,7 @@ export function OrganizationMembers(props: { )} - +
- + {members.length === 0 ? (
@@ -389,14 +389,14 @@ export function OrganizationMembers(props: {
-

No members found

+

No members found

-

+

{`No results for "${searchValue}". Try adjusting your search term.`}

@@ -415,7 +415,7 @@ export function OrganizationMembers(props: {
{/* Pagination Controls */}
-
+
Page {currentPage + 1} {searchValue && members.length > 0 && ` - showing results for "${searchValue}"`}
diff --git a/packages/web/app/src/components/organization/members/member-role-picker.tsx b/packages/web/app/src/components/organization/members/member-role-picker.tsx index edd51c633..0d5c713bb 100644 --- a/packages/web/app/src/components/organization/members/member-role-picker.tsx +++ b/packages/web/app/src/components/organization/members/member-role-picker.tsx @@ -120,7 +120,7 @@ export function MemberRolePicker(props: { selectedRoleId={selectedRoleId} onSelectRoleId={roleId => setSelectedRoleId(roleId)} /> -

+

The role assigned to the user that will grant permissions.

{selectedRole && ( @@ -136,7 +136,7 @@ export function MemberRolePicker(props: { Assigned Resources -

+

Specify the resources on which the permissions will be granted.

-
{permission.title}
-
{permission.description}
+
{permission.title}
+
{permission.description}
{permission.isAssignableByViewer === false ? (
diff --git a/packages/web/app/src/components/organization/members/resource-selector.tsx b/packages/web/app/src/components/organization/members/resource-selector.tsx index 33dca844f..02b4aaff4 100644 --- a/packages/web/app/src/components/organization/members/resource-selector.tsx +++ b/packages/web/app/src/components/organization/members/resource-selector.tsx @@ -811,7 +811,7 @@ export function ResourceSelector(props: { {/** Projects Content */} {showProjectsTab && (
-
+
access granted
{projectState.selected.length ? ( @@ -838,7 +838,7 @@ export function ResourceSelector(props: { ) : (
None selected
)} -
+
not selected
{projectState.notSelected.length ? ( @@ -864,18 +864,18 @@ export function ResourceSelector(props: { )} > {targetState === null ? ( -
+
Select a project for adjusting the target access.
) : ( <> {targetState.selection === '*' ? ( -
+
Access to all targets of project granted.
) : ( <> -
+
access granted
{targetState.selection.selected.length ? ( @@ -910,7 +910,7 @@ export function ResourceSelector(props: { ) : (
None selected
)} -
+
Not selected
{targetState.selection.notSelected.length ? ( @@ -939,26 +939,26 @@ export function ResourceSelector(props: {
{projectState.activeProject?.projectSelection.targets.mode === GraphQLSchema.ResourceAssignmentModeType.All ? ( -
+
Access to all services of projects targets granted.
) : serviceState === null ? ( -
+
Select a target for adjusting the service access.
) : ( <> {serviceState === 'none' ? ( -
+
Project is monolithic and has no services.
) : serviceState.selection === '*' ? ( -
+
Access to all services in target granted.
) : ( <> -
+
access granted
{serviceState.selection.selected.length ? ( @@ -973,7 +973,7 @@ export function ResourceSelector(props: { ) : (
None
)} -
+
Not selected
{serviceState.selection.notSelected.map(serviceName => ( @@ -1066,22 +1066,22 @@ export function ResourceSelector(props: {
{projectState.activeProject?.projectSelection.targets.mode === GraphQLSchema.ResourceAssignmentModeType.All ? ( -
+
Access to all apps of projects targets granted.
) : appsState === null ? ( -
+
Select a target for adjusting the apps access.
) : ( <> {appsState.selection === '*' ? ( -
+
Access to all apps in target granted.
) : ( <> -
+
access granted
{appsState.selection.selected.length ? ( @@ -1096,7 +1096,7 @@ export function ResourceSelector(props: { ) : (
None
)} -
+
Not selected
{appsState.selection.notSelected.map(serviceName => ( @@ -1170,7 +1170,7 @@ function RowItem(props: { }) { return (
@@ -1189,7 +1189,7 @@ function RowItem(props: { diff --git a/packages/web/app/src/components/organization/members/roles.tsx b/packages/web/app/src/components/organization/members/roles.tsx index cbbf5a241..0d21bae79 100644 --- a/packages/web/app/src/components/organization/members/roles.tsx +++ b/packages/web/app/src/components/organization/members/roles.tsx @@ -633,7 +633,7 @@ function OrganizationMemberRoleRow(props: {
This role is locked
-
+
Locked roles are created by the system and cannot be modified or deleted.
@@ -652,7 +652,7 @@ function OrganizationMemberRoleRow(props: {
Default role for new members
-
+

New members will be assigned to this role by default.

{props.canChangeOIDCDefaultRole ? (

@@ -681,7 +681,7 @@ function OrganizationMemberRoleRow(props: { ) : null}

+ {role.description} @@ -690,7 +690,7 @@ function OrganizationMemberRoleRow(props: { - @@ -929,7 +929,7 @@ export function OrganizationMemberRoles(props: { > - +
@@ -938,7 +938,7 @@ export function OrganizationMemberRoles(props: { - + {organization.memberRoles?.edges.map(({ node: role }) => ( Learn more about Access Tokens diff --git a/packages/web/app/src/components/organization/settings/access-tokens/create-access-token-sheet-content.tsx b/packages/web/app/src/components/organization/settings/access-tokens/create-access-token-sheet-content.tsx index 1d55630bf..c293ed679 100644 --- a/packages/web/app/src/components/organization/settings/access-tokens/create-access-token-sheet-content.tsx +++ b/packages/web/app/src/components/organization/settings/access-tokens/create-access-token-sheet-content.tsx @@ -300,7 +300,7 @@ export function CreateAccessTokenSheetContent( 'step-4-confirmation': () => ( <> Confirm and create Access Token -

+

Please please review the selected permissions and resources to ensure they align with your intended access needs.

@@ -320,7 +320,7 @@ export function CreateAccessTokenSheetContent( <>Granted on all {permissionLevelToResourceName(group.level)} ) : ( <> -

+

Granted on {permissionLevelToResourceName(group.level)}:

    @@ -337,7 +337,7 @@ export function CreateAccessTokenSheetContent( {resolvedResources[group.level].map(id => (
  • {id} diff --git a/packages/web/app/src/components/organization/settings/access-tokens/permission-detail-view.tsx b/packages/web/app/src/components/organization/settings/access-tokens/permission-detail-view.tsx index a3e53d2c4..bb28591ea 100644 --- a/packages/web/app/src/components/organization/settings/access-tokens/permission-detail-view.tsx +++ b/packages/web/app/src/components/organization/settings/access-tokens/permission-detail-view.tsx @@ -89,19 +89,19 @@ export function PermissionDetailView(props: { ))}
    {group.resolvedResourceIds == null ? ( -

    +

    Granted on all {permissionLevelToResourceName(group.level)}

    ) : ( <> -

    +

    Granted on {permissionLevelToResourceName(group.level)}:

      {group.resolvedResourceIds.map(id => (
    • {id} diff --git a/packages/web/app/src/components/organization/settings/oidc-integration-section.tsx b/packages/web/app/src/components/organization/settings/oidc-integration-section.tsx index 58e5d29e3..c6c1919b7 100644 --- a/packages/web/app/src/components/organization/settings/oidc-integration-section.tsx +++ b/packages/web/app/src/components/organization/settings/oidc-integration-section.tsx @@ -73,7 +73,7 @@ const classes = { }; function FormError({ children }: { children: React.ReactNode }) { - return
      {children}
      ; + return
      {children}
      ; } const OIDCIntegrationSection_OrganizationFragment = graphql(` @@ -488,7 +488,7 @@ function CreateOIDCIntegrationForm(props: {
      -
      +
      { void formik.setFieldValue('tokenEndpoint', endpoints.token); @@ -1008,13 +1008,13 @@ function UpdateOIDCIntegrationForm(props: {
      -
      -
      +
      +
      OIDC Provider Instructions
      -

      +

      Configure your OIDC provider with the following settings

      @@ -1048,7 +1048,7 @@ function UpdateOIDCIntegrationForm(props: {

      OIDC-Only Access

      -

      +

      Restricts organization access to only authenticated OIDC accounts.
      @@ -1071,7 +1071,7 @@ function UpdateOIDCIntegrationForm(props: {

      Default Member Role

      -

      +

      This role is assigned to new members who sign in via OIDC.{' '} Only members with the Admin role can modify it. @@ -1098,12 +1098,12 @@ function UpdateOIDCIntegrationForm(props: { onSubmit={formik.handleSubmit} className={cn( classes.container, - 'bg-background order-first pb-4 md:order-none md:pl-4', + 'bg-neutral-3 order-first pb-4 md:order-none md:pl-4', )} >

      Properties
      -

      +

      Configure your OIDC provider with the following settings

      @@ -1223,7 +1223,7 @@ function UpdateOIDCIntegrationForm(props: {

      Default Resource Assignments

      -

      +

      This permitted resources for new members who sign in via OIDC.{' '} Only members with the Admin role can modify it.

      diff --git a/packages/web/app/src/components/organization/settings/personal-access-tokens/create-personal-access-token-sheet-content.tsx b/packages/web/app/src/components/organization/settings/personal-access-tokens/create-personal-access-token-sheet-content.tsx index 21c7801fe..4b4b3a3a5 100644 --- a/packages/web/app/src/components/organization/settings/personal-access-tokens/create-personal-access-token-sheet-content.tsx +++ b/packages/web/app/src/components/organization/settings/personal-access-tokens/create-personal-access-token-sheet-content.tsx @@ -293,7 +293,7 @@ export function CreatePersonalAccessTokenSheetContent( 'step-4-confirmation': () => ( <> Confirm and create Access Token -

      +

      Please please review the selected permissions and resources to ensure they align with your intended access needs.

      @@ -313,7 +313,7 @@ export function CreatePersonalAccessTokenSheetContent( <>Granted on all {permissionLevelToResourceName(group.level)} ) : ( <> -

      +

      Granted on {permissionLevelToResourceName(group.level)}:

        @@ -330,7 +330,7 @@ export function CreatePersonalAccessTokenSheetContent( {resolvedResources[group.level].map(id => (
      • {id} diff --git a/packages/web/app/src/components/organization/settings/personal-access-tokens/personal-access-tokens-sub-page.tsx b/packages/web/app/src/components/organization/settings/personal-access-tokens/personal-access-tokens-sub-page.tsx index b1c77e2b1..907ae4ec0 100644 --- a/packages/web/app/src/components/organization/settings/personal-access-tokens/personal-access-tokens-sub-page.tsx +++ b/packages/web/app/src/components/organization/settings/personal-access-tokens/personal-access-tokens-sub-page.tsx @@ -67,7 +67,7 @@ export function PersonalAccessTokensSubPage( Learn more about Access Tokens diff --git a/packages/web/app/src/components/organization/support.tsx b/packages/web/app/src/components/organization/support.tsx index f0cdc2d8b..99e6ad9db 100644 --- a/packages/web/app/src/components/organization/support.tsx +++ b/packages/web/app/src/components/organization/support.tsx @@ -7,7 +7,7 @@ const statusVariants = cva('inline-flex items-center text-sm font-semibold', { variants: { variant: { [SupportTicketStatus.Open]: 'text-yellow-400', - [SupportTicketStatus.Solved]: 'text-gray-500', + [SupportTicketStatus.Solved]: 'text-neutral-10', }, }, defaultVariants: { @@ -38,12 +38,9 @@ const priorityVariants = cva( { variants: { variant: { - [SupportTicketPriority.Normal]: - 'border-transparent bg-destructive/40 text-destructive-foreground', - [SupportTicketPriority.High]: - 'border-transparent bg-destructive/60 text-destructive-foreground', - [SupportTicketPriority.Urgent]: - 'border-transparent bg-destructive/80 text-destructive-foreground', + [SupportTicketPriority.Normal]: 'border-transparent bg-red-400 text-neutral-12', + [SupportTicketPriority.High]: 'border-transparent bg-red-600 text-neutral-12', + [SupportTicketPriority.Urgent]: 'border-transparent bg-red-800 text-neutral-12', }, }, defaultVariants: { diff --git a/packages/web/app/src/components/policy/policy-config-box.tsx b/packages/web/app/src/components/policy/policy-config-box.tsx index ef87fb8ab..771d3a73c 100644 --- a/packages/web/app/src/components/policy/policy-config-box.tsx +++ b/packages/web/app/src/components/policy/policy-config-box.tsx @@ -16,7 +16,7 @@ export function PolicyConfigBox(props: Props) { > {'title' in props ? ( <> -
        {props.title}
        +
        {props.title}
        {props.children}
        ) : ( diff --git a/packages/web/app/src/components/policy/policy-list-item.tsx b/packages/web/app/src/components/policy/policy-list-item.tsx index 213403488..29e660cdf 100644 --- a/packages/web/app/src/components/policy/policy-list-item.tsx +++ b/packages/web/app/src/components/policy/policy-list-item.tsx @@ -80,7 +80,7 @@ export function PolicyListItem(props: { } > - +
      @@ -89,7 +89,7 @@ export function PolicyListItem(props: {
      -
      +
      {shouldShowRuleConfig && ( ) : null} {props.overridingParentRule && enabled ? ( -
      -

      !

      +
      +

      !

      You are {severity === RuleInstanceSeverityLevel.Off ? 'disabling' : 'overriding'} a rule configured at the organization level
      diff --git a/packages/web/app/src/components/policy/policy-settings.tsx b/packages/web/app/src/components/policy/policy-settings.tsx index 0450bef6b..8fd65c716 100644 --- a/packages/web/app/src/components/policy/policy-settings.tsx +++ b/packages/web/app/src/components/policy/policy-settings.tsx @@ -109,7 +109,7 @@ function PolicySettingsListForm({ <> {children ? children(props) : null}
      - {props.dirty ?

      Unsaved changes

      : null} + {props.dirty ?

      Unsaved changes

      : null}
-
Name
{channel.name} + {renderChannelEndpoint(channel)} diff --git a/packages/web/app/src/components/project/alerts/create-channel.tsx b/packages/web/app/src/components/project/alerts/create-channel.tsx index 2678ec5b3..008757005 100644 --- a/packages/web/app/src/components/project/alerts/create-channel.tsx +++ b/packages/web/app/src/components/project/alerts/create-channel.tsx @@ -115,7 +115,7 @@ export const CreateChannelModal = ({ {mutation.data.addAlertChannel.error.inputErrors.name} )} -

+

This will be displayed on channels list, we recommend to make it self-explanatory.

@@ -164,7 +164,7 @@ export const CreateChannelModal = ({ )} {values.endpoint ? ( -

Hive will send alerts to your endpoint.

+

Hive will send alerts to your endpoint.

) : ( Follow this guide to set up an incoming webhook connector in MS Teams @@ -196,7 +196,7 @@ export const CreateChannelModal = ({ {mutation.data.addAlertChannel.error.inputErrors.slackChannel} )} -

+

Use #channel or @username form.

diff --git a/packages/web/app/src/components/project/settings/access-tokens/create-project-access-token-sheet-content.tsx b/packages/web/app/src/components/project/settings/access-tokens/create-project-access-token-sheet-content.tsx index 23e87c1a0..bba8b0777 100644 --- a/packages/web/app/src/components/project/settings/access-tokens/create-project-access-token-sheet-content.tsx +++ b/packages/web/app/src/components/project/settings/access-tokens/create-project-access-token-sheet-content.tsx @@ -317,7 +317,7 @@ export function CreateProjectAccessTokenSheetContent( 'step-4-confirmation': () => ( <> Confirm and create Access Token -

+

Please please review the selected permissions and resources to ensure they align with your intended access needs.

@@ -335,7 +335,7 @@ export function CreateProjectAccessTokenSheetContent( <>Granted on all {permissionLevelToResourceName(group.level)} ) : ( <> -

+

Granted on {permissionLevelToResourceName(group.level)}:

(
  • Deprecation reason
    - +     @@ -245,11 +245,11 @@ export function GraphQLTypeCard(props: { ); return ( -
    +
    -
    {props.kind}
    +
    {props.kind}
    }
    {Array.isArray(props.implements) && props.implements.length > 0 && ( -
    +
    implements
    {props.implements.map(t => ( @@ -312,7 +312,7 @@ export function GraphQLTypeCardListItem(props: { onClick={props.onClick} className={clsx( 'flex flex-row items-center justify-between p-4 text-sm', - props.index % 2 ? '' : 'bg-gray-900/50', + props.index % 2 ? '' : 'bg-neutral-2/50', props.className, )} > @@ -343,14 +343,14 @@ export function GraphQLInputFields(props: {
    -
    +
    {field.name} @@ -414,7 +414,7 @@ export function GraphQLTypeAsLink(props: { > Visit in Explorer - - displays a full type + - displays a full type

    Visit in Insights - - usage insights + - usage insights

    @@ -488,11 +488,11 @@ export const GraphQLFieldsSkeleton = (props: { count?: number }) => { {widths.map((width, index) => (
    - +
    - - - + + +
    @@ -503,10 +503,10 @@ export const GraphQLFieldsSkeleton = (props: { count?: number }) => { export const GraphQLTypeCardSkeleton = (props: { children: ReactNode }) => { return ( -
    +
    - +
    {props.children}
    diff --git a/packages/web/app/src/components/target/explorer/filter.tsx b/packages/web/app/src/components/target/explorer/filter.tsx index 89d04d8e5..2b4e768cf 100644 --- a/packages/web/app/src/components/target/explorer/filter.tsx +++ b/packages/web/app/src/components/target/explorer/filter.tsx @@ -231,7 +231,7 @@ export function DescriptionsVisibilityFilter() { -
    +