Skip to content
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.

Sign up for GitHub

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

Improve repo finder items contrasts #20457

Merged
merged 1 commit into from
Dec 16, 2024
Merged

Improve repo finder items contrasts #20457

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 13 additions & 10 deletions components/dashboard/src/components/RepositoryFinder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { PREDEFINED_REPOS } from "../data/git-providers/predefined-repos";
import { useConfiguration, useListConfigurations } from "../data/configurations/configuration-queries";
import { useUserLoader } from "../hooks/use-user-loader";
import { conjunctScmProviders, getDeduplicatedScmProviders } from "../utils";
import { cn } from "@podkit/lib/cn";

const isPredefined = (repo: SuggestedRepository): boolean => {
return PREDEFINED_REPOS.some((predefined) => predefined.url === repo.url) && !repo.configurationId;
Expand Down Expand Up @@ -169,9 +170,9 @@ export default function RepositoryFinder({
return (
<div className="flex flex-col overflow-hidden" aria-label={`Demo: ${repo.url}`}>
<div className="flex items-center">
<GitpodRepositoryTemplate className="w-5 h-5 text-pk-content-tertiary mr-2" />
<GitpodRepositoryTemplate className="w-5 h-5 text-pk-content-secondary mr-2" />
<span className="text-sm font-semibold">{repo.repoName}</span>
<MiddleDot className="px-0.5 text-pk-content-tertiary" />
<MiddleDot className="px-0.5 text-pk-content-secondary" />
<span
className="text-sm whitespace-nowrap truncate overflow-ellipsis text-pk-content-secondary"
title={repo.repoPath}
Expand Down Expand Up @@ -313,7 +314,7 @@ export default function RepositoryFinder({
result.push({
id: "more",
element: (
<div className="text-sm text-pk-content-tertiary">Repo missing? Try refining your search.</div>
<div className="text-sm text-pk-content-secondary">Repo missing? Try refining your search.</div>
),
isSelectable: false,
});
Expand All @@ -328,7 +329,7 @@ export default function RepositoryFinder({
result.push({
id: "bitbucket-server",
element: (
<div className="text-sm text-pk-content-tertiary flex items-center">
<div className="text-sm text-pk-content-secondary flex items-center">
<Exclamation2 className="w-4 h-4 mr-2" />
<span>Bitbucket Server only supports searching by prefix.</span>
</div>
Expand All @@ -347,7 +348,7 @@ export default function RepositoryFinder({
result.push({
id: "gitlab",
element: (
<div className="text-sm text-pk-content-tertiary flex items-center">
<div className="text-sm text-pk-content-secondary flex items-center">
<Exclamation2 className="w-4 h-4 mr-2" />
<span>
Search text is &lt; 3 characters. GitLab will only show exact matches for short
Expand All @@ -371,7 +372,7 @@ export default function RepositoryFinder({
result.push({
id: "whole-path-matching-unsupported",
element: (
<div className="text-sm text-pk-content-tertiary flex items-center">
<div className="text-sm text-pk-content-secondary flex items-center">
<Exclamation2 className="w-4 h-4 mr-2" />
<span>
{usedProviders
Expand All @@ -390,7 +391,7 @@ export default function RepositoryFinder({
result.push({
id: "azure-devops",
element: (
<div className="text-sm text-pk-content-tertiary flex items-center">
<div className="text-sm text-pk-content-secondary flex items-center">
<Exclamation2 className="w-4 h-4 mr-2" />
<span>Azure DevOps doesn't support repository searching.</span>
</div>
Expand Down Expand Up @@ -453,18 +454,20 @@ const SuggestedRepositoryOption: FC<SuggestedRepositoryOptionProps> = ({ repo })
aria-label={`${repo.configurationId ? "Project" : "Repo"}: ${repo.url}`}
>
<span className={"pr-2"}>
<RepositoryIcon className={`w-5 h-5 text-pk-content-tertiary`} />
<RepositoryIcon className={`w-5 h-5 text-pk-content-secondary`} />
</span>

{name && (
<>
<span className="text-sm whitespace-nowrap font-semibold">{name}</span>
<MiddleDot className="px-0.5 text-pk-content-tertiary" />
<MiddleDot className="px-0.5 text-pk-content-secondary" />
</>
)}

<span
className="text-sm whitespace-nowrap truncate overflow-ellipsis text-pk-content-secondary"
className={cn("text-sm whitespace-nowrap truncate overflow-ellipsis", {
"text-pk-content-secondary": !!name,
})}
title={repoPath}
>
{repoPath}
Expand Down
Loading