nt_web_template/full-stack-fastapi-template
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

🎨 Add minor UI tweaks in Skeletons and other components (#1507)

Browse Source
This commit is contained in:
Alejandra
2025-02-21 20:29:00 +00:00
committed by GitHub
parent e46b8d9421
commit d18cf4b6be
8 changed files with 50 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/Common/UserMenu.tsx
View File

@@ -19,12 +19,7 @@ const UserMenu = () => {
<Flex> <Flex>
<MenuRoot> <MenuRoot>
<MenuTrigger asChild p={2}> <MenuTrigger asChild p={2}>
<Button <Button data-testid="user-menu" variant="solid" maxW="sm" truncate>
data-testid="user-menu"
variant="solid"
maxW="150px"
truncate
>
<FaUserAstronaut fontSize="18" /> <FaUserAstronaut fontSize="18" />
<Text>{user?.full_name || "User"}</Text> <Text>{user?.full_name || "User"}</Text>
</Button> </Button>

19
frontend/src/components/Pending/PendingItems.tsx
View File

@@ -1,29 +1,30 @@
import { Skeleton, Table } from "@chakra-ui/react" import { Table } from "@chakra-ui/react"
import { SkeletonText } from "../ui/skeleton"
const PendingItems = () => ( const PendingItems = () => (
<Table.Root size={{ base: "sm", md: "md" }}> <Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader> <Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader> <Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader> <Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader> <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{[...Array(5)].map((_, index) => ( {[...Array(5)].map((_, index) => (
<Table.Row key={index}> <Table.Row key={index}>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
))} ))}

23
frontend/src/components/Pending/PendingUsers.tsx
View File

@@ -1,33 +1,34 @@
import { Skeleton, Table } from "@chakra-ui/react" import { Table } from "@chakra-ui/react"
import { SkeletonText } from "../ui/skeleton"
const PendingUsers = () => ( const PendingUsers = () => (
<Table.Root size={{ base: "sm", md: "md" }}> <Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader> <Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader> <Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader> <Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader> <Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader> <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{[...Array(5)].map((_, index) => ( {[...Array(5)].map((_, index) => (
<Table.Row key={index}> <Table.Row key={index}>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
))} ))}

5
frontend/src/components/UserSettings/ChangePassword.tsx
View File

@@ -47,10 +47,7 @@ const ChangePassword = () => {
<Heading size="sm" py={4}> <Heading size="sm" py={4}>
Change Password Change Password
</Heading> </Heading>
<Box <Box as="form" onSubmit={handleSubmit(onSubmit)}>
as="form"
onSubmit={handleSubmit(onSubmit)}
>
<VStack gap={4} w={{ base: "100%", md: "sm" }}> <VStack gap={4} w={{ base: "100%", md: "sm" }}>
<PasswordInput <PasswordInput
type="current_password" type="current_password"

7
frontend/src/main.tsx
View File

@@ -1,4 +1,9 @@
import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query" import {
MutationCache,
QueryCache,
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query"
import { RouterProvider, createRouter } from "@tanstack/react-router" import { RouterProvider, createRouter } from "@tanstack/react-router"
import React, { StrictMode } from "react" import React, { StrictMode } from "react"
import ReactDOM from "react-dom/client" import ReactDOM from "react-dom/client"

24
frontend/src/routes/_layout/admin.tsx
View File

@@ -61,17 +61,17 @@ function UsersTable() {
<Table.Root size={{ base: "sm", md: "md" }}> <Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader> <Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader> <Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader> <Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader> <Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader> <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{users?.map((user) => ( {users?.map((user) => (
<Table.Row key={user.id} opacity={isPlaceholderData ? 0.5 : 1}> <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"} {user.full_name || "N/A"}
{currentUser?.id === user.id && ( {currentUser?.id === user.id && (
<Badge ml="1" colorScheme="teal"> <Badge ml="1" colorScheme="teal">
@@ -79,14 +79,14 @@ function UsersTable() {
</Badge> </Badge>
)} )}
</Table.Cell> </Table.Cell>
<Table.Cell w="25%">{user.email}</Table.Cell> <Table.Cell truncate maxW="sm">
<Table.Cell w="15%"> {user.email}
</Table.Cell>
<Table.Cell>
{user.is_superuser ? "Superuser" : "User"} {user.is_superuser ? "Superuser" : "User"}
</Table.Cell> </Table.Cell>
<Table.Cell w="20%"> <Table.Cell>{user.is_active ? "Active" : "Inactive"}</Table.Cell>
{user.is_active ? "Active" : "Inactive"} <Table.Cell>
</Table.Cell>
<Table.Cell w="20%">
<UserActionsMenu <UserActionsMenu
user={user} user={user}
disabled={currentUser?.id === user.id} disabled={currentUser?.id === user.id}

14
frontend/src/routes/_layout/items.tsx
View File

@@ -85,19 +85,19 @@ function ItemsTable() {
<Table.Root size={{ base: "sm", md: "md" }}> <Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader> <Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader> <Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader> <Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader> <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{items?.map((item) => ( {items?.map((item) => (
<Table.Row key={item.id} opacity={isPlaceholderData ? 0.5 : 1}> <Table.Row key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
<Table.Cell truncate maxW="30%"> <Table.Cell truncate maxW="sm">
{item.id} {item.id}
</Table.Cell> </Table.Cell>
<Table.Cell truncate maxW="30%"> <Table.Cell truncate maxW="sm">
{item.title} {item.title}
</Table.Cell> </Table.Cell>
<Table.Cell <Table.Cell
@@ -107,7 +107,7 @@ function ItemsTable() {
> >
{item.description || "N/A"} {item.description || "N/A"}
</Table.Cell> </Table.Cell>
<Table.Cell width="10%"> <Table.Cell>
<ItemActionsMenu item={item} /> <ItemActionsMenu item={item} />
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>