Fix: Adding dark mode support for recipe modal (#2853)

This commit is contained in:
Rizel Scarlett
2025-06-10 18:44:43 -04:00
committed by GitHub
parent 511c18f600
commit 0cfad81898
2 changed files with 3 additions and 3 deletions

View File

@@ -38,7 +38,7 @@ export default function RecipeExpandableInfo({
</label> </label>
</div> </div>
<div className="relative rounded-lg bg-white text-textStandard"> <div className="relative rounded-lg bg-bgApp text-textStandard">
{infoValue && ( {infoValue && (
<> <>
<div <div
@@ -78,7 +78,7 @@ export default function RecipeExpandableInfo({
onClick={() => setValueExpanded(!isValueExpanded)} onClick={() => setValueExpanded(!isValueExpanded)}
aria-label={isValueExpanded ? 'Collapse content' : 'Expand content'} aria-label={isValueExpanded ? 'Collapse content' : 'Expand content'}
title={isValueExpanded ? 'Collapse' : 'Expand'} 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 <ChevronDown
className={`w-6 h-6 transition-transform duration-300 ${ className={`w-6 h-6 transition-transform duration-300 ${

View File

@@ -41,7 +41,7 @@ export default function RecipeInfoModal({
<div className="flex flex-col flex-grow overflow-y-auto space-y-8"> <div className="flex flex-col flex-grow overflow-y-auto space-y-8">
<textarea <textarea
ref={textareaRef} 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} value={value}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
placeholder={`Enter ${infoLabel.toLowerCase()}...`} placeholder={`Enter ${infoLabel.toLowerCase()}...`}