diff --git a/apps/web/src/components/NoProjectsHero.tsx b/apps/web/src/components/NoProjectsHero.tsx index daa371fc1310..de125d384eb1 100644 --- a/apps/web/src/components/NoProjectsHero.tsx +++ b/apps/web/src/components/NoProjectsHero.tsx @@ -12,10 +12,10 @@ export function NoProjectsHero() { return (
- +
- What should we work on? + What should we work on? Add a project to start your first thread.
diff --git a/apps/web/src/components/clerk/T3ConnectUserProfilePage.tsx b/apps/web/src/components/clerk/T3ConnectUserProfilePage.tsx index a6451cd14bc9..f0fd0f06ac08 100644 --- a/apps/web/src/components/clerk/T3ConnectUserProfilePage.tsx +++ b/apps/web/src/components/clerk/T3ConnectUserProfilePage.tsx @@ -233,19 +233,20 @@ export function T3ConnectUserProfilePage() { ))} ) : environmentsState.error ? null : ( - - - - - - - No T3 Connect environments - - - Link an environment from its local Settings to make it available through T3 Connect. - - - +
+ + + + + + No T3 Connect environments + + Link an environment from its local Settings to make it available through T3 + Connect. + + + +
)}
diff --git a/apps/web/src/components/pullRequest/PullRequestListEmptyState.tsx b/apps/web/src/components/pullRequest/PullRequestListEmptyState.tsx index 6c4fb9769b43..a5c60d3dada0 100644 --- a/apps/web/src/components/pullRequest/PullRequestListEmptyState.tsx +++ b/apps/web/src/components/pullRequest/PullRequestListEmptyState.tsx @@ -100,7 +100,7 @@ export function PullRequestListEmptyState({ // Ahead of the search and the filters, because neither can produce a row until a project does. if (!hasProjects) { return ( - + No projects in this workspace @@ -131,7 +131,7 @@ export function PullRequestListEmptyState({ if (query.length > 0) { return ( - + {/* A pasted paragraph is still a search, but it is not a title. */} @@ -142,7 +142,7 @@ export function PullRequestListEmptyState({ The hosts were searched for it. Try fewer words, or search by number, author or branch. - +
- +
); } return ( - + {filtered ? "Nothing under these filters" : "No pull requests"} @@ -169,7 +169,7 @@ export function PullRequestListEmptyState({ : "Pull requests from every project in this workspace appear here."} - +
{canLoadMore ? ( - +
); } diff --git a/apps/web/src/components/pullRequest/PullRequestsUnavailableState.tsx b/apps/web/src/components/pullRequest/PullRequestsUnavailableState.tsx index 364df38b3e7d..da182d268637 100644 --- a/apps/web/src/components/pullRequest/PullRequestsUnavailableState.tsx +++ b/apps/web/src/components/pullRequest/PullRequestsUnavailableState.tsx @@ -2,14 +2,7 @@ import { RefreshIcon } from "~/components/ui/refresh-icon"; import { ExternalLinkIcon } from "lucide-react"; import { Button } from "../ui/button"; -import { - Empty, - EmptyContent, - EmptyDescription, - EmptyHeader, - EmptyMedia, - EmptyTitle, -} from "../ui/empty"; +import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty"; import { PullRequestGlyph } from "./pullRequestIcons"; export function PullRequestsUnavailableState({ @@ -26,7 +19,7 @@ export function PullRequestsUnavailableState({ gitHubUrl?: string; }) { return ( - + @@ -37,7 +30,7 @@ export function PullRequestsUnavailableState({ {error}
{onRetry || gitHubUrl ? ( - +
{onRetry ? (
) : null}
); diff --git a/apps/web/src/components/settings/ProviderSettingsPanel.tsx b/apps/web/src/components/settings/ProviderSettingsPanel.tsx index 509a758f3ccb..1ab40666136d 100644 --- a/apps/web/src/components/settings/ProviderSettingsPanel.tsx +++ b/apps/web/src/components/settings/ProviderSettingsPanel.tsx @@ -203,7 +203,7 @@ function ProviderSettingsPlaceholder({ divided={false} className={cn(providerCardHeightClassName, "flex overflow-x-hidden overflow-y-auto")} > - + {icon} {title} diff --git a/apps/web/src/components/settings/SourceControlSettings.tsx b/apps/web/src/components/settings/SourceControlSettings.tsx index 82ccab88c6a5..3c9b440e5c55 100644 --- a/apps/web/src/components/settings/SourceControlSettings.tsx +++ b/apps/web/src/components/settings/SourceControlSettings.tsx @@ -476,7 +476,7 @@ function EmptySourceControlDiscovery({ return ( - + diff --git a/apps/web/src/components/ui/empty.tsx b/apps/web/src/components/ui/empty.tsx index bc6f94d79a2c..8b41a710e1f6 100644 --- a/apps/web/src/components/ui/empty.tsx +++ b/apps/web/src/components/ui/empty.tsx @@ -2,11 +2,25 @@ import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "~/lib/utils"; -function Empty({ className, ...props }: React.ComponentProps<"div">) { +// Size sets how much room the state claims and how large its title reads: +// "compact" is a card-sized notice, "hero" fills a whole route. +const emptySizeClassName = { + compact: + "min-h-64 gap-4 p-6 md:p-10 [&_[data-slot=empty-media]]:mb-0 [&_[data-slot=empty-title]]:text-[1.0625rem] [&_[data-slot=empty-title]]:leading-6 [&_[data-slot=empty-description]]:text-[0.8125rem] [&_[data-slot=empty-description]]:leading-[1.125rem]", + default: "gap-6 p-6 md:p-12", + hero: "gap-6 p-6 md:p-12 [&_[data-slot=empty-title]]:text-2xl sm:[&_[data-slot=empty-title]]:text-3xl", +} as const; + +function Empty({ + className, + size = "default", + ...props +}: React.ComponentProps<"div"> & { size?: keyof typeof emptySizeClassName }) { return (