Styling for all forms.

This commit is contained in:
Mike Cao 2025-07-12 13:20:32 -07:00
parent c98f324c22
commit 3650204519
28 changed files with 36 additions and 33 deletions

View file

@ -2,7 +2,7 @@ import esbuild from 'esbuild';
esbuild
.build({
entryPoints: ['src/generated/prisma/client.ts'], // Adjust this to your entry file
entryPoints: ['src/generated/prisma/client.js'], // Adjust this to your entry file
bundle: true, // Bundle all files into one (optional)
outfile: 'dist/generated/prisma/client.js', // Output file
platform: 'node', // For Node.js compatibility

View file

@ -45,7 +45,7 @@ export function AdminLayout({ children }: { children: ReactNode }) {
<SideMenu items={items} selectedKey={value} />
</Column>
<Column>
<Panel>{children}</Panel>
<Panel minHeight="300px">{children}</Panel>
</Column>
</Grid>
</Column>

View file

@ -46,7 +46,7 @@ export function AdminTeamsTable({
return (
<MenuButton>
<MenuItem href={`/admin/users/${id}`} data-test="link-button-edit">
<MenuItem href={`/admin/teams/${id}`} data-test="link-button-edit">
<Row alignItems="center" gap>
<Icon>
<Edit />

View file

@ -23,7 +23,7 @@ export function UserAddButton({ onSave }: { onSave?: () => void }) {
<Text>{formatMessage(labels.createUser)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.createUser)}>
<Dialog title={formatMessage(labels.createUser)} style={{ width: 400 }}>
{({ close }) => <UserAddForm onSave={handleSave} onClose={close} />}
</Dialog>
</Modal>

View file

@ -24,7 +24,7 @@ export function UserDeleteButton({
<Text>{formatMessage(labels.delete)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.deleteUser)}>
<Dialog title={formatMessage(labels.deleteUser)} style={{ width: 400 }}>
{({ close }) => (
<UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
)}

View file

@ -45,7 +45,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
};
return (
<Form onSubmit={handleSubmit} error={getMessage(error)} values={user} style={{ width: 300 }}>
<Form onSubmit={handleSubmit} error={getMessage(error)} values={user}>
<FormField name="username" label={formatMessage(labels.username)}>
<TextField data-test="input-username" />
</FormField>

View file

@ -19,7 +19,7 @@ export function UserSettings({ userId }: { userId: string }) {
<Tab id="details">{formatMessage(labels.details)}</Tab>
<Tab id="websites">{formatMessage(labels.websites)}</Tab>
</TabList>
<TabPanel id="details">
<TabPanel id="details" style={{ width: 500 }}>
<UserEditForm userId={userId} />
</TabPanel>
<TabPanel id="websites">

View file

@ -23,7 +23,7 @@ export function BoardAddButton() {
<Text>{formatMessage(labels.addBoard)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.addBoard)}>
<Dialog title={formatMessage(labels.addBoard)} style={{ width: 400 }}>
{({ close }) => <BoardAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
</Dialog>
</Modal>

View file

@ -29,7 +29,7 @@ export function PasswordChangeButton() {
<Text>{formatMessage(labels.changePassword)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.changePassword)}>
<Dialog title={formatMessage(labels.changePassword)} style={{ width: 400 }}>
{({ close }) => (
<Column width="300px">
<PasswordEditForm onSave={handleSave} onClose={close} />

View file

@ -25,7 +25,7 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
};
return (
<Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
<Form onSubmit={handleSubmit} error={error}>
<FormField name="name" label={formatMessage(labels.name)}>
<TextField autoComplete="off" />
</FormField>

View file

@ -25,7 +25,7 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
};
return (
<Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
<Form onSubmit={handleSubmit} error={error}>
<FormField
label={formatMessage(labels.accessCode)}
name="accessCode"

View file

@ -24,7 +24,7 @@ export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName
<Text>{formatMessage(labels.leave)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.leaveTeam)}>
<Dialog title={formatMessage(labels.leaveTeam)} style={{ width: 400 }}>
{({ close }) => (
<TeamLeaveForm
teamId={teamId}

View file

@ -24,7 +24,7 @@ export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
<Text>{formatMessage(labels.createTeam)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.createTeam)}>
<Dialog title={formatMessage(labels.createTeam)} style={{ width: 400 }}>
{({ close }) => <TeamAddForm onSave={handleSave} onClose={close} />}
</Dialog>
</Modal>

View file

@ -22,7 +22,7 @@ export function TeamsJoinButton() {
<Text>{formatMessage(labels.joinTeam)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.joinTeam)}>
<Dialog title={formatMessage(labels.joinTeam)} style={{ width: 400 }}>
{({ close }) => <TeamJoinForm onSave={handleJoin} onClose={close} />}
</Dialog>
</Modal>

View file

@ -41,7 +41,7 @@ export function TeamDetails({ teamId }: { teamId: string }) {
<Tab id="websites">{formatMessage(labels.websites)}</Tab>
{isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
</TabList>
<TabPanel id="details">
<TabPanel id="details" style={{ width: 500 }}>
<TeamEditForm teamId={teamId} allowEdit={canEdit} />
</TabPanel>
<TabPanel id="members">

View file

@ -45,7 +45,7 @@ export function TeamEditForm({
};
return (
<Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }} style={{ width: 400 }}>
<Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }}>
{({ setValue }) => {
return (
<>

View file

@ -22,7 +22,7 @@ export function TeamManage({ teamId }: { teamId: string }) {
<DialogTrigger>
<Button variant="danger">{formatMessage(labels.delete)}</Button>
<Modal>
<Dialog title={formatMessage(labels.deleteTeam)}>
<Dialog title={formatMessage(labels.deleteTeam)} style={{ width: 400 }}>
{({ close }) => <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />}
</Dialog>
</Modal>

View file

@ -34,7 +34,7 @@ export function TeamMemberEditButton({
</Row>
</Button>
<Modal>
<Dialog title={formatMessage(labels.editMember)}>
<Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
{({ close }) => (
<TeamMemberEditForm
teamId={teamId}

View file

@ -39,7 +39,7 @@ export function TeamMemberEditForm({
};
return (
<Form onSubmit={handleSubmit} error={error} defaultValues={{ role }} style={{ minWidth: 400 }}>
<Form onSubmit={handleSubmit} error={error} defaultValues={{ role }}>
<FormField
name="role"
rules={{ required: formatMessage(labels.required) }}

View file

@ -41,11 +41,11 @@ export function TeamMemberRemoveButton({
</Icon>
</Button>
<Modal>
<Dialog title={formatMessage(labels.removeMember)}>
<Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
{({ close }) => (
<ConfirmationForm
message={formatMessage(messages.confirmRemove, {
target: <b key={messages.confirmRemove.id}>{userName}</b>,
target: userName,
})}
isLoading={isPending}
error={error}

View file

@ -32,7 +32,7 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
<Text>{formatMessage(labels.addWebsite)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.addWebsite)}>
<Dialog title={formatMessage(labels.addWebsite)} style={{ width: 400 }}>
{({ close }) => (
<Column width="300px">
<WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />

View file

@ -56,7 +56,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
<DialogTrigger>
<Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
<Modal>
<Dialog title={formatMessage(labels.transferWebsite)}>
<Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
{({ close }) => (
<WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
)}
@ -72,7 +72,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
<DialogTrigger>
<Button>{formatMessage(labels.reset)}</Button>
<Modal>
<Dialog title={formatMessage(labels.resetWebsite)}>
<Dialog title={formatMessage(labels.resetWebsite)} style={{ width: 400 }}>
{({ close }) => (
<WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
)}
@ -90,7 +90,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
{formatMessage(labels.delete)}
</Button>
<Modal>
<Dialog title={formatMessage(labels.deleteWebsite)}>
<Dialog title={formatMessage(labels.deleteWebsite)} style={{ width: 400 }}>
{({ close }) => (
<WebsiteDeleteForm websiteId={websiteId} onSave={handleSave} onClose={close} />
)}

View file

@ -33,7 +33,7 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
};
return (
<Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 400 }}>
<Form onSubmit={handleSubmit} error={error} values={website}>
<FormField name="id" label={formatMessage(labels.websiteId)}>
<TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
</FormField>

View file

@ -37,13 +37,13 @@ export function WebsiteSettings({
<Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
<Tab id="manage">{formatMessage(labels.manage)}</Tab>
</TabList>
<TabPanel id="details">
<TabPanel id="details" style={{ width: 500 }}>
<WebsiteEditForm websiteId={websiteId} />
</TabPanel>
<TabPanel id="tracking">
<WebsiteTrackingCode websiteId={websiteId} />
</TabPanel>
<TabPanel id="share">
<TabPanel id="share" style={{ width: 500 }}>
<WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
</TabPanel>
<TabPanel id="manage">

View file

@ -42,7 +42,7 @@ const ShareButton = ({ websiteId, shareId }) => {
<Text>Share</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.share)} style={{ width: 600 }}>
<Dialog title={formatMessage(labels.share)} style={{ width: 400 }}>
{({ close }) => {
return <WebsiteShareForm websiteId={websiteId} shareId={shareId} onClose={close} />;
}}

View file

@ -43,7 +43,7 @@ const FieldsButton = ({ value, onChange }) => {
<Text>Fields</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.fields)}>
<Dialog title={formatMessage(labels.fields)} style={{ width: 400 }}>
{({ close }) => (
<FieldSelectForm selectedFields={value} onChange={onChange} onClose={close} />
)}

View file

@ -25,9 +25,7 @@ export function ConfirmationForm({
return (
<Form onSubmit={onConfirm} error={error}>
<Row marginY="4" gap="2">
{message}
</Row>
<Row marginY="4">{message}</Row>
<FormButtons>
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
<FormSubmitButton

View file

@ -5,6 +5,7 @@ import { useMessages, useNavigation } from '@/components/hooks';
import { Pager } from '@/components/common/Pager';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PageResult } from '@/lib/types';
import { Empty } from '@/components/common/Empty';
const DEFAULT_SEARCH_DELAY = 600;
@ -46,6 +47,10 @@ export function DataGrid({
[search],
);
if (data?.data?.length === 0) {
return <Empty />;
}
return (
<Column gap="4" minHeight="300px">
{allowSearch && (data || search) && (