Skip to content

Commit 887b145

Browse files
jankeromnesjankeromnes
committed
[dashboard] Unify and standardize InfoBox and AlertBox components
1 parent 89c9844 commit 887b145

File tree

4 files changed

+31
-32
lines changed

4 files changed

+31
-32
lines changed

‎components/dashboard/src/components/InfoBox.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* Copyright (c) 2021 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License-AGPL.txt in the project root for license information.
5+
*/
6+
7+
import info from '../images/info.svg';
8+
9+
export default function InfoBox(p: { className?: string, children?: React.ReactNode }) {
10+
return <div className={'flex rounded-md bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 p-4 ' + (p.className || '')}>
11+
<img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
12+
<span>{p.children}</span>
13+
</div>;
14+
}

‎components/dashboard/src/prebuilds/InstallGitHubApp.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
*/
66

77
import { useLocation } from "react-router";
8+
import InfoBox from "../components/InfoBox";
89
import Modal from "../components/Modal";
910
import { Deferred } from "@gitpod/gitpod-protocol/lib/util/deferred";
1011
import { getGitpodService, gitpodHostUrl } from "../service/service";
1112
import { useState } from "react";
12-
import info from "../images/info.svg";
1313
import { openAuthorizeWindow } from "../provider-utils";
1414

1515
async function registerApp(installationId: string, setModal: (modal: 'done' | string | undefined) => void) {
@@ -67,10 +67,7 @@ export default function InstallGitHubApp() {
6767
<div className="flex flex-col items-center m-auto max-w-lg mt-40">
6868
<h3 className="text-center pb-3 text-gray-500">Install GitHub App</h3>
6969
<div className="text-center pb-6 text-gray-500">You are about to install the GitHub app for Gitpod.</div>
70-
<div className="flex rounded-md bg-gray-200 dark:bg-gray-800 p-3">
71-
<img className="w-4 h-4 ml-2 mr-3 mt-1" src={info} alt="info" />
72-
<span className="text-gray-500">This action will also allow Gitpod to access private repositories. You can edit git provider permissions later in user settings.</span>
73-
</div>
70+
<InfoBox>This action will also allow Gitpod to access private repositories. You can edit git provider permissions later in user settings.</InfoBox>
7471
<div className="mt-6">
7572
<button className="secondary">Cancel</button>
7673
<button className="ml-2" onClick={() => registerApp(installationId, setModal)}>Install App</button>
@@ -86,9 +83,6 @@ export default function InstallGitHubApp() {
8683
<button className="" onClick={() => registerApp(installationId, setModal)}>Try Again</button>
8784
]}>
8885
<div className="pb-6 text-gray-500">Could not install the GitHub app.</div>
89-
<div className="flex rounded-md bg-gray-200 dark:bg-gray-800 p-3">
90-
<img className="w-4 h-4 ml-2 mr-3 mt-1" src={info} alt="info" />
91-
<span className="text-gray-500">{modal}</span>
92-
</div>
86+
<InfoBox>{modal}</InfoBox>
9387
</Modal></>;
9488
}

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

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import { AccountStatement, Subscription, UserPaidSubscription, AssignedTeamSubsc
1010
import { PlanCoupon, GithubUpgradeURL } from "@gitpod/gitpod-protocol/lib/payment-protocol";
1111
import { Plans, Plan, Currency, PlanType } from "@gitpod/gitpod-protocol/lib/plans";
1212
import { ChargebeeClient } from "../chargebee/chargebee-client";
13+
import InfoBox from "../components/InfoBox";
1314
import Modal from "../components/Modal";
1415
import SelectableCard from "../components/SelectableCard";
15-
import info from '../images/info.svg';
1616
import exclamation from '../images/exclamation.svg';
1717
import { getGitpodService } from "../service/service";
1818
import { UserContext } from "../user-context";
@@ -448,18 +448,16 @@ export default function () {
448448
</p>
449449
</div>
450450
<div className="mt-4 flex justify-center space-x-3 2xl:space-x-7">{planCards}</div>
451-
<div className="flex rounded-md w-2/3 bg-gray-200 dark:bg-gray-800 p-4 mt-14 mx-auto">
452-
<img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
453-
<span>If you are interested in purchasing a plan for a team, purchase a Team plan with one centralized billing. <a className="underline" href="https://www.gitpod.io/docs/teams/" target="_blank">Learn more</a></span>
454-
</div>
451+
<InfoBox className="w-2/3 mt-14 mx-auto">
452+
If you are interested in purchasing a plan for a team, purchase a Team plan with one centralized billing. <a className="underline" href="https://www.gitpod.io/docs/teams/">Learn more</a>
453+
</InfoBox>
455454
{!!confirmUpgradeToPlan && <Modal visible={true} onClose={() => setConfirmUpgradeToPlan(undefined)}>
456455
<h3>Upgrade to {confirmUpgradeToPlan.name}</h3>
457456
<div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-2">
458457
<p className="mt-1 mb-4 text-base">You are about to upgrade to {confirmUpgradeToPlan.name}.</p>
459-
{!Plans.isFreePlan(currentPlan.chargebeeId) && <div className="flex rounded-md bg-gray-200 dark:bg-gray-800 p-4 mb-4">
460-
<img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
461-
<span>For this billing cycle you will be charged only the total difference ({(confirmUpgradeToPlan.currency === 'EUR' ? '€' : '$') + (confirmUpgradeToPlan.pricePerMonth - applyCoupons(currentPlan, appliedCoupons).pricePerMonth)}). The new total will be effective from the next billing cycle.</span>
462-
</div>}
458+
{!Plans.isFreePlan(currentPlan.chargebeeId) && <InfoBox className="mb-4">
459+
For this billing cycle you will be charged only the total difference ({(confirmUpgradeToPlan.currency === 'EUR' ? '€' : '$') + (confirmUpgradeToPlan.pricePerMonth - applyCoupons(currentPlan, appliedCoupons).pricePerMonth)}). The new total will be effective from the next billing cycle.
460+
</InfoBox>}
463461
<div className="flex rounded-md bg-gitpod-kumquat-light p-4 mb-4">
464462
<img className="w-4 h-4 m-1 ml-2 mr-4" src={exclamation} />
465463
<span className="text-red-700">Total: {(confirmUpgradeToPlan.currency === 'EUR' ? '€' : '$') + confirmUpgradeToPlan.pricePerMonth} per month</span>
@@ -473,12 +471,11 @@ export default function () {
473471
<h3>Downgrade to {confirmDowngradeToPlan.name}</h3>
474472
<div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-2">
475473
<p className="mt-1 mb-4 text-base">You are about to downgrade to {confirmDowngradeToPlan.name}.</p>
476-
<div className="flex rounded-md bg-gray-200 dark:bg-gray-800 p-4 mb-4">
477-
<img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
474+
<InfoBox className="mb-4">
478475
{!Plans.isFreePlan(confirmDowngradeToPlan.chargebeeId)
479476
? <span>Your account will downgrade to {confirmDowngradeToPlan.name} on the next billing cycle.</span>
480477
: <span>Your account will downgrade to {confirmDowngradeToPlan.name}. The remaining hours in your current plan will be available to use until the next billing cycle.</span>}
481-
</div>
478+
</InfoBox>
482479
</div>
483480
<div className="flex justify-end mt-6">
484481
<button className="danger" onClick={doDowngrade}>Downgrade Plan</button>
@@ -488,10 +485,7 @@ export default function () {
488485
<h3>Cancel downgrade and stay with {currentPlan.name}</h3>
489486
<div className="border-t border-b border-gray-200 mt-4 -mx-6 px-6 py-2">
490487
<p className="mt-1 mb-4 text-base">You are about to cancel the scheduled downgrade and stay with {currentPlan.name}.</p>
491-
<div className="flex rounded-md bg-gray-200 p-4 mb-4">
492-
<img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
493-
<span>You can continue using it right away.</span>
494-
</div>
488+
<InfoBox className="mb-4">You can continue using it right away.</InfoBox>
495489
</div>
496490
<div className="flex justify-end mt-6">
497491
<button className="bg-red-600 border-red-800" onClick={doCancelDowngrade}>Cancel Downgrade</button>

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
88
import { useEffect, useState } from "react";
99
import { gitpodHostUrl } from "../service/service";
10+
import InfoBox from "../components/InfoBox";
1011
import Modal from "../components/Modal";
1112
import SelectableCard from "../components/SelectableCard";
12-
import info from '../images/info.svg';
1313

1414
export function SelectAccountModal(props: SelectAccountPayload & {
1515
close: () => void
@@ -45,12 +45,9 @@ export function SelectAccountModal(props: SelectAccountPayload & {
4545
<div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-4">
4646
<p className="pb-2 text-gray-500 text-base">You are trying to authorize a provider that is already connected with another account on Gitpod.</p>
4747

48-
<div className="mt-4 flex rounded-md w-full bg-gray-200 p-4 mx-auto">
49-
<img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
50-
<span>
51-
Disconnect a provider in one of you accounts, if you like to continue with the other account.
52-
</span>
53-
</div>
48+
<InfoBox className="mt-4 w-full mx-auto">
49+
Disconnect a provider in one of you accounts, if you like to continue with the other account.
50+
</InfoBox>
5451

5552
<div className="mt-10 mb-6 flex-grow flex flex-row justify-around align-center">
5653
<SelectableCard className="w-2/5 h-56" title="Current Account" selected={useAccount === 'current'} onClick={() => setUseAccount('current')}>

0 commit comments

Comments
 (0)