From 031b2271658f912d6d3364d5d3b2b5dbf7f197f4 Mon Sep 17 00:00:00 2001 From: Danny White <3104761+dnywh@users.noreply.github.com> Date: Tue, 2 Dec 2025 11:15:50 +1100 Subject: [PATCH] studio(chore): badge component defrag (#40118) * component clean up * optically center * docs and type size * code badge variant * sensible defaults * fix product menu flex * badge sweep * new project badges * logs * compute badge * studio badge sweep * www sweep * docs sweep * clean up * fixes * cleanup * fixes * better docs * fixes * misc fixes * consistency * Minor fixes for issues i found * simplify mt-0 * mt simplification * remaining optical alignment --------- Co-authored-by: Joshen Lim --- apps/design-system/__registry__/index.tsx | 19 ++--- .../design-system/components/source-panel.tsx | 18 +---- .../content/docs/components/badge.mdx | 72 +++---------------- .../registry/default/example/badge-demo.tsx | 2 +- .../default/example/badge-destructive.tsx | 5 -- .../default/example/badge-outline.tsx | 5 -- .../registry/default/example/badge-state.tsx | 12 ++++ .../default/example/modal-custom-footer.tsx | 4 +- apps/design-system/registry/examples.ts | 10 +-- .../NavigationMenu/GlobalNavigationMenu.tsx | 2 +- apps/docs/components/Options.tsx | 18 ++--- apps/docs/components/Params.tsx | 18 ++--- apps/docs/components/RefVersionDropdown.tsx | 2 +- .../docs/features/docs/Reference.sections.tsx | 34 +++++---- apps/docs/features/docs/Reference.ui.tsx | 42 +++++------ .../FeaturePreview/FeaturePreviewModal.tsx | 2 +- .../interfaces/Auth/Hooks/HookCard.tsx | 2 +- .../PolicyEditorPanel/PolicyDetailsV2.tsx | 29 +++----- .../PolicyEditorPanel/PolicyTemplates.tsx | 6 +- .../ThirdPartyAuthForm/IntegrationCard.tsx | 4 +- .../interfaces/Billing/InvoiceStatusBadge.tsx | 8 +-- .../Payment/PaymentMethods/CreditCard.tsx | 2 +- .../BranchManagement/CreateBranchModal.tsx | 12 +--- .../BranchManagement/EditBranchModal.tsx | 6 +- .../Connect/DatabaseConnectionString.tsx | 7 +- .../DataWarehouse/FormFooterChangeBadge.tsx | 6 +- .../Database/Backups/DatabaseBackupsNav.tsx | 7 +- .../ReplicationPipelineStatus.utils.tsx | 2 +- .../interfaces/Database/Roles/RolesList.tsx | 2 +- .../fields/StorageTypeField.tsx | 13 ++-- .../DiskManagement/ui/DiskSpaceBar.tsx | 12 ++-- .../EdgeFunctionSecrets.tsx | 5 +- .../interfaces/Home/ClientLibrary.tsx | 2 +- .../Home/ProjectList/ProjectCardStatus.tsx | 6 +- .../Integrations/Landing/IntegrationCard.tsx | 24 ++----- .../Integrations/Queues/CreateQueueSheet.tsx | 4 +- .../Queues/SingleQueue/QueueDataGrid.tsx | 2 +- .../create-key-dialog.tsx | 2 +- .../interfaces/Linter/Linter.utils.tsx | 2 +- .../OAuthApps/PublishAppSidePanel/index.tsx | 7 +- .../Organization/TeamSettings/MemberRow.tsx | 2 +- .../ProjectCreation/AdvancedConfiguration.tsx | 12 ++-- .../ProjectCreation/ComputeSizeSelector.tsx | 14 ++-- .../ProjectCreation/OrganizationSelector.tsx | 12 ++-- .../PostgresVersionSelector.tsx | 23 +++--- .../ProjectCreation/ProjectCreationFooter.tsx | 6 +- .../ProjectCreation/SecurityOptions.tsx | 14 ++-- .../RealtimeFilterPopover/TableSelector.tsx | 14 ++-- .../Inspector/RealtimeFilterPopover/index.tsx | 6 +- .../SQLEditor/UtilityPanel/ChartConfig.tsx | 8 +-- .../interfaces/Settings/Addons/Addons.tsx | 5 +- .../Infrastructure/ProjectUpgradeAlert.tsx | 4 +- .../InstanceNode.tsx | 2 +- .../InfrastructureConfiguration/MapView.tsx | 2 +- .../Infrastructure/InfrastructureInfo.tsx | 4 +- .../Infrastructure/UpgradeWarnings.tsx | 2 +- .../Settings/Logs/Logs.DatePickers.tsx | 13 +--- .../interfaces/SignIn/LastSignInWrapper.tsx | 2 +- .../interfaces/Storage/StorageMenuV2.tsx | 6 +- .../StoragePolicies/StoragePoliciesEditor.tsx | 19 +++-- .../Support/OrganizationSelector.tsx | 6 +- .../SidePanelEditor/TableEditor/Column.tsx | 2 +- .../ForeignKeysManagement/ForeignKeyRow.tsx | 2 +- .../components/ServiceFlowHeader.tsx | 20 +++--- .../components/shared/EventMessage.tsx | 4 +- .../components/shared/FieldWithSeeMore.tsx | 6 +- .../AdvisorsLayout/AdvisorsSidebarMenu.tsx | 10 +-- .../layouts/AppLayout/BranchDropdown.tsx | 20 ++++-- .../layouts/AuthLayout/AuthLayout.utils.ts | 4 +- .../layouts/LogsLayout/LogsSidebarMenuV2.tsx | 6 +- .../layouts/ProjectLayout/BuildingState.tsx | 2 +- .../layouts/ProjectLayout/ConnectingState.tsx | 2 +- .../LayoutHeader/LayoutHeader.tsx | 4 +- .../LayoutHeader/LocalVersionPopover.tsx | 2 +- .../SettingsMenu.utils.tsx | 2 +- apps/studio/components/ui/AlphaNotice.tsx | 2 +- .../ui/ProductMenu/ProductMenuItem.tsx | 9 ++- apps/studio/pages/account/security.tsx | 2 +- .../storage/files/buckets/[bucketId].tsx | 2 +- .../components/side-navigation-item.tsx | 4 +- apps/ui-library/components/source-panel.tsx | 24 +------ apps/www/components/Announcement/Badge.tsx | 2 +- .../www/components/Events/new/EventBanner.tsx | 4 +- .../Events/new/EventGalleryFilters.tsx | 2 +- apps/www/components/Footer/index.tsx | 2 +- apps/www/components/NewFeatureCard.tsx | 4 +- .../Products/Functions/RealtimeLogs.tsx | 8 +-- apps/www/components/TabsWithHighlights.tsx | 34 +++++---- apps/www/components/UsersGrowthChart.tsx | 6 +- apps/www/pages/aws-reinvent-2025.tsx | 4 +- apps/www/pages/careers.tsx | 3 +- apps/www/pages/database.tsx | 6 +- apps/www/pages/features/[slug].tsx | 12 ++-- .../ui-patterns/src/ComputeBadge/index.tsx | 40 +++++++---- packages/ui-patterns/src/form/FormLayout2.tsx | 7 +- .../ui/src/components/shadcn/ui/badge.tsx | 61 ++++++---------- 96 files changed, 363 insertions(+), 574 deletions(-) delete mode 100644 apps/design-system/registry/default/example/badge-destructive.tsx delete mode 100644 apps/design-system/registry/default/example/badge-outline.tsx create mode 100644 apps/design-system/registry/default/example/badge-state.tsx diff --git a/apps/design-system/__registry__/index.tsx b/apps/design-system/__registry__/index.tsx index 1b624164b17..feea6ef54ec 100644 --- a/apps/design-system/__registry__/index.tsx +++ b/apps/design-system/__registry__/index.tsx @@ -192,24 +192,13 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, - "badge-destructive": { - name: "badge-destructive", + "badge-state": { + name: "badge-state", type: "components:example", registryDependencies: ["badge"], - component: React.lazy(() => import("@/registry/default/example/badge-destructive")), + component: React.lazy(() => import("@/registry/default/example/badge-state")), source: "", - files: ["registry/default/example/badge-destructive.tsx"], - category: "undefined", - subcategory: "undefined", - chunks: [] - }, - "badge-outline": { - name: "badge-outline", - type: "components:example", - registryDependencies: ["badge"], - component: React.lazy(() => import("@/registry/default/example/badge-outline")), - source: "", - files: ["registry/default/example/badge-outline.tsx"], + files: ["registry/default/example/badge-state.tsx"], category: "undefined", subcategory: "undefined", chunks: [] diff --git a/apps/design-system/components/source-panel.tsx b/apps/design-system/components/source-panel.tsx index a40d922771d..b3489b47c5a 100644 --- a/apps/design-system/components/source-panel.tsx +++ b/apps/design-system/components/source-panel.tsx @@ -3,9 +3,9 @@ import Link from 'next/link' import { forwardRef } from 'react' import { ExternalLink } from 'lucide-react' +import Image from 'next/image' import { Button } from 'ui' import { cn } from 'ui/src/lib/utils/cn' -import Image from 'next/image' const SourcePanel = forwardRef & { doc: Doc }>( ({ doc, children, ...props }, ref) => { @@ -133,13 +133,7 @@ const SourcePanel = forwardRef & className="rounded-full" icon={} > - + API Reference @@ -233,13 +227,7 @@ const SourcePanel = forwardRef & className="rounded-full" icon={} > - + API Reference diff --git a/apps/design-system/content/docs/components/badge.mdx b/apps/design-system/content/docs/components/badge.mdx index d5b22c47a79..b848b88b0f5 100644 --- a/apps/design-system/content/docs/components/badge.mdx +++ b/apps/design-system/content/docs/components/badge.mdx @@ -1,44 +1,12 @@ --- title: Badge -description: Displays a badge or a component that looks like a badge. +description: Add contextual metadata to another item. component: true -source: - shadcn: true --- - +Badge displays contextual information such as surrounding state or product category. Its purpose should be be self-evident based on surrounding context. -## Installation - - - - - CLI - Manual - - - -```bash -npx shadcn-ui@latest add badge -``` - - - - - - - -Copy and paste the following code into your project. - - - -Update the import paths to match your project setup. - - - - - - + ## Usage @@ -47,41 +15,23 @@ import { Badge } from '@/components/ui/badge' ``` ```tsx -Badge +Default ``` -### Link +Avoid altering the Badge style, such as text case or roundedness. Consistent implementation makes Badge immediately recognizable throughout Supabase for denoting state or category. Use or create another component for other use cases, such as compute size and status. -You can use the `badgeVariants` helper to create a link that looks like a badge. +Keep Badge text to one or two words as it is designed to support other elements, not as a primary communication aid. -```tsx -import { badgeVariants } from '@/components/ui/badge' -``` - -```tsx -Badge -``` +Badge is designed to stand out, so should be used sparingly. ## Examples -### Default +### States - - ---- + ### Secondary - +A content-only variant similar to the `text` variant of [Button](../components/button#types). ---- - -### Outline - - - ---- - -### Destructive - - + diff --git a/apps/design-system/registry/default/example/badge-demo.tsx b/apps/design-system/registry/default/example/badge-demo.tsx index d34f2ce7052..13528c3c7ca 100644 --- a/apps/design-system/registry/default/example/badge-demo.tsx +++ b/apps/design-system/registry/default/example/badge-demo.tsx @@ -1,5 +1,5 @@ import { Badge } from 'ui' export default function BadgeDemo() { - return Badge + return Default } diff --git a/apps/design-system/registry/default/example/badge-destructive.tsx b/apps/design-system/registry/default/example/badge-destructive.tsx deleted file mode 100644 index a1d3b2ce590..00000000000 --- a/apps/design-system/registry/default/example/badge-destructive.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Badge } from 'ui' - -export default function BadgeDestructive() { - return Destructive -} diff --git a/apps/design-system/registry/default/example/badge-outline.tsx b/apps/design-system/registry/default/example/badge-outline.tsx deleted file mode 100644 index 780711720d4..00000000000 --- a/apps/design-system/registry/default/example/badge-outline.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Badge } from 'ui' - -export default function BadgeOutline() { - return Outline -} diff --git a/apps/design-system/registry/default/example/badge-state.tsx b/apps/design-system/registry/default/example/badge-state.tsx new file mode 100644 index 00000000000..2fe91c5ba6c --- /dev/null +++ b/apps/design-system/registry/default/example/badge-state.tsx @@ -0,0 +1,12 @@ +import { Badge } from 'ui' + +export default function BadgeState() { + return ( +
+ Default + Warning + Success + Destructive +
+ ) +} diff --git a/apps/design-system/registry/default/example/modal-custom-footer.tsx b/apps/design-system/registry/default/example/modal-custom-footer.tsx index 206fb72e092..e9012c3d1b2 100644 --- a/apps/design-system/registry/default/example/modal-custom-footer.tsx +++ b/apps/design-system/registry/default/example/modal-custom-footer.tsx @@ -32,9 +32,7 @@ export default function ModalVerticalCustomFooter() { customFooter={
- - Proceed with caution - + Proceed with caution
diff --git a/apps/design-system/registry/examples.ts b/apps/design-system/registry/examples.ts index cf474eecdbd..6aa8657f0ea 100644 --- a/apps/design-system/registry/examples.ts +++ b/apps/design-system/registry/examples.ts @@ -62,16 +62,10 @@ export const examples: Registry = [ files: ['example/badge-demo.tsx'], }, { - name: 'badge-destructive', + name: 'badge-state', type: 'components:example', registryDependencies: ['badge'], - files: ['example/badge-destructive.tsx'], - }, - { - name: 'badge-outline', - type: 'components:example', - registryDependencies: ['badge'], - files: ['example/badge-outline.tsx'], + files: ['example/badge-state.tsx'], }, { name: 'badge-secondary', diff --git a/apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx index 8b57fd7c29e..29445946b4d 100644 --- a/apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx @@ -179,7 +179,7 @@ export const MenuItem = React.forwardRef< <> {icon && } {title} - {community && Community} + {community && Community} )} diff --git a/apps/docs/components/Options.tsx b/apps/docs/components/Options.tsx index cf8b2bd07e5..a338805ba09 100644 --- a/apps/docs/components/Options.tsx +++ b/apps/docs/components/Options.tsx @@ -1,6 +1,8 @@ import { XCircle } from 'lucide-react' import { FC, PropsWithChildren, useState } from 'react' +import { Badge } from 'ui' + interface IOptions { name?: string } @@ -56,17 +58,11 @@ const Option: FC = (props) => { {!props.isEnum && ( <> - - {props.isOptional ? ( -
- Optional -
- ) : ( -
- REQUIRED -
- )} - + {props.isOptional ? ( + Optional + ) : ( + Required + )} {props.type ?? 'no type'} )} diff --git a/apps/docs/components/Params.tsx b/apps/docs/components/Params.tsx index 28e20391744..322d84b53f0 100644 --- a/apps/docs/components/Params.tsx +++ b/apps/docs/components/Params.tsx @@ -1,5 +1,7 @@ import { ReactMarkdown } from 'react-markdown/lib/react-markdown' +import { Badge } from 'ui' + type IParamProps = any /** @@ -12,17 +14,11 @@ const Param = ({ name, isOptional, type, description, children, isPrimitive }: I {!isPrimitive && ( {name ?? 'no-name'} )} - - {isOptional ? ( -
- Optional -
- ) : ( -
- REQUIRED -
- )} - + {isOptional ? ( + Optional + ) : ( + Required + )} {type ?? 'no type'}
{description && ( diff --git a/apps/docs/components/RefVersionDropdown.tsx b/apps/docs/components/RefVersionDropdown.tsx index 9083d286155..c65519e251c 100644 --- a/apps/docs/components/RefVersionDropdown.tsx +++ b/apps/docs/components/RefVersionDropdown.tsx @@ -71,7 +71,7 @@ const RevVersionDropdown = ({ Version {version}.0 - {index === 0 && Latest} + {index === 0 && Latest} ))} diff --git a/apps/docs/features/docs/Reference.sections.tsx b/apps/docs/features/docs/Reference.sections.tsx index 52ce5675fc0..c4952e6f0d6 100644 --- a/apps/docs/features/docs/Reference.sections.tsx +++ b/apps/docs/features/docs/Reference.sections.tsx @@ -1,13 +1,17 @@ import { Fragment } from 'react' import ReactMarkdown from 'react-markdown' -import { Tabs_Shadcn_, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_, cn } from 'ui' +import { + Badge, + cn, + Tabs_Shadcn_, + TabsContent_Shadcn_, + TabsList_Shadcn_, + TabsTrigger_Shadcn_, +} from 'ui' import { isFeatureEnabled } from 'common' import ApiSchema from '~/components/ApiSchema' import { clientSdkIds, REFERENCES } from '~/content/navigation.references' -import { MDXRemoteRefs, getRefMarkdown } from '~/features/docs/Reference.mdx' -import type { MethodTypes } from '~/features/docs/Reference.typeSpec' -import { formatMethodSignature } from '~/features/docs/Reference.typeSpec' import { getApiEndpointById, getCliSpec, @@ -16,20 +20,22 @@ import { getSelfHostedApiEndpointById, getTypeSpec, } from '~/features/docs/Reference.generated.singleton' -import { type IApiEndPoint } from './Reference.api.utils' +import { getRefMarkdown, MDXRemoteRefs } from '~/features/docs/Reference.mdx' +import type { MethodTypes } from '~/features/docs/Reference.typeSpec' +import { formatMethodSignature } from '~/features/docs/Reference.typeSpec' import { ApiOperationRequestBodyDetails, ApiSchemaParamDetails, CollapsibleDetails, FnParameterDetails, RefSubLayout, - RequiredBadge, ReturnTypeDetails, StickyHeader, } from '~/features/docs/Reference.ui' import type { AbbrevApiReferenceSection } from '~/features/docs/Reference.utils' import { normalizeMarkdown } from '~/features/docs/Reference.utils' import { CodeBlock } from '~/features/ui/CodeBlock/CodeBlock' +import { type IApiEndPoint } from './Reference.api.utils' import { RefInternalLink } from './Reference.navigation.client' import { ApiOperationBodySchemeSelector } from './Reference.ui.client' @@ -211,7 +217,11 @@ async function CliCommandSection({ link, section }: CliCommandSectionProps) { {flag.name} - + {flag.required ? ( + Required + ) : ( + Optional + )} {flag.description && ( @@ -304,15 +314,9 @@ async function ApiEndpointSection({ link, section, servicePath }: ApiEndpointSec <> {endpointDetails.summary} {endpointDetails.deprecated && ( - + deprecated - + )} } diff --git a/apps/docs/features/docs/Reference.ui.tsx b/apps/docs/features/docs/Reference.ui.tsx index 5db4ad466c2..f9d13bef8a2 100644 --- a/apps/docs/features/docs/Reference.ui.tsx +++ b/apps/docs/features/docs/Reference.ui.tsx @@ -3,7 +3,13 @@ import { ChevronRight, XCircle } from 'lucide-react' import type { HTMLAttributes, PropsWithChildren } from 'react' import ReactMarkdown from 'react-markdown' -import { cn, Collapsible_Shadcn_, CollapsibleContent_Shadcn_, CollapsibleTrigger_Shadcn_ } from 'ui' +import { + Badge, + cn, + Collapsible_Shadcn_, + CollapsibleContent_Shadcn_, + CollapsibleTrigger_Shadcn_, +} from 'ui' import ApiSchema from '~/components/ApiSchema' import { MDXRemoteBase } from '~/features/docs/MdxBase' @@ -214,11 +220,11 @@ function ParamOrTypeDetails({ paramOrType }: { paramOrType: object }) { ? '[Anonymous]' : (paramOrType.name as string)} - + {'isOptional' in paramOrType && paramOrType.isOptional === true ? ( + Optional + ) : 'isOptional' in paramOrType && paramOrType.isOptional === false ? ( + Required + ) : null} {/* @ts-ignore */} {paramOrType?.comment?.tags?.some((tag) => tag.tag === 'deprecated') && ( Deprecated @@ -327,24 +333,6 @@ function TypeSubDetails({ ) } -export function RequiredBadge({ isOptional }: { isOptional: boolean | 'NA' }) { - return isOptional === true ? ( - Optional - ) : isOptional === false ? ( - - Required - - ) : undefined -} - export function ApiSchemaParamDetails({ param }: { param: IApiEndPoint['parameters'][number] }) { return (
  • @@ -352,7 +340,11 @@ export function ApiSchemaParamDetails({ param }: { param: IApiEndPoint['paramete {param.name} - + {param.required ? ( + Required + ) : ( + Optional + )} {param.schema?.deprecated && Deprecated} {param.schema && ( diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx index 18b5755d2b2..42fee9c5e3e 100644 --- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx +++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx @@ -103,7 +103,7 @@ const FeaturePreviewModal = () => {

    {selectedFeature?.name}

    - {selectedFeature?.isNew && New} + {selectedFeature?.isNew && New}
    {selectedFeature?.discussionsUrl !== undefined && ( diff --git a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx index 8ec5c5d9744..f9e619fe5af 100644 --- a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx +++ b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx @@ -114,7 +114,7 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
    {hook.enabled ? ( - +
    diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx index 36606b5113b..93fabbec636 100644 --- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx +++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx @@ -133,11 +133,9 @@ export const PolicyDetailsV2 = ({ name="table" render={({ field }) => ( - -

    Table

    -

    - on clause -

    + + Table + on clause {authContext === 'database' && ( @@ -222,11 +220,8 @@ export const PolicyDetailsV2 = ({ name="behavior" render={({ field }) => ( - -

    Policy Behavior

    -

    - as clause -

    + + Policy Behavior as clause ( - -

    Policy Command

    -

    - for clause -

    + + Policy Command for clause ( - -

    Target Roles

    -

    - to clause -

    + + Target Roles to clause +
    {true ? ( - +
    Enabled     ) : ( - + Disabled )} diff --git a/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx b/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx index f47d9540ba4..ff9f5d48d18 100644 --- a/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx +++ b/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx @@ -15,7 +15,7 @@ const invoiceStatusMapping: Record< > = { [InvoiceStatus.PAID]: { label: 'Paid', - badgeVariant: 'brand', + badgeVariant: 'success', }, [InvoiceStatus.VOID]: { label: 'Forgiven', @@ -53,11 +53,7 @@ const InvoiceStatusBadge = ({ return ( - + {statusMapping?.label || status} diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CreditCard.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CreditCard.tsx index 166d69ddcdb..90ccd9c6775 100644 --- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CreditCard.tsx +++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CreditCard.tsx @@ -68,7 +68,7 @@ const CreditCard = ({
    {isExpiringSoon && Expiring soon} {isExpired && Expired} - {isActive && Active} + {isActive && Active} {canUpdatePaymentMethods && ( diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx index 87a1cfce488..872cdf8411a 100644 --- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx +++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx @@ -360,11 +360,7 @@ export const CreateBranchModal = () => {
    - {!gitlessBranching && ( - - Required - - )} + {!gitlessBranching && Required}

    Keep this preview branch in sync with a chosen GitHub branch @@ -386,11 +382,7 @@ export const CreateBranchModal = () => { label={ <> - {!hasPitrEnabled && ( - - Requires PITR - - )} + {!hasPitrEnabled && Requires PITR} } layout="flex-row-reverse" diff --git a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx index 8ccee1d7239..690eccea2a0 100644 --- a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx +++ b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx @@ -299,11 +299,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro

    - {!gitlessBranching && ( - - Required - - )} + {!gitlessBranching && Required}

    {gitlessBranching diff --git a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx index 643b3d907e3..f71d2b4eaa3 100644 --- a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx +++ b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx @@ -1,4 +1,5 @@ import { BookOpen, ChevronDown, ExternalLink } from 'lucide-react' +import Link from 'next/link' import { parseAsString, useQueryState } from 'nuqs' import { HTMLAttributes, ReactNode, useEffect, useMemo, useState } from 'react' @@ -493,11 +494,9 @@ export const DatabaseConnectionString = () => { } className="text-foreground !bg-dash-sidebar justify-between" > -

    +
    Using the Shared Pooler - - IPv4 compatible - + IPv4 compatible
    diff --git a/apps/studio/components/interfaces/DataWarehouse/FormFooterChangeBadge.tsx b/apps/studio/components/interfaces/DataWarehouse/FormFooterChangeBadge.tsx index a8447a40d3a..f06491437be 100644 --- a/apps/studio/components/interfaces/DataWarehouse/FormFooterChangeBadge.tsx +++ b/apps/studio/components/interfaces/DataWarehouse/FormFooterChangeBadge.tsx @@ -1,5 +1,4 @@ import { AnimatePresence, motion } from 'framer-motion' -import { Badge } from 'ui' interface FormFooterChangeBadgeProps { formState: { @@ -22,20 +21,19 @@ export const FormFooterChangeBadge = ({ formState }: FormFooterChangeBadgeProps) transition: { duration: 0.3 }, }} > - +

    {Object.keys(formState.dirtyFields).length === 1 ? '1 change to review' : `${Object.keys(formState.dirtyFields).length} changes to review`} - +

    )} diff --git a/apps/studio/components/interfaces/Database/Backups/DatabaseBackupsNav.tsx b/apps/studio/components/interfaces/Database/Backups/DatabaseBackupsNav.tsx index 1567e57dfd4..b4fe4b3fcc6 100644 --- a/apps/studio/components/interfaces/Database/Backups/DatabaseBackupsNav.tsx +++ b/apps/studio/components/interfaces/Database/Backups/DatabaseBackupsNav.tsx @@ -29,11 +29,8 @@ function DatabaseBackupsNav({ active }: Props) { enabled: databaseRestoreToNewProject && cloud_provider !== 'FLY', id: 'rtnp', label: ( -
    - Restore to new project{' '} - - Beta - +
    + Restore to new project Beta
    ), href: `/project/${ref}/database/backups/restore-to-new-project`, diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.utils.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.utils.tsx index 76552b4d1df..b5965591550 100644 --- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.utils.tsx +++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.utils.tsx @@ -21,7 +21,7 @@ export const getStatusConfig = (state: TableState['state']) => { } case 'copying_table': return { - badge: Copying, + badge: Copying, description: "Table's existing rows are being copied before live streaming begins.", tooltip: "Table's existing rows are being copied before live streaming begins.", color: 'text-brand-600', diff --git a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx index 114a9f6b876..03da48618f9 100644 --- a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx +++ b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx @@ -188,7 +188,7 @@ export const RolesList = () => {

    Roles managed by Supabase

    - Protected + Protected
    {isLoading diff --git a/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx index 6f19256fcf1..6f6be505dd9 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx @@ -110,16 +110,11 @@ export function StorageTypeField({ form, disableInput }: StorageTypeFieldProps) className={cn(disableIo2 && '!pointer-events-auto')} >
    -
    +
    {item.name}{' '} -
    - - {item.type} - -
    + + {item.type} +

    {item.description}

    diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx index 2588fe0bdee..7c789d17e79 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx @@ -11,7 +11,7 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { GB } from 'lib/constants' import { formatBytes } from 'lib/helpers' import { useMemo } from 'react' -import { badgeVariants, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui' +import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui' import { DiskStorageSchemaType } from '../DiskManagement.schema' import { AUTOSCALING_THRESHOLD } from './DiskManagement.constants' @@ -93,7 +93,7 @@ export const DiskSpaceBar = ({ form }: DiskSpaceBarProps) => {
    @@ -155,15 +155,15 @@ export const DiskSpaceBar = ({ form }: DiskSpaceBarProps) => { {showNewSize && ( - - New disk size - + New disk size + )}
    diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx index 1fed4f148f5..b0e1598e4c4 100644 --- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx +++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx @@ -76,10 +76,7 @@ export const EdgeFunctionSecrets = () => { const headers = [ Name, - Digest{' '} - - SHA256 - + Digest SHA256 , Updated at, , diff --git a/apps/studio/components/interfaces/Home/ClientLibrary.tsx b/apps/studio/components/interfaces/Home/ClientLibrary.tsx index 9dd0387b50f..1f643efd5f9 100644 --- a/apps/studio/components/interfaces/Home/ClientLibrary.tsx +++ b/apps/studio/components/interfaces/Home/ClientLibrary.tsx @@ -39,7 +39,7 @@ export const ClientLibrary = ({ className="block md:hidden" />
    - {language} {!officialSupport && Community} + {language} {!officialSupport && Community}
    diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectCardStatus.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectCardStatus.tsx index 1323add4440..607d463836c 100644 --- a/apps/studio/components/interfaces/Home/ProjectList/ProjectCardStatus.tsx +++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectCardStatus.tsx @@ -130,11 +130,7 @@ export const ProjectCardStatus = ({ projectStatus === 'isHealthy' ) { if (renderMode === 'badge') { - return ( - - Active - - ) + return Active } return null } diff --git a/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx b/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx index c7192597c45..4d65a4223af 100644 --- a/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx +++ b/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx @@ -72,14 +72,8 @@ export const IntegrationCard = ({

    {name}

    {description}

    - {status && ( - - {status} - - )} - - Official - + {status && {status}} + Official
    @@ -98,8 +92,8 @@ export const IntegrationCard = ({
    {isInstalled && (
    - - Installed + + Installed
    )}
    @@ -108,14 +102,8 @@ export const IntegrationCard = ({

    {description}

    - {status && ( - - {status} - - )} - - Official - + {status && {status}} + Official
    diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet.tsx index 2cc4079a59c..95bc4ddc696 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet.tsx @@ -208,7 +208,7 @@ export const CreateQueueSheet = ({ visible, onClose }: CreateQueueSheetProps) => {definition.label}

    {definition.value === 'partitioned' && ( - Coming soon + Coming soon )}

    @@ -270,7 +270,7 @@ export const CreateQueueSheet = ({ visible, onClose }: CreateQueueSheetProps) => label={

    Enable Row Level Security (RLS)

    - Recommended + Recommended
    } description="Restrict access to your queue by enabling RLS and writing Postgres policies to control access for each role." diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx index a3743525dd0..c914cfd85b6 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx @@ -70,7 +70,7 @@ const messagesCols = [ return (
    - + {isAvailable ? 'Available ' : `Available at ${dayjs(row.vt).format(DATE_FORMAT)}`}
    diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/create-key-dialog.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/create-key-dialog.tsx index 4fbb2c6cd2e..a0e8f5194a7 100644 --- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/create-key-dialog.tsx +++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/create-key-dialog.tsx @@ -176,7 +176,7 @@ export const CreateKeyDialog = ({ ES256 (ECC) - + Recommended diff --git a/apps/studio/components/interfaces/Linter/Linter.utils.tsx b/apps/studio/components/interfaces/Linter/Linter.utils.tsx index 5f9b61f6578..8af1b8204ea 100644 --- a/apps/studio/components/interfaces/Linter/Linter.utils.tsx +++ b/apps/studio/components/interfaces/Linter/Linter.utils.tsx @@ -343,7 +343,7 @@ export const LintEntity = ({ metadata }: { metadata: Lint['metadata'] }) => { export const LintCategoryBadge = ({ category }: { category: string }) => { return ( - + {category.toLowerCase()} ) diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx index 287f8ec0b94..adadbb346dc 100644 --- a/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx +++ b/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx @@ -382,14 +382,15 @@ export const PublishAppSidePanel = ({ setShowPreview(false)} > -
    -

    Authorize API access for {values.name}

    - Preview +
    +

    Authorize API access for {values.name}

    + Preview
    diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx index feceb18153a..581f3f9565f 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx @@ -75,7 +75,7 @@ export const MemberRow = ({ member }: MemberRowProps) => { />

    {member.primary_email}

    - {member.gotrue_id === profile?.gotrue_id && You} + {member.gotrue_id === profile?.gotrue_id && You}
    {(member.metadata as any)?.origin && ( diff --git a/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx b/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx index 18b4d4c5eb0..bc935376c80 100644 --- a/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx +++ b/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx @@ -58,13 +58,11 @@ export const AdvancedConfiguration = ({ label={ <> Postgres - - Default - + Default } description="Recommended for production workloads" - className="[&>div>div>p]:text-left [&>div>div>p]:text-xs" + className="[&>div>div>p]:text-left [&>div>div>p]:text-xs [&>div>div>label]:flex [&>div>div>label]:items-center [&>div>div>label]:gap-x-2" /> @@ -76,14 +74,12 @@ export const AdvancedConfiguration = ({ label={ <> Postgres with OrioleDB - - Alpha - + Alpha } description="Not recommended for production workloads" className={cn( - '[&>div>div>p]:text-left [&>div>div>p]:text-xs', + '[&>div>div>p]:text-left [&>div>div>p]:text-xs [&>div>div>label]:flex [&>div>div>label]:items-center [&>div>div>label]:gap-x-2', form.getValues('useOrioleDb') ? '!rounded-b-none' : '' )} /> diff --git a/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx index 8797c7619d4..005867c36bc 100644 --- a/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx +++ b/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx @@ -7,7 +7,6 @@ import { getCloudProviderArchitecture } from 'lib/cloudprovider-utils' import { DOCS_URL } from 'lib/constants' import { CloudProvider } from 'shared-data' import { - Badge, FormField_Shadcn_, Select_Shadcn_, SelectContent_Shadcn_, @@ -16,6 +15,7 @@ import { SelectTrigger_Shadcn_, SelectValue_Shadcn_, } from 'ui' +import { ComputeBadge } from 'ui-patterns' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { sizes } from './ProjectCreation.constants' import { CreateProjectForm } from './ProjectCreation.schema' @@ -75,15 +75,11 @@ export const ComputeSizeSelector = ({ form }: ComputeSizeSelectorProps) => { .map((option) => { return ( -
    -
    - - {instanceSizeSpecs[option].label} - +
    +
    +
    +
    {instanceSizeSpecs[option].ram} RAM /{' '} diff --git a/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx index 78f4f160bdd..a2b6777f7d6 100644 --- a/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx +++ b/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx @@ -61,13 +61,11 @@ export const OrganizationSelector = ({ form }: OrganizationSelectorProps) => { {organizations?.map((x) => ( - - {x.name} - {x.plan.name} + +
    + {x.name} + {x.plan.name} +
    ))}     diff --git a/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx index 7b17d5d43aa..3b8c447ff0d 100644 --- a/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx +++ b/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx @@ -129,18 +129,17 @@ export const PostgresVersionSelector = ({ >
    {postgresVersion} -
    - {value.release_channel !== 'ga' && ( - - {value.release_channel} - - )} - {value.postgres_engine.includes('oriole') && ( - - OrioleDB - - )} -
    + {value.release_channel !== 'ga' || + (value.postgres_engine.includes('oriole') && ( +
    + {value.release_channel !== 'ga' && ( + {value.release_channel} + )} + {value.postgres_engine.includes('oriole') && ( + OrioleDB + )} +
    + ))}
    ) diff --git a/apps/studio/components/interfaces/ProjectCreation/ProjectCreationFooter.tsx b/apps/studio/components/interfaces/ProjectCreation/ProjectCreationFooter.tsx index c64dd7795a5..12f4be36232 100644 --- a/apps/studio/components/interfaces/ProjectCreation/ProjectCreationFooter.tsx +++ b/apps/studio/components/interfaces/ProjectCreation/ProjectCreationFooter.tsx @@ -124,11 +124,9 @@ export const ProjectCreationFooter = ({ - {form.getValues('projectName') ?? 'New project'} + {form.getValues('projectName') || 'New project'} - - NEW - + New {instanceLabel(instanceSize)} diff --git a/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx b/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx index 9a7b08f669a..19a556777a5 100644 --- a/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx +++ b/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx @@ -106,18 +106,16 @@ export const SecurityOptions = ({ value="false" // @ts-ignore label={ - <> - Use public schema for Data API - - Default - - +
    + Use public schema for Data API + Default +
    } // @ts-ignore description={ <> Query all tables in the{' '} - public schema + public schema } className="[&>div>div>p]:text-left [&>div>div>p]:text-xs" @@ -133,7 +131,7 @@ export const SecurityOptions = ({ description={ <> Query allowlisted tables in a dedicated{' '} - api schema + api schema } className="[&>div>div>p]:text-left [&>div>div>p]:text-xs" diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx index af46d523278..4cab4d12cac 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx @@ -1,4 +1,9 @@ +import { debounce } from 'lodash' +import { Check, Code, Loader } from 'lucide-react' import { useEffect, useState } from 'react' + +import { useEntityTypesQuery } from 'data/entity-types/entity-types-infinite-query' +import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, @@ -16,11 +21,6 @@ import { ScrollArea, } from 'ui' -import { useEntityTypesQuery } from 'data/entity-types/entity-types-infinite-query' -import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' -import { debounce } from 'lodash' -import { Check, Code, Loader } from 'lucide-react' - interface TableSelectorProps { className?: string size?: 'tiny' | 'small' @@ -125,7 +125,9 @@ const TableSelector = ({ <> 7 ? 'h-[210px]' : ''}> - No tables found + {entities.length === 0 && ( + No tables found + )} {!searchInput && ( } type={isFiltered ? 'primary' : 'dashed'} - className={cn('rounded-full px-1.5 text-xs', isFiltered ? '!py-0.5' : '!py-1')} + className={cn('rounded-full px-1 text-xs h-[26px]')} size="small" > {isFiltered ? ( <> Filtered by - table: {config.table} + table: {config.table} ) : ( Filter messages diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx index 046673923f5..c57299984d2 100644 --- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx +++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx @@ -213,15 +213,13 @@ export const ChartConfig = ({ Dismiss
    - - NEW - + New

    Add this chart to custom reports

    -

    +

    SQL snippets can now be added and saved to your custom reports. Try it out now!

    - diff --git a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx index 79b65204074..cc5e28ee6a6 100644 --- a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx @@ -232,10 +232,7 @@ export const Addons = () => { ) : (
    - +
    )} diff --git a/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx b/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx index 6f76187c038..3b8c8dbfa41 100644 --- a/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx +++ b/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx @@ -262,9 +262,7 @@ export const ProjectUpgradeAlert = () => {
    {postgresVersion} {value.release_channel !== 'ga' && ( - - {value.release_channel} - + {value.release_channel} )}
    diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx index 10825c032db..1fa6dc6fe18 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx @@ -295,7 +295,7 @@ export const ReplicaNode = ({ data }: NodeProps) => { ) : status === REPLICA_STATUS.RESIZING ? ( Resizing ) : status === REPLICA_STATUS.ACTIVE_HEALTHY ? ( - Healthy + Healthy ) : ( Unhealthy )} diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx index 2a7ca2ec7ea..225cd7f2cef 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx @@ -276,7 +276,7 @@ const MapView = ({ `(ID: ${formatDatabaseID(database.identifier)})` }`} {database.status === REPLICA_STATUS.ACTIVE_HEALTHY ? ( - Healthy + Healthy ) : database.status === REPLICA_STATUS.COMING_UP ? ( Coming up ) : database.status === REPLICA_STATUS.RESTARTING ? ( diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx index 343fbc73e6a..0d4f9155883 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx @@ -149,7 +149,7 @@ const InfrastructureInfo = () => { isVisibleReleaseChannel && ( - + {isVisibleReleaseChannel} @@ -174,7 +174,7 @@ const InfrastructureInfo = () => { isOnLatestVersion && ( - + Latest diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/UpgradeWarnings.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/UpgradeWarnings.tsx index 81874dbe478..176505db0ce 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/UpgradeWarnings.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/UpgradeWarnings.tsx @@ -90,7 +90,7 @@ export const UnsupportedExtensionsWarning = ({

  • {obj}

    - + Deprecated
    diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx b/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx index 702e01e77e6..e160735aa30 100644 --- a/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx @@ -8,7 +8,7 @@ import { Label } from '@ui/components/shadcn/ui/label' import { RadioGroup, RadioGroupItem } from '@ui/components/shadcn/ui/radio-group' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { TimeSplitInput } from 'components/ui/DatePicker/TimeSplitInput' -import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan' +import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' import { Button, ButtonProps, @@ -21,7 +21,6 @@ import { } from 'ui' import { LOGS_LARGE_DATE_RANGE_DAYS_THRESHOLD } from './Logs.constants' import type { DatetimeHelper } from './Logs.types' -import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' export type DatePickerValue = { to: string @@ -290,15 +289,7 @@ export const LogsDatePicker = ({ aria-disabled={helper.disabled} > {helper.text} - {showHelperBadge(helper) ? ( - - {helper.availableIn?.[0] || ''} - - ) : null} + {showHelperBadge(helper) ? {helper.availableIn?.[0] || ''} : null} ))} diff --git a/apps/studio/components/interfaces/SignIn/LastSignInWrapper.tsx b/apps/studio/components/interfaces/SignIn/LastSignInWrapper.tsx index 1fda11e3d41..c0c1b1bedc1 100644 --- a/apps/studio/components/interfaces/SignIn/LastSignInWrapper.tsx +++ b/apps/studio/components/interfaces/SignIn/LastSignInWrapper.tsx @@ -16,7 +16,7 @@ export function LastSignInWrapper({
    {lastSignIn === type && ( Last used diff --git a/apps/studio/components/interfaces/Storage/StorageMenuV2.tsx b/apps/studio/components/interfaces/Storage/StorageMenuV2.tsx index b3f856eac6b..ebbf86f9768 100644 --- a/apps/studio/components/interfaces/Storage/StorageMenuV2.tsx +++ b/apps/studio/components/interfaces/Storage/StorageMenuV2.tsx @@ -45,11 +45,7 @@ export const StorageMenuV2 = () => {

    {config.displayName}

    - {isAlphaEnabled && ( - - New - - )} + {isAlphaEnabled && New}
    diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx index 1e218ae4696..ce58d3b5f36 100644 --- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx +++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx @@ -1,5 +1,5 @@ import { noop } from 'lodash' -import { Badge, Button, Checkbox, Modal } from 'ui' +import { Button, Checkbox, cn, Modal } from 'ui' import { PolicyName } from 'components/interfaces/Auth/Policies/PolicyEditor/PolicyName' import { PolicyRoles } from 'components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles' @@ -47,7 +47,7 @@ const PolicyAllowedOperations = ({ allowedOperations = [], onToggleOperation = ( .

    -
    +
    {Object.keys(STORAGE_CLIENT_LIBRARY_MAPPINGS).map((method) => ( -
    - +
      +
    • {method} - -
    +
    • + ))} diff --git a/apps/studio/components/interfaces/Support/OrganizationSelector.tsx b/apps/studio/components/interfaces/Support/OrganizationSelector.tsx index 2a137cec058..6d86cf1abfb 100644 --- a/apps/studio/components/interfaces/Support/OrganizationSelector.tsx +++ b/apps/studio/components/interfaces/Support/OrganizationSelector.tsx @@ -55,11 +55,7 @@ export function OrganizationSelector({ form, orgSlug }: OrganizationSelectorProp ) : ( (organizations ?? []).find((o) => o.slug === field.value)?.name )} - {subscriptionPlanId && ( - - {subscriptionPlanId} - - )} + {subscriptionPlanId && {subscriptionPlanId}} diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx index 40d4f40ec80..cdc1d2cccd4 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx @@ -171,7 +171,7 @@ const Column = ({ ) : (
    - + {status}

    diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeyRow.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeyRow.tsx index 24bcc5dbbed..84d9b6d29be 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeyRow.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeyRow.tsx @@ -49,7 +49,7 @@ export const ForeignKeyRow = ({ {status !== undefined && ( {status} diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/ServiceFlowHeader.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/ServiceFlowHeader.tsx index 5f1c10d2774..4327f1f0158 100644 --- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/ServiceFlowHeader.tsx +++ b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/ServiceFlowHeader.tsx @@ -1,14 +1,14 @@ -import { ChevronDown, ChevronUp, X } from 'lucide-react' -import { useCallback, useMemo, useEffect } from 'react' -import { useDataTable } from 'components/ui/DataTable/providers/DataTableProvider' +import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { DataTableColumnStatusCode } from 'components/ui/DataTable/DataTableColumn/DataTableColumnStatusCode' +import { Kbd } from 'components/ui/DataTable/primitives/Kbd' +import { useDataTable } from 'components/ui/DataTable/providers/DataTableProvider' +import { ChevronDown, ChevronUp, X } from 'lucide-react' +import { useCallback, useEffect, useMemo } from 'react' +import { Badge, Button, Separator } from 'ui' import { LogTypeIcon } from '../../components/LogTypeIcon' +import { ColumnSchema } from '../../UnifiedLogs.schema' import { getStatusLevel } from '../../UnifiedLogs.utils' import { TruncatedTextWithPopover } from './shared/TruncatedTextWithPopover' -import { Badge, Button, Separator } from 'ui' -import { ButtonTooltip } from 'components/ui/ButtonTooltip' -import { Kbd } from 'components/ui/DataTable/primitives/Kbd' -import { ColumnSchema } from '../../UnifiedLogs.schema' interface ServiceFlowHeaderProps { selectedRow: ColumnSchema @@ -101,11 +101,7 @@ export const ServiceFlowHeader = ({ selectedRow, enrichedData }: ServiceFlowHead

    {logType && } - {method && ( - - {method} - - )} + {method && {method}} {displayPath.isTruncatable ? ( - {severity.toUpperCase()} + {severity} )} diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/FieldWithSeeMore.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/FieldWithSeeMore.tsx index 4428a686866..9f0b5dd5bac 100644 --- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/FieldWithSeeMore.tsx +++ b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/FieldWithSeeMore.tsx @@ -78,11 +78,7 @@ export const FieldWithSeeMore = ({ } if (showValueAsBadge && primaryValue && primaryValue !== 'N/A') { - return ( - - {primaryValue} - - ) + return {primaryValue} } return ( diff --git a/apps/studio/components/layouts/AdvisorsLayout/AdvisorsSidebarMenu.tsx b/apps/studio/components/layouts/AdvisorsLayout/AdvisorsSidebarMenu.tsx index 06e6395b4ae..1e37981afd9 100644 --- a/apps/studio/components/layouts/AdvisorsLayout/AdvisorsSidebarMenu.tsx +++ b/apps/studio/components/layouts/AdvisorsLayout/AdvisorsSidebarMenu.tsx @@ -1,11 +1,11 @@ +import { useIsAdvisorRulesEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext' +import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider' import { ProductMenu } from 'components/ui/ProductMenu' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' +import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state' import { Badge, Button } from 'ui' import { FeaturePreviewSidebarPanel } from '../../ui/FeaturePreviewSidebarPanel' import { generateAdvisorsMenu } from './AdvisorsMenu.utils' -import { useIsAdvisorRulesEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext' -import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state' -import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider' interface AdvisorsSidebarMenuProps { page?: string @@ -25,8 +25,8 @@ export function AdvisorsSidebarMenu({ page }: AdvisorsSidebarMenuProps) { New Location} + description="Advisors are now available in the top toolbar for quicker access across the dashboard." + illustration={New} actions={ @@ -215,13 +209,7 @@ const SourcePanel = forwardRef & className="rounded-full" icon={} > - + Docs @@ -232,13 +220,7 @@ const SourcePanel = forwardRef & className="rounded-full" icon={} > - + API Reference diff --git a/apps/www/components/Announcement/Badge.tsx b/apps/www/components/Announcement/Badge.tsx index 41df7114f16..056914149e7 100644 --- a/apps/www/components/Announcement/Badge.tsx +++ b/apps/www/components/Announcement/Badge.tsx @@ -56,7 +56,7 @@ const AnnouncementBadge = ({ )} > {badge && ( - + {badge} )} diff --git a/apps/www/components/Events/new/EventBanner.tsx b/apps/www/components/Events/new/EventBanner.tsx index 2b91e00114b..77b8a05d2bb 100644 --- a/apps/www/components/Events/new/EventBanner.tsx +++ b/apps/www/components/Events/new/EventBanner.tsx @@ -144,7 +144,7 @@ const CoverImage = ({ url }: { url?: string }) => { return (
    - + Upcoming
    @@ -153,7 +153,7 @@ const CoverImage = ({ url }: { url?: string }) => { return (
    Event Cover - + Upcoming
    diff --git a/apps/www/components/Events/new/EventGalleryFilters.tsx b/apps/www/components/Events/new/EventGalleryFilters.tsx index 3292785db01..e44696176fc 100644 --- a/apps/www/components/Events/new/EventGalleryFilters.tsx +++ b/apps/www/components/Events/new/EventGalleryFilters.tsx @@ -38,7 +38,7 @@ export function EventGalleryFilters() { return ( toggleCategory(category.value)} > diff --git a/apps/www/components/Footer/index.tsx b/apps/www/components/Footer/index.tsx index 381e9a03105..5bfff194a7f 100644 --- a/apps/www/components/Footer/index.tsx +++ b/apps/www/components/Footer/index.tsx @@ -149,7 +149,7 @@ const Footer = (props: Props) => { {link.text} {!link.url && !Component && (
    - Coming soon + Coming soon
    )}
    diff --git a/apps/www/components/NewFeatureCard.tsx b/apps/www/components/NewFeatureCard.tsx index dcf7dcae977..767939cc4f4 100644 --- a/apps/www/components/NewFeatureCard.tsx +++ b/apps/www/components/NewFeatureCard.tsx @@ -24,9 +24,7 @@ const NewFeatureCard = (props: CardProps) => (

    {props.title}

    - {props.badge && ( - {props.badge} - )} + {props.badge && {props.badge}}
      diff --git a/apps/www/components/Products/Functions/RealtimeLogs.tsx b/apps/www/components/Products/Functions/RealtimeLogs.tsx index ce5870b80b7..8edd8e3758d 100644 --- a/apps/www/components/Products/Functions/RealtimeLogs.tsx +++ b/apps/www/components/Products/Functions/RealtimeLogs.tsx @@ -1,8 +1,8 @@ -import React, { FC, useEffect, useState } from 'react' import dayjs from 'dayjs' import { AnimatePresence, motion } from 'framer-motion' -import { Badge, cn } from 'ui' +import { FC, useEffect, useState } from 'react' import { useInterval } from 'react-use' +import { Badge, cn } from 'ui' interface Props { isActive?: boolean @@ -87,9 +87,7 @@ const RealtimeLogs: FC = ({ isActive, isInView, className }) => { > {dayjs(log.timestamp).format('D MMM HH:mm:ss')} - - {log.status} - + {log.status} {log.method} {log.id} diff --git a/apps/www/components/TabsWithHighlights.tsx b/apps/www/components/TabsWithHighlights.tsx index 372e5442e6d..8da54933b52 100644 --- a/apps/www/components/TabsWithHighlights.tsx +++ b/apps/www/components/TabsWithHighlights.tsx @@ -1,9 +1,9 @@ -import React, { useRef, useState } from 'react' -import Link from 'next/link' -import { useTheme } from 'next-themes' -import { Check } from 'lucide-react' import { AnimatePresence, motion, useInView } from 'framer-motion' -import { Badge, cn } from 'ui' +import { Check } from 'lucide-react' +import { useTheme } from 'next-themes' +import Link from 'next/link' +import React, { useRef, useState } from 'react' +import { cn } from 'ui' import BrowserFrame from './BrowserFrame' export type Tab = { @@ -96,19 +96,17 @@ interface TabProps { } const Tab = ({ label, isActive, onClick }: TabProps) => ( - ) diff --git a/apps/www/components/UsersGrowthChart.tsx b/apps/www/components/UsersGrowthChart.tsx index a6c10a72b53..e6c0436ecd3 100644 --- a/apps/www/components/UsersGrowthChart.tsx +++ b/apps/www/components/UsersGrowthChart.tsx @@ -1,7 +1,7 @@ -import React, { FC, useMemo, useEffect, useState } from 'react' -import { cn, Badge, AnimatedCounter } from 'ui' import { motion } from 'framer-motion' +import { FC, useEffect, useMemo, useState } from 'react' import { useMedia } from 'react-use' +import { AnimatedCounter, Badge, cn } from 'ui' import { companyStats } from '~/data/company-stats' @@ -102,7 +102,7 @@ const GraphLabel: FC<{ className?: string }> = ({ className }) => { companyStats.developersRegistered.text )} - + {shouldShowAnimated ? ( { {event.time}
    - {event.type === 'keynote' && Keynote} + {event.type === 'keynote' && ( + Keynote + )} {event.type === 'networking' && ( Networking )} diff --git a/apps/www/pages/careers.tsx b/apps/www/pages/careers.tsx index 49564cc4b71..d0815a2c401 100644 --- a/apps/www/pages/careers.tsx +++ b/apps/www/pages/careers.tsx @@ -1,5 +1,4 @@ import { GlobeAltIcon } from '@heroicons/react/outline' -import { Check } from 'lucide-react' import { GetServerSideProps } from 'next' import { NextSeo } from 'next-seo' import Image from 'next/image' @@ -471,7 +470,7 @@ const JobItem = ({ job }: { job: JobItemProps }) => {
    - {job.location} + {job.location} {job.employment}
    diff --git a/apps/www/pages/database.tsx b/apps/www/pages/database.tsx index b33273df52f..616788d342d 100644 --- a/apps/www/pages/database.tsx +++ b/apps/www/pages/database.tsx @@ -11,11 +11,11 @@ import { Swiper, SwiperSlide } from 'swiper/react' import { Badge, Button, Image, Tabs } from 'ui' // data -import MainProducts from '~/data/MainProducts' import ApiExamplesData from 'data/products/database/api-examples' import ExtensionsExamplesData from 'data/products/database/extensions-examples' import SqlViewCarouselData from 'data/products/database/sql-view-carousel.json' import TableViewCarouselData from 'data/products/database/table-view-carousel.json' +import MainProducts from '~/data/MainProducts' import HighlightsCards from '~/data/products/database/highlight-cards' import { ArrowUpRight, X } from 'lucide-react' @@ -268,9 +268,9 @@ function Database() { ]} footer={[
    -
    +

    Available libraries:

    -
    +
    Javascript diff --git a/apps/www/pages/features/[slug].tsx b/apps/www/pages/features/[slug].tsx index d39d5fc788f..8b09d77e287 100644 --- a/apps/www/pages/features/[slug].tsx +++ b/apps/www/pages/features/[slug].tsx @@ -5,14 +5,14 @@ import Link from 'next/link' import ReactMarkdown from 'react-markdown' import { Badge, Button, cn, Image } from 'ui' -import DefaultLayout from '~/components/Layouts/Default' import ShareArticleActions from '~/components/Blog/ShareArticleActions' -import SectionContainer from '~/components/Layouts/SectionContainer' import CTABanner from '~/components/CTABanner' +import DefaultLayout from '~/components/Layouts/Default' +import SectionContainer from '~/components/Layouts/SectionContainer' import PrevNextFeatureNav from '~/components/PrevNextFeatureNav' -import { features } from '~/data/features' import type { FeatureType } from '~/data/features' +import { features } from '~/data/features' interface FeaturePageProps { feature: FeatureType @@ -105,10 +105,7 @@ const FeaturePage: React.FC = ({ feature, prevFeature, nextFea
    - + @@ -122,7 +119,6 @@ const FeaturePage: React.FC = ({ feature, prevFeature, nextFea {product} diff --git a/packages/ui-patterns/src/ComputeBadge/index.tsx b/packages/ui-patterns/src/ComputeBadge/index.tsx index 10d9e6ce13d..58d0d990e09 100644 --- a/packages/ui-patterns/src/ComputeBadge/index.tsx +++ b/packages/ui-patterns/src/ComputeBadge/index.tsx @@ -1,7 +1,10 @@ -import { components } from 'api-types' -import { Badge, cn } from 'ui' +import type { HTMLAttributes } from 'react' -interface ComputeBadgeProps extends React.ComponentProps { +import { components } from 'api-types' + +import { cn } from 'ui' + +interface ComputeBadgeProps extends HTMLAttributes { infraComputeSize: | components['schemas']['ProjectDetailResponse']['infra_compute_size'] | '>16XL' @@ -13,22 +16,31 @@ export function ComputeBadge({ infraComputeSize, className, ...props }: ComputeB infraComputeSize?.toLocaleLowerCase() === 'micro' || infraComputeSize?.toLocaleLowerCase() === 'nano' - return ( - {infraComputeSize} - +
    ) } diff --git a/packages/ui-patterns/src/form/FormLayout2.tsx b/packages/ui-patterns/src/form/FormLayout2.tsx index fb57edb66c1..085404f42c3 100644 --- a/packages/ui-patterns/src/form/FormLayout2.tsx +++ b/packages/ui-patterns/src/form/FormLayout2.tsx @@ -23,7 +23,6 @@ import { SheetHeader, SheetSection, SheetTitle, - SidePanel, Switch, } from 'ui' import { z } from 'zod' @@ -292,9 +291,9 @@ export const Page = () => { render={({ field }) => ( - - Danger zone! + + + Danger } label="Use consistent settings" diff --git a/packages/ui/src/components/shadcn/ui/badge.tsx b/packages/ui/src/components/shadcn/ui/badge.tsx index 305cd87bd46..b304a7b9e10 100644 --- a/packages/ui/src/components/shadcn/ui/badge.tsx +++ b/packages/ui/src/components/shadcn/ui/badge.tsx @@ -3,56 +3,37 @@ import * as React from 'react' import { cn } from '../../../lib/utils/cn' -const badgeVariants = cva('inline-flex items-center rounded-full font-normal whitespace-nowrap', { - variants: { - variant: { - default: 'bg-surface-75 text-foreground-light border border-strong', - warning: 'bg-warning bg-opacity-10 text-warning border border-warning-500', - success: 'bg-brand bg-opacity-10 text-brand-600 border border-brand-500', - destructive: - 'bg-destructive bg-opacity-10 text-destructive-600 border border-destructive-500', - brand: 'bg-brand bg-opacity-10 text-brand-600 border border-brand-500', - secondary: - 'bg-secondary bg-opacity-10 hover:bg-secondary/80 border-transparent text-secondary-foreground', - outline: 'bg-transparent text border border-foreground-muted', +const badgeVariants = cva( + 'inline-flex items-center gap-1 justify-center rounded-full font-normal whitespace-nowrap tracking-[0.07em] uppercase font-medium text-[9px] leading-none px-[5.5px] py-[3px]', + { + variants: { + variant: { + default: 'bg-surface-75 text-foreground-light border border-strong', + warning: 'bg-warning bg-opacity-10 text-warning border border-warning-500', + success: 'bg-brand bg-opacity-10 text-brand-600 border border-brand-500', + destructive: + 'bg-destructive bg-opacity-10 text-destructive-600 border border-destructive-500', + // Secondary is invisible + secondary: + 'bg-secondary bg-opacity-50 hover:bg-secondary/80 border-transparent text-secondary-foreground', + }, }, - size: { - tiny: 'px-1.5 py-[3px] text-[10px] leading-none tracking-wide uppercase', - small: 'px-2 py-0.5 text-xs', - large: 'px-3 py-0.5 text-sm', + defaultVariants: { + variant: 'default', }, - dot: { - true: '-ml-0.5 mr-1.5 h-2 w-2', - }, - }, - defaultVariants: { - variant: 'default', - size: 'small', - }, -}) + } +) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} -function Badge({ - className, - variant = 'default', - size = 'small', - dot = false, - children, - ...props -}: BadgeProps) { +function Badge({ className, variant = 'default', children, ...props }: BadgeProps) { return ( -
    - {dot && ( - - - - )} +
    {children}
    ) } -export { Badge, badgeVariants } +export { Badge }