Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-25 08:19:40 +02:00
Code Issues Releases Activity

feat(ui): update dashboard table & items EE-3474 (#7351)

Browse source
This commit is contained in:
Ali 2022-08-01 13:29:49 +12:00 • committed by GitHub
parent d4d80ed8f7
commit 11dffdee9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

36
app/react/components/DashboardItem/DashboardItem.tsx
View file

@ -20,21 +20,45 @@ export function DashboardItem({
return (
<div
className={clsx(
'border-solid rounded-lg border-2 hover:border-2 border-gray-5 hover:border-blue-7',
'bg-gray-2 hover:bg-blue-2',
'p-3'
'border-solid rounded-lg border p-3',
'bg-gray-2 hover:bg-blue-2 border-gray-5 hover:border-blue-7',
'th-dark:bg-gray-iron-10 th-dark:hover:bg-gray-10 th-dark:border-gray-neutral-8 th-dark:hover:border-blue-8',
'th-highcontrast:bg-black th-highcontrast:hover:bg-gray-11 th-highcontrast:border-white th-highcontrast:hover:border-blue-8'
)}
>
<div className="flex items-center" aria-label={type}>
<div className="icon-badge text-2xl bg-blue-3 text-blue-8 mr-4">
<div
className={clsx(
'icon-badge text-2xl mr-4 !p-2',
'bg-blue-3 text-blue-8',
'th-dark:bg-blue-3 th-dark:text-blue-8',
'th-highcontrast:bg-blue-3 th-highcontrast:text-blue-8'
)}
>
<Icon icon={icon} feather={featherIcon} className="feather" />
</div>
<div className="flex flex-col justify-around">
<div className="text-gray-9 font-medium text-2xl" aria-label="value">
<div
className={clsx(
'font-medium text-2xl',
'text-gray-9',
'th-dark:text-white',
'th-highcontrast:text-white'
)}
aria-label="value"
>
{typeof value !== 'undefined' ? value : '-'}
</div>
<div className="text-gray-7 text-xl" aria-label="resourceType">
<div
className={clsx(
'text-xl',
'text-gray-7',
'th-dark:text-gray-warm-5',
'th-highcontrast:text-gray-warm-5'
)}
aria-label="resourceType"
>
{pluralize(value || 0, type)}
</div>
</div>