reset icon color

This commit is contained in:
CJ Pais 2025-08-11 15:09:39 -07:00
parent bc9617beb2
commit a252655b2f
2 changed files with 42 additions and 15 deletions

View file

@ -1,7 +1,36 @@
import React from "react";
const ResetIcon = () => {
interface ResetIconProps {
width?: number;
height?: number;
color?: string;
className?: string;
}
const ResetIcon: React.FC<ResetIconProps> = ({
width = 20,
height = 20,
className = "",
}) => {
return (
<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><g stroke="#de689e" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"><path d="m13.5 8.5h3v-3"/><path d="m13.775 14c-.7863.7419-1.7737 1.2356-2.8389 1.4196-1.06527.1839-2.16109.0498-3.15057-.3855s-1.82875-1.1525-2.41293-2.0621c-.58419-.9095-.88739-1.9711-.87172-3.05197.01567-1.08089.34952-2.13319.95982-3.02543.61031-.89224 1.47001-1.58485 2.4717-1.99129s2.1009-.50868 3.1604-.29396c1.0595.21473 2.0322.7369 2.7965 1.50127l2.6107 2.38938"/></g></svg>
<svg
width={width}
height={height}
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<g
stroke={"currentColor"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
>
<path d="m13.5 8.5h3v-3" />
<path d="m13.775 14c-.7863.7419-1.7737 1.2356-2.8389 1.4196-1.06527.1839-2.16109.0498-3.15057-.3855s-1.82875-1.1525-2.41293-2.0621c-.58419-.9095-.88739-1.9711-.87172-3.05197.01567-1.08089.34952-2.13319.95982-3.02543.61031-.89224 1.47001-1.58485 2.4717-1.99129s2.1009-.50868 3.1604-.29396c1.0595.21473 2.0322.7369 2.7965 1.50127l2.6107 2.38938" />
</g>
</svg>
);
};

View file

@ -7,16 +7,14 @@ interface ResetButtonProps {
className?: string;
}
export const ResetButton: React.FC<ResetButtonProps> = React.memo(({
onClick,
disabled = false,
className = ""
}) => (
<button
className={`p-1 hover:bg-logo-primary/30 active:bg-logo-primary/50 active:translate-y-[1px] rounded fill-text hover:cursor-pointer hover:border-logo-primary border border-transparent transition-all duration-150 ${className}`}
onClick={onClick}
disabled={disabled}
>
<ResetIcon />
</button>
));
export const ResetButton: React.FC<ResetButtonProps> = React.memo(
({ onClick, disabled = false, className = "" }) => (
<button
className={`p-1 hover:bg-logo-primary/30 active:bg-logo-primary/50 active:translate-y-[1px] rounded fill-text hover:cursor-pointer hover:border-logo-primary border border-transparent transition-all duration-150 text-text/80 ${className}`}
onClick={onClick}
disabled={disabled}
>
<ResetIcon />
</button>
),
);