ui: 缩小房间页卡片和操作按钮,适配小屏手机
This commit is contained in:
@@ -14,20 +14,20 @@ export default function ActionButtons({
|
|||||||
disabled,
|
disabled,
|
||||||
}: ActionButtonsProps) {
|
}: ActionButtonsProps) {
|
||||||
return (
|
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
|
<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 }}
|
whileTap={{ scale: 0.85 }}
|
||||||
whileHover={{ scale: 1.08 }}
|
whileHover={{ scale: 1.08 }}
|
||||||
onClick={() => onAction("left")}
|
onClick={() => onAction("left")}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
aria-label="Nope"
|
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>
|
||||||
|
|
||||||
<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 }}
|
whileTap={{ scale: 0.85 }}
|
||||||
whileHover={{ scale: 1.08 }}
|
whileHover={{ scale: 1.08 }}
|
||||||
onClick={() => onAction("right")}
|
onClick={() => onAction("right")}
|
||||||
@@ -35,7 +35,7 @@ export default function ActionButtons({
|
|||||||
aria-label="Like"
|
aria-label="Like"
|
||||||
>
|
>
|
||||||
<Heart
|
<Heart
|
||||||
size={28}
|
size={24}
|
||||||
className="fill-emerald-500 text-emerald-500"
|
className="fill-emerald-500 text-emerald-500"
|
||||||
strokeWidth={2.5}
|
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 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 && (
|
{currentIndex === 0 && !resolvedMatchId && guideVisible && (
|
||||||
<SwipeGuide onDismiss={() => setGuideVisible(false)} />
|
<SwipeGuide onDismiss={() => setGuideVisible(false)} />
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user