Skip to content

Commit d18cf4b

Browse files
alejsdevalejsdev
authored
🎨 Add minor UI tweaks in Skeletons and other components (#1507)
1 parent e46b8d9 commit d18cf4b

File tree

8 files changed

+50
-51
lines changed

8 files changed

+50
-51
lines changed

‎frontend/src/components/Common/UserMenu.tsx

+1-6
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,7 @@ const UserMenu = () => {
1919
<Flex>
2020
<MenuRoot>
2121
<MenuTrigger asChild p={2}>
22-
<Button
23-
data-testid="user-menu"
24-
variant="solid"
25-
maxW="150px"
26-
truncate
27-
>
22+
<Button data-testid="user-menu" variant="solid" maxW="sm" truncate>
2823
<FaUserAstronaut fontSize="18" />
2924
<Text>{user?.full_name || "User"}</Text>
3025
</Button>

‎frontend/src/components/Pending/PendingItems.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
1-
import { Skeleton, Table } from "@chakra-ui/react"
1+
import { Table } from "@chakra-ui/react"
2+
import { SkeletonText } from "../ui/skeleton"
23

34
const PendingItems = () => (
45
<Table.Root size={{ base: "sm", md: "md" }}>
56
<Table.Header>
67
<Table.Row>
7-
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader>
8-
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader>
9-
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader>
10-
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader>
8+
<Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
9+
<Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
10+
<Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
11+
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
1112
</Table.Row>
1213
</Table.Header>
1314
<Table.Body>
1415
{[...Array(5)].map((_, index) => (
1516
<Table.Row key={index}>
1617
<Table.Cell>
17-
<Skeleton h="20px" />
18+
<SkeletonText noOfLines={1} />
1819
</Table.Cell>
1920
<Table.Cell>
20-
<Skeleton h="20px" />
21+
<SkeletonText noOfLines={1} />
2122
</Table.Cell>
2223
<Table.Cell>
23-
<Skeleton h="20px" />
24+
<SkeletonText noOfLines={1} />
2425
</Table.Cell>
2526
<Table.Cell>
26-
<Skeleton h="20px" />
27+
<SkeletonText noOfLines={1} />
2728
</Table.Cell>
2829
</Table.Row>
2930
))}

‎frontend/src/components/Pending/PendingUsers.tsx

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
1-
import { Skeleton, Table } from "@chakra-ui/react"
1+
import { Table } from "@chakra-ui/react"
2+
import { SkeletonText } from "../ui/skeleton"
23

34
const PendingUsers = () => (
45
<Table.Root size={{ base: "sm", md: "md" }}>
56
<Table.Header>
67
<Table.Row>
7-
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader>
8-
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader>
9-
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader>
10-
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader>
11-
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader>
8+
<Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
9+
<Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
10+
<Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
11+
<Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
12+
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
1213
</Table.Row>
1314
</Table.Header>
1415
<Table.Body>
1516
{[...Array(5)].map((_, index) => (
1617
<Table.Row key={index}>
1718
<Table.Cell>
18-
<Skeleton h="20px" />
19+
<SkeletonText noOfLines={1} />
1920
</Table.Cell>
2021
<Table.Cell>
21-
<Skeleton h="20px" />
22+
<SkeletonText noOfLines={1} />
2223
</Table.Cell>
2324
<Table.Cell>
24-
<Skeleton h="20px" />
25+
<SkeletonText noOfLines={1} />
2526
</Table.Cell>
2627
<Table.Cell>
27-
<Skeleton h="20px" />
28+
<SkeletonText noOfLines={1} />
2829
</Table.Cell>
2930
<Table.Cell>
30-
<Skeleton h="20px" />
31+
<SkeletonText noOfLines={1} />
3132
</Table.Cell>
3233
</Table.Row>
3334
))}

‎frontend/src/components/UserSettings/ChangePassword.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,7 @@ const ChangePassword = () => {
4747
<Heading size="sm" py={4}>
4848
Change Password
4949
</Heading>
50-
<Box
51-
as="form"
52-
onSubmit={handleSubmit(onSubmit)}
53-
>
50+
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
5451
<VStack gap={4} w={{ base: "100%", md: "sm" }}>
5552
<PasswordInput
5653
type="current_password"

‎frontend/src/main.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query"
1+
import {
2+
MutationCache,
3+
QueryCache,
4+
QueryClient,
5+
QueryClientProvider,
6+
} from "@tanstack/react-query"
27
import { RouterProvider, createRouter } from "@tanstack/react-router"
38
import React, { StrictMode } from "react"
49
import ReactDOM from "react-dom/client"

‎frontend/src/routes/_layout/admin.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -61,32 +61,32 @@ function UsersTable() {
6161
<Table.Root size={{ base: "sm", md: "md" }}>
6262
<Table.Header>
6363
<Table.Row>
64-
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader>
65-
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader>
66-
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader>
67-
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader>
68-
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader>
64+
<Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
65+
<Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
66+
<Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
67+
<Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
68+
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
6969
</Table.Row>
7070
</Table.Header>
7171
<Table.Body>
7272
{users?.map((user) => (
7373
<Table.Row key={user.id} opacity={isPlaceholderData ? 0.5 : 1}>
74-
<Table.Cell w="20%" color={!user.full_name ? "gray" : "inherit"}>
74+
<Table.Cell color={!user.full_name ? "gray" : "inherit"}>
7575
{user.full_name || "N/A"}
7676
{currentUser?.id === user.id && (
7777
<Badge ml="1" colorScheme="teal">
7878
You
7979
</Badge>
8080
)}
8181
</Table.Cell>
82-
<Table.Cell w="25%">{user.email}</Table.Cell>
83-
<Table.Cell w="15%">
84-
{user.is_superuser ? "Superuser" : "User"}
82+
<Table.Cell truncate maxW="sm">
83+
{user.email}
8584
</Table.Cell>
86-
<Table.Cell w="20%">
87-
{user.is_active ? "Active" : "Inactive"}
85+
<Table.Cell>
86+
{user.is_superuser ? "Superuser" : "User"}
8887
</Table.Cell>
89-
<Table.Cell w="20%">
88+
<Table.Cell>{user.is_active ? "Active" : "Inactive"}</Table.Cell>
89+
<Table.Cell>
9090
<UserActionsMenu
9191
user={user}
9292
disabled={currentUser?.id === user.id}

‎frontend/src/routes/_layout/items.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -85,19 +85,19 @@ function ItemsTable() {
8585
<Table.Root size={{ base: "sm", md: "md" }}>
8686
<Table.Header>
8787
<Table.Row>
88-
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader>
89-
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader>
90-
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader>
91-
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader>
88+
<Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
89+
<Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
90+
<Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
91+
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
9292
</Table.Row>
9393
</Table.Header>
9494
<Table.Body>
9595
{items?.map((item) => (
9696
<Table.Row key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
97-
<Table.Cell truncate maxW="30%">
97+
<Table.Cell truncate maxW="sm">
9898
{item.id}
9999
</Table.Cell>
100-
<Table.Cell truncate maxW="30%">
100+
<Table.Cell truncate maxW="sm">
101101
{item.title}
102102
</Table.Cell>
103103
<Table.Cell
@@ -107,7 +107,7 @@ function ItemsTable() {
107107
>
108108
{item.description || "N/A"}
109109
</Table.Cell>
110-
<Table.Cell width="10%">
110+
<Table.Cell>
111111
<ItemActionsMenu item={item} />
112112
</Table.Cell>
113113
</Table.Row>

‎frontend/tests/login.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,4 +124,4 @@ test("Redirects to /login when token is wrong", async ({ page }) => {
124124
await page.goto("/settings")
125125
await page.waitForURL("/login")
126126
await expect(page).toHaveURL("/login")
127-
})
127+
})

0 commit comments

Comments
 (0)