usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-10-30 00:06:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix: dialog styles

Browse source
This commit is contained in:
Steven 2025-07-09 21:48:02 +08:00
parent e8862e3ca9
commit 29b683d5db
2 changed files with 10 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/components/UpdateCustomizedProfileDialog.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react";
import { toast } from "react-hot-toast";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
@ -113,7 +113,7 @@ export function UpdateCustomizedProfileDialog({ open, onOpenChange, onSuccess }:
<DialogDescription>Customize your workspace appearance and settings.</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="server-name">{t("setting.system-section.server-name")}</Label>
<Input id="server-name" type="text" value={customProfile.title} onChange={handleNameChanged} placeholder="Enter server name" />
@ -146,20 +146,19 @@ export function UpdateCustomizedProfileDialog({ open, onOpenChange, onSuccess }:
</div>
</div>
<div className="flex items-center justify-between pt-4">
<Button variant="outline" onClick={handleRestoreButtonClick} disabled={isLoading}>
<DialogFooter className="flex-col sm:flex-row sm:justify-between gap-2">
<Button variant="outline" onClick={handleRestoreButtonClick} disabled={isLoading} className="sm:mr-auto">
{t("common.restore")}
</Button>
<div className="flex gap-2">
<Button variant="ghost" onClick={handleCloseButtonClick} disabled={isLoading}>
<div className="flex gap-2 w-full sm:w-auto">
<Button variant="ghost" onClick={handleCloseButtonClick} disabled={isLoading} className="flex-1 sm:flex-initial">
{t("common.cancel")}
</Button>
<Button onClick={handleSaveButtonClick} disabled={isLoading}>
<Button onClick={handleSaveButtonClick} disabled={isLoading} className="flex-1 sm:flex-initial">
{isLoading ? "Saving..." : t("common.save")}
</Button>
</div>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
);

4
web/src/components/ui/dialog.tsx
View file

@ -45,7 +45,7 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
* - full: Takes available width with margins
*/
const dialogContentVariants = cva(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border shadow-lg duration-200",
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-3rem)] md:max-h-[calc(100vh-4rem)]",
{
variants: {
size: {
@ -75,7 +75,7 @@ const DialogContent = React.forwardRef<
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content ref={ref} className={cn(dialogContentVariants({ size }), className)} {...props}>
{children}
<div className="overflow-y-auto overflow-x-hidden flex-1 flex flex-col gap-4">{children}</div>
{showCloseButton && (
<DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
<XIcon />