chore: update preview log selection

studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultSelectionRenderer.tsx

@@ -1,32 +1,93 @@
 import Table from 'components/to-be-cleaned/Table'
+import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
 import { jsonSyntaxHighlight } from '../LogsFormatters'
 
 const DefaultSelectionRenderer = ({ log }: any) => {
+  const DetailedRow = ({
+    label,
+    value,
+    code,
+  }: {
+    label: string
+    value: string | React.ReactNode
+    code?: boolean
+  }) => {
+    return (
+      <div className="grid grid-cols-12">
+        <span className="text-scale-900 text-sm col-span-4">{label}</span>
+        <span className={`text-scale-1200 text-sm col-span-8 ${code && 'text-xs font-mono'}`}>
+          {value}
+        </span>
+      </div>
+    )
+  }
+
+  const DetailedJsonRow = ({
+    label,
+    value,
+    code,
+  }: {
+    label: string
+    value: Object
+    code?: boolean
+  }) => {
+    return (
+      <div className="grid grid-cols-12">
+        <span className="text-scale-900 text-sm col-span-4">{label}</span>
+        <span className={`text-scale-1200 text-sm col-span-8 ${code && 'text-xs font-mono'}`}>
+          <pre
+            dangerouslySetInnerHTML={{
+              __html: jsonSyntaxHighlight(value),
+            }}
+          />
+        </span>
+      </div>
+    )
+  }
+
   return (
-    <Table
-      body={
-        <>
-          {Object.entries(log).map(([key, value]) => (
-            <Table.tr key={key}>
-              <Table.th className="text-xs">{key}</Table.th>
-              <Table.td>
-                <pre className="text-xs  p-2">
-                  {value && typeof value === 'object' ? (
-                    <div
-                      dangerouslySetInnerHTML={{
-                        __html: jsonSyntaxHighlight(value),
-                      }}
-                    />
-                  ) : (
-                    String(value)
-                  )}
-                </pre>
-              </Table.td>
-            </Table.tr>
-          ))}
-        </>
-      }
-    />
+    <div className="overflow-hidden overflow-x-auto space-y-6">
+      {/* <Table
+        className={`bg-scale-300 ${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}
+        body={
+          <>
+            {Object.entries(log).map(([key, value]) => (
+              <Table.tr key={key} className="!bg-scale-300">
+                <Table.th className="flex pt-4 text-sm font-normal font-sans text-scale-1100">
+                  {key}
+                </Table.th>
+                <Table.td className="">
+                  <pre className="text-xs  p-2">
+                    {value && typeof value === 'object' ? (
+                      <div
+                        dangerouslySetInnerHTML={{
+                          __html: jsonSyntaxHighlight(value),
+                        }}
+                      />
+                    ) : (
+                      <span className="text-sm text-scale-1200 font-sans font-normal">
+                        {String(value)}
+                      </span>
+                    )}
+                  </pre>
+                </Table.td>
+              </Table.tr>
+            ))}
+          </>
+        }
+      /> */}
+      {Object.entries(log).map(([key, value]) => {
+        return (
+          <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
+            {value && typeof value === 'object' ? (
+              <DetailedJsonRow label={key} value={value} />
+            ) : (
+              <DetailedRow label={key} value={String(value)} />
+            )}
+          </div>
+        )
+      })}
+    </div>
   )
 }
 

studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionInvocationSelectionRender.tsx

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs'
+import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
 import { jsonSyntaxHighlight, ResponseCodeFormatter } from '../LogsFormatters'
 
 const FunctionInvocationSelectionRender = ({ log }: any) => {
@@ -31,7 +32,7 @@ const FunctionInvocationSelectionRender = ({ log }: any) => {
 
   return (
     <>
-      <div className="px-5 space-y-2">
+      <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-2`}>
         <DetailedRow label="Status" value={<ResponseCodeFormatter value={status} />} />
         <DetailedRow label="Method" value={method} />
         <DetailedRow label="Timestamp" value={dayjs(log.timestamp).toISOString()} />
@@ -41,7 +42,7 @@ const FunctionInvocationSelectionRender = ({ log }: any) => {
         <DetailedRow label="Request url" value={requestUrl} />
         <DetailedRow label="Host" value={host} />
       </div>
-      <div className="px-5">
+      <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
         <h3 className="text-lg text-scale-1200 mb-4">Request body</h3>
         <pre className="text-sm syntax-highlight overflow-x-auto">
           <div
@@ -52,7 +53,7 @@ const FunctionInvocationSelectionRender = ({ log }: any) => {
           />
         </pre>
       </div>
-      <div className="px-5">
+      <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
         <h3 className="text-lg text-scale-1200 mb-4">
           Response{method ? ` ${method}` : null} body
         </h3>

studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs'
+import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
 import { jsonSyntaxHighlight, ResponseCodeFormatter, SeverityFormatter } from '../LogsFormatters'
 
 const FunctionLogsSelectionRender = ({ log }: any) => {
@@ -25,7 +26,7 @@ const FunctionLogsSelectionRender = ({ log }: any) => {
 
   return (
     <>
-      <div className="px-5">
+      <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
         <span className="text-scale-900 text-sm col-span-4">Event message</span>
         <div
           className="text-xs text-wrap font-mono text-scale-1200 mt-2"
@@ -35,7 +36,7 @@ const FunctionLogsSelectionRender = ({ log }: any) => {
         />
       </div>
       <div className="h-px w-full bg-panel-border-interior-light dark:bg-panel-border-interior-dark"></div>
-      <div className="px-5 space-y-2">
+      <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-2`}>
         <DetailedRow label="Severity" value={<SeverityFormatter value={log.metadata.level} />} />
         <DetailedRow label="Log ID" value={log.id} />
         <DetailedRow label="Deployment version" value={log?.metadata?.version} />
@@ -44,7 +45,7 @@ const FunctionLogsSelectionRender = ({ log }: any) => {
         <DetailedRow label="Deployment ID" value={log.metadata.deployment_id} />
         <DetailedRow label="Function ID" value={log.metadata.function_id} />
       </div>
-      <div className="px-5">
+      <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
         <h3 className="text-lg text-scale-1200 mb-4">Metadata</h3>
         <pre className="text-sm syntax-highlight overflow-x-auto">
           <div