admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

bugfix: some minor ui updates for invitation history dialog.

Browse Source
This commit is contained in:
Admin
2026-05-17 01:39:49 +03:30
parent 2d43254af2
commit 201be53ddd
5 changed files with 68 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/app/(dashboard)/staff/page.tsx
View File

@@ -17,6 +17,7 @@ import {
type FeaturePermState,
} from '../../../components/staff/staff-permission-form';
import { Pencil, Trash2, Copy, Check, X } from 'lucide-react';
import { DialogCloseButton } from '@/components/ui/common/DialogCloseButton';
import { useAuth } from '@/lib/hooks/useAuth';
import { staffApi, type StaffMemberDto } from '@/lib/api/staff';
import { Button } from '@/components/ui/common/Button';
@@ -603,9 +604,12 @@ export default function StaffPage() {
aria-modal="true"
aria-labelledby="invite-staff-title"
>
<h2 id="invite-staff-title" className="text-lg font-semibold text-text-primary">
Invite team member
</h2>
<div className="flex items-start justify-between gap-3">
<h2 id="invite-staff-title" className="text-lg font-semibold text-text-primary pr-2">
Invite team member
</h2>
<DialogCloseButton onClick={() => setInviteOpen(false)} />
</div>
<Input
label="Email"
type="email"
@@ -650,7 +654,10 @@ export default function StaffPage() {
role="dialog"
aria-modal="true"
>
<h2 className="text-lg font-semibold text-text-primary">Edit member</h2>
<div className="flex items-start justify-between gap-3">
<h2 className="text-lg font-semibold text-text-primary pr-2">Edit member</h2>
<DialogCloseButton onClick={() => setEditing(null)} />
</div>
<p className="text-xs text-text-muted">{editing.email}</p>
<Input label="Display name" value={editName} onChange={(e) => setEditName(e.target.value)} />
<div>

11
frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
View File

@@ -1,8 +1,8 @@
'use client';
import { useEffect, useState } from 'react';
import { X } from 'lucide-react';
import { Button } from '@/components/ui/common/Button';
import { DialogCloseButton } from '@/components/ui/common/DialogCloseButton';
import { Dropdown } from '@/components/ui/common/Dropdown';
import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
import { APPOINTMENT_PURPOSE_LABEL } from '@/components/ui/appointments/appointmentPurposeStyles';
@@ -161,14 +161,7 @@ export function AppointmentBookingModal({
<h2 id="appointment-modal-title" className="text-lg font-semibold text-text-primary pr-2">
{editingAppointment ? 'Edit appointment' : 'New appointment'}
</h2>
<button
type="button"
onClick={onClose}
className="rounded-[var(--radius-sm)] p-1.5 text-text-muted hover:text-text-primary hover:bg-background-secondary/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
aria-label="Close"
>
<X className="h-5 w-5 icon-flat" />
</button>
<DialogCloseButton onClick={onClose} />
</div>
<p className="text-sm text-text-secondary">

21
frontend/src/components/ui/common/DialogCloseButton.tsx Normal file
View File

@@ -0,0 +1,21 @@
'use client';
import { X } from 'lucide-react';
type DialogCloseButtonProps = {
onClick: () => void;
className?: string;
};
export function DialogCloseButton({ onClick, className = '' }: DialogCloseButtonProps) {
return (
<button
type="button"
onClick={onClick}
className={`shrink-0 rounded-[var(--radius-sm)] p-1.5 text-text-muted hover:text-text-primary hover:bg-background-secondary/80 focus:outline-none focus:ring-2 focus:ring-primary/35 ${className}`}
aria-label="Close"
>
<X className="h-5 w-5 icon-flat" />
</button>
);
}

12
frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
View File

@@ -1,10 +1,10 @@
'use client';
import { Check, Copy } from 'lucide-react';
import { DialogCloseButton } from '@/components/ui/common/DialogCloseButton';
import type { OrganizationInvitationHistoryItemDto } from '@/lib/api/organization';
import { canShareOrganizationInviteLink } from '@/components/invitations/organizationInviteLinks';
import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
import { Button } from '@/components/ui/common/Button';
import { Table } from '@/components/ui/common/Table';
function formatInvitationStatusLabel(status: OrganizationInvitationHistoryItemDto['status']): string {
@@ -49,18 +49,16 @@ export function InvitationHistoryDialog({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
<div
className="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
className="w-full max-w-[min(56rem,calc(100vw-17rem))] max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
role="dialog"
aria-modal="true"
aria-labelledby="invitation-history-title"
>
<div className="flex items-center justify-between gap-3">
<h2 id="invitation-history-title" className="text-lg font-semibold text-text-primary">
<div className="flex items-start justify-between gap-3">
<h2 id="invitation-history-title" className="text-lg font-semibold text-text-primary pr-2">
Invitation History
</h2>
<Button type="button" size="sm" onClick={onClose}>
Close
</Button>
<DialogCloseButton onClick={onClose} />
</div>
{copyError && (

53
frontend/src/styles/globals.css
View File

@@ -81,18 +81,18 @@
--color-card-muted: #b6c6dd;
--color-card-border: #29456a;
--color-badge-default-bg: #1b2f4e;
--color-badge-default-fg: #b6c6dd;
--color-badge-default-border: #3b5f8f;
--color-badge-success-bg: rgba(6, 78, 59, 0.45);
--color-badge-success-fg: #86efac;
--color-badge-success-border: rgba(21, 128, 61, 0.5);
--color-badge-warning-bg: rgba(120, 53, 15, 0.48);
--color-badge-warning-fg: #fcd34d;
--color-badge-warning-border: rgba(180, 83, 9, 0.55);
--color-badge-danger-bg: rgba(127, 29, 29, 0.42);
--color-badge-danger-fg: #fca5a5;
--color-badge-danger-border: rgba(185, 28, 28, 0.52);
--color-badge-default-bg: rgba(27, 47, 78, 0.32);
--color-badge-default-fg: #9eb1cb;
--color-badge-default-border: rgba(59, 95, 143, 0.32);
--color-badge-success-bg: rgba(6, 78, 59, 0.22);
--color-badge-success-fg: #7dd3a8;
--color-badge-success-border: rgba(34, 100, 68, 0.28);
--color-badge-warning-bg: rgba(120, 53, 15, 0.22);
--color-badge-warning-fg: #dfc06a;
--color-badge-warning-border: rgba(146, 88, 20, 0.28);
--color-badge-danger-bg: rgba(127, 29, 29, 0.22);
--color-badge-danger-fg: #e4a6a6;
--color-badge-danger-border: rgba(153, 50, 50, 0.28);
--color-purpose-consultation-bg: rgba(139, 92, 246, 0.25);
--color-purpose-consultation-fg: #ddd6fe;
@@ -139,18 +139,18 @@
--color-card-muted: #b6c6dd;
--color-card-border: #29456a;
--color-badge-default-bg: #1b2f4e;
--color-badge-default-fg: #b6c6dd;
--color-badge-default-border: #3b5f8f;
--color-badge-success-bg: rgba(6, 78, 59, 0.45);
--color-badge-success-fg: #86efac;
--color-badge-success-border: rgba(21, 128, 61, 0.5);
--color-badge-warning-bg: rgba(120, 53, 15, 0.48);
--color-badge-warning-fg: #fcd34d;
--color-badge-warning-border: rgba(180, 83, 9, 0.55);
--color-badge-danger-bg: rgba(127, 29, 29, 0.42);
--color-badge-danger-fg: #fca5a5;
--color-badge-danger-border: rgba(185, 28, 28, 0.52);
--color-badge-default-bg: rgba(27, 47, 78, 0.32);
--color-badge-default-fg: #9eb1cb;
--color-badge-default-border: rgba(59, 95, 143, 0.32);
--color-badge-success-bg: rgba(6, 78, 59, 0.22);
--color-badge-success-fg: #7dd3a8;
--color-badge-success-border: rgba(34, 100, 68, 0.28);
--color-badge-warning-bg: rgba(120, 53, 15, 0.22);
--color-badge-warning-fg: #dfc06a;
--color-badge-warning-border: rgba(146, 88, 20, 0.28);
--color-badge-danger-bg: rgba(127, 29, 29, 0.22);
--color-badge-danger-fg: #e4a6a6;
--color-badge-danger-border: rgba(153, 50, 50, 0.28);
--color-purpose-consultation-bg: rgba(139, 92, 246, 0.25);
--color-purpose-consultation-fg: #ddd6fe;
@@ -254,6 +254,11 @@ body {
border-radius: var(--radius-lg);
}
:root[data-theme='dark'] .surface-card,
:root:not([data-theme='light']) .surface-card {
background: color-mix(in srgb, var(--color-card-background) 82%, var(--color-background-primary));
}
.surface-panel {
background: color-mix(in srgb, var(--color-background-secondary) 96%, transparent);
border: 1px solid var(--color-border);