diff --git a/apps/studio/components/interfaces/Account/AccessTokens/NewAccessTokenDialog.tsx b/apps/studio/components/interfaces/Account/AccessTokens/NewAccessTokenDialog.tsx index 714055746a5..db1b81fd7dc 100644 --- a/apps/studio/components/interfaces/Account/AccessTokens/NewAccessTokenDialog.tsx +++ b/apps/studio/components/interfaces/Account/AccessTokens/NewAccessTokenDialog.tsx @@ -139,7 +139,7 @@ export const NewAccessTokenDialog = ({ {tokenScope === 'V0' ? ( @@ -160,7 +160,7 @@ export const NewAccessTokenDialog = ({ ) : ( diff --git a/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert.tsx b/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert.tsx deleted file mode 100644 index f866cbda6d2..00000000000 --- a/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import Link from 'next/link' - -import { useParams } from 'common' -import { InlineLink } from 'components/ui/InlineLink' -import { DOCS_URL } from 'lib/constants' -import { Button } from 'ui' -import { Admonition } from 'ui-patterns/admonition' - -export const EmailRateLimitsAlert = () => { - const { ref } = useParams() - - return ( - -

- You’re using the built-in email service. This service has rate limits and is not meant to be - used for production apps.{' '} - - Learn more - {' '} -

- - - ) -} diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx index 7b2d9a72203..5d17b87701a 100644 --- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx +++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx @@ -30,7 +30,7 @@ import { TooltipContent, TooltipTrigger, } from 'ui' -import { Admonition } from 'ui-patterns' +import { Admonition } from 'ui-patterns/admonition' import { PageSection, PageSectionContent, @@ -39,7 +39,6 @@ import { PageSectionTitle, } from 'ui-patterns/PageSection' import { TEMPLATES_SCHEMAS } from '../AuthTemplatesValidation' -import { EmailRateLimitsAlert } from '../EmailRateLimitsAlert' import { slugifyTitle } from './EmailTemplates.utils' const notificationEnabledKeys = TEMPLATES_SCHEMAS.filter( @@ -142,9 +141,26 @@ export const EmailTemplates = () => { {isSuccess && ( <> {builtInSMTP && ( -
- -
+ + You’re using the built-in email service. This service has rate limits and is not + meant to be used for production apps.{' '} + + Learn more + {' '} +

+ } + layout="horizontal" + className="mt-12 mb-10" + actions={ + + } + /> )} diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx index 979b3061fb9..8399c067741 100644 --- a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx +++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx @@ -109,7 +109,7 @@ const PolicyTableRowComponent = ({ No data will be selectable via Supabase APIs as this schema is not exposed. You may configure this in your project's{' '} diff --git a/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx b/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx index 9eb3c0608e2..1a576248d7f 100644 --- a/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx @@ -182,7 +182,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => { ) : ( diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx index 988b684e1d8..1038ec1f121 100644 --- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx +++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx @@ -97,7 +97,6 @@ const PaymentMethods = () => { {

If you are using Session Pooler, we recommend switching to Direct diff --git a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx index a5c8b1bbb85..883c350167e 100644 --- a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx +++ b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx @@ -203,9 +203,7 @@ export const ExtensionRow = ({ extension }: ExtensionRowProps) => { Are you sure you want to turn OFF the "{extension.name}" extension?

{EXTENSION_DISABLE_WARNINGS[extension.name] && ( - - {EXTENSION_DISABLE_WARNINGS[extension.name]} - + {EXTENSION_DISABLE_WARNINGS[extension.name]} )} diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx index c4c087eac57..ad4e08cdbe5 100644 --- a/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx +++ b/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx @@ -77,7 +77,7 @@ export const PublicationsTables = () => { {!isLoadingPermissions && !canUpdatePublications && ( )} diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/PublicationSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/PublicationSelection.tsx index 4eb9278de6b..ea59ed6bebc 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/PublicationSelection.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/PublicationSelection.tsx @@ -71,14 +71,14 @@ export const PublicationSelection = ({ /> {isSelectedPublicationMissing ? ( - +

The publication {publicationName} was not found, it may have been renamed or deleted, please select another one.

) : hasTablesWithNoPrimaryKeys ? ( - +

Replication requires every table in the publication to have a primary key to work, which these tables are missing: diff --git a/apps/studio/components/interfaces/Database/Replication/EnableReplicationModal.tsx b/apps/studio/components/interfaces/Database/Replication/EnableReplicationModal.tsx index 5098553530e..3eaf7549da1 100644 --- a/apps/studio/components/interfaces/Database/Replication/EnableReplicationModal.tsx +++ b/apps/studio/components/interfaces/Database/Replication/EnableReplicationModal.tsx @@ -51,7 +51,7 @@ export const EnableReplicationModal = () => {

diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx index 492c8d443db..587a6f0840e 100644 --- a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx +++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx @@ -397,7 +397,6 @@ export function DiskManagementForm() { {!isReadOnlyMode && usedPercentage >= 90 && isWithinCooldownWindow && ( @@ -411,7 +410,6 @@ export function DiskManagementForm() { {isReadOnlyMode && ( diff --git a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx index 6388a156ab6..58fb36352a6 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx @@ -27,7 +27,7 @@ export function SpendCapDisabledSection() { exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.2 }} > - + Disable spend cap to manage Disk configuration To access disk management features, you need to disable your spend cap. These features diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx index 318b47d82f5..12387c9357e 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx @@ -140,7 +140,7 @@ const MembersView = ({ searchString }: MembersViewProps) => { type="note" title="You are currently assigned with project scoped roles in this organization" description="All other members within the organization will not be visible to you" - className="m-0 bg-alternative border-0 rounded-none" + className="bg-alternative border-0 rounded-none" /> , diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx index b7abf61489f..7e727914fa0 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx @@ -56,7 +56,6 @@ export const TeamSettings = () => { {hasProjectScopedRoles && totalCount > threshold && ( diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx index 41f91d74dc7..94d20927cd5 100644 --- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx +++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx @@ -73,7 +73,7 @@ export const OrganizationInvite = () => { showIcon={false} type="default" title={`Sign in${isSignUpEnabled ? ' or create an account' : ''} first to view this invitation`} - className="mb-0 border-0 rounded-none text-left" + className="border-0 rounded-none text-left" />

+ ) +} + +/** + * @deprecated Use `import { Admonition } from "ui-patterns/admonition"` instead + */ // [Joshen] To standardize the language for all error UIs export const AlertError = ({ @@ -27,6 +52,7 @@ export const AlertError = ({ error, className, showIcon = true, + layout = 'horizontal', children, additionalActions, }: PropsWithChildren) => { @@ -35,35 +61,33 @@ export const AlertError = ({ : error?.message return ( - - {showIcon && } - {subject} - -
- {error?.message &&

Error: {formattedErrorMessage}

} -

- Try refreshing your browser, but if the issue persists for more than a few minutes, - please reach out to us via support. + + {error?.message &&

Error: {formattedErrorMessage}

} +

+ Try refreshing your browser. If the issue persists for more than a few minutes, please + reach out to us via support.

-
- {children} -
- {additionalActions} - -
- - + {children} + + } + actions={ + additionalActions ? ( +
+ {additionalActions} + +
+ ) : ( + + ) + } + className={className} + /> ) } diff --git a/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx b/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx index b262a2f64d3..f509d77a5ff 100644 --- a/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx +++ b/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx @@ -106,7 +106,7 @@ export const EdgeFunctionBlock = ({ {showReplaceWarning && (

An edge function with the name "{functionName}" already exists.

diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx index 59b414fab58..a5c0e6b34d4 100644 --- a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx +++ b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx @@ -306,7 +306,7 @@ export const EditorPanel = () => {

diff --git a/apps/studio/pages/claim-project.tsx b/apps/studio/pages/claim-project.tsx index e3a496a4e7c..117a0fc28a9 100644 --- a/apps/studio/pages/claim-project.tsx +++ b/apps/studio/pages/claim-project.tsx @@ -76,11 +76,7 @@ const ClaimProjectPage: NextPageWithLayout = () => { if ((selectedOrgSlug && claimToken && isErrorProjectClaim) || isErrorRequester) { return ( - +

Please retry your claim request from the requesting app

{!!errorProjectClaim &&

Error: {errorProjectClaim?.message}

} {!!errorRequester &&

Error: {errorRequester?.message}

} diff --git a/packages/ui-patterns/src/admonition.tsx b/packages/ui-patterns/src/admonition.tsx index 568b2c0dae2..39527557623 100644 --- a/packages/ui-patterns/src/admonition.tsx +++ b/packages/ui-patterns/src/admonition.tsx @@ -107,7 +107,7 @@ export const Admonition = forwardRef< ref={ref} variant={typeMapped} {...props} - className={cn('mb-2', admonitionSVG({ type: typeMapped }), props.className)} + className={cn(admonitionSVG({ type: typeMapped }), props.className)} > {!!icon ? ( icon diff --git a/packages/ui/src/components/shadcn/ui/alert.tsx b/packages/ui/src/components/shadcn/ui/alert.tsx index 934c9db155d..4c9a0deb20c 100644 --- a/packages/ui/src/components/shadcn/ui/alert.tsx +++ b/packages/ui/src/components/shadcn/ui/alert.tsx @@ -45,7 +45,7 @@ const AlertDescription = React.forwardRef< >(({ className, ...props }, ref) => (
))