From 593e3fa770013927cb9bae72ab8780c239905468 Mon Sep 17 00:00:00 2001 From: Fabrice Francois Date: Tue, 23 Jan 2024 09:49:03 -0500 Subject: [PATCH] Fix: Toggle hover shadow styling (#66) --- CHANGELOG.md | 3 ++- src/components/toggles/toggle/toggle.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f8e18f474..5b18268b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Minimum `tailwindcss` version required - Fix disabled input style on Firefox -- Max Length on inputs is restyle, only shows if no alert +- Max Length on inputs is restyled and only shows if no alert +- Fix `Toggle` component shadow styling ### Added diff --git a/src/components/toggles/toggle/toggle.tsx b/src/components/toggles/toggle/toggle.tsx index 8881449c8..78732bd90 100644 --- a/src/components/toggles/toggle/toggle.tsx +++ b/src/components/toggles/toggle/toggle.tsx @@ -24,7 +24,7 @@ export const Toggle: React.FC = (props) => { const toggleClasses = classNames( 'flex h-10 items-center rounded-[40px] border border-neutral-100 px-4', // Default 'focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset', // Focus state - 'hover:enabled:border-neutral-200 hover:enabled:shadow-primary-md', // Hover state + 'hover:enabled:border-neutral-200 hover:enabled:shadow-neutral', // Hover state 'data-[state=off]:enabled:bg-neutral-0 data-[state=off]:enabled:text-neutral-600', // Default state 'data-[state=on]:enabled:bg-neutral-100 data-[state=on]:enabled:text-neutral-800', // Active state 'disabled:bg-neutral-100 disabled:text-neutral-300', // Disabled state