fix: donate side button motion

Signed-off-by: Innei <i@innei.in>

src/components/icons/user-heart.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react'
+
+export function RiUserHeartLine(props: SVGProps<SVGSVGElement>) {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="1em"
+ height="1em"
+ viewBox="0 0 24 24"
+ {...props}
+ >
+ <path
+ fill="currentColor"
+ d="m17.841 15.659l.176.177l.178-.177a2.25 2.25 0 1 1 3.182 3.182l-3.36 3.359l-3.358-3.359a2.25 2.25 0 1 1 3.182-3.182M12 14v2a6 6 0 0 0-6 6H4a8 8 0 0 1 7.75-7.996zm0-13c3.315 0 6 2.685 6 6a5.998 5.998 0 0 1-5.775 5.996L12 13c-3.315 0-6-2.685-6-6a5.998 5.998 0 0 1 5.775-5.996zm0 2C9.79 3 8 4.79 8 7s1.79 4 4 4s4-1.79 4-4s-1.79-4-4-4"
+ />
+ </svg>
+ )
+}

src/components/modules/shared/ActionAsideContainer.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { cloneElement, isValidElement } from 'react'
 import clsx from 'clsx'
 
 import { useViewport } from '~/atoms/hooks'
@@ -12,6 +13,11 @@ export const asideButtonStyles = {
 }
 
 export const ActionAsideIcon: Component = (props) => {
+ if (props.children && isValidElement(props.children))
+ return cloneElement(props.children, {
+ // @ts-ignore
+ className: clsxm(asideButtonStyles.base, props.className),
+ })
  return <i className={clsxm(asideButtonStyles.base, props.className)} />
 }
 export const ActionAsideContainer: Component = ({ className, children }) => {

src/components/modules/shared/AsideDonateButton.tsx

@@ -6,6 +6,7 @@ import type { HTMLMotionProps } from 'framer-motion'
 
 import { useIsMobile } from '~/atoms/hooks'
 import { ImpressionView } from '~/components/common/ImpressionTracker'
+import { RiUserHeartLine } from '~/components/icons/user-heart'
 import { MotionButtonBase } from '~/components/ui/button'
 import { DialogOverlay } from '~/components/ui/dialog/DialogOverlay'
 import { PresentSheet } from '~/components/ui/sheet'
@@ -103,7 +104,7 @@ const DonateButtonTop = () => {
  action={TrackerAction.Impression}
  >
  <DonateButtonInternal
- className="focus-visible:text-uk-brown-light focus-visible:!shadow-none"
+ className="text-red-400 focus-visible:!shadow-none"
  style={{
  position: 'fixed',
  left: buttonPos.x,
@@ -114,6 +115,9 @@ const DonateButtonTop = () => {
  onMouseLeave={() => {
  setOverlayShow(false)
  }}
+ exit={{
+ opacity: 0,
+ }}
  />
  </ImpressionView>
  )
@@ -135,7 +139,9 @@ const DonateButtonInternal: Component<HTMLMotionProps<'button'>> = ({
  }}
  {...props}
  >
- <ActionAsideIcon className="icon-[mingcute--teacup-line] hover:text-uk-brown-dark" />
+ <ActionAsideIcon className="hover:text-red-400">
+ <RiUserHeartLine />
+ </ActionAsideIcon>
  </MotionButtonBase>
  )
 }
@@ -145,9 +151,9 @@ const DonateContent = () => {
 
  return (
  <>
- <h2 className="mb-6 text-lg font-medium">
+ <m.h2 exit={{ opacity: 0 }} className="mb-6 text-lg font-medium">
  感谢您的支持，助力梦想继续前行。
- </h2>
+ </m.h2>
  <div className="flex flex-wrap gap-4 overflow-auto center">
  {donate?.qrcode.map((src) => (
  <m.img