Skip to content

Commit b0b83e5

Browse files
selfcontainedselfcontained
committed
Updating headings
1 parent 10461f0 commit b0b83e5

35 files changed

+145
-111
lines changed

‎components/dashboard/src/Setup.tsx

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

77
import { useEffect, useState } from "react";
8-
import Modal from "./components/Modal";
8+
import Modal, { ModalBody, ModalFooter, ModalHeader } from "./components/Modal";
99
import { getGitpodService, gitpodHostUrl } from "./service/service";
1010
import { GitIntegrationModal } from "./user-settings/Integrations";
1111

@@ -40,8 +40,8 @@ export default function Setup() {
4040
{!showModal && (
4141
// TODO: Use title and buttons props
4242
<Modal visible={true} onClose={() => {}} closeable={false}>
43-
<h3 className="pb-2">Welcome to Gitpod 🎉</h3>
44-
<div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
43+
<ModalHeader>Welcome to Gitpod 🎉</ModalHeader>
44+
<ModalBody>
4545
<p className="pb-4 text-gray-500 text-base">
4646
To start using Gitpod, you will need to set up a Git integration.
4747
</p>
@@ -59,12 +59,12 @@ export default function Setup() {
5959
.
6060
</span>
6161
</div>
62-
</div>
63-
<div className="flex justify-end mt-6">
62+
</ModalBody>
63+
<ModalFooter>
6464
<button className={"ml-2"} onClick={() => acceptAndContinue()}>
6565
Continue
6666
</button>
67-
</div>
67+
</ModalFooter>
6868
</Modal>
6969
)}
7070
{showModal && (

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Project } from "@gitpod/gitpod-protocol";
99
import Prebuilds from "../projects/Prebuilds";
1010
import Property from "./Property";
1111
import dayjs from "dayjs";
12+
import { Heading2, Subheading } from "../components/typography/headings";
1213

1314
export default function ProjectDetail(props: { project: Project; owner: string | undefined }) {
1415
return (
@@ -17,10 +18,10 @@ export default function ProjectDetail(props: { project: Project; owner: string |
1718
<div className="flex mt-8">
1819
<div className="flex-1">
1920
<div className="flex">
20-
<h3>{props.project.name}</h3>
21+
<Heading2>{props.project.name}</Heading2>
2122
<span className="my-auto"></span>
2223
</div>
23-
<p>{props.project.cloneUrl}</p>
24+
<Subheading>{props.project.cloneUrl}</Subheading>
2425
</div>
2526
</div>
2627
<div className="flex flex-col w-full">

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import InfoBox from "../components/InfoBox";
1414
import { isGitpodIo } from "../utils";
1515
import { PageWithSubMenu } from "../components/PageWithSubMenu";
1616
import { getAdminTabs, getAdminSettingsMenu } from "./admin.routes";
17+
import { Heading2, Subheading } from "../components/typography/headings";
1718

1819
export function SettingsLayout(props: { children: React.ReactNode }) {
1920
return (
@@ -53,11 +54,11 @@ export default function Settings() {
5354
return (
5455
<div>
5556
<SettingsLayout>
56-
<h3>Usage Statistics</h3>
57-
<p className="text-base text-gray-500 pb-4 max-w-2xl">
57+
<Heading2>Usage Statistics</Heading2>
58+
<Subheading className="pb-4 max-w-2xl">
5859
We collect usage telemetry to gain insights on how you use your Gitpod instance, so we can provide a
5960
better overall experience.
60-
</p>
61+
</Subheading>
6162
<p>
6263
<a className="gp-link" href="https://www.gitpod.io/privacy">
6364
Read our Privacy Policy
@@ -94,7 +95,7 @@ export default function Settings() {
9495
} as InstallationAdminSettings)
9596
}
9697
/>
97-
<h3 className="mt-4">Telemetry preview</h3>
98+
<Heading2 className="mt-4">Telemetry preview</Heading2>
9899
<InfoBox>
99100
<pre>{JSON.stringify(telemetryData, null, 2)}</pre>
100101
</InfoBox>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
1717
import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
1818
import { CostCenterJSON, CostCenter_BillingStrategy } from "@gitpod/gitpod-protocol/lib/usage";
1919
import Modal from "../components/Modal";
20+
import { Heading2 } from "../components/typography/headings";
2021

2122
export default function TeamDetail(props: { team: Team }) {
2223
const { team } = props;
@@ -72,7 +73,7 @@ export default function TeamDetail(props: { team: Team }) {
7273
<div className="flex mt-8">
7374
<div className="flex-1">
7475
<div className="flex">
75-
<h3>{team.name}</h3>
76+
<Heading2>{team.name}</Heading2>
7677
{team.markedDeleted && (
7778
<span className="mt-2">
7879
<Label text="Deleted" color="red" />

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
2727
import CaretDown from "../icons/CaretDown.svg";
2828
import ContextMenu from "../components/ContextMenu";
2929
import { CostCenterJSON, CostCenter_BillingStrategy } from "@gitpod/gitpod-protocol/lib/usage";
30+
import { Heading2, Subheading } from "../components/typography/headings";
3031

3132
export default function UserDetail(p: { user: User }) {
3233
const [activity, setActivity] = useState(false);
@@ -263,18 +264,18 @@ export default function UserDetail(p: { user: User }) {
263264
<div className="flex mt-8">
264265
<div className="flex-1">
265266
<div className="flex">
266-
<h3>{user.fullName}</h3>
267+
<Heading2>{user.fullName}</Heading2>
267268
{user.blocked ? <Label text="Blocked" color="red" /> : null}{" "}
268269
{user.markedDeleted ? <Label text="Deleted" color="red" /> : null}
269270
{user.lastVerificationTime ? <Label text="Verified" color="green" /> : null}
270271
</div>
271-
<p>
272+
<Subheading>
272273
{user.identities
273274
.map((i) => i.primaryEmail)
274275
.filter((e) => !!e)
275276
.join(", ")}
276277
{user.verificationPhoneNumber ? ` — ${user.verificationPhoneNumber}` : null}
277-
</p>
278+
</Subheading>
278279
</div>
279280
{!user.lastVerificationTime ? (
280281
<button className="secondary ml-3" disabled={activity} onClick={verifyUser}>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { GitpodHostUrl } from "@gitpod/gitpod-protocol/lib/util/gitpod-host-url"
99
import dayjs from "dayjs";
1010
import { useEffect, useState } from "react";
1111
import { Link } from "react-router-dom";
12+
import { Heading2, Subheading } from "../components/typography/headings";
1213
import { getGitpodService } from "../service/service";
1314
import { getProjectPath } from "../workspaces/WorkspaceEntry";
1415
import { WorkspaceStatusIndicator } from "../workspaces/WorkspaceStatusIndicator";
@@ -49,12 +50,12 @@ export default function WorkspaceDetail(props: { workspace: WorkspaceAndInstance
4950
<div className="flex mt-8">
5051
<div className="flex-1">
5152
<div className="flex">
52-
<h3>{workspace.workspaceId}</h3>
53+
<Heading2>{workspace.workspaceId}</Heading2>
5354
<span className="my-auto ml-3">
5455
<WorkspaceStatusIndicator instance={WorkspaceAndInstance.toInstance(workspace)} />
5556
</span>
5657
</div>
57-
<p>{getProjectPath(WorkspaceAndInstance.toWorkspace(workspace))}</p>
58+
<Subheading>{getProjectPath(WorkspaceAndInstance.toWorkspace(workspace))}</Subheading>
5859
</div>
5960
<button
6061
className="secondary ml-3"

‎components/dashboard/src/components/Modal.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import { ReactNode, useEffect } from "react";
88
import cn from "classnames";
99
import { getGitpodService } from "../service/service";
10+
import { Heading2 } from "./typography/headings";
1011

1112
type CloseModalManner = "esc" | "enter" | "x";
1213

@@ -112,7 +113,7 @@ type ModalHeaderProps = {
112113
};
113114

114115
export const ModalHeader = ({ children }: ModalHeaderProps) => {
115-
return <h3 className="pb-2">{children}</h3>;
116+
return <Heading2 className="pb-2">{children}</Heading2>;
116117
};
117118

118119
type ModalBodyProps = {

‎components/dashboard/src/components/ThemeSelector.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import classNames from "classnames";
88
import { FC, useCallback, useContext, useState } from "react";
99
import { ThemeContext } from "../theme-context";
1010
import SelectableCardSolid from "./SelectableCardSolid";
11+
import { Heading2, Subheading } from "./typography/headings";
1112

1213
type Theme = "light" | "dark" | "system";
1314

@@ -37,8 +38,8 @@ export const ThemeSelector: FC<Props> = ({ className }) => {
3738

3839
return (
3940
<div className={classNames(className)}>
40-
<h3>Theme</h3>
41-
<p className="text-base text-gray-500 dark:text-gray-400">Early bird or night owl? Choose your side.</p>
41+
<Heading2>Theme</Heading2>
42+
<Subheading>Early bird or night owl? Choose your side.</Subheading>
4243
<div className="mt-4 flex items-center flex-wrap">
4344
<SelectableCardSolid
4445
className="w-36 h-32 m-1"

‎components/dashboard/src/components/UsageBasedBillingConfig.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import Alert from "./Alert";
2121
import dayjs from "dayjs";
2222
import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
2323
import { publicApiTeamMembersToProtocol, teamsService } from "../service/public-api";
24+
import { Heading2, Subheading } from "./typography/headings";
2425

2526
const BASE_USAGE_LIMIT_FOR_STRIPE_USERS = 1000;
2627

@@ -167,11 +168,11 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
167168

168169
return (
169170
<div className="mb-16">
170-
<p className="text-gray-500 text-base">
171+
<Subheading>
171172
{attributionId && AttributionId.parse(attributionId)?.kind === "user"
172173
? "Manage billing for your personal account."
173174
: "Manage billing for your organization."}
174-
</p>
175+
</Subheading>
175176
<div className="max-w-xl flex flex-col">
176177
{errorMessage && (
177178
<Alert className="max-w-xl mt-2" closable={false} showIcon={true} type="error">
@@ -349,7 +350,7 @@ export function BillingSetupModal(props: { attributionId: string; onClose: () =>
349350

350351
return (
351352
<Modal visible={true} onClose={props.onClose}>
352-
<h3 className="flex">Upgrade Plan</h3>
353+
<Heading2 className="flex">Upgrade Plan</Heading2>
353354
<div className="border-t border-gray-200 dark:border-gray-700 mt-4 pt-2 -mx-6 px-6 flex flex-col">
354355
{(!stripePromise || !stripeSetupIntentClientSecret) && (
355356
<div className="h-80 flex items-center justify-center">
@@ -492,7 +493,7 @@ function UpdateLimitModal(props: {
492493

493494
return (
494495
<Modal visible={true} onClose={props.onClose} onEnter={() => false}>
495-
<h3 className="mb-4">Usage Limit</h3>
496+
<Heading2 className="mb-4">Usage Limit</Heading2>
496497
<form onSubmit={onSubmit}>
497498
<div className="border-t border-b border-gray-200 dark:border-gray-700 -mx-6 px-6 py-4 flex flex-col">
498499
<p className="pb-4 text-gray-500 text-base">Set usage limit in total credits per month.</p>

‎components/dashboard/src/components/UsageLimitReachedModal.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { settingsPathBilling } from "../user-settings/settings.routes";
1111
import { useTeams } from "../teams/teams-context";
1212
import Alert from "./Alert";
1313
import Modal from "./Modal";
14+
import { Heading2 } from "./typography/headings";
1415

1516
export function UsageLimitReachedModal(p: { hints: any }) {
1617
const teams = useTeams();
@@ -32,9 +33,9 @@ export function UsageLimitReachedModal(p: { hints: any }) {
3233
const billingLink = attributedTeam ? "/billing" : settingsPathBilling;
3334
return (
3435
<Modal visible={true} closeable={false} onClose={() => {}}>
35-
<h3 className="flex">
36+
<Heading2 className="flex">
3637
<span className="flex-grow">Usage Limit Reached</span>
37-
</h3>
38+
</Heading2>
3839
<div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-6">
3940
<Alert type="error" className="app-container rounded-md">
4041
You have reached the <strong>usage limit</strong> of your billing account.

‎components/dashboard/src/components/UsageView.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import "react-datepicker/dist/react-datepicker.css";
2828
import "./react-datepicker.css";
2929
import { useLocation } from "react-router";
3030
import dayjs from "dayjs";
31-
import { Heading1, Subheading } from "./typography/headings";
31+
import { Heading1, Heading2, Subheading } from "./typography/headings";
3232

3333
interface UsageViewProps {
3434
attributionId: AttributionId;
@@ -275,15 +275,15 @@ function UsageView({ attributionId }: UsageViewProps) {
275275
(usagePage === undefined || currentPaginatedResults.length === 0) &&
276276
!errorMessage && (
277277
<div className="flex flex-col w-full mb-8">
278-
<h3 className="text-center text-gray-500 mt-8">No sessions found.</h3>
279-
<p className="text-center text-gray-500 mt-1">
278+
<Heading2 className="text-center mt-8">No sessions found.</Heading2>
279+
<Subheading className="text-center mt-1">
280280
Have you started any
281281
<a className="gp-link" href={gitpodHostUrl.asWorkspacePage().toString()}>
282282
{" "}
283283
workspaces
284284
</a>{" "}
285285
in {startDate.format("MMMM YYYY")} or checked your other organizations?
286-
</p>
286+
</Subheading>
287287
</div>
288288
)}
289289
{isLoading && (

‎components/dashboard/src/components/typography/headings.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@ export const Heading2: FC<HeadingProps> = ({ color, tracking, className, childre
4343
);
4444
};
4545

46+
export const Heading3: FC<HeadingProps> = ({ color, tracking, className, children }) => {
47+
return (
48+
<h3 className={classNames(getHeadingColor(color), getTracking(tracking), "font-semibold text-lg", className)}>
49+
{children}
50+
</h3>
51+
);
52+
};
53+
4654
// Intended to be placed beneath a heading to provide more context
4755
export const Subheading: FC<HeadingProps> = ({ tracking, className, children }) => {
4856
return (

‎components/dashboard/src/feedback-form/FeedbackComponent.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import meh from "../images/feedback/meh-emoji.svg";
1111
import crying from "../images/feedback/crying-emoji.svg";
1212
import { trackEvent, TrackFeedback } from "../Analytics";
1313
import { StartWorkspaceError } from "../start/StartPage";
14+
import { Heading2 } from "../components/typography/headings";
1415

1516
function FeedbackComponent(props: {
1617
onClose?: () => void;
@@ -76,7 +77,7 @@ function FeedbackComponent(props: {
7677

7778
return (
7879
<>
79-
{props.isModal && !isFeedbackSubmitted && <h3 className="mb-4">Send Feedback</h3>}
80+
{props.isModal && !isFeedbackSubmitted && <Heading2 className="mb-4">Send Feedback</Heading2>}
8081
{minimisedFirstView && (
8182
<div
8283
className={

‎components/dashboard/src/onboarding/OnboardingStep.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import { FC, FormEvent, useCallback } from "react";
88
import Alert from "../components/Alert";
99
import { Button } from "../components/Button";
10-
import { Heading1, Subheading } from "../components/typography/headings";
10+
import { Heading2, Subheading } from "../components/typography/headings";
1111

1212
type Props = {
1313
title: string;
@@ -40,7 +40,8 @@ export const OnboardingStep: FC<Props> = ({
4040

4141
return (
4242
<div className="flex flex-col items-center justify-center max-w-full">
43-
<Heading1>{title}</Heading1>
43+
{/* Intentionally adjusting the size of the heading here */}
44+
<Heading2 className="text-4xl">{title}</Heading2>
4445
<Subheading>{subtitle}</Subheading>
4546

4647
<form className="mt-8 mb-14 max-w-lg" onSubmit={handleSubmit}>

‎components/dashboard/src/onboarding/StepPersonalize.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { User } from "@gitpod/gitpod-protocol";
88
import { FC, useCallback, useState } from "react";
99
import SelectIDEComponent from "../components/SelectIDEComponent";
1010
import { ThemeSelector } from "../components/ThemeSelector";
11+
import { Heading2, Subheading } from "../components/typography/headings";
1112
import { OnboardingStep } from "./OnboardingStep";
1213

1314
type Props = {
@@ -32,8 +33,8 @@ export const StepPersonalize: FC<Props> = ({ user, onComplete }) => {
3233
isValid={isValid}
3334
onSubmit={handleSubmitted}
3435
>
35-
<h3>Choose an editor</h3>
36-
<p>You can change this later in your user preferences.</p>
36+
<Heading2>Choose an editor</Heading2>
37+
<Subheading className="mb-2">You can change this later in your user preferences.</Subheading>
3738
<SelectIDEComponent
3839
onSelectionChange={(ide, latest) => {
3940
setIDE(ide);

0 commit comments

Comments
 (0)