[dashboard] Simplify <code> snippets by using CSS instead of a whole component

Author: jankeromnes

components/dashboard/src/components/CodeText.tsx

@@ -77,6 +77,10 @@
         @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500;
     }
 
+    code {
+        @apply bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
+    }
+
     textarea,
     input[type="text"],
     input[type="tel"],

components/dashboard/src/index.css

@@ -10,7 +10,6 @@ import ConfirmationModal from "../components/ConfirmationModal";
 import { Item, ItemField, ItemFieldContextMenu, ItemsList } from "../components/ItemsList";
 import Modal from "../components/Modal";
 import { getGitpodService } from "../service/service";
-import CodeText from "../components/CodeText";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 
 interface EnvVarModalProps {
@@ -95,8 +94,8 @@ function AddEnvVarModal(p: EnvVarModalProps) {
                 </div>
                 <div className="mt-1">
                     <p className="text-gray-500">
-                        You can pass a variable for a specific project or use wildcard character (
-                        <CodeText>*/*</CodeText>) to make it available in more projects.
+                        You can pass a variable for a specific project or use wildcard character (<code>*/*</code>) to
+                        make it available in more projects.
                     </p>
                 </div>
             </div>

components/dashboard/src/settings/EnvironmentVariables.tsx

@@ -8,7 +8,6 @@ import { User } from "@gitpod/gitpod-protocol";
 import { hoursBefore, isDateSmaller } from "@gitpod/gitpod-protocol/lib/util/timeutil";
 import React, { useContext, useState } from "react";
 import Alert from "../components/Alert";
-import CodeText from "../components/CodeText";
 import Modal from "../components/Modal";
 import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
@@ -118,9 +117,8 @@ export default function ProfileInformation(props: {
         <div>
             <p className="text-base text-gray-500 pb-4 max-w-xl">
                 The following information will be used to set up Git configuration. You can override Git author name and
-                email per project by using the default environment variables <CodeText>GIT_AUTHOR_NAME</CodeText>,{" "}
-                <CodeText>GIT_COMMITTER_NAME</CodeText>, <CodeText>GIT_AUTHOR_EMAIL</CodeText> and{" "}
-                <CodeText>GIT_COMMITTER_EMAIL</CodeText>.
+                email per project by using the default environment variables <code>GIT_AUTHOR_NAME</code>,{" "}
+                <code>GIT_COMMITTER_NAME</code>, <code>GIT_AUTHOR_EMAIL</code> and <code>GIT_COMMITTER_EMAIL</code>.
             </p>
             {props.errorMessage.length > 0 && (
                 <Alert type="error" closable={true} className="mb-2 max-w-xl rounded-md">

components/dashboard/src/settings/ProfileInformation.tsx

@@ -23,7 +23,6 @@ import { openAuthorizeWindow } from "../provider-utils";
 import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
 import { SelectAccountModal } from "../settings/SelectAccountModal";
 import PrebuildLogs from "../components/PrebuildLogs";
-import CodeText from "../components/CodeText";
 import FeedbackComponent from "../feedback-form/FeedbackComponent";
 import { isGitpodIo } from "../utils";
 import { BillingAccountSelector } from "../components/BillingAccountSelector";
@@ -480,7 +479,7 @@ function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
                     <div className="mt-2 flex flex-col space-y-8">
                         <p className="text-base text-gray-400 w-96">
                             Permission to access private repositories has been granted. If you are a member of{" "}
-                            <CodeText>{owner}</CodeText>, please try to request access for Gitpod.
+                            <code>{owner}</code>, please try to request access for Gitpod.
                         </p>
                         <a className="mx-auto" href={authorizeURL}>
                             <button>Request Access for Gitpod</button>
@@ -494,7 +493,7 @@ function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
                 <div className="mt-2 flex flex-col space-y-8">
                     <p className="text-base text-gray-400 w-96">
                         Your access token was updated recently. Please try again if the repository exists and Gitpod was
-                        approved for <CodeText>{owner}</CodeText>.
+                        approved for <code>{owner}</code>.
                     </p>
                     <a className="mx-auto" href={authorizeURL}>
                         <button>Try Again</button>
@@ -507,7 +506,7 @@ function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
     return (
         <StartPage phase={StartPhase.Checking} error={p.error}>
             <p className="text-base text-gray-400 mt-2">
-                <CodeText>{repoFullName}</CodeText>
+                <code>{repoFullName}</code>
             </p>
             {statusMessage}
             {p.error && isGitpodIo() && (

components/dashboard/src/start/CreateWorkspace.tsx

@@ -8,7 +8,6 @@ import { Team } from "@gitpod/gitpod-protocol";
 import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import { useContext, useEffect, useState } from "react";
 import { Redirect, useLocation } from "react-router";
-import CodeText from "../components/CodeText";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
@@ -110,7 +109,7 @@ export default function TeamSettings() {
                     </li>
                 </ol>
                 <p className="pt-4 pb-2 text-gray-600 dark:text-gray-400 text-base font-semibold">
-                    Type <CodeText>{team?.slug}</CodeText> to confirm
+                    Type <code>{team?.slug}</code> to confirm
                 </p>
                 <input autoFocus className="w-full" type="text" onChange={(e) => setTeamSlug(e.target.value)}></input>
             </ConfirmationModal>

components/dashboard/src/teams/TeamSettings.tsx

@@ -7,7 +7,6 @@
 import { User } from "@gitpod/gitpod-protocol";
 import { WhatsNewEntry } from "./WhatsNew";
 import { switchToVSCodeAction } from "./WhatsNew-2021-04";
-import CodeText from "../components/CodeText";
 import PillLabel from "../components/PillLabel";
 
 export const WhatsNewEntry202106: WhatsNewEntry = {
@@ -24,8 +23,8 @@ export const WhatsNewEntry202106: WhatsNewEntry = {
                     </p>
                     <p className="pb-2 text-gray-500 dark:text-gray-400 text-sm">
                         Exposing ports are now private by default. You can still change port visibility through the
-                        editor or even configure this with the <CodeText>visibility</CodeText> property in{" "}
-                        <CodeText>.gitpod.yml</CodeText>.
+                        editor or even configure this with the <code>visibility</code> property in{" "}
+                        <code>.gitpod.yml</code>.
                     </p>
                 </div>
                 {user.additionalData?.ideSettings?.defaultIde !== "code" && (