Skip to content
This repository was archived by the owner on Jan 24, 2025. It is now read-only.

Commit e71d92b

Browse files
ademilterademilter
committed
style
1 parent 48443e3 commit e71d92b

File tree

6 files changed

+52
-47
lines changed

6 files changed

+52
-47
lines changed

‎packages/react-databrowser/src/components/databrowser/components/display/display-header.tsx‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -39,29 +39,28 @@ export const DisplayHeader = ({
3939

4040
return (
4141
<div className="rounded-lg bg-zinc-100 px-3 py-2">
42-
<div className="flex items-center justify-between gap-1">
43-
<h2 className="my-2 mb-4 flex-grow truncate">
42+
<div className="flex min-h-10 items-center justify-between gap-4">
43+
<h2 className="grow truncate">
4444
{dataKey.trim() === "" ? (
45-
<>
46-
{`"${dataKey}"`}
47-
<span className="ml-3 text-sm text-zinc-500">(empty key)</span>
48-
</>
45+
<span className="ml-1 text-sm text-zinc-500">(Empty Key)</span>
4946
) : (
50-
dataKey
47+
<span className="font-semibold">{dataKey}</span>
5148
)}
5249
</h2>
53-
{type !== "string" && type !== "json" && (
54-
<Button
55-
onClick={handleAddItem}
56-
className="h-6 w-6 rounded-md border border-zinc-300 p-0 shadow-sm"
57-
>
58-
<IconPlus className="text-zinc-400" size={20} />
59-
</Button>
60-
)}
61-
<KeyActions dataKey={dataKey} content={content} />
50+
51+
<div className="flex items-center gap-1">
52+
{type !== "string" && type !== "json" && (
53+
<Button onClick={handleAddItem} size="icon-sm">
54+
<IconPlus className="size-5 text-zinc-500" />
55+
</Button>
56+
)}
57+
58+
<KeyActions dataKey={dataKey} content={content} />
59+
</div>
6260
</div>
61+
6362
{!hideBadges && (
64-
<div className="flex flex-wrap gap-1">
63+
<div className="flex h-10 flex-wrap items-center gap-1">
6564
<TypeTag variant={type} type="badge" />
6665
<SizeBadge dataKey={dataKey} />
6766
<LengthBadge dataKey={dataKey} type={type} content={content} />
@@ -151,8 +150,8 @@ const TTLBadge = ({ dataKey }: { dataKey: string }) => {
151150
}
152151

153152
const Badge = ({ children, label }: { children: React.ReactNode; label: string }) => (
154-
<div className="flex h-6 items-center rounded-md bg-white px-2 text-xs text-zinc-700">
155-
<span className="mr-[3px] text-zinc-500">{label}</span>
156-
{children}
153+
<div className="flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700">
154+
<span className="text-zinc-500">{label}</span>
155+
<span className="font-medium">{children}</span>
157156
</div>
158157
)

‎packages/react-databrowser/src/components/databrowser/components/display/display-list.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,25 @@ export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListData
2222
const { selectedListItem } = useDatabrowserStore()
2323
const query = useFetchListItems({ dataKey, type })
2424

25-
const [keyHeader, valueHeader] = headerLabels[type]
25+
// const [keyHeader, valueHeader] = headerLabels[type]
2626

2727
return (
2828
<div className="flex h-full flex-col gap-2">
2929
<DisplayHeader dataKey={dataKey} type={type} hideBadges={selectedListItem !== undefined} />
30+
3031
{selectedListItem && <ListEditDisplay dataKey={dataKey} type={type} />}
32+
3133
<div className={cn("min-h-0 flex-grow", selectedListItem && "hidden")}>
3234
<InfiniteScroll query={query}>
3335
<table className="w-full flex-grow text-sm text-zinc-700">
34-
{type !== "set" && (
35-
<thead>
36-
<tr>
37-
<th className="px-3 py-2 text-left font-medium opacity-40">{keyHeader}</th>
38-
<th className="px-3 py-2 text-left font-medium opacity-40">{valueHeader}</th>
39-
</tr>
40-
</thead>
41-
)}
36+
{/*{type !== "set" && (*/}
37+
{/* <thead>*/}
38+
{/* <tr>*/}
39+
{/* <th className="px-3 py-2 text-left font-medium opacity-40">{keyHeader}</th>*/}
40+
{/* <th className="px-3 py-2 text-left font-medium opacity-40">{valueHeader}</th>*/}
41+
{/* </tr>*/}
42+
{/* </thead>*/}
43+
{/*)}*/}
4244
<tbody>
4345
<ListItems query={query} />
4446
</tbody>
@@ -49,6 +51,11 @@ export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListData
4951
)
5052
}
5153

54+
type ItemData = {
55+
key: string
56+
value?: string
57+
}
58+
5259
export const ListItems = ({
5360
query,
5461
}: {
@@ -69,7 +76,7 @@ export const ListItems = ({
6976
onClick={() => {
7077
setSelectedListItem({ key, value })
7178
}}
72-
className="cursor-pointer border-b hover:bg-zinc-100"
79+
className="h-10 cursor-pointer border-b border-b-zinc-100 hover:bg-zinc-50"
7380
>
7481
<td className="max-w-0 truncate px-3 py-2">{key}</td>
7582
{value !== undefined && <td className="max-w-0 truncate px-3 py-2">{value}</td>}
@@ -78,8 +85,3 @@ export const ListItems = ({
7885
</>
7986
)
8087
}
81-
82-
type ItemData = {
83-
key: string
84-
value?: string
85-
}

‎packages/react-databrowser/src/components/databrowser/components/display/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const DataDisplay = () => {
88
const { selectedKey } = useDatabrowserStore()
99
const type = useKeyType(selectedKey)
1010

11+
// TODO: add a empty state
1112
return (
1213
<div className="h-full rounded-xl border p-1">
1314
{!selectedKey || !type ? (

‎packages/react-databrowser/src/components/databrowser/components/display/key-actions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export function KeyActions({ dataKey, content }: { dataKey: string; content?: st
1616
return (
1717
<DropdownMenu>
1818
<DropdownMenuTrigger asChild>
19-
<Button className="h-6 w-6 rounded-md border border-zinc-300 p-0 shadow-sm">
20-
<IconDotsVertical className="text-zinc-400" size={20} />
19+
<Button size="icon-sm">
20+
<IconDotsVertical className="size-5 text-zinc-500" />
2121
</Button>
2222
</DropdownMenuTrigger>
2323
<DropdownMenuContent className="" align="end">

‎packages/react-databrowser/src/components/databrowser/components/sidebar/keys-list.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,18 @@ const KeyItem = ({ data }: { data: RedisKey }) => {
3333
"relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 ",
3434
"border border-transparent text-left",
3535
isKeySelected && "shadow-sm",
36-
isKeySelected && dataType === "string" && "border-sky-400 !bg-sky-50",
37-
isKeySelected && dataType === "list" && "border-orange-400 !bg-orange-50",
38-
isKeySelected && dataType === "hash" && "border-amber-400 !bg-amber-50",
39-
isKeySelected && dataType === "set" && "border-indigo-400 !bg-indigo-50",
40-
isKeySelected && dataType === "zset" && "border-pink-400 !bg-pink-50",
41-
isKeySelected && dataType === "json" && "border-purple-400 !bg-purple-50",
42-
isKeySelected && dataType === "stream" && "border-orange-400 !bg-orange-50"
36+
isKeySelected && dataType === "string" && "border-sky-400 !bg-sky-50 text-sky-900",
37+
isKeySelected && dataType === "list" && "border-orange-400 !bg-orange-50 text-orange-900",
38+
isKeySelected && dataType === "hash" && "border-amber-400 !bg-amber-50 text-amber-900",
39+
isKeySelected && dataType === "set" && "border-indigo-400 !bg-indigo-50 text-indigo-900",
40+
isKeySelected && dataType === "zset" && "border-pink-400 !bg-pink-50 text-pink-900",
41+
isKeySelected && dataType === "json" && "border-purple-400 !bg-purple-50 text-purple-900",
42+
isKeySelected && dataType === "stream" && "border-orange-400 !bg-orange-50 text-orange-900"
4343
)}
4444
onClick={() => setSelectedKey(dataKey)}
4545
>
4646
<TypeTag variant={dataType} type="icon" />
47-
<p className="truncate whitespace-nowrap text-black">{dataKey}</p>
47+
<p className="truncate whitespace-nowrap">{dataKey}</p>
4848

4949
{!isKeySelected && <span className="absolute -bottom-px left-3 right-3 h-px bg-zinc-100" />}
5050
</Button>

‎packages/react-databrowser/src/components/ui/button.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@ const buttonVariants = cva(
1010
variants: {
1111
variant: {
1212
default:
13-
"bg-[#FFFFFF] text-black hover:bg-[#FFFFFF]/70 dark:bg-black dark:text-[#FFFFFF] dark:hover:bg-black/10",
13+
"bg-white text-black border shadow-sm border-zinc-300 hover:bg-[#FFFFFF]/70 dark:bg-black" +
14+
" dark:text-[#FFFFFF]" +
15+
" dark:hover:bg-black/10",
1416
destructive:
1517
"bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
1618
outline:
1719
"border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-neutral-50",
1820
primary:
19-
"bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-500 dark:text-white dark:hover:bg-emerald-600",
21+
"bg-emerald-500 text-white shadow-sm hover:bg-emerald-600 dark:bg-emerald-500 dark:text-white" +
22+
" dark:hover:bg-emerald-600",
2023
secondary:
2124
"bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
2225
ghost: "hover:bg-[#0000000A] dark:hover:bg-neutral-800 dark:hover:text-neutral-50",

0 commit comments

Comments
 (0)