@@ -217,9 +217,12 @@ function TeamUsage() {
217
217
) }
218
218
{ billedUsage . length > 0 && ! isLoading && (
219
219
< div className = "flex flex-col w-full mb-8" >
220
- < ItemsList className = "mt-2 text-gray-500" >
221
- < Item header = { false } className = "grid grid-cols-12 gap-x-3 bg-gray-100 mb-5" >
222
- < ItemField className = "col-span-2 my-auto" >
220
+ < ItemsList className = "mt-2 text-gray-400 dark:text-gray-500" >
221
+ < Item
222
+ header = { false }
223
+ className = "grid grid-cols-12 gap-x-3 bg-gray-100 dark:bg-gray-800"
224
+ >
225
+ < ItemField className = "col-span-2 my-auto " >
223
226
< span > Type</ span >
224
227
</ ItemField >
225
228
< ItemField className = "col-span-5 my-auto" >
@@ -236,7 +239,7 @@ function TeamUsage() {
236
239
>
237
240
Timestamp
238
241
< SortArrow
239
- className = { `h-4 w-4 my-auto ${
242
+ className = { `ml-2 h-4 w-4 my-auto ${
240
243
isStartedTimeDescending ? "" : " transform rotate-180"
241
244
} `}
242
245
/>
@@ -248,53 +251,55 @@ function TeamUsage() {
248
251
return (
249
252
< div
250
253
key = { usage . instanceId }
251
- className = "flex p-3 grid grid-cols-12 gap-x-3 justify-between transition ease-in-out rounded-xl focus:bg-gitpod-kumquat-light "
254
+ className = "flex p-3 grid grid-cols-12 gap-x-3 justify-between transition ease-in-out rounded-xl"
252
255
>
253
256
< div className = "flex flex-col col-span-2 my-auto" >
254
- < span className = "text-gray-700 dark:text-gray-400 " >
257
+ < span className = "text-gray-600 dark:text-gray-100 text-md font-medium " >
255
258
{ getType ( usage . workspaceType ) }
256
259
</ span >
257
- < span className = "text-sm text-gray-400 dark:text-gray-600 " >
260
+ < span className = "text-sm text-gray-400 dark:text-gray-500 " >
258
261
{ usage . workspaceClass }
259
262
</ span >
260
263
</ div >
261
264
< div className = "flex flex-col col-span-5 my-auto" >
262
- < span className = "truncate text-gray-700 dark:text-gray-400 " >
265
+ < span className = "truncate text-gray-600 dark:text-gray-100 text-md font-medium " >
263
266
{ usage . workspaceId }
264
267
</ span >
265
- < span className = "text-sm truncate text-gray-400 dark:text-gray-600 " >
268
+ < span className = "text-sm truncate text-gray-400 dark:text-gray-500 " >
266
269
{ usage . contextURL && toRemoteURL ( usage . contextURL ) }
267
270
</ span >
268
271
</ div >
269
272
< div className = "flex flex-col my-auto" >
270
- < span className = "text-right text-gray-700 dark:text-gray-400" >
273
+ < span className = "text-right text-gray-500 dark:text-gray-400 font-medium " >
271
274
{ usage . credits . toFixed ( 1 ) }
272
275
</ span >
273
- < span className = "text-right truncate text-sm text-gray-400 dark:text-gray-600 " >
276
+ < span className = "text-right truncate text-sm text-gray-400 dark:text-gray-500 " >
274
277
{ getMinutes ( usage ) }
275
278
</ span >
276
279
</ div >
277
280
< div className = "my-auto" />
278
281
< div className = "flex flex-col col-span-3 my-auto" >
279
- < span className = "text-gray-400 truncate" >
282
+ < span className = "text-gray-400 dark:text-gray-500 truncate font-medium " >
280
283
{ displayTime ( usage . startTime ) }
281
284
</ span >
282
285
< div className = "flex" >
283
286
{ usage . workspaceType === "prebuild" ? (
284
- < UsageIcon className = "my-auto" />
287
+ < UsageIcon className = "my-auto w-4 h-4 mr-1 " />
285
288
) : (
286
289
""
287
290
) }
288
291
{ usage . workspaceType === "prebuild" ? (
289
- < span className = "text-sm text-gray-400" > Gitpod</ span >
292
+ < span className = "text-sm text-gray-400 dark:text-gray-500" >
293
+ Gitpod
294
+ </ span >
290
295
) : (
291
296
< div className = "flex" >
292
297
< img
293
- className = "my-auto rounded-full w-4 h-4 inline-block align-text-bottom mr-2 overflow-hidden"
294
- src = { usage . user ?. avatarUrl || "" }
298
+ className = "my-auto rounded-full w-4 h-4 inline-block align-text-bottom mr-1 overflow-hidden"
299
+ src = { usage . user ?. avatarURL || "" }
295
300
alt = "user avatar"
296
301
/>
297
- < span className = "text-sm text-gray-400" >
302
+ < span className = "text-sm text-gray-400 dark:text-gray-500 " >
298
303
{ usage . user ?. name }
299
304
</ span >
300
305
</ div >
0 commit comments