Some minor tweaks

This commit is contained in:
Gregory Schier
2024-02-01 00:48:03 -08:00
parent 1eed0e8f22
commit 2c041fbac6
5 changed files with 16 additions and 21 deletions

View File

@@ -214,34 +214,27 @@ export function GrpcConnectionLayout({ style }: Props) {
}}
alignItems="center"
className={classNames(
'px-2 py-1 font-mono text-xs opacity-70',
m === activeMessage && 'bg-highlight !opacity-100',
'px-2 py-1 font-mono',
m === activeMessage && 'bg-highlight',
)}
>
<Icon
className={m.isServer ? 'text-blue-600' : 'text-green-600'}
icon={m.isServer ? 'arrowBigDownDash' : 'arrowBigUpDash'}
/>
<div className="w-full truncate">{m.message}</div>
<div>{format(m.time, 'HH:mm:ss')}</div>
<div className="w-full truncate text-gray-800 text-xs">{m.message}</div>
<div className="text-gray-600 text-2xs" title={m.time.toISOString()}>
{format(m.time, 'HH:mm:ss')}
</div>
</HStack>
))}
</div>
<div
className={classNames(
'transition-all',
activeMessage ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-[100%]',
)}
>
<div className={classNames(activeMessage ? 'block' : 'hidden')}>
<div className="pb-1 px-2">
<Separator />
</div>
<div className="pl-2 pb-1">
<JsonAttributeTree
depth={0}
attrValue={JSON.parse(activeMessage?.message ?? '{}')}
attrKey={''}
/>
<div className="pl-2 pb-1 h-[6rem]">
<JsonAttributeTree attrValue={JSON.parse(activeMessage?.message ?? '{}')} />
</div>
{/*<Editor*/}
{/* className="bg-gray-50 dark:bg-gray-100 max-h-30"*/}

View File

@@ -12,7 +12,7 @@ export function CountBadge({ count, className }: Props) {
aria-hidden
className={classNames(
className,
'opacity-70 border border-highlight text-3xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
'opacity-70 border border-highlight text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
)}
>
{count}

View File

@@ -81,7 +81,7 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
<div className={classNames(/*depth === 0 && '-ml-4',*/ 'font-mono text-xs')}>
<div className="flex items-center">
{isExpandable ? (
<button className="group relative flex items-center pl-4" onClick={toggleExpanded}>
<button className="group relative flex items-center pl-4 w-full" onClick={toggleExpanded}>
<Icon
size="xs"
icon="chevronRight"

View File

@@ -56,7 +56,7 @@ export const VStack = forwardRef(function VStack(
type BaseStackProps = HTMLAttributes<HTMLElement> & {
as?: ComponentType | 'ul' | 'label' | 'form';
space?: keyof typeof gapClasses;
alignItems?: 'start' | 'center' | 'stretch';
alignItems?: 'start' | 'center' | 'stretch' | 'end';
justifyContent?: 'start' | 'center' | 'end' | 'between';
};
@@ -75,6 +75,7 @@ const BaseStack = forwardRef(function BaseStack(
alignItems === 'center' && 'items-center',
alignItems === 'start' && 'items-start',
alignItems === 'stretch' && 'items-stretch',
alignItems === 'end' && 'items-end',
justifyContent === 'start' && 'justify-start',
justifyContent === 'center' && 'justify-center',
justifyContent === 'end' && 'justify-end',