Skip to content

Monospaced fonts adoption in the Dashboard #15936

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 23, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .pre-commit-config.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ repos:
exclude: |
(?x)^(
.*example-layer.tar.gz|
.*\.(png|svg|ico|gpg)|
.*\.(png|svg|ico|gpg|woff2)|
dev/version-manifest/version-manifest|
.*gradle-wrapper\.jar
)$
Expand Down
Binary file not shown.
1 change: 1 addition & 0 deletions components/dashboard/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="/fonts/JetBrainsMono-Regular.woff2" type="font/woff2">
<title>Dashboard — Gitpod</title>
</head>
<body>
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/projects/Prebuilds.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
/>
)}
Authored {formatDate(p.info.changeDate)} ·{" "}
{p.info.changeHash?.substring(0, 8)}
<span className="font-mono">{p.info.changeHash?.substring(0, 8)}</span>
</p>
</div>
</ItemField>
Expand All @@ -290,7 +290,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
<a href={p.info.changeUrl} className="cursor-pointer">
<div className="flex space-x-2 truncate">
<span
className="font-medium text-gray-500 dark:text-gray-50 truncate"
className="font-medium text-gray-500 dark:text-gray-50 truncate font-mono"
title={p.info.branch}
>
{p.info.branch}
Expand Down
8 changes: 5 additions & 3 deletions components/dashboard/src/projects/Project.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -338,10 +338,10 @@ export default function () {
<ItemField className="flex items-center my-auto">
<div>
<a href={branch.url}>
<div className="text-base text-gray-600 hover:text-gray-800 dark:text-gray-50 dark:hover:text-gray-200 font-medium mb-1">
<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">
{branch.name}
{branch.isDefault && (
<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">
<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">
DEFAULT
</span>
)}
Expand All @@ -356,7 +356,9 @@ export default function () {
</div>
<p>
{avatar}Authored {formatDate(branch.changeDate)} ·{" "}
{branch.changeHash?.substring(0, 8)}
<span className="font-mono">
{branch.changeHash?.substring(0, 8)}
</span>
</p>
</div>
</ItemField>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/projects/ProjectListItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
>
{prebuildStatusIcon(prebuild)}
<div
className="font-semibold text-gray-500 dark:text-gray-400 truncate"
className="font-semibold text-gray-500 dark:text-gray-400 truncate font-mono"
title={prebuild?.info?.branch}
>
{prebuild?.info?.branch}
Expand Down
6 changes: 3 additions & 3 deletions components/dashboard/src/projects/ProjectVariables.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export default function () {
{envVars.map((variable) => {
return (
<Item className="grid grid-cols-3 items-center">
<ItemField className="truncate">{variable.name}</ItemField>
<ItemField className="truncate font-mono">{variable.name}</ItemField>
<ItemField>{variable.censored ? "Hidden" : "Visible"}</ItemField>
<ItemField className="flex justify-end">
<ItemFieldContextMenu
Expand Down Expand Up @@ -148,7 +148,7 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
<h4>Name</h4>
<input
autoFocus
className="w-full"
className="w-full font-mono"
type="text"
name="name"
value={name}
Expand All @@ -158,7 +158,7 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
<div className="mt-4">
<h4>Value</h4>
<input
className="w-full"
className="w-full font-mono"
type="text"
name="value"
value={value}
Expand Down
14 changes: 7 additions & 7 deletions components/dashboard/src/settings/EnvironmentVariables.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
<h4>Name</h4>
<input
autoFocus
className="w-full"
className="w-full font-mono"
type="text"
value={ev.name}
onChange={(v) => {
Expand All @@ -72,7 +72,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
<div className="mt-4">
<h4>Value</h4>
<input
className="w-full"
className="w-full font-mono"
type="text"
value={ev.value}
onChange={(v) => {
Expand All @@ -83,7 +83,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
<div className="mt-4">
<h4>Scope</h4>
<input
className="w-full"
className="w-full font-mono"
type="text"
value={ev.repositoryPattern}
placeholder="e.g. owner/repository"
Expand Down Expand Up @@ -128,8 +128,8 @@ function DeleteEnvVarModal(p: { variable: UserEnvVarValue; deleteVariable: () =>
<span className="truncate">Scope</span>
</div>
<div className="grid grid-cols-2 gap-4 p-3 mt-3 text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-xl">
<span className="truncate text-gray-900 dark:text-gray-50">{p.variable.name}</span>
<span className="truncate text-sm">{p.variable.repositoryPattern}</span>
<span className="truncate text-gray-900 dark:text-gray-50 font-mono">{p.variable.name}</span>
<span className="truncate text-sm font-mono">{p.variable.repositoryPattern}</span>
</div>
</ConfirmationModal>
);
Expand Down Expand Up @@ -262,10 +262,10 @@ export default function EnvVars() {
{envVars.map((variable) => {
return (
<Item className="whitespace-nowrap">
<ItemField className="w-5/12 overflow-ellipsis truncate my-auto">
<ItemField className="w-5/12 overflow-ellipsis truncate my-auto font-mono">
{variable.name}
</ItemField>
<ItemField className="w-5/12 overflow-ellipsis truncate text-sm text-gray-400 my-auto">
<ItemField className="w-5/12 overflow-ellipsis truncate text-sm text-gray-400 my-auto font-mono">
{variable.repositoryPattern}
</ItemField>
<ItemFieldContextMenu
Expand Down
4 changes: 3 additions & 1 deletion components/dashboard/src/workspaces/WorkspaceEntry.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,9 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
</a>
</ItemField>
<ItemField className="w-2/12 flex flex-col my-auto">
<div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{currentBranch}</div>
<div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate font-mono">
{currentBranch}
</div>
<div className="mr-auto">
<PendingChangesDropdown workspaceInstance={desc.latestInstance} />
</div>
Expand Down
4 changes: 3 additions & 1 deletion components/dashboard/src/workspaces/WorkspaceEntryNew.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,9 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info }) => {
</a>
</ItemField>
<ItemField className="w-2/12 flex flex-col my-auto">
<div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{currentBranch}</div>
<div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate font-mono">
{currentBranch}
</div>
<div className="mr-auto">
<PendingChangesDropdown workspaceInstance={info.latestInstance} />
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ module.exports = {
"Segoe UI Symbol",
"Noto Color Emoji",
],
mono: ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"],
mono: ["JetBrains Mono", "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"],
},
underlineThickness: {
thin: "2px",
Expand Down