feat: Update table headers styles

src/components/Table.tsx

@@ -0,0 +1,24 @@
+import { css } from '@emotion/react'
+import { Table as RadixTable } from '@radix-ui/themes'
+import { ComponentProps } from 'react'
+
+function ColumnHeaderCell(
+  props: ComponentProps<typeof RadixTable.ColumnHeaderCell>
+) {
+  return (
+    <RadixTable.ColumnHeaderCell
+      {...props}
+      css={css`
+        color: var(--gray-11);
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+      `}
+    />
+  )
+}
+
+export const Table = {
+  ...RadixTable,
+  ColumnHeaderCell,
+}

src/components/WebLogView/Cookies.tsx

@@ -1,6 +1,7 @@
-import { Flex, Table } from '@radix-ui/themes'
+import { Flex } from '@radix-ui/themes'
 
 import { Cookie } from '@/types'
+import { Table } from '@/components/Table'
 
 export function Cookies({ cookies = [] }: { cookies?: Cookie[] }) {
   if (!cookies.length) {

src/components/WebLogView/Details.tsx

@@ -71,13 +71,21 @@ function PaneContent({
   return (
     <Flex direction="column" height="100%">
       <Box
-        p="2"
+        py="2"
+        px="4"
         css={css`
-          background-color: var(--accent-3);
+          background-color: var(--gray-2);
           flex-shrink: 0;
         `}
       >
-        <Heading size="2">{heading}</Heading>
+        <Heading
+          size="2"
+          css={css`
+            font-weight: 500;
+          `}
+        >
+          {heading}
+        </Heading>
       </Box>
       {children}
     </Flex>

src/components/WebLogView/RequestDetails/FormPayloadPreview.tsx

@@ -1,5 +1,5 @@
 import { safeJsonParse } from '@/utils/json'
-import { Table } from '@radix-ui/themes'
+import { Table } from '@/components/Table'
 
 export function FormPayloadPreview({
   payloadJsonString,

src/components/WebLogView/RequestDetails/QueryParams.tsx

@@ -1,6 +1,7 @@
-import { Flex, Table } from '@radix-ui/themes'
+import { Flex } from '@radix-ui/themes'
 
 import { Request } from '@/types'
+import { Table } from '@/components/Table'
 
 export function QueryParams({ request }: { request: Request }) {
   if (request.query.length === 0) {

src/components/WebLogView/RequestDetails/RequestDetails.tsx

@@ -5,6 +5,7 @@ import { Cookies } from '../Cookies'
 import { Headers } from './Headers'
 import { Payload } from './Payload'
 import { QueryParams } from './QueryParams'
+import { Box } from '@radix-ui/themes'
 
 export function RequestDetails({ data }: { data: ProxyData }) {
   return (
@@ -19,7 +20,9 @@ export function RequestDetails({ data }: { data: ProxyData }) {
       </Tabs.List>
 
       <Tabs.Content value="headers">
-        <Headers data={data} />
+        <Box p="2" height="100%">
+          <Headers data={data} />
+        </Box>
       </Tabs.Content>
 
       <Tabs.Content value="payload">

src/components/WebLogView/ResponseDetails/ResponseDetails.tsx

@@ -27,9 +27,7 @@ export function ResponseDetails({ data }: { data: ProxyData }) {
       </Tabs.Content>
       <Tabs.Content value="cookies">
         <ScrollArea style={{ height: '100%' }}>
-          <Box p="2" height="100%">
-            <Cookies cookies={data.response?.cookies} />
-          </Box>
+          <Cookies cookies={data.response?.cookies} />
         </ScrollArea>
       </Tabs.Content>
     </Tabs.Root>

src/components/WebLogView/Row.tsx

@@ -19,7 +19,12 @@ export function Row({ data, isSelected, onSelectRequest }: RowProps) {
   )
 
   return (
-    <Table.Row onClick={() => onSelectRequest(data)}>
+    <Table.Row
+      onClick={() => onSelectRequest(data)}
+      css={{
+        backgroundColor: isSelected ? 'var(--accent-2)' : 'transparent',
+      }}
+    >
       <Table.Cell
         css={{
           cursor: 'var(--cursor-button)',

src/components/WebLogView/WebLogView.tsx

@@ -1,12 +1,13 @@
+import { ReactNode } from 'react'
 import { css } from '@emotion/react'
-import { Flex, Text, Table, Box } from '@radix-ui/themes'
+import { Flex, Text, Box } from '@radix-ui/themes'
 import { isEmpty } from 'lodash-es'
 
 import { Group as GroupType, ProxyData } from '@/types'
 import { Row } from './Row'
 import { Group } from './Group'
 import grotIllustration from '@/assets/grot.svg'
-import { ReactNode } from 'react'
+import { Table } from '@/components/Table'
 
 interface WebLogViewProps {
   requests: ProxyData[]

src/views/Generator/GeneratorSidebar/GeneratorSidebar.tsx

@@ -58,7 +58,7 @@ export function GeneratorSidebar() {
                 color="var(--red-9)"
               />
             )}
-            Script preview
+            Script
           </Tabs.Trigger>
           {hasPreview && (
             <Tabs.Trigger value="rule-preview">Rule preview</Tabs.Trigger>

src/views/Generator/TestOptions/LoadProfile/components/ExecutorOptions/RampingVUs/VUStages.tsx

@@ -1,8 +1,9 @@
-import { Box, Button, Flex, Table } from '@radix-ui/themes'
+import { Box, Button, Flex } from '@radix-ui/themes'
 
 import { Stage } from './Stage'
 import { LoadProfileExecutorOptions } from '@/types/testOptions'
 import { useFormContext, useFieldArray } from 'react-hook-form'
+import { Table } from '@/components/Table'
 
 export function VUStages() {
   const {

src/views/Generator/TestOptions/VariablesEditor.tsx

@@ -1,12 +1,13 @@
 import { useCallback, useEffect } from 'react'
 import { TrashIcon } from '@radix-ui/react-icons'
-import { Button, IconButton, Table, TextField } from '@radix-ui/themes'
+import { Button, IconButton, TextField } from '@radix-ui/themes'
 import { useGeneratorStore } from '@/store/generator'
 import { useForm, useFieldArray } from 'react-hook-form'
 import { TestData } from '@/types/testData'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { TestDataSchema } from '@/schemas/testData'
 import { FieldGroup } from '@/components/Form'
+import { Table } from '@/components/Table'
 
 export function VariablesEditor() {
   const variables = useGeneratorStore((store) => store.variables)

src/views/Validator/ChecksSection.tsx

@@ -2,10 +2,11 @@ import { CollapsibleSection } from '@/components/CollapsibleSection'
 import { K6Check } from '@/types'
 import { css } from '@emotion/react'
 import { InfoCircledIcon } from '@radix-ui/react-icons'
-import { Box, Callout, ScrollArea, Table } from '@radix-ui/themes'
+import { Box, Callout, ScrollArea } from '@radix-ui/themes'
 import { groupChecksByPath } from './ChecksSection.utils'
 import { CheckRow } from './CheckRow'
 import { useMemo } from 'react'
+import { Table } from '@/components/Table'
 
 interface ChecksSectionProps {
   checks: K6Check[]