diff --git a/ui/src/components/blueprint-collection/blueprint-collection.module.scss b/ui/src/components/blueprint-collection/blueprint-collection.module.scss index d3170949e..b91675a46 100644 --- a/ui/src/components/blueprint-collection/blueprint-collection.module.scss +++ b/ui/src/components/blueprint-collection/blueprint-collection.module.scss @@ -58,6 +58,10 @@ padding: 4px 8px; box-sizing: border-box; @include paragraph-x-small(); + + span { + white-space: nowrap; + } } .count { @@ -67,6 +71,12 @@ gap: 6px; } + .time { + flex: 1; + color: $color-neutral-300; + text-align: right; + } + .blueprintLabel { white-space: pre-wrap; text-align: center; diff --git a/ui/src/components/blueprint-collection/blueprint-collection.tsx b/ui/src/components/blueprint-collection/blueprint-collection.tsx index 92d3dcd16..622dee3e4 100644 --- a/ui/src/components/blueprint-collection/blueprint-collection.tsx +++ b/ui/src/components/blueprint-collection/blueprint-collection.tsx @@ -42,16 +42,13 @@ const BlueprintItem = ({ item }: { item: BlueprintItem }) => { return (
- - {item.countLabel?.length ? ( - <> - - {item.countLabel} - - ) : null} - - - {item.timeLabel} + {item.countLabel?.length ? ( + + + {item.countLabel} + + ) : null} + {item.timeLabel}
{ - const formattedTime = getFormatedDateTimeString({ - date: new Date(identification.createdAt), - }) - - return ( -
-
- {user ? ( -
- {user.image ? ( - - ) : ( - - )} -
- ) : ( - - )} - - - {user?.name ?? translate(STRING.MACHINE_SUGGESTION)} - - -
- {identification.algorithm && ( - - )} - - {identification.score && ( -
- {`${identification.score.toPrecision(4)}`} +}: IdentificationSummaryProps) => ( +
+
+ {user ? ( +
+ {user.image ? ( + + ) : ( + + )}
+ ) : ( + )} - {identification.terminal !== undefined && ( -
- {identification.terminal - ? translate(STRING.TERMINAL_CLASSIFICATION) - : translate(STRING.INTERMEDIATE_CLASSIFICATION)} -
- )} -
- {formattedTime} -
+ + {user?.name ?? translate(STRING.MACHINE_SUGGESTION)} +
- ) -} + {identification.algorithm && ( + +
{identification.algorithm.name}
+
+ )} + {identification.score && ( +
+ + {translate(STRING.FIELD_LABEL_SCORE)}{' '} + {`${identification.score.toPrecision(4)}`} + + {identification.terminal !== undefined && ( + + {' | '} + {identification.terminal + ? translate(STRING.TERMINAL_CLASSIFICATION) + : translate(STRING.INTERMEDIATE_CLASSIFICATION)} + + )} +
+ )} +
+) diff --git a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.module.scss b/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.module.scss deleted file mode 100644 index ec2482809..000000000 --- a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import 'src/design-system/variables/variables.scss'; -@import 'src/design-system/variables/colors.scss'; -@import 'src/design-system/variables/typography.scss'; - -.algorithmDetails { - display: block; - @include mono(); - color: $color-neutral-600; -} diff --git a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx b/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx deleted file mode 100644 index d6dcbb807..000000000 --- a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Algorithm } from 'data-services/models/algorithm' -import { Tooltip } from 'design-system/components/tooltip/tooltip' -import styles from './algorithm-details.module.scss' - -export const AlgorithmDetails = ({ algorithm }: { algorithm: Algorithm }) => { - if (!algorithm.description) { - return
{algorithm.name}
- } - - return ( - -
{algorithm.name}
-
- ) -} diff --git a/ui/src/pages/occurrence-details/identification-card/identification-card.module.scss b/ui/src/pages/occurrence-details/identification-card/identification-card.module.scss index 5c402035d..33c814d77 100644 --- a/ui/src/pages/occurrence-details/identification-card/identification-card.module.scss +++ b/ui/src/pages/occurrence-details/identification-card/identification-card.module.scss @@ -11,6 +11,14 @@ overflow: hidden; } +.timestamp { + display: block; + color: $color-neutral-300; + padding: 4px 8px; + text-align: right; + @include paragraph-x-small(); +} + .header { padding: 16px; border-bottom: 1px solid $color-neutral-100; diff --git a/ui/src/pages/occurrence-details/identification-card/identification-card.tsx b/ui/src/pages/occurrence-details/identification-card/identification-card.tsx index 36c0d3521..d6f38d8e8 100644 --- a/ui/src/pages/occurrence-details/identification-card/identification-card.tsx +++ b/ui/src/pages/occurrence-details/identification-card/identification-card.tsx @@ -11,6 +11,7 @@ import { IdentificationSummary } from 'design-system/components/identification/i import { useState } from 'react' import { useParams } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' +import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString' import { getAppRoute } from 'utils/getAppRoute' import { STRING, translate } from 'utils/language' import { UserInfo, UserPermission } from 'utils/user/types' @@ -42,6 +43,9 @@ export const IdentificationCard = ({ ) const showAgree = !byCurrentUser && canAgree const showDelete = byCurrentUser && canDelete + const formattedTime = getFormatedDateTimeString({ + date: new Date(identification.createdAt), + }) if (deleteIdOpen) { return ( @@ -53,50 +57,53 @@ export const IdentificationCard = ({ } return ( -
-
- {identification.applied && ( - - )} - -
-
- - getAppRoute({ - to: APP_ROUTES.TAXON_DETAILS({ - projectId: projectId as string, - taxonId: id, - }), - }) - } - /> - {identification.comment && ( -
"{identification.comment}"
- )} -
- {showAgree && ( - +
+ {formattedTime} +
+
+ {identification.applied && ( + )} - {showDelete && ( - setDeleteIdOpen(true)} - /> + +
+
+ + getAppRoute({ + to: APP_ROUTES.TAXON_DETAILS({ + projectId: projectId as string, + taxonId: id, + }), + }) + } + /> + {identification.comment && ( +
"{identification.comment}"
)} +
+ {showAgree && ( + + )} + {showDelete && ( + setDeleteIdOpen(true)} + /> + )} +
diff --git a/ui/src/pages/occurrence-details/occurrence-details.module.scss b/ui/src/pages/occurrence-details/occurrence-details.module.scss index bae127649..6d77cea2f 100644 --- a/ui/src/pages/occurrence-details/occurrence-details.module.scss +++ b/ui/src/pages/occurrence-details/occurrence-details.module.scss @@ -73,7 +73,7 @@ .identifications { display: grid; grid-template-columns: 1fr; - gap: 16px; + gap: 32px; padding: 4px 0; }