Skip to content

Commit 6f4f6c2

Browse files
committed
Refactor h1, h2 and subheadings to components
1 parent 3e0d9ca commit 6f4f6c2

27 files changed

+174
-96
lines changed

components/dashboard/src/Login.tsx

Lines changed: 11 additions & 10 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;
@@ -138,7 +139,7 @@ export function Login() {
138139

139140
return (
140141
<div id="login-container" className="z-50 flex w-screen h-screen">
141-
{showWelcome ? (
142+
{!showWelcome ? (
142143
<div id="feature-section" className="flex-grow bg-gray-100 dark:bg-gray-800 w-1/2 hidden lg:block">
143144
<div id="feature-section-column" className="flex max-w-xl h-full mx-auto pt-6">
144145
<div className="flex flex-col px-8 my-auto ml-auto">
@@ -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/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
@@ -7,6 +7,7 @@
77
import { FC } from "react";
88
import { ErrorBoundary, FallbackProps, ErrorBoundaryProps } from "react-error-boundary";
99
import gitpodIcon from "../icons/gitpod.svg";
10+
import { Heading1, Subheading } from "./typography/headings";
1011

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

components/dashboard/src/components/Header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export default function Header(p: HeaderProps) {
3434
<div className="app-container border-gray-200 dark:border-gray-800">
3535
<div className="flex pb-8 pt-6">
3636
<div className="">
37-
{typeof p.title === "string" ? <Heading1>{p.title}</Heading1> : p.title}
37+
{typeof p.title === "string" ? <Heading1 tracking="tight">{p.title}</Heading1> : p.title}
3838
{typeof p.subtitle === "string" ? (
39-
<Subheading className="tracking-wide">{p.subtitle}</Subheading>
39+
<Subheading tracking="wide">{p.subtitle}</Subheading>
4040
) : (
4141
p.subtitle
4242
)}

components/dashboard/src/components/UsageView.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +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";
3132

3233
interface UsageViewProps {
3334
attributionId: AttributionId;
@@ -208,13 +209,13 @@ function UsageView({ attributionId }: UsageViewProps) {
208209
<Header
209210
title={
210211
<div className="flex items-baseline">
211-
<h1 className="tracking-tight">Usage</h1>
212-
<h2 className="ml-3">(updated every 15 minutes).</h2>
212+
<Heading1 tracking="tight">Usage</Heading1>
213+
<Subheading className="ml-3">(updated every 15 minutes).</Subheading>
213214
</div>
214215
}
215216
subtitle={
216217
<div className="tracking-wide flex mt-3 items-center">
217-
<h2 className="mr-1">Showing usage from </h2>
218+
<Subheading className="mr-1">Showing usage from </Subheading>
218219
<DatePicker
219220
selected={startDate.toDate()}
220221
onChange={(date) => date && setStartDate(dayjs(date))}
@@ -225,7 +226,7 @@ function UsageView({ attributionId }: UsageViewProps) {
225226
customInput={<DateDisplay />}
226227
dateFormat={"MMM d, yyyy"}
227228
/>
228-
<h2 className="mx-1">to</h2>
229+
<Subheading className="mx-1">to</Subheading>
229230
<DatePicker
230231
selected={endDate.toDate()}
231232
onChange={(date) => date && setEndDate(dayjs(date))}

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

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,60 @@ import classNames from "classnames";
88
import { FC } from "react";
99

1010
type HeadingProps = {
11+
tracking?: "tight" | "wide";
12+
color?: "light" | "dark";
1113
className?: string;
1214
};
1315

14-
export const Heading1: FC<HeadingProps> = ({ className, children }) => {
15-
return <h1 className={classNames("text-gray-900 dark:text-gray-100 font-bold text-4xl", className)}>{children}</h1>;
16+
export const Heading1: FC<HeadingProps> = ({ color, tracking, className, children }) => {
17+
return (
18+
<h1
19+
className={classNames(
20+
getHeadingColor(color),
21+
getTracking(tracking),
22+
"font-bold text-5xl leading-64",
23+
className,
24+
)}
25+
>
26+
{children}
27+
</h1>
28+
);
29+
};
30+
31+
export const Heading2: FC<HeadingProps> = ({ color, tracking, className, children }) => {
32+
return (
33+
<h2
34+
className={classNames(
35+
getHeadingColor(color),
36+
getTracking(tracking),
37+
"leading-9 font-semibold text-2xl",
38+
className,
39+
)}
40+
>
41+
{children}
42+
</h2>
43+
);
1644
};
1745

1846
// Intended to be placed beneath a heading to provide more context
19-
export const Subheading: FC<HeadingProps> = ({ className, children }) => {
20-
return <p className={classNames("text-base text-gray-500 dark:text-gray-600", className)}>{children}</p>;
47+
export const Subheading: FC<HeadingProps> = ({ tracking, className, children }) => {
48+
return (
49+
<p className={classNames("text-base text-gray-500 dark:text-gray-600", getTracking(tracking), className)}>
50+
{children}
51+
</p>
52+
);
2153
};
54+
55+
function getHeadingColor(color: HeadingProps["color"] = "dark") {
56+
return color === "dark" ? "text-gray-800 dark:text-gray-100" : "text-gray-500 dark:text-gray-400";
57+
}
58+
59+
function getTracking(tracking: HeadingProps["tracking"]) {
60+
if (tracking === "wide") {
61+
return "tracking-wide";
62+
} else if (tracking === "tight") {
63+
return "tracking-tight";
64+
}
65+
66+
return null;
67+
}

components/dashboard/src/onboarding/OnboardingStep.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +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";
1011

1112
type Props = {
1213
title: string;
@@ -39,9 +40,8 @@ export const OnboardingStep: FC<Props> = ({
3940

4041
return (
4142
<div className="flex flex-col items-center justify-center max-w-full">
42-
{/* TODO: Fix our base heading styles so we don't have to override */}
43-
<h2 className="text-3xl text-gray-900 dark:text-gray-100 font-bold">{title}</h2>
44-
<p className="text-base text-gray-500 dark:text-gray-400">{subtitle}</p>
43+
<Heading1>{title}</Heading1>
44+
<Subheading>{subtitle}</Subheading>
4545

4646
<form className="mt-8 mb-14 max-w-lg" onSubmit={handleSubmit}>
4747
{/* Form contents provided as children */}

components/dashboard/src/projects/Events.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { openAuthorizeWindow } from "../provider-utils";
1717
import { useCurrentProject } from "./project-context";
1818
import { toRemoteURL } from "./render-utils";
1919
import { Redirect } from "react-router";
20+
import { Subheading } from "../components/typography/headings";
2021

2122
export default function EventsPage() {
2223
const { project, loading } = useCurrentProject();
@@ -112,13 +113,13 @@ export default function EventsPage() {
112113
<Header
113114
title="Prebuild Events"
114115
subtitle={
115-
<h2 className="tracking-wide">
116+
<Subheading tracking="wide">
116117
View recent prebuild events for{" "}
117118
<a className="gp-link" href={project?.cloneUrl!}>
118119
{toRemoteURL(project?.cloneUrl || "")}
119120
</a>
120121
.
121-
</h2>
122+
</Subheading>
122123
}
123124
/>
124125
<div className="app-container">

components/dashboard/src/projects/NewProject.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import ErrorMessage from "../components/ErrorMessage";
2222
import Spinner from "../icons/Spinner.svg";
2323
import { useRefreshProjects } from "../data/projects/list-projects-query";
2424
import { projectsPathNew } from "./projects.routes";
25+
import { Heading1, Subheading } from "../components/typography/headings";
2526

2627
export default function NewProject() {
2728
const currentTeam = useCurrentTeam();
@@ -288,7 +289,7 @@ export default function NewProject() {
288289

289290
const projectText = () => {
290291
return (
291-
<p className="text-gray-500 text-center text-base">
292+
<Subheading className="text-center">
292293
Projects allow you to manage prebuilds and workspaces for your repository.{" "}
293294
<a
294295
href="https://www.gitpod.io/docs/configure/projects"
@@ -298,7 +299,7 @@ export default function NewProject() {
298299
>
299300
Learn more
300301
</a>
301-
</p>
302+
</Subheading>
302303
);
303304
};
304305

@@ -507,7 +508,7 @@ export default function NewProject() {
507508
return (
508509
<div className="flex flex-col w-96 mt-24 mx-auto items-center">
509510
<>
510-
<h1>New Project</h1>
511+
<Heading1>New Project</Heading1>
511512

512513
{!selectedRepo && renderSelectRepository()}
513514
</>
@@ -530,15 +531,15 @@ export default function NewProject() {
530531
return (
531532
<div className="flex flex-col w-96 mt-24 mx-auto items-center">
532533
<>
533-
<h1>Project Created</h1>
534+
<Heading1>Project Created</Heading1>
534535

535-
<p className="mt-2 text-gray-500 text-center text-base">
536+
<Subheading className="mt-2 text-center">
536537
Created{" "}
537538
<a className="gp-link" href={projectLink}>
538539
{project.name}
539540
</a>{" "}
540541
{location}
541-
</p>
542+
</Subheading>
542543

543544
<div className="mt-12">
544545
<button onClick={onNewWorkspace}>New Workspace</button>

0 commit comments

Comments
 (0)