Skip to content

Commit 207436c

Browse files
filiptronicekroboquat
filiptronicek
authored and
roboquat
committed
Monospaced fonts adoption in the Dashboard
1 parent 42c9153 commit 207436c

11 files changed

+27
-20
lines changed

‎.pre-commit-config.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ repos:
2121
exclude: |
2222
(?x)^(
2323
.*example-layer.tar.gz|
24-
.*\.(png|svg|ico|gpg)|
24+
.*\.(png|svg|ico|gpg|woff2)|
2525
dev/version-manifest/version-manifest|
2626
.*gradle-wrapper\.jar
2727
)$

‎components/dashboard/public/fonts/JetBrainsMono-Regular.woff2

90 KB
Binary file not shown.

‎components/dashboard/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
/>
1919
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon192.png" />
2020
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
21+
<link rel="stylesheet" href="/fonts/JetBrainsMono-Regular.woff2" type="font/woff2">
2122
<title>Dashboard — Gitpod</title>
2223
</head>
2324
<body>

‎components/dashboard/src/projects/Prebuilds.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
281281
/>
282282
)}
283283
Authored {formatDate(p.info.changeDate)} ·{" "}
284-
{p.info.changeHash?.substring(0, 8)}
284+
<span className="font-mono">{p.info.changeHash?.substring(0, 8)}</span>
285285
</p>
286286
</div>
287287
</ItemField>
@@ -290,7 +290,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
290290
<a href={p.info.changeUrl} className="cursor-pointer">
291291
<div className="flex space-x-2 truncate">
292292
<span
293-
className="font-medium text-gray-500 dark:text-gray-50 truncate"
293+
className="font-medium text-gray-500 dark:text-gray-50 truncate font-mono"
294294
title={p.info.branch}
295295
>
296296
{p.info.branch}

