Skip to content

[front] enh: align Usage page section spacing #32277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aubin-tchoi wants to merge 1 commit into
base: main
Choose a base branch
from
+54 −60
Open

[front] enh: align Usage page section spacing #32277

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 54 additions & 60 deletions front/components/pages/workspace/UsagePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ import {
Plus,
ProgressBar,
SearchInput,
Separator,
Spinner,
Tabs,
TabsContent,
Expand Down Expand Up @@ -1093,13 +1094,7 @@ export function UsagePage() {
currentTotalPoolCredits={totalActiveCredits}
/>

<div
className={
showConsumptionAnalytics
? "flex flex-col items-stretch gap-8 pb-20"
: "flex flex-col items-stretch gap-10 pb-20"
}
>
<div className="flex flex-col gap-8">
{showConsumptionAnalytics ? (
<Page.Header
title={
Expand Down Expand Up @@ -1161,9 +1156,9 @@ export function UsagePage() {
)}

{isCreditPriced && showConsumptionAnalytics ? (
<Page.Vertical gap="none" align="stretch">
<div className="flex flex-col gap-4">
<h2 className="heading-sm text-foreground">Credit Pool</h2>
<div className="flex flex-col gap-2 pt-4">
<div className="flex flex-col gap-2">
{isOverviewLoading ? (
<div
aria-label="Loading Credit Pool"
Expand Down Expand Up @@ -1234,39 +1229,40 @@ export function UsagePage() {
</div>
</>
) : null}
<div className="mt-2 flex flex-col justify-between gap-4 border-t border-border pt-4 sm:flex-row sm:items-center">
<div className="flex min-w-0 flex-1 flex-col gap-1 text-sm text-foreground">
{!isOverviewError &&
consumptionOverview !== null &&
(creditUsage !== null || hasPool) && (
<>
{creditUsageDisplayTarget === "on_target" ? (
<span>
At your current rate, you have enough credits to
finish the cycle.
</span>
) : resetAt ? (
<span>
At this rate, you&apos;re expected to consume your
full credits by{" "}
<span className="font-semibold">
{formatConsumptionDate(resetAt)}
</span>
.
</span>
) : null}
{overageCredits !== null && overageCredits > 0 && (
<span className="text-muted-foreground">
{formatCredits(overageCredits)} overage credits
</div>
<Separator />
<div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
<div className="flex min-w-0 flex-1 flex-col gap-1 text-sm text-foreground">
{!isOverviewError &&
consumptionOverview !== null &&
(creditUsage !== null || hasPool) && (
<>
{creditUsageDisplayTarget === "on_target" ? (
<span>
At your current rate, you have enough credits to
finish the cycle.
</span>
) : resetAt ? (
<span>
At this rate, you&apos;re expected to consume your
full credits by{" "}
<span className="font-semibold">
{formatConsumptionDate(resetAt)}
</span>
)}
</>
)}
</div>
{topUpButton}
.
</span>
) : null}
{overageCredits !== null && overageCredits > 0 && (
<span className="text-muted-foreground">
{formatCredits(overageCredits)} overage credits
</span>
)}
</>
)}
</div>
{topUpButton}
</div>
</Page.Vertical>
</div>
) : null}

{isNewUsagePage && isCreditPriced ? (
Expand Down Expand Up @@ -1360,7 +1356,7 @@ export function UsagePage() {
<TabsContent value="members" className={TAB_CONTENT_CLASS}>
<div className="flex flex-col items-stretch gap-4">
{searchRow}
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-4">
<div className="flex flex-row items-center justify-between gap-2">
{isCreditPriced && (
<ButtonsSwitchList
Expand Down Expand Up @@ -1398,24 +1394,22 @@ export function UsagePage() {
</div>
)}
</div>
<div className="flex flex-col gap-2 pt-2">
{membersTab === "members" ? (
<>
{membersTable}
{selectionBanner}
</>
) : (
<UpgradeRequestsTable
requests={filteredUpgradeRequests}
isLoading={isUpgradeRequestsLoading}
seatPlans={seatPlans}
pendingRequestIds={resolvingRequestIds}
onUpgradePlan={handleUpgradePlanRequest}
onEditLimit={handleEditLimitRequest}
onDeny={handleDenyRequest}
/>
)}
</div>
{membersTab === "members" ? (
<div className="flex flex-col gap-2">
{membersTable}
{selectionBanner}
</div>
) : (
<UpgradeRequestsTable
requests={filteredUpgradeRequests}
isLoading={isUpgradeRequestsLoading}
seatPlans={seatPlans}
pendingRequestIds={resolvingRequestIds}
onUpgradePlan={handleUpgradePlanRequest}
onEditLimit={handleEditLimitRequest}
onDeny={handleDenyRequest}
/>
)}
</div>
</div>
</TabsContent>
Expand All @@ -1435,7 +1429,7 @@ export function UsagePage() {

{isWorkspaceAdmin && (
<TabsContent value="settings" className={TAB_CONTENT_CLASS}>
<div className="flex flex-col gap-10">
<div className="flex flex-col gap-8">
{isCreditPriced && (
<UsageSettingsCard
workspaceId={owner.sId}
Expand All @@ -1447,7 +1441,7 @@ export function UsagePage() {
{isCreditPriced && (
<LockedSection
locked={!isAwuPoolSummaryLoading && !hasPool}
className="flex flex-col gap-10"
className="flex flex-col gap-8"
>
<UsageProgrammaticLimitCard workspaceId={owner.sId} />
<UsageNotificationsCard workspaceId={owner.sId} />
Expand Down
Loading