One Calendar is a privacy-first calendar web app built with Next.js. It has modern security features, including e2ee, password-protected sharing, and self-destructing share links 📅
calendar.xyehr.cn
Update UserProfileButton.tsx
authored by
Evan Huang
and committed by
GitHub
a6c013b0
643c2ff0
+24
-18
+24
-18
components/UserProfileButton.tsx
+24
-18
components/UserProfileButton.tsx
···
664
664
</DropdownMenu>
665
665
666
666
{isUserProfileOpen && (
667
-
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
668
-
<div className="relative bg-background rounded-lg w-full max-w-2xl mx-4 overflow-auto max-h-[90vh]">
669
-
<button
667
+
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
668
+
<div className="relative w-full max-w-4xl bg-background rounded-lg overflow-hidden shadow-xl max-h-[90vh] flex flex-col">
669
+
<button
670
670
onClick={() => setIsUserProfileOpen(false)}
671
-
className="absolute top-4 right-4 p-1 rounded-full hover:bg-accent z-10"
671
+
className="absolute top-4 right-4 z-50 p-2 rounded-full hover:bg-accent transition-colors"
672
672
>
673
673
<X className="h-5 w-5" />
674
674
</button>
675
-
<div className="p-4">
676
-
<UserProfile
675
+
<div className="flex-1 overflow-auto p-1"> {/* 这里添加 p-1 修复白边问题 */}
676
+
<UserProfile
677
677
appearance={{
678
678
elements: {
679
-
rootBox: {
680
-
width: "100%",
681
-
margin: "0 auto",
682
-
},
683
-
card: {
684
-
width: "100%",
685
-
maxWidth: "100%",
686
-
boxShadow: "none",
687
-
},
688
-
scrollBox: {
689
-
padding: "0",
690
-
}
679
+
rootBox: "w-full h-full",
680
+
card: "w-full h-full shadow-none border-none rounded-none",
681
+
scrollBox: "p-0",
682
+
navbar: "border-none",
683
+
navbarButtons: "hidden", // 隐藏顶部导航按钮
684
+
headerTitle: "text-lg font-semibold",
685
+
headerSubtitle: "text-sm text-muted-foreground",
686
+
profileSection: "px-4",
687
+
formButtonPrimary: "bg-primary hover:bg-primary/90",
688
+
formFieldInput: "border-input",
689
+
},
690
+
variables: {
691
+
colorBackground: "hsl(var(--background))",
692
+
colorText: "hsl(var(--foreground))",
693
+
colorTextSecondary: "hsl(var(--muted-foreground))",
694
+
colorInputBackground: "hsl(var(--background))",
695
+
colorAlphaShade: "hsl(var(--primary))",
691
696
}
692
697
}}
698
+
path="/user-profile"
693
699
/>
694
700
</div>
695
701
</div>