From 0cfad81898e9b10fce5b91fa11b0c3936020cb3e Mon Sep 17 00:00:00 2001
From: Rizel Scarlett <rizel@squareup.com>
Date: Tue, 10 Jun 2025 18:44:43 -0400
Subject: [PATCH] Fix: Adding dark mode support for recipe modal (#2853)

---
 ui/desktop/src/components/RecipeExpandableInfo.tsx | 4 ++--
 ui/desktop/src/components/RecipeInfoModal.tsx      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/desktop/src/components/RecipeExpandableInfo.tsx b/ui/desktop/src/components/RecipeExpandableInfo.tsx
index 07083843..16212806 100644
--- a/ui/desktop/src/components/RecipeExpandableInfo.tsx
+++ b/ui/desktop/src/components/RecipeExpandableInfo.tsx
@@ -38,7 +38,7 @@ export default function RecipeExpandableInfo({
         </label>
       </div>
 
-      <div className="relative rounded-lg bg-white text-textStandard">
+      <div className="relative rounded-lg bg-bgApp text-textStandard">
         {infoValue && (
           <>
             <div
@@ -78,7 +78,7 @@ export default function RecipeExpandableInfo({
               onClick={() => setValueExpanded(!isValueExpanded)}
               aria-label={isValueExpanded ? 'Collapse content' : 'Expand content'}
               title={isValueExpanded ? 'Collapse' : 'Expand'}
-              className="bg-gray-100 hover:bg-gray-200 p-2 rounded text-black hover:text-blue-800 transition-colors"
+              className="bg-bgSubtle hover:bg-bgStandard p-2 rounded text-textStandard hover:text-textProminent transition-colors"
             >
               <ChevronDown
                 className={`w-6 h-6 transition-transform duration-300 ${
diff --git a/ui/desktop/src/components/RecipeInfoModal.tsx b/ui/desktop/src/components/RecipeInfoModal.tsx
index 48c63da3..fc418375 100644
--- a/ui/desktop/src/components/RecipeInfoModal.tsx
+++ b/ui/desktop/src/components/RecipeInfoModal.tsx
@@ -41,7 +41,7 @@ export default function RecipeInfoModal({
         <div className="flex flex-col flex-grow overflow-y-auto space-y-8">
           <textarea
             ref={textareaRef}
-            className="w-full flex-grow resize-none min-h-[300px] max-h-[calc(100vh-300px)] border border-borderSubtle rounded-lg p-3 text-textStandard focus:outline-none focus:ring-2 focus:border-borderSubtle"
+            className="w-full flex-grow resize-none min-h-[300px] max-h-[calc(100vh-300px)] border border-borderSubtle rounded-lg p-3 text-textStandard bg-bgApp focus:outline-none focus:ring-1 focus:ring-borderProminent focus:border-borderProminent"
             value={value}
             onChange={(e) => setValue(e.target.value)}
             placeholder={`Enter ${infoLabel.toLowerCase()}...`}