diff --git a/src/components/primitives/LabeledIcon.tsx b/src/components/primitives/LabeledIcon.tsx index 595a17e5..dc3e0590 100644 --- a/src/components/primitives/LabeledIcon.tsx +++ b/src/components/primitives/LabeledIcon.tsx @@ -29,7 +29,7 @@ export default function LabeledIcon({ }) { return ( diff --git a/src/recipe/PhotoRecipe.tsx b/src/recipe/PhotoRecipe.tsx index 45897283..224d0dc1 100644 --- a/src/recipe/PhotoRecipe.tsx +++ b/src/recipe/PhotoRecipe.tsx @@ -30,9 +30,7 @@ export default function PhotoRecipe({ icon={} action={toggleRecipeOverlay && diff --git a/src/recipe/PhotoRecipeOverlay.tsx b/src/recipe/PhotoRecipeOverlay.tsx index 855af3e3..a39a71e2 100644 --- a/src/recipe/PhotoRecipeOverlay.tsx +++ b/src/recipe/PhotoRecipeOverlay.tsx @@ -17,7 +17,6 @@ import { } from '.'; import { TbChecklist } from 'react-icons/tb'; import CopyButton from '@/components/CopyButton'; -import { labelForFilm } from '@/film'; import PhotoRecipe from './PhotoRecipe'; import { useAppText } from '@/i18n/state/client'; @@ -107,16 +106,17 @@ export default function PhotoRecipeOverlay({ // Soften shadow to mimic : 'shadow-2xl/20 dark:shadow-2xl/100', 'text-[13.5px] text-black', - 'bg-white/70 border border-neutral-200/30', + 'bg-white/70 outline outline-neutral-400/15', 'backdrop-blur-xl saturate-[300%]', )} >
{title @@ -160,12 +160,15 @@ export default function PhotoRecipeOverlay({
{renderDataSquare(
- {labelForFilm(film).medium.toLocaleUpperCase()}
, undefined, diff --git a/src/recipe/PhotoRecipeOverlayButton.tsx b/src/recipe/PhotoRecipeOverlayButton.tsx index 02792a0c..b4b00f75 100644 --- a/src/recipe/PhotoRecipeOverlayButton.tsx +++ b/src/recipe/PhotoRecipeOverlayButton.tsx @@ -29,9 +29,9 @@ export default function PhotoRecipeOverlayButton({ ref.current?.blur(); }} className={clsx( - 'text-medium', - 'rounded-md shadow-none', - 'border-[1.5px] border-medium', + 'text-medium hover:text-main', + 'bg-dim hover:bg-medium active:bg-dim', + 'rounded-md border-transparent shadow-none', 'p-0 inline-flex items-center justify-center', 'size-[17px] sm:size-5', 'hover:bg-extra-dim active:bg-dim', diff --git a/tailwind.css b/tailwind.css index ac1375cd..ef47229a 100644 --- a/tailwind.css +++ b/tailwind.css @@ -167,11 +167,11 @@ html { } @utility bg-medium { @apply - bg-gray-200 dark:bg-gray-700 + bg-gray-200 dark:bg-gray-700/65 } @utility bg-dim { @apply - bg-gray-100 dark:bg-gray-900/75 + bg-gray-100 dark:bg-gray-800/70 } @utility bg-extra-dim { @apply