From 45f2f63dff15e371cf522c282451ecec742340ad Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:31:09 -0600
Subject: [PATCH] MOB-512: resuse match card classes

---
 src/components/Match/Match.js                      | 12 ++++++------
 .../SavedMatch/SavedMatch.tsx                      | 14 +++-----------
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/components/Match/Match.js b/src/components/Match/Match.js
index 5f26c9626..bf05944b7 100644
--- a/src/components/Match/Match.js
+++ b/src/components/Match/Match.js
@@ -19,9 +19,9 @@ import MatchHeader from "./MatchHeader";
 import PhotosSection from "./PhotosSection";
 import SaveDiscardButtons from "./SaveDiscardButtons";
 
-const cardClassTop
+export const matchCardClassTop
   = "rounded-t-2xl border-lightGray border-[2px] py-[18px] px-5 border-b-0 -mb-0.5";
-const cardClassBottom
+export const matchCardClassBottom
   = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mt-0.5 mb-[30px]";
 
 type Props = {
@@ -66,7 +66,7 @@ const Match = ( {
     return (
       <>
         <ScrollViewWrapper scrollRef={scrollRef}>
-          <View className={cardClassTop}>
+          <View className={matchCardClassTop}>
             {
               suggestionsLoading
                 ? (
@@ -127,7 +127,7 @@ const Match = ( {
     return (
       <>
         <ScrollViewWrapper scrollRef={scrollRef}>
-          <View className={cardClassTop}>
+          <View className={matchCardClassTop}>
             {
               suggestionsLoading
                 ? (
@@ -177,7 +177,7 @@ const Match = ( {
   return (
     <>
       <ScrollViewWrapper scrollRef={scrollRef}>
-        <View className={cardClassTop}>
+        <View className={matchCardClassTop}>
           {
             suggestionsLoading
               ? (
@@ -207,7 +207,7 @@ const Match = ( {
           belongsToCurrentUser
           observation={observation}
         />
-        <View className={cardClassBottom} />
+        <View className={matchCardClassBottom} />
         {
           isConnected && (
             <Button
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
index c3f2f3a93..06c529e5b 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -1,4 +1,5 @@
 import { useNetInfo } from "@react-native-community/netinfo";
+import { matchCardClassBottom, matchCardClassTop } from "components/Match/Match";
 import MatchHeader from "components/Match/MatchHeader";
 import PhotosSection from "components/Match/PhotosSection";
 import LocationSection from "components/ObsDetailsDefaultMode/LocationSection/LocationSection";
@@ -12,11 +13,6 @@ import { useTranslation } from "sharedHooks";
 
 import SavedMatchHeaderRight from "./SavedMatchHeaderRight";
 
-const cardClassTop
-  = "rounded-t-2xl border-lightGray border-[2px] py-[18px] px-5 border-b-0 -mb-0.5";
-const cardClassBottom
-  = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mt-0.5 mb-[30px]";
-
 type Props = {
   observation: RealmObservation,
   navToTaxonDetails: ( ) => void,
@@ -32,14 +28,10 @@ const SavedMatch = ( {
   const latitude = observation?.privateLatitude || observation?.latitude;
   const { taxon } = observation;
 
-  /*
-    todo: globalize class strings and maybe some of the resused container functions
-  */
-
   return (
     <ScrollViewWrapper>
       <SavedMatchHeaderRight uuid={observation.uuid} />
-      <View className={cardClassTop}>
+      <View className={matchCardClassTop}>
         <MatchHeader hideObservationStatus topSuggestion={observation} />
       </View>
       <PhotosSection
@@ -56,7 +48,7 @@ const SavedMatch = ( {
         belongsToCurrentUser
         observation={observation}
       />
-      <View className={cardClassBottom} />
+      <View className={matchCardClassBottom} />
       {
         isConnected && (
           <Button