Skip to content

Commit 2645931

Browse files
KianNHKianNH
authored
[Docs Site] Fix dark model styling in catalog components (#19039)
1 parent 748a21f commit 2645931

File tree

2 files changed

+31
-31
lines changed

2 files changed

+31
-31
lines changed

‎src/components/ModelCatalog.jsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -80,22 +80,22 @@ const ModelCatalog = ({ models }) => {
8080

8181
return (
8282
<div className="md:flex">
83-
<div className="md:w-1/4 w-full mr-8">
83+
<div className="mr-8 w-full md:w-1/4">
8484
<input
8585
type="text"
86-
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"
86+
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"
8787
placeholder="Search models"
8888
value={filters.search}
8989
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
9090
/>
9191

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

9797
{tasks.map((task) => (
98-
<label key={task} className="block !my-2">
98+
<label key={task} className="!my-2 block">
9999
<input
100100
type="checkbox"
101101
className="mr-2"
@@ -119,13 +119,13 @@ const ModelCatalog = ({ models }) => {
119119
))}
120120
</div>
121121

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

127127
{capabilities.map((capability) => (
128-
<label key={capability} className="block !my-2">
128+
<label key={capability} className="!my-2 block">
129129
<input
130130
type="checkbox"
131131
value={capability}
@@ -151,13 +151,13 @@ const ModelCatalog = ({ models }) => {
151151
))}
152152
</div>
153153

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

159159
{authors.map((author) => (
160-
<label key={author} className="block !my-2">
160+
<label key={author} className="!my-2 block">
161161
<input
162162
type="checkbox"
163163
className="mr-2"
@@ -183,9 +183,9 @@ const ModelCatalog = ({ models }) => {
183183
))}
184184
</div>
185185
</div>
186-
<div className="flex md:w-3/4 w-full gap-[1%] items-stretch self-start flex-wrap !mt-0">
186+
<div className="!mt-0 flex w-full flex-wrap items-stretch gap-[1%] self-start md:w-3/4">
187187
{modelList.length === 0 && (
188-
<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">
188+
<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">
189189
<span className="text-lg !font-bold">No models found</span>
190190
<p>
191191
Try a different search term, or broaden your search by removing
@@ -206,36 +206,36 @@ const ModelCatalog = ({ models }) => {
206206
return (
207207
<a
208208
key={model.model.id}
209-
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"
209+
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%]"
210210
href={`/workers-ai/models/${model.model_display_name}`}
211211
>
212212
<div className="-mb-1 flex items-center">
213213
{authorData[model.model.name.split("/")[1]]?.logo ? (
214214
<img
215-
className="block w-6 mr-2"
215+
className="mr-2 block w-6"
216216
src={authorData[model.model.name.split("/")[1]]?.logo}
217217
/>
218218
) : (
219-
<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">
219+
<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">
220220
{author.substr(0, 1)}
221221
</div>
222222
)}
223-
<span className="font-semibold text-lg text-ellipsis overflow-hidden whitespace-nowrap">
223+
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold">
224224
{model.model_display_name}
225225
</span>
226226
{isBeta && (
227-
<span className="ml-1 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs">
227+
<span className="ml-1 rounded-full bg-orange-200 px-2 py-0.5 text-xs text-orange-900">
228228
Beta
229229
</span>
230230
)}
231231
</div>
232-
<div className="text-xs !m-0">
232+
<div className="!m-0 text-xs">
233233
<ModelInfo model={model.model} />
234234
</div>
235235
<p className="!mt-2 line-clamp-2 text-sm leading-6">
236236
{model.model.description}
237237
</p>
238-
<div className="text-xs !mt-2">
238+
<div className="!mt-2 text-xs">
239239
<ModelBadges model={model.model} />
240240
</div>
241241
</a>

‎src/components/ProductCatalog.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -54,22 +54,22 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
5454

5555
return (
5656
<div className="md:flex">
57-
<div className="md:w-1/4 w-full mr-8">
57+
<div className="mr-8 w-full md:w-1/4">
5858
<input
5959
type="text"
60-
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"
60+
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"
6161
placeholder="Search products"
6262
value={filters.search}
6363
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
6464
/>
6565

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

7171
{groups.map((group) => (
72-
<label key={group} className="block !my-2">
72+
<label key={group} className="!my-2 block">
7373
<input
7474
type="checkbox"
7575
className="mr-2"
@@ -97,9 +97,9 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
9797
</div>
9898
</div>
9999

100-
<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">
100+
<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">
101101
{productList.length === 0 && (
102-
<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">
102+
<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">
103103
<span className="text-lg !font-bold">No products found</span>
104104
<p>
105105
Try a different search term, or broaden your search by removing
@@ -111,11 +111,11 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
111111
return (
112112
<a
113113
href={product.data.product.url}
114-
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"
114+
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"
115115
>
116116
<div className="flex items-start">
117117
{product.icon && (
118-
<div className="rounded-full p-1 bg-orange-50 mr-2 text-orange-500 dark:bg-orange-950">
118+
<div className="mr-2 rounded-full bg-orange-50 p-1 text-orange-500 dark:bg-orange-950">
119119
<svg
120120
{...product.icon.attributes}
121121
width={24}
@@ -125,11 +125,11 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
125125
</div>
126126
)}
127127
{!product.icon && (
128-
<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">
128+
<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">
129129
{product.data.name.substr(0, 1)}
130130
</div>
131131
)}
132-
<span className="font-semibold text-md mt-0.5">
132+
<span className="text-md mt-0.5 font-semibold">
133133
{product.data.name}
134134
</span>
135135
</div>

0 commit comments

Comments
 (0)