diff --git a/ui/src/design-system/components/image-carousel/image-carousel.tsx b/ui/src/design-system/components/image-carousel/image-carousel.tsx index 6d98772af..098bf5dd4 100644 --- a/ui/src/design-system/components/image-carousel/image-carousel.tsx +++ b/ui/src/design-system/components/image-carousel/image-carousel.tsx @@ -6,10 +6,10 @@ import { } from 'design-system/components/icon-button/icon-button' import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' import { ReactNode, useEffect, useRef, useState } from 'react' +import { Link } from 'react-router-dom' import styles from './image-carousel.module.scss' import { CarouselTheme } from './types' import { getImageBoxStyles, getPlaceholderStyles } from './utils' -import { Link } from 'react-router-dom' interface ImageCarouselProps { autoPlay?: boolean @@ -222,16 +222,7 @@ const MultiImageCarousel = ({ - <> - - {paused ? ( - - {slideIndex + 1} / {images.length} - - ) : ( - {totalLabel} - )} - + {slideIndex + 1} / {totalLabel} ) diff --git a/ui/src/design-system/components/info-block/info-block.module.scss b/ui/src/design-system/components/info-block/info-block.module.scss index ec57f28e6..6d7cc601d 100644 --- a/ui/src/design-system/components/info-block/info-block.module.scss +++ b/ui/src/design-system/components/info-block/info-block.module.scss @@ -23,5 +23,12 @@ &.link { color: $color-primary-1-600; + font-weight: 600; + } + + &.bubble { + @include bubble-label(); + display: inline-flex; + margin-top: 4px; } } diff --git a/ui/src/design-system/components/info-block/info-block.tsx b/ui/src/design-system/components/info-block/info-block.tsx index f6f4fc353..3adad2845 100644 --- a/ui/src/design-system/components/info-block/info-block.tsx +++ b/ui/src/design-system/components/info-block/info-block.tsx @@ -1,4 +1,5 @@ import classNames from 'classnames' +import _ from 'lodash' import { Link } from 'react-router-dom' import { STRING, translate } from 'utils/language' import styles from './info-block.module.scss' @@ -22,7 +23,11 @@ export const InfoBlock = ({ fields }: { fields: Field[] }) => ( {field.label} {field.to ? ( - + {value} diff --git a/ui/src/design-system/components/plot/plot.module.scss b/ui/src/design-system/components/plot/plot.module.scss index 593f58225..01f75d303 100644 --- a/ui/src/design-system/components/plot/plot.module.scss +++ b/ui/src/design-system/components/plot/plot.module.scss @@ -3,6 +3,12 @@ text-align: center; :global(.barlayer .point > path) { - clip-path: inset(0% 0% 0% 0% round 16px); + clip-path: inset(0% 0% 0% 0% round 4px); + } + + &.round { + :global(.barlayer .point > path) { + clip-path: inset(0% 0% 0% 0% round 32px); + } } } diff --git a/ui/src/design-system/components/plot/plot.tsx b/ui/src/design-system/components/plot/plot.tsx index c75a4e4a6..0296e45ed 100644 --- a/ui/src/design-system/components/plot/plot.tsx +++ b/ui/src/design-system/components/plot/plot.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames' import _Plot from 'react-plotly.js' import styles from './plot.module.scss' import { PlotProps } from './types' @@ -16,8 +17,11 @@ const Plot = ({ orientation, type = 'bar', showRangeSlider, + hovertemplate, }: PlotProps) => ( -
+
= 3 })} + > <_Plot data={[ { @@ -30,6 +34,7 @@ const Plot = ({ marker: { color: markerColor, }, + hovertemplate, }, ]} config={{ @@ -76,6 +81,8 @@ const Plot = ({ zeroline: false, tickvals: data.tickvals, ticktext: data.ticktext, + tickformat: 'd', + dtick: 1, automargin: true, ...(showRangeSlider ? { diff --git a/ui/src/design-system/components/plot/types.ts b/ui/src/design-system/components/plot/types.ts index 54c1c78d6..aca3c8a59 100644 --- a/ui/src/design-system/components/plot/types.ts +++ b/ui/src/design-system/components/plot/types.ts @@ -10,4 +10,5 @@ export interface PlotProps { type?: 'bar' | 'scatter' showRangeSlider?: boolean categorical?: boolean + hovertemplate?: string } diff --git a/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss b/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss index 9698d8b33..76a694b1d 100644 --- a/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss +++ b/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss @@ -25,14 +25,8 @@ &.bubble { .label { + @include bubble-label(); display: inline-flex; - height: 30px; - border-radius: 15px; - padding: 0 12px; - background-color: #f2f3fe; - line-height: 30px; - color: $color-primary-1-600; - font-weight: 600; } } } diff --git a/ui/src/design-system/variables/typography.scss b/ui/src/design-system/variables/typography.scss index 1c5f13890..c9bdc6db0 100644 --- a/ui/src/design-system/variables/typography.scss +++ b/ui/src/design-system/variables/typography.scss @@ -111,6 +111,18 @@ text-transform: uppercase; } +@mixin bubble-label { + display: inline-flex; + height: 30px; + border-radius: 15px; + padding: 0 12px; + background-color: #f2f3fe; + color: $color-primary-1-600; + font-size: 16px; + line-height: 30px; + font-weight: 600; +} + @mixin mono { @include paragraph-xx-small(); font-family: monospace; diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.tsx index 923fbadaa..ddae772e3 100644 --- a/ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.tsx +++ b/ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.tsx @@ -50,7 +50,7 @@ export const SectionExampleCaptures = ({ if (!deployment.createdAt) { return ( ) @@ -62,7 +62,7 @@ export const SectionExampleCaptures = ({ return (
diff --git a/ui/src/pages/deployment-details/deployment-details-info.tsx b/ui/src/pages/deployment-details/deployment-details-info.tsx index f2f7d9b77..3e27139d8 100644 --- a/ui/src/pages/deployment-details/deployment-details-info.tsx +++ b/ui/src/pages/deployment-details/deployment-details-info.tsx @@ -3,7 +3,7 @@ import { DeploymentDetails } from 'data-services/models/deployment-details' import { Button } from 'design-system/components/button/button' import * as Dialog from 'design-system/components/dialog/dialog' import { ImageCarousel } from 'design-system/components/image-carousel/image-carousel' -import { InputValue } from 'design-system/components/input/input' +import { InputContent, InputValue } from 'design-system/components/input/input' import { MultiMarkerMap } from 'design-system/map/multi-marker-map/multi-marker-map' import { MarkerPosition } from 'design-system/map/types' import { useMemo } from 'react' @@ -91,14 +91,16 @@ export const DeploymentDetailsInfo = ({ value={deployment.numImages} /> - {deployment.exampleCaptures.length > 0 && ( -
- -
- )} + + {deployment.exampleCaptures.length > 0 && ( +
+ +
+ )} +
diff --git a/ui/src/pages/occurrence-details/occurrence-details.tsx b/ui/src/pages/occurrence-details/occurrence-details.tsx index a984ecb01..4ff6f2e90 100644 --- a/ui/src/pages/occurrence-details/occurrence-details.tsx +++ b/ui/src/pages/occurrence-details/occurrence-details.tsx @@ -25,8 +25,8 @@ import { Agree } from './agree/agree' import { userAgreed } from './agree/userAgreed' import { IdentificationCard } from './identification-card/identification-card' import styles from './occurrence-details.module.scss' -import { SuggestId } from './suggest-id/suggest-id' import { RejectId } from './reject-id/reject-id' +import { SuggestId } from './suggest-id/suggest-id' export const TABS = { FIELDS: 'fields', @@ -165,7 +165,7 @@ export const OccurrenceDetails = ({ taxonId={occurrence.determinationTaxon.id} />