[dashboard] Unify and standardize InfoBox and AlertBox components

components/dashboard/src/components/AlertBox.tsx

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import exclamation from '../images/exclamation.svg';
+
+export default function AlertBox(p: { className?: string, children?: React.ReactNode }) {
+    return <div className={'flex rounded-xl bg-gitpod-kumquat-light text-gitpod-red p-4 ' + (p.className || '')}>
+        <img className="w-4 h-4 m-1 ml-2 mr-4" src={exclamation} />
+        <span>{p.children}</span>
+    </div>;
+}

components/dashboard/src/components/CheckBox.tsx

@@ -30,7 +30,7 @@ function CheckBox(props: {
             {...inputProps}
         />
         <div className="flex flex-col ml-2">
-            <label htmlFor={checkboxId} className="text-gray-800 dark:text-gray-100 text-md font-semibold tracking-wide">{props.title}</label>
+            <label htmlFor={checkboxId} className="text-gray-800 dark:text-gray-100 text-md font-semibold cursor-pointer tracking-wide">{props.title}</label>
             <div className="text-gray-400 text-md">{props.desc}</div>
         </div>
     </div>

components/dashboard/src/components/InfoBox.tsx

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import info from '../images/info.svg';
+
+export default function InfoBox(p: { className?: string, children?: React.ReactNode }) {
+    return <div className={'flex rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 p-4 ' + (p.className || '')}>
+        <img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
+        <span>{p.children}</span>
+    </div>;
+}

components/dashboard/src/prebuilds/InstallGitHubApp.tsx

@@ -5,11 +5,11 @@
  */
 
 import { useLocation } from "react-router";
+import InfoBox from "../components/InfoBox";
 import Modal from "../components/Modal";
 import { Deferred } from "@gitpod/gitpod-protocol/lib/util/deferred";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { useState } from "react";
-import info from "../images/info.svg";
 import { openAuthorizeWindow } from "../provider-utils";
 
 async function registerApp(installationId: string, setModal: (modal: 'done' | string | undefined) => void) {
@@ -67,10 +67,7 @@ export default function InstallGitHubApp() {
                 <div className="flex flex-col items-center m-auto max-w-lg mt-40">
                     <h3 className="text-center pb-3 text-gray-500">Install GitHub App</h3>
                     <div className="text-center pb-6 text-gray-500">You are about to install the GitHub app for Gitpod.</div>
-                    <div className="flex rounded-md bg-gray-200 dark:bg-gray-800 p-3">
-                        <img className="w-4 h-4 ml-2 mr-3 mt-1" src={info} alt="info" />
-                        <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>
-                    </div>
+                    <InfoBox>This action will also allow Gitpod to access private repositories. You can edit git provider permissions later in user settings.</InfoBox>
                     <div className="mt-6">
                         <button className="secondary">Cancel</button>
                         <button className="ml-2" onClick={() => registerApp(installationId, setModal)}>Install App</button>
@@ -86,9 +83,6 @@ export default function InstallGitHubApp() {
             <button className="" onClick={() => registerApp(installationId, setModal)}>Try Again</button>
         ]}>
             <div className="pb-6 text-gray-500">Could not install the GitHub app.</div>
-            <div className="flex rounded-md bg-gray-200 dark:bg-gray-800 p-3">
-                <img className="w-4 h-4 ml-2 mr-3 mt-1" src={info} alt="info" />
-                <span className="text-gray-500">{modal}</span>
-            </div>
+            <InfoBox>{modal}</InfoBox>
         </Modal></>;
 }

components/dashboard/src/settings/Integrations.tsx

@@ -12,6 +12,7 @@ import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import copy from '../images/copy.svg';
 import exclamation from '../images/exclamation.svg';
+import AlertBox from "../components/AlertBox";
 import Modal from "../components/Modal";
 import { openAuthorizeWindow } from "../provider-utils";
 import CheckBox from '../components/CheckBox';
@@ -584,10 +585,7 @@ function GitIntegrationModal(props: ({
         <h3 className="pb-2">{props.mode === "new" ? "New Git Integration" : "Git Integration"}</h3>
         <div className="space-y-4 border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
             {props.mode === "edit" && props.provider.status === "pending" && (
-                <div className="flex rounded-md bg-gitpod-kumquat-light p-3">
-                    <img className="w-4 h-4 mx-2 my-auto" src={exclamation} />
-                    <span className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300">You need to activate this integration.</span>
-                </div>
+                <AlertBox>You need to activate this integration.</AlertBox>
             )}
             <div className="flex flex-col">
                 <span className="text-gray-500">Configure a git integration with a GitLab or GitHub self-hosted instance.</span>

components/dashboard/src/settings/Plans.tsx

@@ -10,10 +10,10 @@ import { AccountStatement, Subscription, UserPaidSubscription, AssignedTeamSubsc
 import { PlanCoupon, GithubUpgradeURL } from "@gitpod/gitpod-protocol/lib/payment-protocol";
 import { Plans, Plan, Currency, PlanType } from "@gitpod/gitpod-protocol/lib/plans";
 import { ChargebeeClient } from "../chargebee/chargebee-client";
+import AlertBox from "../components/AlertBox";
+import InfoBox from "../components/InfoBox";
 import Modal from "../components/Modal";
 import SelectableCard from "../components/SelectableCard";
-import info from '../images/info.svg';
-import exclamation from '../images/exclamation.svg';
 import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
@@ -448,22 +448,19 @@ export default function () {
                 </p>
             </div>
             <div className="mt-4 flex justify-center space-x-3 2xl:space-x-7">{planCards}</div>
-            <div className="flex rounded-md w-2/3 bg-gray-200 dark:bg-gray-800 p-4 mt-14 mx-auto">
-                <img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
-                <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>
-            </div>
+            <InfoBox className="w-2/3 mt-14 mx-auto">
+                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>
+            </InfoBox>
             {!!confirmUpgradeToPlan && <Modal visible={true} onClose={() => setConfirmUpgradeToPlan(undefined)}>
                 <h3>Upgrade to {confirmUpgradeToPlan.name}</h3>
                 <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-2">
-                    <p className="mt-1 mb-4 text-base">You are about to upgrade to {confirmUpgradeToPlan.name}.</p>
-                    {!Plans.isFreePlan(currentPlan.chargebeeId) && <div className="flex rounded-md bg-gray-200 dark:bg-gray-800 p-4 mb-4">
-                        <img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
-                        <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>
-                    </div>}
-                    <div className="flex rounded-md bg-gitpod-kumquat-light p-4 mb-4">
-                        <img className="w-4 h-4 m-1 ml-2 mr-4" src={exclamation} />
-                        <span className="text-red-700">Total: {(confirmUpgradeToPlan.currency === 'EUR' ? '€' : '$') + confirmUpgradeToPlan.pricePerMonth} per month</span>
-                    </div>
+                    <p className="mt-1 mb-4 text-gray-500 text-base">You are about to upgrade to {confirmUpgradeToPlan.name}.</p>
+                    {!Plans.isFreePlan(currentPlan.chargebeeId) && <InfoBox className="mb-4">
+                        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.
+                    </InfoBox>}
+                    <AlertBox className="mb-4">
+                        Total: {(confirmUpgradeToPlan.currency === 'EUR' ? '€' : '$') + confirmUpgradeToPlan.pricePerMonth} per month
+                    </AlertBox>
                 </div>
                 <div className="flex justify-end mt-6">
                     <button onClick={doUpgrade}>Upgrade Plan</button>
@@ -473,25 +470,21 @@ export default function () {
                 <h3>Downgrade to {confirmDowngradeToPlan.name}</h3>
                 <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-2">
                     <p className="mt-1 mb-4 text-base">You are about to downgrade to {confirmDowngradeToPlan.name}.</p>
-                    <div className="flex rounded-md bg-gray-200 dark:bg-gray-800 p-4 mb-4">
-                        <img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
+                    <InfoBox className="mb-4">
                         {!Plans.isFreePlan(confirmDowngradeToPlan.chargebeeId)
                             ? <span>Your account will downgrade to {confirmDowngradeToPlan.name} on the next billing cycle.</span>
                             : <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>}
-                    </div>
+                    </InfoBox>
                 </div>
                 <div className="flex justify-end mt-6">
                     <button className="danger" onClick={doDowngrade}>Downgrade Plan</button>
                 </div>
             </Modal>}
             {isConfirmCancelDowngrade && <Modal visible={true} onClose={() => setIsConfirmCancelDowngrade(false)}>
                 <h3>Cancel downgrade and stay with {currentPlan.name}</h3>
-                <div className="border-t border-b border-gray-200 mt-4 -mx-6 px-6 py-2">
+                <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-2">
                     <p className="mt-1 mb-4 text-base">You are about to cancel the scheduled downgrade and stay with {currentPlan.name}.</p>
-                    <div className="flex rounded-md bg-gray-200 p-4 mb-4">
-                        <img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
-                        <span>You can continue using it right away.</span>
-                    </div>
+                    <InfoBox className="mb-4">You can continue using it right away.</InfoBox>
                 </div>
                 <div className="flex justify-end mt-6">
                     <button className="bg-red-600 border-red-800" onClick={doCancelDowngrade}>Cancel Downgrade</button>

components/dashboard/src/settings/SelectAccountModal.tsx

@@ -7,9 +7,9 @@
  import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
  import { useEffect, useState } from "react";
  import { gitpodHostUrl } from "../service/service";
+ import InfoBox from "../components/InfoBox";
  import Modal from "../components/Modal";
  import SelectableCard from "../components/SelectableCard";
- import info from '../images/info.svg';
 
 export function SelectAccountModal(props: SelectAccountPayload & {
     close: () => void
@@ -45,12 +45,9 @@ export function SelectAccountModal(props: SelectAccountPayload & {
     <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-4">
         <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>
 
-        <div className="mt-4 flex rounded-md w-full bg-gray-200 p-4 mx-auto">
-            <img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
-            <span>
-                Disconnect a provider in one of you accounts, if you like to continue with the other account.
-            </span>
-        </div>
+        <InfoBox className="mt-4 w-full mx-auto">
+            Disconnect a provider in one of you accounts, if you like to continue with the other account.
+        </InfoBox>
 
         <div className="mt-10 mb-6 flex-grow flex flex-row justify-around align-center">
             <SelectableCard className="w-2/5 h-56" title="Current Account" selected={useAccount === 'current'} onClick={() => setUseAccount('current')}>

components/dashboard/src/settings/Teams.tsx

@@ -9,6 +9,7 @@ import { countries } from 'countries-list';
 import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import { getGitpodService } from "../service/service";
+import AlertBox from "../components/AlertBox";
 import Modal from "../components/Modal";
 import { AssigneeIdentifier, TeamSubscription, TeamSubscriptionSlotResolved } from "@gitpod/gitpod-protocol/lib/team-subscription-protocol";
 import { Currency, Plan, Plans } from "@gitpod/gitpod-protocol/lib/plans";
@@ -622,10 +623,7 @@ function AddMembersModal(props: {
                 </select>
             </div>
 
-            <div className="flex rounded-md bg-gitpod-kumquat-light p-3">
-                <img className="w-4 h-4 mx-2 my-auto" src={exclamation} />
-                <span className="text-red-600 dark:text-red-400">Total: {expectedPrice} per month</span>
-            </div>
+            <AlertBox>Total: {expectedPrice} per month</AlertBox>
 
         </div>
         <div className="flex justify-end mt-6">
@@ -700,10 +698,7 @@ function NewTeamModal(props: {
                 </select>
             </div>
 
-            <div className="flex rounded-md bg-gitpod-kumquat-light p-3 mt-2">
-                <img className="w-4 h-4 mx-2 my-auto" src={exclamation} />
-                <span className="text-red-600 dark:text-red-400">Total: {expectedPrice} per month</span>
-            </div>
+            <AlertBox className="mt-2">Total: {expectedPrice} per month</AlertBox>
 
         </div>
         <div className="flex justify-end mt-6">