From 53fd9da758c41c9e496fd4185c4a90f901d680fd Mon Sep 17 00:00:00 2001 From: Karolis Kazlauskis Date: Thu, 12 Sep 2024 13:38:23 +0300 Subject: [PATCH] Small theme tweaks --- .../ImageWithClassification/index.tsx | 5 ++- .../ImageWithClassification/styles.scss | 7 ---- .../common/Components/ProbabilityBadge.tsx | 39 +++++++++++++++++++ .../Components/ProbabilityBadge/index.tsx | 33 ---------------- .../Components/ProbabilityBadge/styles.scss | 35 ----------------- src/common/theme.scss | 8 ++++ 6 files changed, 51 insertions(+), 76 deletions(-) create mode 100644 src/Survey/common/Components/ProbabilityBadge.tsx delete mode 100644 src/Survey/common/Components/ProbabilityBadge/index.tsx delete mode 100644 src/Survey/common/Components/ProbabilityBadge/styles.scss diff --git a/src/Survey/common/Components/PhotoPicker/ImageWithClassification/index.tsx b/src/Survey/common/Components/PhotoPicker/ImageWithClassification/index.tsx index ec20add6..11409671 100644 --- a/src/Survey/common/Components/PhotoPicker/ImageWithClassification/index.tsx +++ b/src/Survey/common/Components/PhotoPicker/ImageWithClassification/index.tsx @@ -43,7 +43,10 @@ const Image = ({ media, isDisabled, onDelete, onClick }: Props) => { {showLoading && } {!showLoading && hasBeenIdentified && selectedSpeciesMatch && ( - + )} {!showLoading && hasBeenIdentified && !selectedSpeciesMatch && ( diff --git a/src/Survey/common/Components/PhotoPicker/ImageWithClassification/styles.scss b/src/Survey/common/Components/PhotoPicker/ImageWithClassification/styles.scss index 7f63fd7c..673b213e 100644 --- a/src/Survey/common/Components/PhotoPicker/ImageWithClassification/styles.scss +++ b/src/Survey/common/Components/PhotoPicker/ImageWithClassification/styles.scss @@ -1,11 +1,4 @@ .photo-picker .img { - .badge { - position: absolute; - bottom: 2px; - left: 2px; - padding: 3px; - } - .warning-icon { position: absolute; bottom: 2px; diff --git a/src/Survey/common/Components/ProbabilityBadge.tsx b/src/Survey/common/Components/ProbabilityBadge.tsx new file mode 100644 index 00000000..4c609f75 --- /dev/null +++ b/src/Survey/common/Components/ProbabilityBadge.tsx @@ -0,0 +1,39 @@ +import clsx from 'clsx'; +import { camera } from 'ionicons/icons'; +import { IonIcon } from '@ionic/react'; +import CONFIG from 'common/config'; +import { Badge } from 'common/flumens'; + +interface Props { + probability?: number; + className?: string; +} + +const ProbabilityBadge = ({ probability, className }: Props) => { + if (!probability) return null; + + const roundedProbability = (probability * 100).toFixed(); + + let color; + if (probability > CONFIG.POSITIVE_THRESHOLD) { + color = + 'border border-solid border-[color:var(--classifier-success)] text-[color:var(--classifier-success)] bg-[var(--classifier-success-background)]'; + } else if (probability > CONFIG.POSSIBLE_THRESHOLD) { + color = + 'border border-solid border-[color:var(--classifier-plausible)] bg-[var(--classifier-plausible-background)] text-[color:var(--classifier-plausible)]'; + } else { + color = + 'border border-solid border-[color:var(--classifier-unlikely)] bg-[var(--classifier-unlikely-background)] text-[color:var(--classifier-unlikely)]'; + } + + return ( + } + > + {roundedProbability}% + + ); +}; + +export default ProbabilityBadge; diff --git a/src/Survey/common/Components/ProbabilityBadge/index.tsx b/src/Survey/common/Components/ProbabilityBadge/index.tsx deleted file mode 100644 index 87c179f5..00000000 --- a/src/Survey/common/Components/ProbabilityBadge/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { camera } from 'ionicons/icons'; -import { IonLabel, IonIcon } from '@ionic/react'; -import CONFIG from 'common/config'; -import { Badge } from 'common/flumens'; -import './styles.scss'; - -interface Props { - probability?: number; -} - -const ProbabilityBadge = ({ probability }: Props) => { - if (!probability) return null; - - const roundedProbability = (probability * 100).toFixed(); - - let color; - if (probability > CONFIG.POSITIVE_THRESHOLD) { - color = 'success'; - } else if (probability > CONFIG.POSSIBLE_THRESHOLD) { - color = 'plausible'; - } else { - color = 'unlikely'; - } - - return ( - - - {roundedProbability}% - - ); -}; - -export default ProbabilityBadge; diff --git a/src/Survey/common/Components/ProbabilityBadge/styles.scss b/src/Survey/common/Components/ProbabilityBadge/styles.scss deleted file mode 100644 index 4981b194..00000000 --- a/src/Survey/common/Components/ProbabilityBadge/styles.scss +++ /dev/null @@ -1,35 +0,0 @@ -.badge { - display: inline-flex; - z-index: 900; - border-radius: 10px; - padding: 3px; - - ion-icon { - margin-right: 3px !important; - font-size: 1em !important; - } - - ion-label { - display: flex; - justify-content: revert; - align-items: center; - } - - &.badge-success { - border: 1px solid var(--classifier-success); - background: var(--classifier-success-background); - color: var(--classifier-success); - } - - &.badge-plausible { - border: 1px solid var(--classifier-plausible); - background: var(--classifier-plausible-background); - color: var(--classifier-plausible); - } - - &.badge-unlikely { - border: 1px solid var(--classifier-unlikely); - background: var(--classifier-unlikely-background); - color: var(--classifier-unlikely); - } -} diff --git a/src/common/theme.scss b/src/common/theme.scss index fbe325ac..a1307160 100644 --- a/src/common/theme.scss +++ b/src/common/theme.scss @@ -343,3 +343,11 @@ ion-item .sc-ion-label-ios-h.sc-ion-label-ios-s.ios { margin-top: 12px; margin-bottom: 12px; } + +// Unify menu lines with Tailwind package components +.date-input-attr ion-accordion:last-of-type ion-item[slot='header'], +.list-ios-lines-full ion-item.item-lines-default, +.list-md-lines-full ion-item.item-lines-default { + --border-width: 0 0 0.5px 0 !important; + --border-color: #e5e5e5 !important; +}