From 7cc41e7ffe063c8a9bbe62f34e0ddc24e20e08da Mon Sep 17 00:00:00 2001
From: Bhargav <BJP232004@GMAIL.COM>
Date: Mon, 2 Mar 2026 11:53:41 +0530
Subject: [PATCH] Logs page UI issues (#10707)

---
 web/src/plugins/logs/SearchResult.vue         |  2 +-
 .../logs/components/FieldExpansion.vue        | 44 ++++++++++++++---
 web/src/plugins/logs/components/FieldRow.vue  | 49 +++++++++++++++----
 web/src/plugins/logs/patterns/PatternCard.vue |  4 +-
 web/src/styles/_variables.scss                | 11 +++++
 5 files changed, 90 insertions(+), 20 deletions(-)

diff --git a/web/src/plugins/logs/SearchResult.vue b/web/src/plugins/logs/SearchResult.vue
index 61ba1750f3..7680275064 100644
--- a/web/src/plugins/logs/SearchResult.vue
+++ b/web/src/plugins/logs/SearchResult.vue
@@ -156,7 +156,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           ></q-select>
           <!-- Wrap Content Button -->
           <q-btn
-            v-if="searchObj.meta.logsVisualizeToggle === 'logs'"
+            v-if="searchObj.meta.logsVisualizeToggle === 'logs' || searchObj.meta.logsVisualizeToggle === 'patterns'"
             data-test="logs-search-result-wrap-table-content-btn"
             icon="wrap_text"
             flat
diff --git a/web/src/plugins/logs/components/FieldExpansion.vue b/web/src/plugins/logs/components/FieldExpansion.vue
index e8c8092cf8..97f1b37e2e 100644
--- a/web/src/plugins/logs/components/FieldExpansion.vue
+++ b/web/src/plugins/logs/components/FieldExpansion.vue
@@ -41,8 +41,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <span v-if="field.dataType" class="field-type-container" :title="field.dataType">
               <span
                 class="field-type-badge"
-                :style="{ backgroundColor: fieldTypeInfo.color }"
-              >{{ fieldTypeInfo.label }}</span>
+                :style="{
+                  backgroundColor: fieldTypeInfo.color,
+                  color: fieldTypeInfo.textColor,
+                }"
+              >
+                {{ fieldTypeInfo.label }}
+              </span>
               <q-icon
                 class="field-expand-icon"
                 :name="isExpanded ? 'expand_less' : 'expand_more'"
@@ -418,12 +423,35 @@ const isFieldSelected = computed(() =>
 
 const fieldTypeInfo = computed(() => {
   const t = (props.field.dataType || "").toLowerCase();
-  if (t === "boolean") return { label: "B", color: "#e74c3c" };
-  if (t.includes("float")) return { label: "~", color: "#9b59b6" };
-  if (t.includes("int") || t.includes("uint")) return { label: "#", color: "#e67e22" };
+  if (t === "boolean")
+    return {
+      label: "B",
+      color: "var(--o2-field-type-boolean-bg)",
+      textColor: "var(--o2-field-type-boolean-text)",
+    };
+  if (t.includes("float"))
+    return {
+      label: "~",
+      color: "var(--o2-field-type-float-bg)",
+      textColor: "var(--o2-field-type-float-text)",
+    };
+  if (t.includes("int") || t.includes("uint"))
+    return {
+      label: "#",
+      color: "var(--o2-field-type-number-bg)",
+      textColor: "var(--o2-field-type-number-text)",
+    };
   if (t.includes("timestamp") || t === "date32" || t === "date64")
-    return { label: "T", color: "#3498db" };
-  return { label: "S", color: "#27ae60" };
+    return {
+      label: "T",
+      color: "var(--o2-field-type-timestamp-bg)",
+      textColor: "var(--o2-field-type-timestamp-text)",
+    };
+  return {
+    label: "S",
+    color: "var(--o2-field-type-string-bg)",
+    textColor: "var(--o2-field-type-string-text)",
+  };
 });
 
 watchDebounced(
@@ -496,7 +524,7 @@ const handleApplyMultiSelect = (action: string) => {
   height: 1rem;
   border-radius: 0.2rem;
   font-size: 0.6rem;
-  font-weight: 700;
+  font-weight: 800;
   color: #fff;
   transition: opacity 0.15s ease;
 }
diff --git a/web/src/plugins/logs/components/FieldRow.vue b/web/src/plugins/logs/components/FieldRow.vue
index e94774fcd1..4f7a3b8310 100644
--- a/web/src/plugins/logs/components/FieldRow.vue
+++ b/web/src/plugins/logs/components/FieldRow.vue
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     v-if="field.ftsKey || !field.isSchemaField || !field.showValues"
     class="field-container flex content-center ellipsis full-width hover:tw:bg-[var(--o2-hover-accent)] tw:rounded-[0.25rem]"
-    :class="field.name !== timestampColumn ? 'q-pl-lg' : ''"
+
     :title="field.name"
   >
     <div
@@ -33,7 +33,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <span
           v-if="field.dataType"
           class="field-type-badge"
-          :style="{ backgroundColor: fieldTypeInfo.color }"
+          :style="{
+            backgroundColor: fieldTypeInfo.color,
+            color: fieldTypeInfo.textColor,
+          }"
           :title="field.dataType"
         >{{ fieldTypeInfo.label }}</span>
         {{ field.name }}
@@ -134,14 +137,42 @@ const isFieldSelected = computed(() =>
 );
 
 const fieldTypeInfo = computed(() => {
-  if (props.field.name === props.timestampColumn) return { label: "T", color: "#3498db" };
+  if (props.field.name === props.timestampColumn)
+    return {
+      label: "T",
+      color: "var(--o2-field-type-timestamp-bg)",
+      textColor: "var(--o2-field-type-timestamp-text)",
+    };
   const t = (props.field.dataType || "").toLowerCase();
-  if (t === "boolean") return { label: "B", color: "#e74c3c" };
-  if (t.includes("float")) return { label: "~", color: "#9b59b6" };
-  if (t.includes("int") || t.includes("uint")) return { label: "#", color: "#e67e22" };
+  if (t === "boolean")
+    return {
+      label: "B",
+      color: "var(--o2-field-type-boolean-bg)",
+      textColor: "var(--o2-field-type-boolean-text)",
+    };
+  if (t.includes("float"))
+    return {
+      label: "~",
+      color: "var(--o2-field-type-float-bg)",
+      textColor: "var(--o2-field-type-float-text)",
+    };
+  if (t.includes("int") || t.includes("uint"))
+    return {
+      label: "#",
+      color: "var(--o2-field-type-number-bg)",
+      textColor: "var(--o2-field-type-number-text)",
+    };
   if (t.includes("timestamp") || t === "date32" || t === "date64")
-    return { label: "T", color: "#3498db" };
-  return { label: "S", color: "#27ae60" };
+    return {
+      label: "T",
+      color: "var(--o2-field-type-timestamp-bg)",
+      textColor: "var(--o2-field-type-timestamp-text)",
+    };
+  return {
+    label: "S",
+    color: "var(--o2-field-type-string-bg)",
+    textColor: "var(--o2-field-type-string-text)",
+  };
 });
 </script>
 
@@ -177,7 +208,7 @@ const fieldTypeInfo = computed(() => {
   height: 1rem;
   border-radius: 0.2rem;
   font-size: 0.6rem;
-  font-weight: 700;
+  font-weight: 800;
   color: #fff;
   margin-right: 0.3rem;
   flex-shrink: 0;
diff --git a/web/src/plugins/logs/patterns/PatternCard.vue b/web/src/plugins/logs/patterns/PatternCard.vue
index 2bad3f2f6e..b3355a366c 100644
--- a/web/src/plugins/logs/patterns/PatternCard.vue
+++ b/web/src/plugins/logs/patterns/PatternCard.vue
@@ -44,7 +44,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Occurrence Column -->
     <div class="tw:w-16 tw:flex-shrink-0 tw:px-2 tw:text-right">
       <span
-        class="text-weight-bold text-primary"
+        class="tw:text-[var(--o2-text-4)]"
         :data-test="`pattern-card-${index}-frequency`"
       >
         {{ pattern.frequency.toLocaleString() }}
@@ -54,7 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Percentage Column -->
     <div class="tw:w-14 tw:flex-shrink-0 tw:px-2 tw:text-right">
       <span
-        class="text-weight-bold text-primary"
+        class="tw:text-[var(--o2-text-4)]"
         :data-test="`pattern-card-${index}-percentage`"
         >{{ pattern.percentage.toFixed(2) }}%</span
       >
diff --git a/web/src/styles/_variables.scss b/web/src/styles/_variables.scss
index e63c1be099..7f3715ea09 100644
--- a/web/src/styles/_variables.scss
+++ b/web/src/styles/_variables.scss
@@ -504,6 +504,17 @@ $json-object-dark: #D1D5DB;         // Light gray
   --o2-tag-grey-1: #E2E8F0;
   --o2-tag-grey-2: #eaebec;
 
+  // Field Type Badge Colors
+  --o2-field-type-string-bg: oklch(95% 0.052 163.051);
+  --o2-field-type-string-text: oklch(59.6% 0.145 163.225);
+  --o2-field-type-boolean-bg: #e74c3c;
+  --o2-field-type-boolean-text: #fff;
+  --o2-field-type-float-bg: oklch(94.6% 0.033 307.174);
+  --o2-field-type-float-text: oklch(55.8% 0.288 302.321);
+  --o2-field-type-number-bg: oklch(95.4% 0.038 75.164);
+  --o2-field-type-number-text: oklch(64.6% 0.222 41.116);
+  --o2-field-type-timestamp-bg: oklch(93.2% 0.032 255.585);
+  --o2-field-type-timestamp-text: oklch(54.6% 0.245 262.881);
 
   // Span Colors for Traces (Light Mode)
   --o2-span-1: #{$o2-span-1};