style

Author: ademilter

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

@@ -60,7 +60,7 @@ export const DisplayHeader = ({
       </div>
 
       {/*{!hideBadges && (*/}
-      <div className="flex h-10 flex-wrap items-center gap-1">
+      <div className="flex h-10 flex-wrap items-center gap-1.5">
         <TypeTag variant={type} type="badge" />
         <SizeBadge dataKey={dataKey} />
         <LengthBadge dataKey={dataKey} type={type} content={content} />

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

@@ -135,7 +135,8 @@ const FormItem = ({ name, label }: { name: string; label: string; isNumber?: boo
         <span className="text-zinc-300">/</span>
         {selector}
       </div>
-      <div className="overflow-hidden rounded-md border border-zinc-300 bg-white py-1 shadow-sm">
+
+      <div className="overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm">
         {editor}
       </div>
     </div>

packages/react-databrowser/src/components/databrowser/components/display/input/content-type-select.tsx

@@ -28,8 +28,9 @@ export const ContentTypeSelect = ({
   return (
     <Select value={value} onValueChange={onChange}>
       <SelectTrigger className="h-6 w-auto border-none bg-transparent pl-0 pr-6 text-xs text-zinc-500">
-        <SelectValue placeholder="Expires" />
+        <SelectValue placeholder="Text" />
       </SelectTrigger>
+
       <SelectContent>
         <SelectGroup>
           <SelectItem value={"Text"}>Text</SelectItem>

packages/react-databrowser/src/components/databrowser/components/display/input/custom-editor.tsx

@@ -28,7 +28,7 @@ export const CustomEditor = ({
 
   return (
     <div
-      className={cn(maxDynamicHeight === undefined && "h-full")}
+      className={cn(maxDynamicHeight === undefined && "h-full p-2")}
       style={{
         height: maxDynamicHeight,
       }}
@@ -58,10 +58,11 @@ export const CustomEditor = ({
           minimap: {
             enabled: false,
           },
+          folding: false,
+          glyphMargin: false,
           lineNumbers: "off",
           parameterHints: { enabled: false },
-          glyphMargin: false,
-          lineDecorationsWidth: 5,
+          lineDecorationsWidth: 0,
           automaticLayout: true,
           scrollBeyondLastLine: false,
           renderLineHighlight: "none",

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

@@ -13,13 +13,15 @@ import { useDeleteKey } from "../../hooks"
 
 export function KeyActions({ dataKey, content }: { dataKey: string; content?: string }) {
   const { mutateAsync: deleteKey } = useDeleteKey()
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button size="icon-sm">
           <IconDotsVertical className="size-4 text-zinc-500" />
         </Button>
       </DropdownMenuTrigger>
+
       <DropdownMenuContent className="" align="end">
         {content && (
           <DropdownMenuItem

packages/react-databrowser/src/components/databrowser/components/sidebar/index.tsx

@@ -35,9 +35,7 @@ export function Sidebar() {
           <Input
             type="text"
             placeholder="Search"
-            className={
-              "rounded-l-none border-zinc-300 px-2 font-normal placeholder-zinc-300 focus-visible:ring-0"
-            }
+            className={"rounded-l-none border-zinc-300 font-normal"}
             onChange={(e) => setSearchKey(e.target.value)}
             value={search.key}
           />

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

@@ -31,7 +31,7 @@ const KeyItem = ({ data }: { data: RedisKey }) => {
       variant={isKeySelected ? "default" : "ghost"}
       className={cn(
         "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 ",
-        "border border-transparent text-left",
+        "select-none border border-transparent text-left",
         isKeySelected && "shadow-sm",
         isKeySelected && dataType === "string" && "border-sky-400 !bg-sky-50 text-sky-900",
         isKeySelected && dataType === "list" && "border-orange-400 !bg-orange-50 text-orange-900",

packages/react-databrowser/src/components/databrowser/components/sidebar/type-selector.tsx

@@ -26,9 +26,10 @@ export function DataTypeSelector() {
       }}
       value={search.type === undefined ? ALL_TYPES_KEY : search.type}
     >
-      <SelectTrigger className="!w-auto whitespace-nowrap rounded-lg rounded-r-none border-r-0 border-zinc-300 pr-7">
+      <SelectTrigger className="!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8">
         <SelectValue />
       </SelectTrigger>
+
       <SelectContent>
         <SelectGroup>
           {[[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(

packages/react-databrowser/src/components/databrowser/components/type-tag.tsx

@@ -13,25 +13,25 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const iconsMap = {
-  string: <IconQuote size={16} stroke={1.5} />,
-  set: <IconLayersIntersect size={16} stroke={1.5} />,
-  hash: <IconHash size={16} stroke={1.5} />,
-  json: <IconCodeDots size={16} stroke={1.5} />,
-  zset: <IconArrowsSort size={16} stroke={1.5} />,
-  list: <IconList size={16} stroke={1.5} />,
-  stream: <IconList size={16} stroke={1.5} />,
+  string: <IconQuote size={15} stroke={1.3} />,
+  set: <IconLayersIntersect size={15} stroke={1.3} />,
+  hash: <IconHash size={15} stroke={1.3} />,
+  json: <IconCodeDots size={15} stroke={1.3} />,
+  zset: <IconArrowsSort size={15} stroke={1.3} />,
+  list: <IconList size={15} stroke={1.3} />,
+  stream: <IconList size={15} stroke={1.3} />,
 } as const
 
 const tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
   variants: {
     variant: {
-      string: "bg-sky-100 text-sky-800",
-      list: "bg-orange-100 text-orange-800",
-      hash: "bg-amber-100 text-amber-800",
-      set: "bg-indigo-100 text-indigo-800",
-      zset: "bg-pink-100 text-pink-800",
-      json: "bg-purple-100 text-purple-800",
-      stream: "bg-orange-100 text-orange-800",
+      string: "bg-sky-200 text-sky-800",
+      list: "bg-orange-200 text-orange-800",
+      hash: "bg-amber-200 text-amber-800",
+      set: "bg-indigo-200 text-indigo-800",
+      zset: "bg-pink-200 text-pink-800",
+      json: "bg-purple-200 text-purple-800",
+      stream: "bg-orange-200 text-orange-800",
     },
     type: {
       icon: "size-5",