danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: eye toggle dark theme

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-21 17:24:49 +03:30
parent 1bc9bc1a68
commit d11c11b3b6
1 changed files with 99 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/icons/EyeToggleIcon.tsx
+99 -83
View File
@@ -1,91 +1,107 @@
import { motion, Variants } from "framer-motion";
import React from "react";
import { motion, Variants } from 'framer-motion'
import React from 'react'
type EyeToggleIconProps = {
slash: boolean;
} & React.SVGProps<SVGSVGElement>;
slash: boolean
} & React.SVGProps<SVGSVGElement>
export const EyeToggleIcon: React.FC<EyeToggleIconProps> = ({ slash, ...props }) => {
const slashVariants: Variants = {
enter: {
pathLength: 1,
opacity: 1,
pathOffset: 0,
transition: {
pathOffset: { duration: 0 },
pathLength: { duration: 0.3, ease: "easeInOut" },
opacity: { duration: 0.2, ease: "easeInOut", delay: 0 }
}
},
exit: {
pathLength: 0,
opacity: 0,
pathOffset: 2,
transition: {
pathOffset: { duration: 0 },
pathLength: { duration: 0.3, ease: "easeInOut" },
opacity: { duration: 0.2, ease: "easeInOut", delay: .1 }
}
},
export const EyeToggleIcon: React.FC<EyeToggleIconProps> = ({
slash,
...props
}) => {
const slashVariants: Variants = {
enter: {
pathLength: 1,
opacity: 1,
pathOffset: 0,
transition: {
pathOffset: { duration: 0 },
pathLength: { duration: 0.3, ease: 'easeInOut' },
opacity: { duration: 0.2, ease: 'easeInOut', delay: 0 }
}
},
exit: {
pathLength: 0,
opacity: 0,
pathOffset: 2,
transition: {
pathOffset: { duration: 0 },
pathLength: { duration: 0.3, ease: 'easeInOut' },
opacity: { duration: 0.2, ease: 'easeInOut', delay: 0.1 }
}
}
}
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
return (
<svg
width='20'
height='20'
viewBox='0 0 20 20'
fill='none'
xmlns='http://www.w3.org/2000/svg'
{...props}
>
<defs>
<filter
id='whiteShadow'
x='-50%'
y='-50%'
width='200%'
height='200%'
colorInterpolationFilters='sRGB'
>
<defs>
<filter id="whiteShadow" x="-50%" y="-50%" width="200%" height="200%" colorInterpolationFilters="sRGB" >
<feDropShadow dx="1.5" dy="0" stdDeviation="0" floodColor="white" floodOpacity="1" />
</filter>
</defs>
{/* Eye Circle */}
<path
d="M12.9833 9.99994C12.9833 11.6499 11.6499 12.9833 9.99994 12.9833C8.34993 12.9833 7.0166 11.6499 7.0166 9.99994C7.0166 8.34993 8.34993 7.0166 9.99994 7.0166C11.6499 7.0166 12.9833 8.34993 12.9833 9.99994Z"
stroke="currentColor"
strokeWidth="1.2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<feDropShadow
dx='1.5'
dy='0'
stdDeviation='0'
floodColor='white'
floodOpacity='1'
/>
</filter>
</defs>
{/* Eye Circle */}
<path
d='M12.9833 9.99994C12.9833 11.6499 11.6499 12.9833 9.99994 12.9833C8.34993 12.9833 7.0166 11.6499 7.0166 9.99994C7.0166 8.34993 8.34993 7.0166 9.99994 7.0166C11.6499 7.0166 12.9833 8.34993 12.9833 9.99994Z'
stroke='currentColor'
strokeWidth='1.2'
strokeLinecap='round'
strokeLinejoin='round'
/>
{/* Eye Outline */}
<path
d="M10.0001 16.8918C12.9418 16.8918 15.6834 15.1584 17.5918 12.1584C18.3418 10.9834 18.3418 9.00843 17.5918 7.83343C15.6834 4.83343 12.9418 3.1001 10.0001 3.1001C7.05845 3.1001 4.31678 4.83343 2.40845 7.83343C1.65845 9.00843 1.65845 10.9834 2.40845 12.1584C4.31678 15.1584 7.05845 16.8918 10.0001 16.8918Z"
stroke="currentColor"
strokeWidth="1.2"
strokeLinecap="round"
strokeLinejoin="round"
/>
{/* Eye Outline */}
<path
d='M10.0001 16.8918C12.9418 16.8918 15.6834 15.1584 17.5918 12.1584C18.3418 10.9834 18.3418 9.00843 17.5918 7.83343C15.6834 4.83343 12.9418 3.1001 10.0001 3.1001C7.05845 3.1001 4.31678 4.83343 2.40845 7.83343C1.65845 9.00843 1.65845 10.9834 2.40845 12.1584C4.31678 15.1584 7.05845 16.8918 10.0001 16.8918Z'
stroke='currentColor'
strokeWidth='1.2'
strokeLinecap='round'
strokeLinejoin='round'
/>
{/* Slash Line - Animate with Framer Motion */}
<motion.path
d="M19.6 1.66675L1.66699 19.6"
stroke="currentColor"
className='dark:stroke-container'
strokeWidth="1.2"
strokeLinecap="round"
strokeLinejoin="round"
initial={false}
animate={{ strokeWidth: slash ? 0 : 2, opacity: slash ? 0 : 1 }}
transition={{
strokeWidth: { duration: 0.2, ease: "easeInOut" },
opacity: { duration: 0.1, ease: "easeInOut", delay: slash ? 0.1 : 0 }
}}
/>
<motion.path
d="M18.3332 1.66675L1.66699 18.3334"
stroke="currentColor"
strokeWidth="1.2"
strokeLinecap="round"
strokeLinejoin="round"
initial={false}
variants={slashVariants}
animate={slash ? 'exit' : 'enter'}
/>
</svg>
);
};
{/* Slash Line - Animate with Framer Motion */}
<motion.path
d='M19.6 1.66675L1.66699 19.6'
stroke='currentColor'
className='stroke-container'
strokeWidth='1.2'
strokeLinecap='round'
strokeLinejoin='round'
initial={false}
animate={{ strokeWidth: slash ? 0 : 2, opacity: slash ? 0 : 1 }}
transition={{
strokeWidth: { duration: 0.2, ease: 'easeInOut' },
opacity: { duration: 0.1, ease: 'easeInOut', delay: slash ? 0.1 : 0 }
}}
/>
<motion.path
d='M18.3332 1.66675L1.66699 18.3334'
stroke='currentColor'
strokeWidth='1.2'
strokeLinecap='round'
strokeLinejoin='round'
initial={false}
variants={slashVariants}
animate={slash ? 'exit' : 'enter'}
/>
</svg>
)
}