Skip to content

Commit a5e7d87

Browse files
shatfield4timothycarambat
shatfield4
and
timothycarambat
authored
[CHORE] Consistent table styling across settings pages (#3597)
make all tables styling consistent across settings pages Co-authored-by: Timothy Carambat <[email protected]>
1 parent 56eb74c commit a5e7d87

File tree

20 files changed

+153
-157
lines changed

20 files changed

+153
-157
lines changed

‎frontend/src/pages/Admin/Invitations/InviteRow/index.jsx

+13-17
Original file line numberDiff line numberDiff line change
@@ -42,38 +42,34 @@ export default function InviteRow({ invite }) {
4242
<>
4343
<tr
4444
ref={rowRef}
45-
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
45+
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
4646
>
47-
<td scope="row" className="px-6 py-4 whitespace-nowrap">
47+
<td scope="row" className="px-6 whitespace-nowrap">
4848
{titleCase(status)}
4949
</td>
50-
<td className="px-6 py-4">
50+
<td className="px-6">
5151
{invite.claimedBy
5252
? invite.claimedBy?.username || "deleted user"
5353
: "--"}
5454
</td>
55-
<td className="px-6 py-4">
56-
{invite.createdBy?.username || "deleted user"}
57-
</td>
58-
<td className="px-6 py-4">{invite.createdAt}</td>
59-
<td className="px-6 py-4 flex items-center gap-x-6">
55+
<td className="px-6">{invite.createdBy?.username || "deleted user"}</td>
56+
<td className="px-6">{invite.createdAt}</td>
57+
<td className="px-6 flex items-center gap-x-6 h-full mt-1">
6058
{status === "pending" && (
6159
<>
6260
<button
6361
onClick={copyInviteLink}
6462
disabled={copied}
65-
className="border-none font-medium text-blue-300 rounded-lg hover:text-blue-400 hover:underline"
63+
className="text-xs font-medium text-blue-300 rounded-lg hover:text-blue-400 hover:underline"
6664
>
6765
{copied ? "Copied" : "Copy Invite Link"}
6866
</button>
69-
<td className="px-6 py-4 flex items-center gap-x-6">
70-
<button
71-
onClick={handleDelete}
72-
className="border-none font-medium text-theme-text-primary hover:text-red-500 px-2 py-1 rounded-lg"
73-
>
74-
<Trash className="h-5 w-5" />
75-
</button>
76-
</td>
67+
<button
68+
onClick={handleDelete}
69+
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
70+
>
71+
<Trash className="h-5 w-5" />
72+
</button>
7773
</>
7874
)}
7975
</td>

‎frontend/src/pages/Admin/Invitations/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ function InvitationsContainer() {
8484
}
8585

8686
return (
87-
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
87+
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
8888
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
8989
<tr>
9090
<th scope="col" className="px-6 py-3 rounded-tl-lg">

‎frontend/src/pages/Admin/Logging/LogRow/index.jsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -27,35 +27,35 @@ export default function LogRow({ log }) {
2727
<>
2828
<tr
2929
onClick={handleRowClick}
30-
className={`bg-transparent text-white text-opacity-80 text-sm font-medium ${
30+
className={`bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10 ${
3131
hasMetadata ? "cursor-pointer hover:bg-white/5" : ""
3232
}`}
3333
>
3434
<EventBadge event={log.event} />
35-
<td className="px-6 py-4 border-transparent transform transition-transform duration-200">
35+
<td className="px-6 border-transparent transform transition-transform duration-200">
3636
{log.user.username}
3737
</td>
38-
<td className="px-6 py-4 border-transparent transform transition-transform duration-200">
38+
<td className="px-6 border-transparent transform transition-transform duration-200">
3939
{log.occurredAt}
4040
</td>
4141
{hasMetadata && (
42-
<>
42+
<div className="mt-1">
4343
{expanded ? (
4444
<td
45-
className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200 hover:scale-105`}
45+
className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200`}
4646
>
4747
<CaretUp weight="bold" size={20} />
4848
<p className="text-xs text-white/50 w-[20px]">hide</p>
4949
</td>
5050
) : (
5151
<td
52-
className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200 hover:scale-105`}
52+
className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200`}
5353
>
5454
<CaretDown weight="bold" size={20} />
5555
<p className="text-xs text-white/50 w-[20px]">show</p>
5656
</td>
5757
)}
58-
</>
58+
</div>
5959
)}
6060
</tr>
6161
<EventMetadata metadata={metadata} expanded={expanded} />
@@ -106,9 +106,9 @@ const EventBadge = ({ event }) => {
106106
};
107107

108108
return (
109-
<td className="px-6 py-4 font-medium whitespace-nowrap text-white flex items-center">
109+
<td className="px-6 py-2 font-medium whitespace-nowrap text-white flex items-center">
110110
<span
111-
className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-sm font-medium ${colorTheme.text} shadow-sm`}
111+
className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-xs font-medium ${colorTheme.text} shadow-sm`}
112112
>
113113
{event}
114114
</span>

‎frontend/src/pages/Admin/Logging/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ function LogsContainer({
120120

121121
return (
122122
<>
123-
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
123+
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
124124
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
125125
<tr>
126126
<th scope="col" className="px-6 py-3 rounded-tl-lg">

‎frontend/src/pages/Admin/SystemPromptVariables/VariableRow/index.jsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ModalWrapper from "@/components/ModalWrapper";
66
import EditVariableModal from "./EditVariableModal";
77
import { titleCase } from "text-case";
88
import truncate from "truncate";
9+
import { Trash } from "@phosphor-icons/react";
910

1011
/**
1112
* A row component for displaying a system prompt variable
@@ -63,40 +64,40 @@ export default function VariableRow({ variable, onRefresh }) {
6364
<>
6465
<tr
6566
ref={rowRef}
66-
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
67+
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
6768
>
68-
<th scope="row" className="px-6 py-4 whitespace-nowrap">
69+
<th scope="row" className="px-4 py-2 whitespace-nowrap">
6970
{variable.key}
7071
</th>
71-
<td className="px-6 py-4">
72+
<td className="px-4 py-2">
7273
{typeof variable.value === "function"
7374
? variable.value()
7475
: truncate(variable.value, 50)}
7576
</td>
76-
<td className="px-6 py-4">
77+
<td className="px-4 py-2">
7778
{truncate(variable.description || "-", 50)}
7879
</td>
79-
<td className="px-6 py-4">
80+
<td className="px-4 py-2">
8081
<span
8182
className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-xs leading-5 font-semibold ${colorTheme.text} shadow-sm`}
8283
>
8384
{titleCase(variable.type)}
8485
</span>
8586
</td>
86-
<td className="px-6 py-4 flex items-center justify-end gap-x-6">
87+
<td className="px-4 py-2 flex items-center justify-end gap-x-4">
8788
{variable.type === "static" && (
8889
<>
8990
<button
9091
onClick={openModal}
91-
className="text-sm font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
92+
className="text-xs font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
9293
>
9394
Edit
9495
</button>
9596
<button
9697
onClick={handleDelete}
97-
className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
98+
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
9899
>
99-
Delete
100+
<Trash className="h-4 w-4" />
100101
</button>
101102
</>
102103
)}

‎frontend/src/pages/Admin/SystemPromptVariables/index.jsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,16 @@ export default function SystemPromptVariables() {
8383
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
8484
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
8585
<tr>
86-
<th scope="col" className="px-6 py-3 rounded-tl-lg">
86+
<th scope="col" className="px-4 py-2 rounded-tl-lg">
8787
Key
8888
</th>
89-
<th scope="col" className="px-6 py-3">
89+
<th scope="col" className="px-4 py-2">
9090
Value
9191
</th>
92-
<th scope="col" className="px-6 py-3">
92+
<th scope="col" className="px-4 py-2">
9393
Description
9494
</th>
95-
<th scope="col" className="px-6 py-3">
95+
<th scope="col" className="px-4 py-2">
9696
Type
9797
</th>
9898
</tr>

‎frontend/src/pages/Admin/Users/UserRow/index.jsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -57,18 +57,18 @@ export default function UserRow({ currUser, user }) {
5757
<>
5858
<tr
5959
ref={rowRef}
60-
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
60+
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
6161
>
62-
<th scope="row" className="px-6 py-4 whitespace-nowrap">
62+
<th scope="row" className="px-6 whitespace-nowrap">
6363
{user.username}
6464
</th>
65-
<td className="px-6 py-4">{titleCase(user.role)}</td>
66-
<td className="px-6 py-4">{user.createdAt}</td>
67-
<td className="px-6 py-4 flex items-center gap-x-6">
65+
<td className="px-6">{titleCase(user.role)}</td>
66+
<td className="px-6">{user.createdAt}</td>
67+
<td className="px-6 flex items-center gap-x-6 h-full mt-2">
6868
{canModify && (
6969
<button
7070
onClick={openModal}
71-
className="text-sm font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
71+
className="text-xs font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
7272
>
7373
Edit
7474
</button>
@@ -77,13 +77,13 @@ export default function UserRow({ currUser, user }) {
7777
<>
7878
<button
7979
onClick={handleSuspend}
80-
className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-orange-500 hover:text-orange-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-orange-50 hover:bg-opacity-10"
80+
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-orange-500 hover:text-orange-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-orange-50 hover:bg-opacity-10"
8181
>
8282
{suspended ? "Unsuspend" : "Suspend"}
8383
</button>
8484
<button
8585
onClick={handleDelete}
86-
className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
86+
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
8787
>
8888
Delete
8989
</button>

‎frontend/src/pages/Admin/Users/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ function UsersContainer() {
8484
}
8585

8686
return (
87-
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
87+
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
8888
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
8989
<tr>
9090
<th scope="col" className="px-6 py-3 rounded-tl-lg">

‎frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -20,34 +20,34 @@ export default function WorkspaceRow({ workspace, users }) {
2020
<>
2121
<tr
2222
ref={rowRef}
23-
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
23+
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
2424
>
25-
<th scope="row" className="px-6 py-4 whitespace-nowrap">
25+
<th scope="row" className="px-6 whitespace-nowrap">
2626
{workspace.name}
2727
</th>
28-
<td className="px-6 py-4 flex items-center">
28+
<td className="px-6 flex items-center">
2929
<a
3030
href={paths.workspace.chat(workspace.slug)}
3131
target="_blank"
3232
rel="noreferrer"
3333
className="text-white flex items-center hover:underline"
3434
>
35-
<LinkSimple className="mr-2 w-5 h-5" /> {workspace.slug}
35+
<LinkSimple className="mr-2 w-4 h-4" /> {workspace.slug}
3636
</a>
3737
</td>
38-
<td className="px-6 py-4">
38+
<td className="px-6">
3939
<a
4040
href={paths.workspace.settings.members(workspace.slug)}
4141
className="text-white flex items-center underline"
4242
>
4343
{workspace.userIds?.length}
4444
</a>
4545
</td>
46-
<td className="px-6 py-4">{workspace.createdAt}</td>
47-
<td className="px-6 py-4 flex items-center gap-x-6">
46+
<td className="px-6">{workspace.createdAt}</td>
47+
<td className="px-6 flex items-center gap-x-6 h-full mt-1">
4848
<button
4949
onClick={handleDelete}
50-
className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
50+
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
5151
>
5252
<Trash className="h-5 w-5" />
5353
</button>

‎frontend/src/pages/Admin/Workspaces/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ function WorkspacesContainer() {
8484
}
8585

8686
return (
87-
<table className="w-full text-sm text-left rounded-lg mt-6 min-w-[640px]">
87+
<table className="w-full text-xs text-left rounded-lg mt-6 min-w-[640px] border-spacing-0">
8888
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
8989
<tr>
9090
<th scope="col" className="px-6 py-3 rounded-tl-lg">

‎frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx

+7-9
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,24 @@ export default function ApiKeyRow({ apiKey }) {
4646
<>
4747
<tr
4848
ref={rowRef}
49-
className="bg-transparent text-white text-opacity-80 text-sm font-medium"
49+
className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
5050
>
51-
<td scope="row" className="px-6 py-4 whitespace-nowrap">
51+
<td scope="row" className="px-6 whitespace-nowrap">
5252
{apiKey.secret}
5353
</td>
54-
<td className="px-6 py-4 text-center">
55-
{apiKey.createdBy?.username || "--"}
56-
</td>
57-
<td className="px-6 py-4">{apiKey.createdAt}</td>
58-
<td className="px-6 py-4 flex items-center gap-x-6">
54+
<td className="px-6 text-left">{apiKey.createdBy?.username || "--"}</td>
55+
<td className="px-6">{apiKey.createdAt}</td>
56+
<td className="px-6 flex items-center gap-x-6 h-full mt-1">
5957
<button
6058
onClick={copyApiKey}
6159
disabled={copied}
62-
className="border-none font-medium text-blue-300 rounded-lg hover:text-white hover:light:text-blue-500 hover:text-opacity-60 hover:underline"
60+
className="text-xs font-medium text-blue-300 rounded-lg hover:text-white hover:light:text-blue-500 hover:text-opacity-60 hover:underline"
6361
>
6462
{copied ? "Copied" : "Copy API Key"}
6563
</button>
6664
<button
6765
onClick={handleDelete}
68-
className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
66+
className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
6967
>
7068
<Trash className="h-5 w-5" />
7169
</button>

‎frontend/src/pages/GeneralSettings/ApiKeys/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ function ApiKeysContainer() {
9696
}
9797

9898
return (
99-
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
99+
<table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
100100
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
101101
<tr>
102102
<th scope="col" className="px-6 py-3 rounded-tl-lg">

0 commit comments

Comments
 (0)