feat(css): update icons of query panel logic menu

libs/shared/lib/querybuilder/model/logic/numberFilters.tsx

@@ -20,7 +20,7 @@ export const MathFilters: Record<NumberFilterTypes, GeneralDescription<NumberFil
     ],
     output: { name: '==', type: 'float' },
     logic: ['==', '@1', '@2'],
-    icon: '==',
+    icon: '=',
   },
   [NumberFilterTypes.NOT_EQUAL]: {
     key: 'numberFilterNotEqual',
@@ -34,7 +34,7 @@ export const MathFilters: Record<NumberFilterTypes, GeneralDescription<NumberFil
     ],
     output: { name: '!=', type: 'float' },
     logic: ['!=', '@1', '@2'],
-    icon: '!=',
+    icon: '≠',
   },
   [NumberFilterTypes.LESS_THAN]: {
     key: 'numberFilterLessThan',
@@ -62,7 +62,7 @@ export const MathFilters: Record<NumberFilterTypes, GeneralDescription<NumberFil
     ],
     output: { name: '<=', type: 'float' },
     logic: ['<=', '@1', '@2'],
-    icon: '<=',
+    icon: '≤',
   },
   [NumberFilterTypes.GREATER_THAN]: {
     key: 'numberFilterGreaterThan',
@@ -91,7 +91,7 @@ export const MathFilters: Record<NumberFilterTypes, GeneralDescription<NumberFil
     ],
     output: { name: '>=', type: 'float' },
     logic: ['>=', '@1', '@2'],
-    icon: '>=',
+    icon: '≥',
   },
 };
 

libs/shared/lib/querybuilder/model/logic/numberFunctions.tsx

@@ -48,7 +48,7 @@ export const NumberFunctions: Record<NumberFunctionTypes, GeneralDescription<Num
     ],
     output: { name: '*', type: 'float' },
     logic: ['*', '@1', '@2'],
-    icon: '*',
+    icon: '×',
   },
   [NumberFunctionTypes.DIVIDE]: {
     key: 'numberFunctionDivide',
@@ -63,7 +63,7 @@ export const NumberFunctions: Record<NumberFunctionTypes, GeneralDescription<Num
     ],
     output: { name: '/', type: 'float' },
     logic: ['/', '@1', '@2'],
-    icon: '/',
+    icon: '÷',
   },
 };
 

libs/shared/lib/querybuilder/panel/querysidepanel.tsx

@@ -102,7 +102,11 @@ export const QuerySidePanel = (props: {
                     if (!props.draggable && props?.onClick) props.onClick(item);
                   }}
                 >
-                  {item.icon && <span className="w-min">{item.icon}</span>}
+                  {item.icon && (
+                    <div className="w-[1rem] rounded-sm justify-center flex">
+                      <span>{item.icon}</span>
+                    </div>
+                  )}
                   <span className="w-full">{item.name}</span>
                   <span className="flex scale-75">
                     {item.key.toLowerCase().includes('filter') && <FilterAltIcon fontSize="small" />}