Skip to content

[Docs Site] Fix dark model styling in catalog components #19039

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

Merged
merged 1 commit into from
Jan 7, 2025
Merged

[Docs Site] Fix dark model styling in catalog components #19039

Show file tree
Hide file tree
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
40 changes: 20 additions & 20 deletions src/components/ModelCatalog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,22 +80,22 @@ const ModelCatalog = ({ models }) => {

return (
<div className="md:flex">
<div className="md:w-1/4 w-full mr-8">
<div className="mr-8 w-full md:w-1/4">
<input
type="text"
className="w-full mb-8 rounded-md bg-white dark:bg-black border-2 border-gray-200 dark:border-gray-700 px-2 py-2"
className="mb-8 w-full rounded-md border-2 border-gray-200 bg-white px-2 py-2 dark:border-gray-700 dark:bg-gray-800"
Copy link
Member Author

@KianNH KianNH Jan 7, 2025

Choose a reason for hiding this comment

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

Most of the diff is formatting changes (we added the Tailwind plugin to help sort classes consistently), the changes are dark:bg-black being changed to dark:bg-gray-800.

placeholder="Search models"
value={filters.search}
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
/>

<div className="!mb-8 md:block hidden">
<span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold">
<div className="!mb-8 hidden md:block">
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
▼ Model Types
</span>

{tasks.map((task) => (
<label key={task} className="block !my-2">
<label key={task} className="!my-2 block">
<input
type="checkbox"
className="mr-2"
Expand All @@ -119,13 +119,13 @@ const ModelCatalog = ({ models }) => {
))}
</div>

<div className="!mb-8 md:block hidden">
<span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold">
<div className="!mb-8 hidden md:block">
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
▼ Capabilities
</span>

{capabilities.map((capability) => (
<label key={capability} className="block !my-2">
<label key={capability} className="!my-2 block">
<input
type="checkbox"
value={capability}
Expand All @@ -151,13 +151,13 @@ const ModelCatalog = ({ models }) => {
))}
</div>

<div className="md:block hidden">
<span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold">
<div className="hidden md:block">
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
▼ Authors
</span>

{authors.map((author) => (
<label key={author} className="block !my-2">
<label key={author} className="!my-2 block">
<input
type="checkbox"
className="mr-2"
Expand All @@ -183,9 +183,9 @@ const ModelCatalog = ({ models }) => {
))}
</div>
</div>
<div className="flex md:w-3/4 w-full gap-[1%] items-stretch self-start flex-wrap !mt-0">
<div className="!mt-0 flex w-full flex-wrap items-stretch gap-[1%] self-start md:w-3/4">
{modelList.length === 0 && (
<div className="border bg-gray-50 dark:bg-gray-800 dark:border-gray-500 rounded-md w-full flex-col flex align-middle justify-center text-center py-6">
<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle dark:border-gray-500 dark:bg-gray-800">
<span className="text-lg !font-bold">No models found</span>
<p>
Try a different search term, or broaden your search by removing
Expand All @@ -206,36 +206,36 @@ const ModelCatalog = ({ models }) => {
return (
<a
key={model.model.id}
className="p-3 border-gray-200 dark:border-gray-700 border-solid border rounded-md lg:w-[48%] w-full block !text-inherit no-underline self-start hover:bg-gray-50 dark:hover:bg-black mb-3"
className="mb-3 block w-full self-start rounded-md border border-solid border-gray-200 p-3 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 lg:w-[48%]"
href={`/workers-ai/models/${model.model_display_name}`}
>
<div className="-mb-1 flex items-center">
{authorData[model.model.name.split("/")[1]]?.logo ? (
<img
className="block w-6 mr-2"
className="mr-2 block w-6"
src={authorData[model.model.name.split("/")[1]]?.logo}
/>
) : (
<div className="w-6 h-6 rounded-md bg-gray-100 text-gray-400 uppercase text-sm font-black flex justify-center items-center mr-2">
<div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-sm font-black uppercase text-gray-400">
{author.substr(0, 1)}
</div>
)}
<span className="font-semibold text-lg text-ellipsis overflow-hidden whitespace-nowrap">
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold">
{model.model_display_name}
</span>
{isBeta && (
<span className="ml-1 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs">
<span className="ml-1 rounded-full bg-orange-200 px-2 py-0.5 text-xs text-orange-900">
Beta
</span>
)}
</div>
<div className="text-xs !m-0">
<div className="!m-0 text-xs">
<ModelInfo model={model.model} />
</div>
<p className="!mt-2 line-clamp-2 text-sm leading-6">
{model.model.description}
</p>
<div className="text-xs !mt-2">
<div className="!mt-2 text-xs">
<ModelBadges model={model.model} />
</div>
</a>
Expand Down
22 changes: 11 additions & 11 deletions src/components/ProductCatalog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,22 +54,22 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {

return (
<div className="md:flex">
<div className="md:w-1/4 w-full mr-8">
<div className="mr-8 w-full md:w-1/4">
<input
type="text"
className="w-full mb-8 rounded-md bg-white dark:bg-black border-2 border-gray-200 dark:border-gray-700 px-2 py-2"
className="mb-8 w-full rounded-md border-2 border-gray-200 bg-white px-2 py-2 dark:border-gray-700 dark:bg-gray-800"
placeholder="Search products"
value={filters.search}
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
/>

<div className="!mb-8 md:block hidden">
<span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold">
<div className="!mb-8 hidden md:block">
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
Groups
</span>

{groups.map((group) => (
<label key={group} className="block !my-2">
<label key={group} className="!my-2 block">
<input
type="checkbox"
className="mr-2"
Expand Down Expand Up @@ -97,9 +97,9 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
</div>
</div>

<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-2 lg:gap-4 lg:w-3/4 w-full items-stretch self-start !mt-0">
<div className="!mt-0 grid w-full grid-cols-1 items-stretch gap-2 self-start md:grid-cols-2 lg:w-3/4 lg:grid-cols-3 lg:gap-4">
{productList.length === 0 && (
<div className="border lg:col-span-3 md:col-span-2 bg-gray-50 dark:bg-gray-800 dark:border-gray-500 rounded-md w-full flex-col flex align-middle justify-center text-center py-6">
<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle dark:border-gray-500 dark:bg-gray-800 md:col-span-2 lg:col-span-3">
<span className="text-lg !font-bold">No products found</span>
<p>
Try a different search term, or broaden your search by removing
Expand All @@ -111,11 +111,11 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
return (
<a
href={product.data.product.url}
className="self-stretch p-3 border-gray-200 dark:border-gray-700 border-solid border rounded-md block !text-inherit no-underline hover:bg-gray-50 dark:hover:bg-black"
className="block self-stretch rounded-md border border-solid border-gray-200 p-3 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
>
<div className="flex items-start">
{product.icon && (
<div className="rounded-full p-1 bg-orange-50 mr-2 text-orange-500 dark:bg-orange-950">
<div className="mr-2 rounded-full bg-orange-50 p-1 text-orange-500 dark:bg-orange-950">
<svg
{...product.icon.attributes}
width={24}
Expand All @@ -125,11 +125,11 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
</div>
)}
{!product.icon && (
<div className="flex items-center justify-center leading-none rounded-full p-1 bg-orange-50 dark:bg-orange-950 mr-2 text-[color:var(--orange-accent-200)] text-lg font-bold w-8 h-8">
<div className="mr-2 flex h-8 w-8 items-center justify-center rounded-full bg-orange-50 p-1 text-lg font-bold leading-none text-[color:var(--orange-accent-200)] dark:bg-orange-950">
{product.data.name.substr(0, 1)}
</div>
)}
<span className="font-semibold text-md mt-0.5">
<span className="text-md mt-0.5 font-semibold">
{product.data.name}
</span>
</div>
Expand Down
Loading