@@ -217,9 +217,12 @@ function TeamUsage() {
217217 ) }
218218 { billedUsage . length > 0 && ! isLoading && (
219219 < 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 " >
223226 < span > Type</ span >
224227 </ ItemField >
225228 < ItemField className = "col-span-5 my-auto" >
@@ -236,7 +239,7 @@ function TeamUsage() {
236239 >
237240 Timestamp
238241 < SortArrow
239- className = { `h-4 w-4 my-auto ${
242+ className = { `ml-2 h-4 w-4 my-auto ${
240243 isStartedTimeDescending ? "" : " transform rotate-180"
241244 } `}
242245 />
@@ -248,53 +251,55 @@ function TeamUsage() {
248251 return (
249252 < div
250253 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"
252255 >
253256 < 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 " >
255258 { getType ( usage . workspaceType ) }
256259 </ 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 " >
258261 { usage . workspaceClass }
259262 </ span >
260263 </ div >
261264 < 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 " >
263266 { usage . workspaceId }
264267 </ 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 " >
266269 { usage . contextURL && toRemoteURL ( usage . contextURL ) }
267270 </ span >
268271 </ div >
269272 < 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 " >
271274 { usage . credits . toFixed ( 1 ) }
272275 </ 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 " >
274277 { getMinutes ( usage ) }
275278 </ span >
276279 </ div >
277280 < div className = "my-auto" />
278281 < 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 " >
280283 { displayTime ( usage . startTime ) }
281284 </ span >
282285 < div className = "flex" >
283286 { usage . workspaceType === "prebuild" ? (
284- < UsageIcon className = "my-auto" />
287+ < UsageIcon className = "my-auto w-4 h-4 mr-1 " />
285288 ) : (
286289 ""
287290 ) }
288291 { 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 >
290295 ) : (
291296 < div className = "flex" >
292297 < 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 || "" }
295300 alt = "user avatar"
296301 />
297- < span className = "text-sm text-gray-400" >
302+ < span className = "text-sm text-gray-400 dark:text-gray-500 " >
298303 { usage . user ?. name }
299304 </ span >
300305 </ div >
0 commit comments