🎨 Add minor UI tweaks in Skeletons and other components (#1507)
This commit is contained in:
@@ -61,17 +61,17 @@ function UsersTable() {
|
||||
<Table.Root size={{ base: "sm", md: "md" }}>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{users?.map((user) => (
|
||||
<Table.Row key={user.id} opacity={isPlaceholderData ? 0.5 : 1}>
|
||||
<Table.Cell w="20%" color={!user.full_name ? "gray" : "inherit"}>
|
||||
<Table.Cell color={!user.full_name ? "gray" : "inherit"}>
|
||||
{user.full_name || "N/A"}
|
||||
{currentUser?.id === user.id && (
|
||||
<Badge ml="1" colorScheme="teal">
|
||||
@@ -79,14 +79,14 @@ function UsersTable() {
|
||||
</Badge>
|
||||
)}
|
||||
</Table.Cell>
|
||||
<Table.Cell w="25%">{user.email}</Table.Cell>
|
||||
<Table.Cell w="15%">
|
||||
<Table.Cell truncate maxW="sm">
|
||||
{user.email}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{user.is_superuser ? "Superuser" : "User"}
|
||||
</Table.Cell>
|
||||
<Table.Cell w="20%">
|
||||
{user.is_active ? "Active" : "Inactive"}
|
||||
</Table.Cell>
|
||||
<Table.Cell w="20%">
|
||||
<Table.Cell>{user.is_active ? "Active" : "Inactive"}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<UserActionsMenu
|
||||
user={user}
|
||||
disabled={currentUser?.id === user.id}
|
||||
|
@@ -85,19 +85,19 @@ function ItemsTable() {
|
||||
<Table.Root size={{ base: "sm", md: "md" }}>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{items?.map((item) => (
|
||||
<Table.Row key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
|
||||
<Table.Cell truncate maxW="30%">
|
||||
<Table.Cell truncate maxW="sm">
|
||||
{item.id}
|
||||
</Table.Cell>
|
||||
<Table.Cell truncate maxW="30%">
|
||||
<Table.Cell truncate maxW="sm">
|
||||
{item.title}
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
@@ -107,7 +107,7 @@ function ItemsTable() {
|
||||
>
|
||||
{item.description || "N/A"}
|
||||
</Table.Cell>
|
||||
<Table.Cell width="10%">
|
||||
<Table.Cell>
|
||||
<ItemActionsMenu item={item} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
|
Reference in New Issue
Block a user