Skip to content

Commit 294aa69

Browse files
selfcontainedselfcontained
authored
Adding Typography components for Headings/Subheadings (#16673)
* Adding typography components * Refactor h1, h2 and subheadings to components * Updating headings * Removing debug change
1 parent 6922661 commit 294aa69

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+335
-197
lines changed

‎components/dashboard/src/Login.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import exclamation from "./images/exclamation.svg";
2424
import { getURLHash } from "./utils";
2525
import ErrorMessage from "./components/ErrorMessage";
2626
import { publicApiTeamsToProtocol, teamsService } from "./service/public-api";
27+
import { Heading1, Heading2, Subheading } from "./components/typography/headings";
2728

2829
function Item(props: { icon: string; iconSize?: string; text: string }) {
2930
const iconSize = props.iconSize || 28;
@@ -147,11 +148,11 @@ export function Login() {
147148
<img src={gitpodDark} className="h-8 hidden dark:block" alt="Gitpod dark theme logo" />
148149
</div>
149150
<div className="mb-10">
150-
<h1 className="text-5xl mb-3">Welcome to Gitpod</h1>
151-
<div className="text-gray-400 text-lg">
151+
<Heading1 className="text-5xl mb-3">Welcome to Gitpod</Heading1>
152+
<Subheading className="text-gray-400 text-lg">
152153
Spin up fresh cloud development environments for each task, fully automated, in
153154
seconds.
154-
</div>
155+
</Subheading>
155156
</div>
156157
<div className="flex mb-10">
157158
<Item icon={code} iconSize="16" text="Always Ready&#x2011;To&#x2011;Code" />
@@ -190,15 +191,15 @@ export function Login() {
190191
<div className="mx-auto text-center pb-8 space-y-2">
191192
{providerFromContext ? (
192193
<>
193-
<h2 className="text-xl text-black dark:text-gray-50 font-semibold">
194-
Open a cloud development environment
195-
</h2>
196-
<h2 className="text-xl">for the repository {repoPathname?.slice(1)}</h2>
194+
<Heading2>Open a cloud development environment</Heading2>
195+
<Subheading>for the repository {repoPathname?.slice(1)}</Subheading>
197196
</>
198197
) : (
199198
<>
200-
<h1 className="text-3xl">Log in{showWelcome ? "" : " to Gitpod"}</h1>
201-
<h2 className="uppercase text-sm text-gray-400">ALWAYS READY-TO-CODE</h2>
199+
<Heading1>Log in{showWelcome ? "" : " to Gitpod"}</Heading1>
200+
<Subheading className="uppercase text-sm text-gray-400">
201+
ALWAYS READY-TO-CODE
202+
</Subheading>
202203
</>
203204
)}
204205
</div>

‎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/app/AppRoutes.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import { WebsocketClients } from "./WebsocketClients";
4848
import { StartWorkspaceOptions } from "../start/start-workspace-options";
4949
import { useFeatureFlags } from "../contexts/FeatureFlagContext";
5050
import { FORCE_ONBOARDING_PARAM, FORCE_ONBOARDING_PARAM_VALUE } from "../onboarding/UserOnboarding";
51+
import { Heading1, Subheading } from "../components/typography/headings";
5152

5253
const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "../Setup"));
5354
const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "../workspaces/Workspaces"));
@@ -241,8 +242,8 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
241242
</Route>
242243
<Route path="/sorry" exact>
243244
<div className="mt-48 text-center">
244-
<h1 className="text-gray-500 text-3xl">Oh, no! Something went wrong!</h1>
245-
<p className="mt-4 text-lg text-gitpod-red">{decodeURIComponent(getURLHash())}</p>
245+
<Heading1 color="light">Oh, no! Something went wrong!</Heading1>
246+
<Subheading className="mt-4 text-gitpod-red">{decodeURIComponent(getURLHash())}</Subheading>
246247
</div>
247248
</Route>
248249
<Route exact path="/teams">
@@ -312,8 +313,8 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
312313
(window.location.host = "www.gitpod.io")
313314
) : (
314315
<div className="mt-48 text-center">
315-
<h1 className="text-gray-500 text-3xl">404</h1>
316-
<p className="mt-4 text-lg">Page not found.</p>
316+
<Heading1>404</Heading1>
317+
<Subheading className="mt-4">Page not found.</Subheading>
317318
</div>
318319
);
319320
}}

‎components/dashboard/src/app/Blocked.tsx

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

77
import { FunctionComponent } from "react";
8+
import { Heading1, Subheading } from "../components/typography/headings";
89
import gitpodIcon from "../icons/gitpod.svg";
910

