Skip to content

Commit f27b0e0

Browse files
jankeromnesgtsiolis
jankeromnes
and
gtsiolis
committed
[dashboard] Improve design of new Team Billing
Co-authored-by: George Tsiolis <[email protected]>
1 parent 36f5485 commit f27b0e0

File tree

7 files changed

+52
-35
lines changed

7 files changed

+52
-35
lines changed

‎components/dashboard/src/admin/License.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default function License() {
5050
subtitle="License associated with your Gitpod installation"
5151
>
5252
<div className="flex flex-row space-x-4">
53-
<Card>
53+
<Card className="w-72 h-64">
5454
<span>
5555
{licenseLevel}
5656
{paid}
@@ -70,7 +70,7 @@ export default function License() {
7070
</div>
7171
</span>
7272
</Card>
73-
<SolidCard>
73+
<SolidCard className="w-72 h-64">
7474
<span>
7575
<div className="my-2">{statusMessage}</div>
7676
<p className="dark:text-gray-500 font-semibold">Registered Users</p>

‎components/dashboard/src/components/Card.tsx

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

‎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 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: 45 additions & 28 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
{
@@ -172,12 +173,12 @@ export default function TeamBilling() {
172173
<div className="mt-4 space-x-4 flex">
173174
{isLoading && (
174175
<>
175-
<SolidCard>
176+
<SolidCard className="w-72 h-64">
176177
<div className="w-full h-full flex flex-col items-center justify-center">
177178
<Spinner className="h-5 w-5 animate-spin" />
178179
</div>
179180
</SolidCard>
180-
<SolidCard>
181+
<SolidCard className="w-72 h-64">
181182
<div className="w-full h-full flex flex-col items-center justify-center">
182183
<Spinner className="h-5 w-5 animate-spin" />
183184
</div>
@@ -188,14 +189,22 @@ export default function TeamBilling() {
188189
<>
189190
{availableTeamPlans.map((tp) => (
190191
<>
191-
<SolidCard
192-
className="cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700"
193-
onClick={() => checkout(tp)}
194-
>
192+
<SolidCard className="w-72 h-72">
195193
<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>
194+
<div className="font-semibold text-gray-800 dark:text-gray-100 text-lg">
195+
{tp.name}
196+
</div>
197+
<div className="font-semibold text-gray-400 dark:text-gray-600 text-sm">
198+
Unlimited hours
199+
</div>
200+
<div className="mt-2">
201+
<PillLabel type="warn" className="font-semibold normal-case text-sm">
202+
{members.length} x {Currency.getSymbol(tp.currency)}
203+
{tp.pricePerMonth} = {Currency.getSymbol(tp.currency)}
204+
{members.length * tp.pricePerMonth} per month
205+
</PillLabel>
206+
</div>
207+
<div className="mt-4 font-semibold text-sm">Includes:</div>
199208
<div className="flex flex-col items-start text-sm">
200209
{(featuresByPlanType[tp.type] || []).map((f) => (
201210
<span className="inline-flex space-x-1">
@@ -204,12 +213,10 @@ export default function TeamBilling() {
204213
</span>
205214
))}
206215
</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>
216+
<div className="flex-grow flex flex-col items-stretch justify-end">
217+
<button className="m-0" onClick={() => checkout(tp)}>
218+
Upgrade to {tp.name}
219+
</button>
213220
</div>
214221
</div>
215222
</SolidCard>
@@ -219,10 +226,14 @@ export default function TeamBilling() {
219226
)}
220227
{!isLoading && teamPlan && (
221228
<>
222-
<Card>
229+
<Card className="w-72 h-64">
223230
<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>
231+
<div className="font-semibold text-gray-100 dark:text-gray-800 text-lg">
232+
{teamPlan.name}
233+
</div>
234+
<div className="font-semibold text-gray-400 dark:text-gray-600 text-sm">
235+
Unlimited hours
236+
</div>
226237
<div className="mt-8 font-semibold text-sm">Includes:</div>
227238
<div className="flex flex-col items-start text-sm">
228239
{(featuresByPlanType[teamPlan.type] || []).map((f) => (
@@ -232,25 +243,31 @@ export default function TeamBilling() {
232243
</span>
233244
))}
234245
</div>
235-
<div className="flex-grow flex flex-col items-end justify-end"></div>
246+
<div className="flex-grow flex flex-col items-stretch justify-end"></div>
236247
</div>
237248
</Card>
238249
{!teamSubscription ? (
239-
<SolidCard>
250+
<SolidCard className="w-72 h-64">
240251
<div className="w-full h-full flex flex-col items-center justify-center">
241252
<Spinner className="h-5 w-5 animate-spin" />
242253
</div>
243254
</SolidCard>
244255
) : (
245-
<SolidCard>
256+
<SolidCard className="w-72 h-64">
246257
<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">
258+
<div className="font-medium text-base text-gray-400 dark:text-gray-600">
259+
Members
260+
</div>
261+
<div className="font-semibold text-base text-gray-600 dark:text-gray-400">
262+
{members.length}
263+
</div>
264+
<div className="mt-4 font-medium text-base text-gray-400 dark:text-gray-600">
265+
Next invoice on
266+
</div>
267+
<div className="font-semibold text-base text-gray-600 dark:text-gray-400">
251268
{guessNextInvoiceDate(teamSubscription.startDate).toDateString()}
252269
</div>
253-
<div className="flex-grow flex flex-col items-end justify-end">
270+
<div className="flex-grow flex flex-col items-stretch justify-end">
254271
<button
255272
onClick={() => {
256273
if (team) {

0 commit comments

Comments
 (0)