🎨 Add minor UI tweaks in Skeletons and other components (#1507)
This commit is contained in:
@@ -19,12 +19,7 @@ const UserMenu = () => {
|
||||
<Flex>
|
||||
<MenuRoot>
|
||||
<MenuTrigger asChild p={2}>
|
||||
<Button
|
||||
data-testid="user-menu"
|
||||
variant="solid"
|
||||
maxW="150px"
|
||||
truncate
|
||||
>
|
||||
<Button data-testid="user-menu" variant="solid" maxW="sm" truncate>
|
||||
<FaUserAstronaut fontSize="18" />
|
||||
<Text>{user?.full_name || "User"}</Text>
|
||||
</Button>
|
||||
|
||||
@@ -1,29 +1,30 @@
|
||||
import { Skeleton, Table } from "@chakra-ui/react"
|
||||
import { Table } from "@chakra-ui/react"
|
||||
import { SkeletonText } from "../ui/skeleton"
|
||||
|
||||
const PendingItems = () => (
|
||||
<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>
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<Table.Row key={index}>
|
||||
<Table.Cell>
|
||||
<Skeleton h="20px" />
|
||||
<SkeletonText noOfLines={1} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Skeleton h="20px" />
|
||||
<SkeletonText noOfLines={1} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Skeleton h="20px" />
|
||||
<SkeletonText noOfLines={1} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Skeleton h="20px" />
|
||||
<SkeletonText noOfLines={1} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
|
||||
@@ -1,33 +1,34 @@
|
||||
import { Skeleton, Table } from "@chakra-ui/react"
|
||||
import { Table } from "@chakra-ui/react"
|
||||
import { SkeletonText } from "../ui/skeleton"
|
||||
|
||||
const PendingUsers = () => (
|
||||
<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>
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<Table.Row key={index}>
|
||||
<Table.Cell>
|
||||
<Skeleton h="20px" />
|
||||
<SkeletonText noOfLines={1} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Skeleton h="20px" />
|
||||
<SkeletonText noOfLines={1} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Skeleton h="20px" />
|
||||
<SkeletonText noOfLines={1} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Skeleton h="20px" />
|
||||
<SkeletonText noOfLines={1} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Skeleton h="20px" />
|
||||
<SkeletonText noOfLines={1} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
|
||||
@@ -47,10 +47,7 @@ const ChangePassword = () => {
|
||||
<Heading size="sm" py={4}>
|
||||
Change Password
|
||||
</Heading>
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<VStack gap={4} w={{ base: "100%", md: "sm" }}>
|
||||
<PasswordInput
|
||||
type="current_password"
|
||||
|
||||
Reference in New Issue
Block a user