-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Repo List - Style updates #19157
Conversation
badcc90
to
c27d5f9
Compare
There was a problem hiding this 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" |
There was a problem hiding this comment.
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
}
There was a problem hiding this comment.
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" /> |
There was a problem hiding this comment.
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!
/unhold |
Description
Fixes a couple small styling issues on the repo list page.
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 appliedfont-semibold
to the button and header text inSortableTable.tsx
andTable.tsx
.How to test
Documentation
Preview status
Gitpod was successfully deployed to your preview environment.
Build Options
Build
Run the build with werft instead of GHA
Run Leeway with
--dont-test
Publish
Installer
Add desired feature flags to the end of the line above, space separated
Preview Environment / Integration Tests
If enabled this will build
install/preview
If enabled this will create the environment on GCE infra
Saves cost. Untick this only if you're really sure you need a non-preemtible machine.
Valid options are
all
,workspace
,webapp
,ide
,jetbrains
,vscode
,ssh
. If enabled,with-preview
andwith-large-vm
will be enabled./hold