‎components/dashboard/src/projects/Project.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -338,10 +338,10 @@ export default function () {
338338
<ItemField className="flex items-center my-auto">
339339
<div>
340340
<a href={branch.url}>
341-
<div className="text-base text-gray-600 hover:text-gray-800 dark:text-gray-50 dark:hover:text-gray-200 font-medium mb-1">
341+
<div className="text-base text-gray-600 hover:text-gray-800 dark:text-gray-50 dark:hover:text-gray-200 font-medium mb-1 font-mono">
342342
{branch.name}
343343
{branch.isDefault && (
344-
<span className="ml-2 self-center rounded-xl py-0.5 px-2 text-sm bg-blue-50 text-blue-40 dark:bg-blue-500 dark:text-blue-100">
344+
<span className="ml-2 self-center rounded-xl py-0.5 px-2 text-sm font-sans bg-blue-50 text-blue-40 dark:bg-blue-500 dark:text-blue-100">
345345
DEFAULT
346346
</span>
347347
)}
@@ -356,7 +356,9 @@ export default function () {
356356
</div>
357357
<p>
358358
{avatar}Authored {formatDate(branch.changeDate)} ·{" "}
359-
{branch.changeHash?.substring(0, 8)}
359+
<span className="font-mono">
360+
{branch.changeHash?.substring(0, 8)}
361+
</span>
360362
</p>
361363
</div>
362364
</ItemField>

‎components/dashboard/src/projects/ProjectListItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
8787
>
8888
{prebuildStatusIcon(prebuild)}
8989
<div
90-
className="font-semibold text-gray-500 dark:text-gray-400 truncate"
90+
className="font-semibold text-gray-500 dark:text-gray-400 truncate font-mono"
9191
title={prebuild?.info?.branch}
9292
>
9393
{prebuild?.info?.branch}

‎components/dashboard/src/projects/ProjectVariables.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default function () {
7777
{envVars.map((variable) => {
7878
return (
7979
<Item className="grid grid-cols-3 items-center">
80-
<ItemField className="truncate">{variable.name}</ItemField>
80+
<ItemField className="truncate font-mono">{variable.name}</ItemField>
8181
<ItemField>{variable.censored ? "Hidden" : "Visible"}</ItemField>
8282
<ItemField className="flex justify-end">
8383
<ItemFieldContextMenu
@@ -148,7 +148,7 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
148148
<h4>Name</h4>
149149
<input
150150
autoFocus
151-
className="w-full"
151+
className="w-full font-mono"
152152
type="text"
153153
name="name"
154154
value={name}
@@ -158,7 +158,7 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
158158
<div className="mt-4">
159159
<h4>Value</h4>
160160
<input
161-
className="w-full"
161+
className="w-full font-mono"
162162
type="text"
163163
name="value"
164164
value={value}

‎components/dashboard/src/settings/EnvironmentVariables.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
6161
<h4>Name</h4>
6262
<input
6363
autoFocus
64-
className="w-full"
64+
className="w-full font-mono"
6565
type="text"
6666
value={ev.name}
6767
onChange={(v) => {
@@ -72,7 +72,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
7272
<div className="mt-4">
7373
<h4>Value</h4>
7474
<input
75-
className="w-full"
75+
className="w-full font-mono"
7676
type="text"
7777
value={ev.value}
7878
onChange={(v) => {
@@ -83,7 +83,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
8383
<div className="mt-4">
8484
<h4>Scope</h4>
8585
<input
86-
className="w-full"
86+
className="w-full font-mono"
8787
type="text"
8888
value={ev.repositoryPattern}
8989
placeholder="e.g. owner/repository"
@@ -128,8 +128,8 @@ function DeleteEnvVarModal(p: { variable: UserEnvVarValue; deleteVariable: () =>
128128
<span className="truncate">Scope</span>
129129
</div>
130130
<div className="grid grid-cols-2 gap-4 p-3 mt-3 text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-xl">
131-
<span className="truncate text-gray-900 dark:text-gray-50">{p.variable.name}</span>
132-
<span className="truncate text-sm">{p.variable.repositoryPattern}</span>
131+
<span className="truncate text-gray-900 dark:text-gray-50 font-mono">{p.variable.name}</span>
132+
<span className="truncate text-sm font-mono">{p.variable.repositoryPattern}</span>
133133
</div>
134134
</ConfirmationModal>
135135
);
@@ -262,10 +262,10 @@ export default function EnvVars() {
262262
{envVars.map((variable) => {
263263
return (
264264
<Item className="whitespace-nowrap">
265-
<ItemField className="w-5/12 overflow-ellipsis truncate my-auto">
265+
<ItemField className="w-5/12 overflow-ellipsis truncate my-auto font-mono">
266266
{variable.name}
267267
</ItemField>
268-
<ItemField className="w-5/12 overflow-ellipsis truncate text-sm text-gray-400 my-auto">
268+
<ItemField className="w-5/12 overflow-ellipsis truncate text-sm text-gray-400 my-auto font-mono">
269269
{variable.repositoryPattern}
270270
</ItemField>
271271
<ItemFieldContextMenu

‎components/dashboard/src/workspaces/WorkspaceEntry.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,9 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
198198
</a>
199199
</ItemField>
200200
<ItemField className="w-2/12 flex flex-col my-auto">
201-
<div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{currentBranch}</div>
201+
<div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate font-mono">
202+
{currentBranch}
203+
</div>
202204
<div className="mr-auto">
203205
<PendingChangesDropdown workspaceInstance={desc.latestInstance} />
204206
</div>

‎components/dashboard/src/workspaces/WorkspaceEntryNew.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info }) => {
6868
</a>
6969
</ItemField>
7070
<ItemField className="w-2/12 flex flex-col my-auto">
71-
<div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{currentBranch}</div>
71+
<div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate font-mono">
72+
{currentBranch}
73+
</div>
7274
<div className="mr-auto">
7375
<PendingChangesDropdown workspaceInstance={info.latestInstance} />
7476
</div>

‎components/dashboard/tailwind.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ module.exports = {
6464
"Segoe UI Symbol",
6565
"Noto Color Emoji",
6666
],
67-
mono: ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"],
67+
mono: ["JetBrains Mono", "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"],
6868
},
6969
underlineThickness: {
7070
thin: "2px",

0 commit comments

Comments
 (0)