Adding Typography components for Headings/Subheadings

components/dashboard/src/Login.tsx

@@ -24,6 +24,7 @@ import exclamation from "./images/exclamation.svg";
 import { getURLHash } from "./utils";
 import ErrorMessage from "./components/ErrorMessage";
 import { publicApiTeamsToProtocol, teamsService } from "./service/public-api";
+import { Heading1, Heading2, Subheading } from "./components/typography/headings";
 
 function Item(props: { icon: string; iconSize?: string; text: string }) {
     const iconSize = props.iconSize || 28;
@@ -147,11 +148,11 @@ export function Login() {
                                 <img src={gitpodDark} className="h-8 hidden dark:block" alt="Gitpod dark theme logo" />
                             </div>
                             <div className="mb-10">
-                                <h1 className="text-5xl mb-3">Welcome to Gitpod</h1>
-                                <div className="text-gray-400 text-lg">
+                                <Heading1 className="text-5xl mb-3">Welcome to Gitpod</Heading1>
+                                <Subheading className="text-gray-400 text-lg">
                                     Spin up fresh cloud development environments for each task, fully automated, in
                                     seconds.
-                                </div>
+                                </Subheading>
                             </div>
                             <div className="flex mb-10">
                                 <Item icon={code} iconSize="16" text="Always Ready&#x2011;To&#x2011;Code" />
@@ -190,15 +191,15 @@ export function Login() {
                             <div className="mx-auto text-center pb-8 space-y-2">
                                 {providerFromContext ? (
                                     <>
-                                        <h2 className="text-xl text-black dark:text-gray-50 font-semibold">
-                                            Open a cloud development environment
-                                        </h2>
-                                        <h2 className="text-xl">for the repository {repoPathname?.slice(1)}</h2>
+                                        <Heading2>Open a cloud development environment</Heading2>
+                                        <Subheading>for the repository {repoPathname?.slice(1)}</Subheading>
                                     </>
                                 ) : (
                                     <>
-                                        <h1 className="text-3xl">Log in{showWelcome ? "" : " to Gitpod"}</h1>
-                                        <h2 className="uppercase text-sm text-gray-400">ALWAYS READY-TO-CODE</h2>
+                                        <Heading1>Log in{showWelcome ? "" : " to Gitpod"}</Heading1>
+                                        <Subheading className="uppercase text-sm text-gray-400">
+                                            ALWAYS READY-TO-CODE
+                                        </Subheading>
                                     </>
                                 )}
                             </div>

components/dashboard/src/Setup.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useEffect, useState } from "react";
-import Modal from "./components/Modal";
+import Modal, { ModalBody, ModalFooter, ModalHeader } from "./components/Modal";
 import { getGitpodService, gitpodHostUrl } from "./service/service";
 import { GitIntegrationModal } from "./user-settings/Integrations";
 
@@ -40,8 +40,8 @@ export default function Setup() {
             {!showModal && (
                 // TODO: Use title and buttons props
                 <Modal visible={true} onClose={() => {}} closeable={false}>
-                    <h3 className="pb-2">Welcome to Gitpod 🎉</h3>
-                    <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
+                    <ModalHeader>Welcome to Gitpod 🎉</ModalHeader>
+                    <ModalBody>
                         <p className="pb-4 text-gray-500 text-base">
                             To start using Gitpod, you will need to set up a Git integration.
                         </p>
@@ -59,12 +59,12 @@ export default function Setup() {
                                 .
                             </span>
                         </div>
-                    </div>
-                    <div className="flex justify-end mt-6">
+                    </ModalBody>
+                    <ModalFooter>
                         <button className={"ml-2"} onClick={() => acceptAndContinue()}>
                             Continue
                         </button>
-                    </div>
+                    </ModalFooter>
                 </Modal>
             )}
             {showModal && (

components/dashboard/src/admin/ProjectDetail.tsx

@@ -9,6 +9,7 @@ import { Project } from "@gitpod/gitpod-protocol";
 import Prebuilds from "../projects/Prebuilds";
 import Property from "./Property";
 import dayjs from "dayjs";
+import { Heading2, Subheading } from "../components/typography/headings";
 
 export default function ProjectDetail(props: { project: Project; owner: string | undefined }) {
     return (
@@ -17,10 +18,10 @@ export default function ProjectDetail(props: { project: Project; owner: string |
                 <div className="flex mt-8">
                     <div className="flex-1">
                         <div className="flex">
-                            <h3>{props.project.name}</h3>
+                            <Heading2>{props.project.name}</Heading2>
                             <span className="my-auto"></span>
                         </div>
-                        <p>{props.project.cloneUrl}</p>
+                        <Subheading>{props.project.cloneUrl}</Subheading>
                     </div>
                 </div>
                 <div className="flex flex-col w-full">

components/dashboard/src/admin/Settings.tsx

@@ -14,6 +14,7 @@ import InfoBox from "../components/InfoBox";
 import { isGitpodIo } from "../utils";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import { getAdminTabs, getAdminSettingsMenu } from "./admin.routes";
+import { Heading2, Subheading } from "../components/typography/headings";
 
 export function SettingsLayout(props: { children: React.ReactNode }) {
     return (
@@ -53,11 +54,11 @@ export default function Settings() {
     return (
         <div>
             <SettingsLayout>
-                <h3>Usage Statistics</h3>
-                <p className="text-base text-gray-500 pb-4 max-w-2xl">
+                <Heading2>Usage Statistics</Heading2>
+                <Subheading className="pb-4 max-w-2xl">
                     We collect usage telemetry to gain insights on how you use your Gitpod instance, so we can provide a
                     better overall experience.
-                </p>
+                </Subheading>
                 <p>
                     <a className="gp-link" href="https://www.gitpod.io/privacy">
                         Read our Privacy Policy
@@ -94,7 +95,7 @@ export default function Settings() {
                         } as InstallationAdminSettings)
                     }
                 />
-                <h3 className="mt-4">Telemetry preview</h3>
+                <Heading2 className="mt-4">Telemetry preview</Heading2>
                 <InfoBox>
                     <pre>{JSON.stringify(telemetryData, null, 2)}</pre>
                 </InfoBox>

components/dashboard/src/admin/TeamDetail.tsx

@@ -17,6 +17,7 @@ import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import { CostCenterJSON, CostCenter_BillingStrategy } from "@gitpod/gitpod-protocol/lib/usage";
 import Modal from "../components/Modal";
+import { Heading2 } from "../components/typography/headings";
 
 export default function TeamDetail(props: { team: Team }) {
     const { team } = props;
@@ -72,7 +73,7 @@ export default function TeamDetail(props: { team: Team }) {
             <div className="flex mt-8">
                 <div className="flex-1">
                     <div className="flex">
-                        <h3>{team.name}</h3>
+                        <Heading2>{team.name}</Heading2>
                         {team.markedDeleted && (
                             <span className="mt-2">
                                 <Label text="Deleted" color="red" />

components/dashboard/src/admin/UserDetail.tsx

@@ -27,6 +27,7 @@ import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import CaretDown from "../icons/CaretDown.svg";
 import ContextMenu from "../components/ContextMenu";
 import { CostCenterJSON, CostCenter_BillingStrategy } from "@gitpod/gitpod-protocol/lib/usage";
+import { Heading2, Subheading } from "../components/typography/headings";
 
 export default function UserDetail(p: { user: User }) {
     const [activity, setActivity] = useState(false);
@@ -263,18 +264,18 @@ export default function UserDetail(p: { user: User }) {
                     <div className="flex mt-8">
                         <div className="flex-1">
                             <div className="flex">
-                                <h3>{user.fullName}</h3>
+                                <Heading2>{user.fullName}</Heading2>
                                 {user.blocked ? <Label text="Blocked" color="red" /> : null}{" "}
                                 {user.markedDeleted ? <Label text="Deleted" color="red" /> : null}
                                 {user.lastVerificationTime ? <Label text="Verified" color="green" /> : null}
                             </div>
-                            <p>
+                            <Subheading>
                                 {user.identities
                                     .map((i) => i.primaryEmail)
                                     .filter((e) => !!e)
                                     .join(", ")}
                                 {user.verificationPhoneNumber ? ` — ${user.verificationPhoneNumber}` : null}
-                            </p>
+                            </Subheading>
                         </div>
                         {!user.lastVerificationTime ? (
                             <button className="secondary ml-3" disabled={activity} onClick={verifyUser}>

components/dashboard/src/admin/WorkspaceDetail.tsx

@@ -9,6 +9,7 @@ import { GitpodHostUrl } from "@gitpod/gitpod-protocol/lib/util/gitpod-host-url"
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import { Heading2, Subheading } from "../components/typography/headings";
 import { getGitpodService } from "../service/service";
 import { getProjectPath } from "../workspaces/WorkspaceEntry";
 import { WorkspaceStatusIndicator } from "../workspaces/WorkspaceStatusIndicator";
@@ -49,12 +50,12 @@ export default function WorkspaceDetail(props: { workspace: WorkspaceAndInstance
                 <div className="flex mt-8">
                     <div className="flex-1">
                         <div className="flex">
-                            <h3>{workspace.workspaceId}</h3>
+                            <Heading2>{workspace.workspaceId}</Heading2>
                             <span className="my-auto ml-3">
                                 <WorkspaceStatusIndicator instance={WorkspaceAndInstance.toInstance(workspace)} />
                             </span>
                         </div>
-                        <p>{getProjectPath(WorkspaceAndInstance.toWorkspace(workspace))}</p>
+                        <Subheading>{getProjectPath(WorkspaceAndInstance.toWorkspace(workspace))}</Subheading>
                     </div>
                     <button
                         className="secondary ml-3"

components/dashboard/src/app/AppRoutes.tsx

@@ -48,6 +48,7 @@ import { WebsocketClients } from "./WebsocketClients";
 import { StartWorkspaceOptions } from "../start/start-workspace-options";
 import { useFeatureFlags } from "../contexts/FeatureFlagContext";
 import { FORCE_ONBOARDING_PARAM, FORCE_ONBOARDING_PARAM_VALUE } from "../onboarding/UserOnboarding";
+import { Heading1, Subheading } from "../components/typography/headings";
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "../Setup"));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "../workspaces/Workspaces"));
@@ -241,8 +242,8 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
                     </Route>
                     <Route path="/sorry" exact>
                         <div className="mt-48 text-center">
-                            <h1 className="text-gray-500 text-3xl">Oh, no! Something went wrong!</h1>
-                            <p className="mt-4 text-lg text-gitpod-red">{decodeURIComponent(getURLHash())}</p>
+                            <Heading1 color="light">Oh, no! Something went wrong!</Heading1>
+                            <Subheading className="mt-4 text-gitpod-red">{decodeURIComponent(getURLHash())}</Subheading>
                         </div>
                     </Route>
                     <Route exact path="/teams">
@@ -312,8 +313,8 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
                                 (window.location.host = "www.gitpod.io")
                             ) : (
                                 <div className="mt-48 text-center">
-                                    <h1 className="text-gray-500 text-3xl">404</h1>
-                                    <p className="mt-4 text-lg">Page not found.</p>
+                                    <Heading1>404</Heading1>
+                                    <Subheading className="mt-4">Page not found.</Subheading>
                                 </div>
                             );
                         }}

components/dashboard/src/app/Blocked.tsx

@@ -5,20 +5,23 @@
  */
 
 import { FunctionComponent } from "react";
+import { Heading1, Subheading } from "../components/typography/headings";
 import gitpodIcon from "../icons/gitpod.svg";
 
 export const Blocked: FunctionComponent = () => {
     return (
         <div className="mt-48 text-center">
             <img src={gitpodIcon} className="h-16 mx-auto" alt="Gitpod's logo" />
-            <h1 className="mt-12 text-gray-500 text-3xl">Your account has been blocked.</h1>
-            <p className="mt-4 mb-8 text-lg w-96 mx-auto">
+            <Heading1 color="light" className="mt-12">
+                Your account has been blocked.
+            </Heading1>
+            <Subheading className="mt-4 mb-8 w-96 mx-auto">
                 Please contact support if you think this is an error. See also{" "}
                 <a className="hover:text-blue-600 dark:hover:text-blue-400" href="https://www.gitpod.io/terms/">
                     terms of service
                 </a>
                 .
-            </p>
+            </Subheading>
             <a className="mx-auto" href="mailto:[email protected]?Subject=Blocked">
                 <button className="secondary">Contact Support</button>
             </a>

components/dashboard/src/components/BillingAccountSelector.tsx

@@ -14,6 +14,7 @@ import SelectableCardSolid from "../components/SelectableCardSolid";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
 import Alert from "./Alert";
 import { publicApiTeamMembersToProtocol, teamsService } from "../service/public-api";
+import { Subheading } from "./typography/headings";
 
 export function BillingAccountSelector(props: { onSelected?: () => void }) {
     const { user, setUser } = useContext(UserContext);
@@ -96,7 +97,7 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
             {teamsAvailableForAttribution === undefined && <Spinner className="m-2 h-5 w-5 animate-spin" />}
             {teamsAvailableForAttribution && (
                 <div>
-                    <h2 className="text-gray-500">
+                    <Subheading className="text-gray-500">
                         Associate usage without a project to the billing account below.{" "}
                         <a
                             className="gp-link"
@@ -106,7 +107,7 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
                         >
                             Learn more
                         </a>
-                    </h2>
+                    </Subheading>
                     <div className="mt-4 max-w-2xl grid grid-cols-3 gap-3">
                         {!user?.additionalData?.isMigratedToTeamOnlyAttribution && (
                             <SelectableCardSolid

components/dashboard/src/components/ErrorBoundary.tsx

@@ -8,6 +8,7 @@ import { FC } from "react";
 import { ErrorBoundary, FallbackProps, ErrorBoundaryProps } from "react-error-boundary";
 import gitpodIcon from "../icons/gitpod.svg";
 import { getGitpodService } from "../service/service";
+import { Heading1, Subheading } from "./typography/headings";
 
 export const GitpodErrorBoundary: FC = ({ children }) => {
     return (
@@ -24,14 +25,14 @@ export const DefaultErrorFallback: FC<FallbackProps> = ({ error, resetErrorBound
     return (
         <div role="alert" className="app-container mt-14 flex flex-col items-center justify-center space-y-6">
             <img src={gitpodIcon} className="h-16 mx-auto" alt="Gitpod's logo" />
-            <h1>Oh, no! Something went wrong!</h1>
-            <p className="text-lg">
+            <Heading1>Oh, no! Something went wrong!</Heading1>
+            <Subheading>
                 Please try reloading the page. If the issue continues, please{" "}
                 <a className="gp-link" href={`mailto:[email protected]?Subject=${emailSubject}&Body=${emailBody}`}>
                     get in touch
                 </a>
                 .
-            </p>
+            </Subheading>
             <div>
                 <button onClick={resetErrorBoundary}>Reload</button>
             </div>

components/dashboard/src/components/Header.tsx

@@ -8,6 +8,7 @@ import { useEffect } from "react";
 import { useLocation } from "react-router";
 import { Separator } from "./Separator";
 import TabMenuItem from "./TabMenuItem";
+import { Heading1, Subheading } from "./typography/headings";
 
 export interface HeaderProps {
     title: string | React.ReactElement;
@@ -33,8 +34,12 @@ export default function Header(p: HeaderProps) {
         <div className="app-container border-gray-200 dark:border-gray-800">
             <div className="flex pb-8 pt-6">
                 <div className="">
-                    {typeof p.title === "string" ? <h1 className="tracking-tight">{p.title}</h1> : p.title}
-                    {typeof p.subtitle === "string" ? <h2 className="tracking-wide">{p.subtitle}</h2> : p.subtitle}
+                    {typeof p.title === "string" ? <Heading1 tracking="tight">{p.title}</Heading1> : p.title}
+                    {typeof p.subtitle === "string" ? (
+                        <Subheading tracking="wide">{p.subtitle}</Subheading>
+                    ) : (
+                        p.subtitle
+                    )}
                 </div>
             </div>
             <nav className="flex">

components/dashboard/src/components/Modal.tsx

@@ -7,6 +7,7 @@
 import { ReactNode, useEffect } from "react";
 import cn from "classnames";
 import { getGitpodService } from "../service/service";
+import { Heading2 } from "./typography/headings";
 
 type CloseModalManner = "esc" | "enter" | "x";
 
@@ -112,7 +113,7 @@ type ModalHeaderProps = {
 };
 
 export const ModalHeader = ({ children }: ModalHeaderProps) => {
-    return <h3 className="pb-2">{children}</h3>;
+    return <Heading2 className="pb-2">{children}</Heading2>;
 };
 
 type ModalBodyProps = {

components/dashboard/src/components/ThemeSelector.tsx

@@ -8,6 +8,7 @@ import classNames from "classnames";
 import { FC, useCallback, useContext, useState } from "react";
 import { ThemeContext } from "../theme-context";
 import SelectableCardSolid from "./SelectableCardSolid";
+import { Heading2, Subheading } from "./typography/headings";
 
 type Theme = "light" | "dark" | "system";
 
@@ -37,8 +38,8 @@ export const ThemeSelector: FC<Props> = ({ className }) => {
 
     return (
         <div className={classNames(className)}>
-            <h3>Theme</h3>
-            <p className="text-base text-gray-500 dark:text-gray-400">Early bird or night owl? Choose your side.</p>
+            <Heading2>Theme</Heading2>
+            <Subheading>Early bird or night owl? Choose your side.</Subheading>
             <div className="mt-4 flex items-center flex-wrap">
                 <SelectableCardSolid
                     className="w-36 h-32 m-1"