[dashboard] Introduce component CodeText

Author: corneliusludmann

components/dashboard/src/components/CodeText.tsx

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+export default function CodeText(p: { children?: React.ReactNode }) {
+    return <span className="bg-gray-100 dark:bg-gray-800 px-1.5 py-1 rounded-md text-sm font-mono font-medium">{p.children}</span>;
+}

components/dashboard/src/settings/Account.tsx

@@ -11,6 +11,7 @@ import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import settingsMenu from "./settings-menu";
 import ConfirmationModal from "../components/ConfirmationModal";
+import CodeText from "../components/CodeText";
 
 export default function Account() {
     const { user } = useContext(UserContext);
@@ -46,7 +47,7 @@ export default function Account() {
 
         <PageWithSubMenu subMenu={settingsMenu}  title='Account' subtitle='Manage account and git configuration.'>
             <h3>Profile</h3>
-            <p className="text-base text-gray-500 pb-4 max-w-2xl">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 <span className="bg-gray-100 dark:bg-gray-800 px-1.5 py-1 rounded-md text-sm font-mono font-medium">GIT_AUTHOR_NAME</span> and <span className="bg-gray-100 dark:bg-gray-800 px-1.5 py-1 rounded-md text-sm font-mono font-medium">GIT_COMMITTER_EMAIL</span>.</p>
+            <p className="text-base text-gray-500 pb-4 max-w-2xl">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> and <CodeText>GIT_COMMITTER_EMAIL</CodeText>.</p>
             <div className="flex flex-col lg:flex-row">
                 <div>
                     <div className="mt-4">

components/dashboard/src/settings/EnvironmentVariables.tsx

@@ -5,13 +5,14 @@
  */
 
 import { UserEnvVarValue } from "@gitpod/gitpod-protocol";
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { Item, ItemField, ItemFieldContextMenu, ItemsList } from "../components/ItemsList";
 import Modal from "../components/Modal";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import { getGitpodService } from "../service/service";
 import settingsMenu from "./settings-menu";
+import CodeText from "../components/CodeText";
 
 interface EnvVarModalProps {
     envVar: UserEnvVarValue;
@@ -70,7 +71,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
                     onChange={(v) => { update({repositoryPattern: v.target.value}) }} />
             </div>
             <div className="mt-1">
-                <p className="text-gray-500">You can pass a variable for a specific project or use wildcard character (<span className="bg-gray-100 dark:bg-gray-800 px-1.5 py-1 rounded-md text-sm font-mono font-medium">*/*</span>) to make it available in more projects.</p>
+                <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.</p>
             </div>
         </div>
         <div className="flex justify-end mt-6">