Skip to content

Commit f70f444

Browse files
jankeromnesjankeromnes
committed
[dashboard] Improve design of new Team Billing
1 parent d89fb7d commit f70f444

File tree

5 files changed

+38
-22
lines changed

5 files changed

+38
-22
lines changed

‎components/dashboard/src/components/PillLabel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
export default function PillLabel(props: { children?: React.ReactNode; type?: "info" | "warn"; className?: string }) {
1818
const infoStyle = "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100";
1919
const warnStyle = "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100";
20-
const style = `ml-2 px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
20+
const style = `px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
2121
props.className
2222
}`;
2323
return <span className={style}>{props.children}</span>;

‎components/dashboard/src/components/SolidCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function SolidCard(p: { className?: string; onClick?: () => void; children?: Rea
88
return (
99
<div
1010
className={
11-
"flex flex-col rounded-xl w-72 h-64 px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-600 " +
11+
"flex flex-col rounded-xl w-72 h-64 px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 " +
1212
(p.className || "")
1313
}
1414
onClick={p.onClick}

‎components/dashboard/src/projects/ProjectSettings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default function () {
8787
title={
8888
<span>
8989
Enable Incremental Prebuilds{" "}
90-
<PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">
90+
<PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
9191
Beta
9292
</PillLabel>
9393
</span>

‎components/dashboard/src/settings/Preferences.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export default function Preferences() {
118118

119119
<h3 className="mt-12">
120120
Dotfiles{" "}
121-
<PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">
121+
<PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
122122
Beta
123123
</PillLabel>
124124
</h3>

‎components/dashboard/src/teams/TeamBilling.tsx‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -143,13 +143,14 @@ export default function TeamBilling() {
143143
title="Billing"
144144
subtitle="Manage team billing and plans."
145145
>
146-
<h3>{!teamPlan ? "No billing plan" : "Plan"}</h3>
146+
<h3>{!teamPlan ? "Upgrade Team Plan" : "Team Plan"}</h3>
147147
<h2 className="text-gray-500">
148148
{!teamPlan ? (
149149
<div className="flex space-x-1">
150-
<span>Select a new billing plan for this team. Currency:</span>
150+
<span>Upgrade team plan to access unlimited workspace hours, and more. Currency:</span>
151151
<DropDown
152152
customClasses="w-32"
153+
renderAsLink={true}
153154
activeEntry={currency}
154155
entries={[
155156
{
@@ -193,9 +194,20 @@ export default function TeamBilling() {
193194
onClick={() => checkout(tp)}
194195
>
195196
<div className="px-2 py-5 flex-grow flex flex-col">
196-
<div className="font-medium text-base">{tp.name}</div>
197-
<div className="font-semibold text-gray-500 text-sm">Unlimited hours</div>
198-
<div className="mt-8 font-semibold text-sm">Includes:</div>
197+
<div className="font-semibold text-gray-800 dark:text-gray-100 text-lg">
198+
{tp.name}
199+
</div>
200+
<div className="font-semibold text-gray-400 dark:text-gray-600 text-sm">
201+
Unlimited hours
202+
</div>
203+
<div className="mt-4">
204+
<PillLabel type="warn" className="font-semibold normal-case text-sm">
205+
{members.length} x {Currency.getSymbol(tp.currency)}
206+
{tp.pricePerMonth} = {Currency.getSymbol(tp.currency)}
207+
{members.length * tp.pricePerMonth} per month
208+
</PillLabel>
209+
</div>
210+
<div className="mt-4 font-semibold text-sm">Includes:</div>
199211
<div className="flex flex-col items-start text-sm">
200212
{(featuresByPlanType[tp.type] || []).map((f) => (
201213
<span className="inline-flex space-x-1">
@@ -204,13 +216,7 @@ export default function TeamBilling() {
204216
</span>
205217
))}
206218
</div>
207-
<div className="flex-grow flex flex-col items-end justify-end">
208-
<PillLabel type="warn" className="font-semibold normal-case text-sm">
209-
{members.length} x {Currency.getSymbol(tp.currency)}
210-
{tp.pricePerMonth} = {Currency.getSymbol(tp.currency)}
211-
{members.length * tp.pricePerMonth} per month
212-
</PillLabel>
213-
</div>
219+
<div className="flex-grow flex flex-col items-end justify-end"></div>
214220
</div>
215221
</SolidCard>
216222
</>
@@ -221,8 +227,12 @@ export default function TeamBilling() {
221227
<>
222228
<Card>
223229
<div className="px-2 py-5 flex-grow flex flex-col">
224-
<div className="font-bold text-base">{teamPlan.name}</div>
225-
<div className="font-semibold text-gray-500 text-sm">Unlimited hours</div>
230+
<div className="font-semibold text-gray-100 dark:text-gray-800 text-lg">
231+
{teamPlan.name}
232+
</div>
233+
<div className="font-semibold text-gray-400 dark:text-gray-600 text-sm">
234+
Unlimited hours
235+
</div>
226236
<div className="mt-8 font-semibold text-sm">Includes:</div>
227237
<div className="flex flex-col items-start text-sm">
228238
{(featuresByPlanType[teamPlan.type] || []).map((f) => (
@@ -244,10 +254,16 @@ export default function TeamBilling() {
244254
) : (
245255
<SolidCard>
246256
<div className="px-2 py-5 flex-grow flex flex-col">
247-
<div className="font-medium text-base text-gray-400">Members</div>
248-
<div className="font-semibold text-base text-gray-600">{members.length}</div>
249-
<div className="mt-8 font-medium text-base text-gray-400">Next invoice on</div>
250-
<div className="font-semibold text-base text-gray-600">
257+
<div className="font-medium text-base text-gray-400 dark:text-gray-600">
258+
Members
259+
</div>
260+
<div className="font-semibold text-base text-gray-600 dark:text-gray-400">
261+
{members.length}
262+
</div>
263+
<div className="mt-8 font-medium text-base text-gray-400 dark:text-gray-600">
264+
Next invoice on
265+
</div>
266+
<div className="font-semibold text-base text-gray-600 dark:text-gray-400">
251267
{guessNextInvoiceDate(teamSubscription.startDate).toDateString()}
252268
</div>
253269
<div className="flex-grow flex flex-col items-end justify-end">

0 commit comments

Comments
 (0)