Skip to content

Commit

Permalink
[dashboard] Improve design of new Team Billing
Browse files Browse the repository at this point in the history
  • Loading branch information
@jankeromnes
jankeromnes committed May 30, 2022
1 parent 36f5485 commit 56f5b6b
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 35 deletions.
4 changes: 2 additions & 2 deletions components/dashboard/src/admin/License.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function License() {
subtitle="License associated with your Gitpod installation"
>
<div className="flex flex-row space-x-4">
<Card>
<Card className="w-72 h-64">
<span>
{licenseLevel}
{paid}
Expand All @@ -70,7 +70,7 @@ export default function License() {
</div>
</span>
</Card>
<SolidCard>
<SolidCard className="w-72 h-64">
<span>
<div className="my-2">{statusMessage}</div>
<p className="dark:text-gray-500 font-semibold">Registered Users</p>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/components/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ function Card(p: { className?: string; onClick?: () => void; children?: React.Re
return (
<div
className={
"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 " +
"flex flex-col rounded-xl px-4 bg-gray-800 dark:bg-gray-100 text-gray-200 dark:text-gray-500 " +
(p.className || "")
}
onClick={p.onClick}
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/components/PillLabel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
export default function PillLabel(props: { children?: React.ReactNode; type?: "info" | "warn"; className?: string }) {
const infoStyle = "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100";
const warnStyle = "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100";
const style = `ml-2 px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
const style = `px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
props.className
}`;
return <span className={style}>{props.children}</span>;
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/components/SolidCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ function SolidCard(p: { className?: string; onClick?: () => void; children?: Rea
return (
<div
className={
"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 " +
"flex flex-col rounded-xl px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 " +
(p.className || "")
}
onClick={p.onClick}
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/projects/ProjectSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default function () {
title={
<span>
Enable Incremental Prebuilds{" "}
<PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">
<PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
Beta
</PillLabel>
</span>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/settings/Preferences.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export default function Preferences() {

<h3 className="mt-12">
Dotfiles{" "}
<PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">
<PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
Beta
</PillLabel>
</h3>
Expand Down
73 changes: 45 additions & 28 deletions components/dashboard/src/teams/TeamBilling.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,13 +143,14 @@ export default function TeamBilling() {
title="Billing"
subtitle="Manage team billing and plans."
>
<h3>{!teamPlan ? "No billing plan" : "Plan"}</h3>
<h3>{!teamPlan ? "Upgrade Team Plan" : "Team Plan"}</h3>
<h2 className="text-gray-500">
{!teamPlan ? (
<div className="flex space-x-1">
<span>Select a new billing plan for this team. Currency:</span>
<span>Upgrade team plan to access unlimited workspace hours, and more. Currency:</span>
<DropDown
customClasses="w-32"
renderAsLink={true}
activeEntry={currency}
entries={[
{
Expand All @@ -172,12 +173,12 @@ export default function TeamBilling() {
<div className="mt-4 space-x-4 flex">
{isLoading && (
<>
<SolidCard>
<SolidCard className="w-72 h-64">
<div className="w-full h-full flex flex-col items-center justify-center">
<Spinner className="h-5 w-5 animate-spin" />
</div>
</SolidCard>
<SolidCard>
<SolidCard className="w-72 h-64">
<div className="w-full h-full flex flex-col items-center justify-center">
<Spinner className="h-5 w-5 animate-spin" />
</div>
Expand All @@ -188,14 +189,22 @@ export default function TeamBilling() {
<>
{availableTeamPlans.map((tp) => (
<>
<SolidCard
className="cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700"
onClick={() => checkout(tp)}
>
<SolidCard className="w-72 h-72">
<div className="px-2 py-5 flex-grow flex flex-col">
<div className="font-medium text-base">{tp.name}</div>
<div className="font-semibold text-gray-500 text-sm">Unlimited hours</div>
<div className="mt-8 font-semibold text-sm">Includes:</div>
<div className="font-semibold text-gray-800 dark:text-gray-100 text-lg">
{tp.name}
</div>
<div className="font-semibold text-gray-400 dark:text-gray-600 text-sm">
Unlimited hours
</div>
<div className="mt-2">
<PillLabel type="warn" className="font-semibold normal-case text-sm">
{members.length} x {Currency.getSymbol(tp.currency)}
{tp.pricePerMonth} = {Currency.getSymbol(tp.currency)}
{members.length * tp.pricePerMonth} per month
</PillLabel>
</div>
<div className="mt-4 font-semibold text-sm">Includes:</div>
<div className="flex flex-col items-start text-sm">
{(featuresByPlanType[tp.type] || []).map((f) => (
<span className="inline-flex space-x-1">
Expand All @@ -204,12 +213,10 @@ export default function TeamBilling() {
</span>
))}
</div>
<div className="flex-grow flex flex-col items-end justify-end">
<PillLabel type="warn" className="font-semibold normal-case text-sm">
{members.length} x {Currency.getSymbol(tp.currency)}
{tp.pricePerMonth} = {Currency.getSymbol(tp.currency)}
{members.length * tp.pricePerMonth} per month
</PillLabel>
<div className="flex-grow flex flex-col items-stretch justify-end">
<button className="m-0" onClick={() => checkout(tp)}>
Upgrade to {tp.name}
</button>
</div>
</div>
</SolidCard>
Expand All @@ -219,10 +226,14 @@ export default function TeamBilling() {
)}
{!isLoading && teamPlan && (
<>
<Card>
<Card className="w-72 h-64">
<div className="px-2 py-5 flex-grow flex flex-col">
<div className="font-bold text-base">{teamPlan.name}</div>
<div className="font-semibold text-gray-500 text-sm">Unlimited hours</div>
<div className="font-semibold text-gray-100 dark:text-gray-800 text-lg">
{teamPlan.name}
</div>
<div className="font-semibold text-gray-400 dark:text-gray-600 text-sm">
Unlimited hours
</div>
<div className="mt-8 font-semibold text-sm">Includes:</div>
<div className="flex flex-col items-start text-sm">
{(featuresByPlanType[teamPlan.type] || []).map((f) => (
Expand All @@ -232,25 +243,31 @@ export default function TeamBilling() {
</span>
))}
</div>
<div className="flex-grow flex flex-col items-end justify-end"></div>
<div className="flex-grow flex flex-col items-stretch justify-end"></div>
</div>
</Card>
{!teamSubscription ? (
<SolidCard>
<SolidCard className="w-72 h-64">
<div className="w-full h-full flex flex-col items-center justify-center">
<Spinner className="h-5 w-5 animate-spin" />
</div>
</SolidCard>
) : (
<SolidCard>
<SolidCard className="w-72 h-64">
<div className="px-2 py-5 flex-grow flex flex-col">
<div className="font-medium text-base text-gray-400">Members</div>
<div className="font-semibold text-base text-gray-600">{members.length}</div>
<div className="mt-8 font-medium text-base text-gray-400">Next invoice on</div>
<div className="font-semibold text-base text-gray-600">
<div className="font-medium text-base text-gray-400 dark:text-gray-600">
Members
</div>
<div className="font-semibold text-base text-gray-600 dark:text-gray-400">
{members.length}
</div>
<div className="mt-8 font-medium text-base text-gray-400 dark:text-gray-600">
Next invoice on
</div>
<div className="font-semibold text-base text-gray-600 dark:text-gray-400">
{guessNextInvoiceDate(teamSubscription.startDate).toDateString()}
</div>
<div className="flex-grow flex flex-col items-end justify-end">
<div className="flex-grow flex flex-col items-stretch justify-end">
<button
onClick={() => {
if (team) {
Expand Down

0 comments on commit 56f5b6b

Please sign in to comment.