Small theme tweaks

src/Survey/common/Components/PhotoPicker/ImageWithClassification/index.tsx

@@ -43,7 +43,10 @@ const Image = ({ media, isDisabled, onDelete, onClick }: Props) => {
       {showLoading && <IonSpinner slot="end" />}
 
       {!showLoading && hasBeenIdentified && selectedSpeciesMatch && (
-        <ProbabilityBadge probability={probability} />
+        <ProbabilityBadge
+          probability={probability}
+          className="absolute bottom-0 z-10 ml-1 rounded-lg"
+        />
       )}
 
       {!showLoading && hasBeenIdentified && !selectedSpeciesMatch && (

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;

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 (
+    <Badge
+      className={clsx(className, color)}
+      prefix={<IonIcon icon={camera} className="mr-[3px] text-[1em]" />}
+    >
+      {roundedProbability}%
+    </Badge>
+  );
+};
+
+export default ProbabilityBadge;

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;
+}