1011
export const Blocked: FunctionComponent = () => {
1112
return (
1213
<div className="mt-48 text-center">
1314
<img src={gitpodIcon} className="h-16 mx-auto" alt="Gitpod's logo" />
14-
<h1 className="mt-12 text-gray-500 text-3xl">Your account has been blocked.</h1>
15-
<p className="mt-4 mb-8 text-lg w-96 mx-auto">
15+
<Heading1 color="light" className="mt-12">
16+
Your account has been blocked.
17+
</Heading1>
18+
<Subheading className="mt-4 mb-8 w-96 mx-auto">
1619
Please contact support if you think this is an error. See also{" "}
1720
<a className="hover:text-blue-600 dark:hover:text-blue-400" href="https://www.gitpod.io/terms/">
1821
terms of service
1922
</a>
2023
.
21-
</p>
24+
</Subheading>
2225
<a className="mx-auto" href="mailto:[email protected]?Subject=Blocked">
2326
<button className="secondary">Contact Support</button>
2427
</a>

‎components/dashboard/src/components/BillingAccountSelector.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import SelectableCardSolid from "../components/SelectableCardSolid";
1414
import { ReactComponent as Spinner } from "../icons/Spinner.svg";
1515
import Alert from "./Alert";
1616
import { publicApiTeamMembersToProtocol, teamsService } from "../service/public-api";
17+
import { Subheading } from "./typography/headings";
1718

1819
export function BillingAccountSelector(props: { onSelected?: () => void }) {
1920
const { user, setUser } = useContext(UserContext);
@@ -96,7 +97,7 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
9697
{teamsAvailableForAttribution === undefined && <Spinner className="m-2 h-5 w-5 animate-spin" />}
9798
{teamsAvailableForAttribution && (
9899
<div>
99-
<h2 className="text-gray-500">
100+
<Subheading className="text-gray-500">
100101
Associate usage without a project to the billing account below.{" "}
101102
<a
102103
className="gp-link"
@@ -106,7 +107,7 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
106107
>
107108
Learn more
108109
</a>
109-
</h2>
110+
</Subheading>
110111
<div className="mt-4 max-w-2xl grid grid-cols-3 gap-3">
111112
{!user?.additionalData?.isMigratedToTeamOnlyAttribution && (
112113
<SelectableCardSolid

‎components/dashboard/src/components/ErrorBoundary.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { FC } from "react";
88
import { ErrorBoundary, FallbackProps, ErrorBoundaryProps } from "react-error-boundary";
99
import gitpodIcon from "../icons/gitpod.svg";
1010
import { getGitpodService } from "../service/service";
11+
import { Heading1, Subheading } from "./typography/headings";
1112

1213
export const GitpodErrorBoundary: FC = ({ children }) => {
1314
return (
@@ -24,14 +25,14 @@ export const DefaultErrorFallback: FC<FallbackProps> = ({ error, resetErrorBound
2425
return (
2526
<div role="alert" className="app-container mt-14 flex flex-col items-center justify-center space-y-6">
2627
<img src={gitpodIcon} className="h-16 mx-auto" alt="Gitpod's logo" />
27-
<h1>Oh, no! Something went wrong!</h1>
28-
<p className="text-lg">
28+
<Heading1>Oh, no! Something went wrong!</Heading1>
29+
<Subheading>
2930
Please try reloading the page. If the issue continues, please{" "}
3031
<a className="gp-link" href={`mailto:[email protected]?Subject=${emailSubject}&Body=${emailBody}`}>
3132
get in touch
3233
</a>
3334
.
34-
</p>
35+
</Subheading>
3536
<div>
3637
<button onClick={resetErrorBoundary}>Reload</button>
3738
</div>

‎components/dashboard/src/components/Header.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useEffect } from "react";
88
import { useLocation } from "react-router";
99
import { Separator } from "./Separator";
1010
import TabMenuItem from "./TabMenuItem";
11+
import { Heading1, Subheading } from "./typography/headings";
1112

1213
export interface HeaderProps {
1314
title: string | React.ReactElement;
@@ -33,8 +34,12 @@ export default function Header(p: HeaderProps) {
3334
<div className="app-container border-gray-200 dark:border-gray-800">
3435
<div className="flex pb-8 pt-6">
3536
<div className="">
36-
{typeof p.title === "string" ? <h1 className="tracking-tight">{p.title}</h1> : p.title}
37-
{typeof p.subtitle === "string" ? <h2 className="tracking-wide">{p.subtitle}</h2> : p.subtitle}
37+
{typeof p.title === "string" ? <Heading1 tracking="tight">{p.title}</Heading1> : p.title}
38+
{typeof p.subtitle === "string" ? (
39+
<Subheading tracking="wide">{p.subtitle}</Subheading>
40+
) : (
41+
p.subtitle
42+
)}
3843
</div>
3944
</div>
4045
<nav className="flex">

‎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"

0 commit comments

Comments
 (0)