Skip to content

Repo List - Style updates #19157

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 11 commits into from
Dec 1, 2023
Merged

Repo List - Style updates #19157

merged 11 commits into from
Dec 1, 2023

Conversation

selfcontained
Copy link
Contributor

@selfcontained selfcontained commented Nov 28, 2023

Description

Fixes a couple small styling issues on the repo list page.

  • Tone down the prebuilds disabled icon & text
  • Fix table headings to all be semibold.
  • Adjust input and button heights/rounding to match each-other (reviewed this w/ Cory and did this to help push towards in flight design changes)
Header Header
image image
  • I also updated the sidebar for the repo config detail pages to remove Gitpod YAML for now (we cut it from initial scope) and hide the prebuild warning icon if prebuilds are enabled.
Summary generated by Copilot

🤖[deprecated] Generated by Copilot at 70eb648

Updated the styling and font weights of some dashboard components to improve consistency and readability. Changed the alert icon color in RepoListItem.tsx, and applied font-semibold to the button and header text in SortableTable.tsx and Table.tsx.

How to test

  • Navigate to the Repositories menu item from the org menu
  • Import a repo
  • Navigate back to the list
  • Verify the prebuilds disabled looks like the updated version in screenshot above
  • Verify all of the table headers are the same font weight (semibold).

Documentation

Preview status

Gitpod was successfully deployed to your preview environment.

Build Options

Build
  • /werft with-werft
    Run the build with werft instead of GHA
  • leeway-no-cache
  • /werft no-test
    Run Leeway with --dont-test
Publish
  • /werft publish-to-npm
  • /werft publish-to-jb-marketplace
Installer
  • analytics=segment
  • with-dedicated-emulation
  • workspace-feature-flags
    Add desired feature flags to the end of the line above, space separated
Preview Environment / Integration Tests
  • /werft with-local-preview
    If enabled this will build install/preview
  • /werft with-preview
  • /werft with-large-vm
  • /werft with-gce-vm
    If enabled this will create the environment on GCE infra
  • /werft preemptible
    Saves cost. Untick this only if you're really sure you need a non-preemtible machine.
  • with-integration-tests=all
    Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh. If enabled, with-preview and with-large-vm will be enabled.
  • with-monitoring

/hold

@selfcontained selfcontained changed the title Brad/repo-list-style-updates Repo List - Style updates Nov 28, 2023
@selfcontained selfcontained marked this pull request as ready for review November 28, 2023 16:07
@selfcontained selfcontained requested a review from a team as a code owner November 28, 2023 16:07
@roboquat roboquat added size/L and removed size/S labels Nov 28, 2023
@selfcontained selfcontained force-pushed the brad/repo-list-style-updates branch from badcc90 to c27d5f9 Compare November 29, 2023 17:32
Copy link
Member

@filiptronicek filiptronicek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look good. SHIP IT

@@ -27,7 +27,7 @@ export const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLA
return (
<thead
ref={ref}
className="[&_th]:p-3 [&_th]:bg-gray-100 dark:[&_th]:bg-gray-800 [&_th:first-child]:rounded-tl-md [&_th:last-child]:rounded-tr-md text-semibold"
className="[&_th]:py-2 [&_th]:px-4 [&_th]:bg-gray-100 [&_th]:font-semibold dark:[&_th]:bg-gray-800 [&_th:first-child]:rounded-tl-md [&_th:last-child]:rounded-tr-md"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please explain what this [&_th] syntax does?

On the Tailwind playground, [&_th]:py-2 translates to the following, but it did not help too much 😄.

.\[\&_th\]\:py-2 th{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It applies the padding to any descendant <th> of the <thead> component.

@@ -46,12 +45,10 @@ export const RepositoryListItem: FC<Props> = ({ configuration }) => {
{prebuildsEnabled ? (
<CheckCircle2Icon size={20} className="text-green-500" />
) : (
<AlertTriangleIcon size={20} className="text-red-500" />
<AlertTriangleIcon size={20} className="text-kumquat-base" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love that we're making this less scary, no prebuild shaming!

@selfcontained
Copy link
Contributor Author

/unhold

@roboquat roboquat merged commit efbdade into main Dec 1, 2023
@roboquat roboquat deleted the brad/repo-list-style-updates branch December 1, 2023 15:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants