From 4a2a859d0121e40fdc830568e81dd3fff4206cff Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Thu, 5 Dec 2024 16:42:15 -0500
Subject: [PATCH] Revert "Style improvements in omnisearch headers"

This reverts commit 89e51b05315317bd124306a0acf2bfadadffd7a6.
---
 .../components/FilterSeries/FilterSeries.tsx  |   4 +-
 .../FilterSeries/SeriesName/SeriesName.tsx    |  12 +-
 .../components/WidgetForm/WidgetFormNew.tsx   |   2 +-
 .../components/WidgetName/WidgetName.tsx      |  13 +--
 .../components/WidgetView/CardViewMenu.tsx    |   2 +-
 .../WidgetView/WidgetViewHeader.tsx           |   2 +-
 .../shared/Filters/FilterList/EventsOrder.tsx | 107 ++++++++----------
 .../FilterSelection/FilterSelection.tsx       |   2 +-
 8 files changed, 66 insertions(+), 78 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
index 5b7b76bed..a5ad36c3e 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
@@ -56,7 +56,7 @@ const FilterSeriesHeader = observer(
     };
     return (
       <div
-        className={cn('ps-2 pr-4 h-12 flex items-center relative bg-white border-t border-l border-r rounded-t-xl', {
+        className={cn('px-4 h-12 flex items-center relative bg-white border-gray-lighter border-t border-l border-r rounded-t-xl', {
           hidden: props.hidden,
           'rounded-b-xl': !props.expanded,
         })}
@@ -79,14 +79,12 @@ const FilterSeriesHeader = observer(
           <Button
             onClick={props.onRemove}
             size="small"
-            type='text'
             disabled={!props.canDelete}
             icon={<Trash size={14} />}
           />
           <Button
             onClick={props.toggleExpand}
             size="small"
-            type='text'
             icon={
               props.expanded ? (
                 <ChevronUp size={16} />
diff --git a/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx b/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx
index 750a21abb..54f94aff9 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx
@@ -44,12 +44,18 @@ function SeriesName(props: Props) {
           onChange={write}
           onBlur={onBlur}
           onFocus={() => setEditing(true)}
-          className='bg-white text-lg font-medium rounded-lg'
+          className='bg-white'
         />
       ) : (
-        <Tooltip placement='bottom' title='Double click to edit'><div className="text-lg font-medium hover:bg-teal-light/10 px-2 rounded-lg cursor-pointer" onDoubleClick={() => setEditing(true)}>{name && name.trim() === '' ? 'Series ' + (seriesIndex + 1) : name }</div>
-        </Tooltip>
+        <div className="text-base h-8 flex items-center border-transparent">{name && name.trim() === '' ? 'Series ' + (seriesIndex + 1) : name }</div>
       )}
+      
+
+      <div className="ml-3 cursor-pointer " onClick={() => setEditing(true)}>
+        <Tooltip title='Rename' placement='bottom'>
+          <Icon name="pencil" size="14" />
+        </Tooltip>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
index dee95a23d..edf218709 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
@@ -56,7 +56,7 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
         metric.series
           .slice(0, isSingleSeries ? 1 : metric.series.length)
           .map((series: any, index: number) => (
-            <div className="mb-2 rounded-xl" key={series.name}>
+            <div className="mb-2 rounded-xl border border-gray-lighter" key={series.name}>
               <FilterSeries
                 canExclude={isPathAnalysis}
                 supportsEmpty={!isClickMap && !isPathAnalysis}
diff --git a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
index dbb2adb71..2db526d7a 100644
--- a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Icon } from 'UI';
-import { Input, Tooltip } from 'antd';
+import { Icon, Tooltip } from 'UI';
+import { Input } from 'antd';
 import cn from 'classnames';
 
 interface Props {
@@ -62,17 +62,16 @@ function WidgetName(props: Props) {
           onBlur={() => onBlur()}
           onFocus={() => setEditing(true)}
           maxLength={80}
-          className='rounded-xl text-2xl'
         />
       ) : (
         // @ts-ignore
-        <Tooltip delay={200} placement="bottom" title="Double click to rename" disabled={!canEdit}>
+        <Tooltip delay={200} title="Double click to edit" disabled={!canEdit}>
           <div
             onDoubleClick={() => setEditing(true)}
             className={
               cn(
                 "text-2xl h-8 flex items-center border-transparent",
-                canEdit && 'cursor-pointer select-none hover:bg-teal-light/10 px-3 rounded-xl'
+                canEdit && 'cursor-pointer select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium'
               )
             }
           >
@@ -81,11 +80,11 @@ function WidgetName(props: Props) {
         </Tooltip>
 
       )}
-      {/* { canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}>
+      { canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}>
         <Tooltip title='Rename' placement='bottom'>
           <Icon name="pencil" size="16" />
         </Tooltip>
-        </div> } */}
+        </div> }
     </div>
   );
 }
diff --git a/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx b/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx
index c182c2a22..bea20faf6 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx
@@ -89,7 +89,7 @@ const CardViewMenu = () => {
     return (
         <div className="flex items-center justify-between">
             <Dropdown menu={{items}}>
-                <Button type="text" icon={<EllipsisVertical size={16}/>}/>
+                <Button icon={<EllipsisVertical size={16}/>}/>
             </Dropdown>
         </div>
     );
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
index 3e46e6a4b..7bab4e8c7 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
@@ -19,7 +19,7 @@ function WidgetViewHeader({ onClick, onSave }: Props) {
   return (
     <div
       className={cn(
-        'flex justify-between items-center bg-white rounded-xl p-2 border border-gray-lighter min-h-[54px]'
+        'flex justify-between items-center bg-white rounded px-4 py-2 border border-gray-lighter'
       )}
       onClick={onClick}
     >
diff --git a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx
index a386bf48d..14c4c6abf 100644
--- a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx
@@ -1,70 +1,55 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { Dropdown, Menu, Tooltip, Space } from "antd";
-import {DownOutlined} from '@ant-design/icons';
+import { Tooltip } from "UI";
+import { Select } from "antd";
 
 const EventsOrder = observer((props: {
-  onChange: (e: any, v: any) => void,
-  filter: any,
+    onChange: (e: any, v: any) => void,
+    filter: any,
 }) => {
-  const { filter, onChange } = props;
-  const eventsOrderSupport = filter.eventsOrderSupport;
+    const {filter, onChange} = props;
+    const eventsOrderSupport = filter.eventsOrderSupport;
+    const options = [
+        {
+            name: 'eventsOrder',
+            label: 'Then',
+            value: 'then',
+            disabled: eventsOrderSupport && !eventsOrderSupport.includes('then'),
+        },
+        {
+            name: 'eventsOrder',
+            label: 'And',
+            value: 'and',
+            disabled: eventsOrderSupport && !eventsOrderSupport.includes('and'),
+        },
+        {
+            name: 'eventsOrder',
+            label: 'Or',
+            value: 'or',
+            disabled: eventsOrderSupport && !eventsOrderSupport.includes('or'),
+        },
+    ];
 
-  const options = [
-    {
-      name: 'eventsOrder',
-      label: 'THEN',
-      value: 'then',
-      disabled: eventsOrderSupport && !eventsOrderSupport.includes('then'),
-    },
-    {
-      name: 'eventsOrder',
-      label: 'AND',
-      value: 'and',
-      disabled: eventsOrderSupport && !eventsOrderSupport.includes('and'),
-    },
-    {
-      name: 'eventsOrder',
-      label: 'OR',
-      value: 'or',
-      disabled: eventsOrderSupport && !eventsOrderSupport.includes('or'),
-    },
-  ];
+    return <div className="flex items-center gap-2">
+        <div
+            className="color-gray-medium text-sm"
+            style={{textDecoration: "underline dotted"}}
+        >
+            <Tooltip
+                title={`Select the operator to be applied between events in your search.`}
+            >
+                <div>Events Order</div>
+            </Tooltip>
+        </div>
 
-  const menu = (
-    <Menu
-      onClick={(e) => {
-        const selectedOption = options.find((item) => item.value === e.key);
-        if (selectedOption && !selectedOption.disabled) {
-          onChange(null, selectedOption);
-        }
-      }}
-    >
-      {options.map((item) => (
-        <Menu.Item key={item.value} disabled={item.disabled}>
-          {item.label}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
-
-  return (
-    <div className="flex items-center gap-2">
-      <Tooltip title="Select the operator to be applied between events." placement="bottom">
-        <div className="color-gray-medium text-sm">Events Order</div>
-      </Tooltip>
-
-      <Dropdown overlay={menu} trigger={['click']} placement="bottomRight">
-      <a onClick={(e) => e.preventDefault()} className="text-sm items-center gap-2 hover:text-teal">
-        <Space className="text-sm">
-        {options.find((item) => item.value === filter.eventsOrder)?.label || 'Select'} 
-        <DownOutlined className="mr-2 text-xs" />
-        </Space>
-      </a>
-
-      </Dropdown>
-    </div>
-  );
+        <Select
+            size={"small"}
+            className="text-sm"
+            onChange={(v) => onChange(null, options.find((i) => i.value === v))}
+            value={filter.eventsOrder}
+            options={options}
+        />
+    </div>;
 });
 
-export default EventsOrder;
\ No newline at end of file
+export default EventsOrder;
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
index a0ea73a42..74ccac3c7 100644
--- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@@ -81,7 +81,7 @@ function FilterSelection(props: Props) {
           </div>
         )}
         {showModal && (
-          <div className="absolute mt-2 left-0 rounded-xl shadow-lg bg-white z-50">
+          <div className="absolute mt-2 left-0 rounded-lg shadow bg-white z-50">
             <FilterModal
               isLive={isRoute(ASSIST_ROUTE, window.location.pathname)}
               onFilterClick={onAddFilter}