ui: 缩小房间页卡片和操作按钮,适配小屏手机
This commit is contained in:
@@ -14,20 +14,20 @@ export default function ActionButtons({
|
||||
disabled,
|
||||
}: ActionButtonsProps) {
|
||||
return (
|
||||
<div className="relative z-10 flex items-center justify-center gap-8 pb-8 pt-4">
|
||||
<div className="relative z-10 flex items-center justify-center gap-6 pb-5 pt-3">
|
||||
<motion.button
|
||||
className="flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40"
|
||||
className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40"
|
||||
whileTap={{ scale: 0.85 }}
|
||||
whileHover={{ scale: 1.08 }}
|
||||
onClick={() => onAction("left")}
|
||||
disabled={disabled}
|
||||
aria-label="Nope"
|
||||
>
|
||||
<X size={30} className="text-rose-500" strokeWidth={3} />
|
||||
<X size={26} className="text-rose-500" strokeWidth={3} />
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
className="flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg shadow-emerald-200/50 ring-1 ring-emerald-100 disabled:opacity-40"
|
||||
className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-emerald-200/50 ring-1 ring-emerald-100 disabled:opacity-40"
|
||||
whileTap={{ scale: 0.85 }}
|
||||
whileHover={{ scale: 1.08 }}
|
||||
onClick={() => onAction("right")}
|
||||
@@ -35,7 +35,7 @@ export default function ActionButtons({
|
||||
aria-label="Like"
|
||||
>
|
||||
<Heart
|
||||
size={28}
|
||||
size={24}
|
||||
className="fill-emerald-500 text-emerald-500"
|
||||
strokeWidth={2.5}
|
||||
/>
|
||||
|
||||
@@ -359,7 +359,7 @@ export default function SwipeDeck({
|
||||
)}
|
||||
|
||||
<div className="relative flex flex-1 items-center justify-center px-4">
|
||||
<div className="relative h-[70vh] w-full max-w-sm">
|
||||
<div className="relative h-[60vh] w-full max-w-sm">
|
||||
{currentIndex === 0 && !resolvedMatchId && guideVisible && (
|
||||
<SwipeGuide onDismiss={() => setGuideVisible(false)} />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user