refactor: update filter group container styles

lawvs · Aug 4, 2024 · 3ccf45a · 3ccf45a
1 parent 2a8d304
commit 3ccf45a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 18 deletions.
diff --git a/.changeset/seven-pandas-tap.md b/.changeset/seven-pandas-tap.md
@@ -0,0 +1,5 @@
+---
+"@fn-sphere/filter": patch
+---
+
+Update styles for default templates
diff --git a/packages/filter/src/views/filter-group-container.tsx b/packages/filter/src/views/filter-group-container.tsx
@@ -23,27 +23,22 @@ export const FilterGroupContainer = ({
       className="filter-group-container"
       style={{
         display: "flex",
+        flexDirection: "column",
+        borderRadius: 4,
+        padding: 4,
+        background: "rgba(0, 0, 0, 0.05)",
       }}
     >
       <div
         style={{
           display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
           marginRight: 12,
+          whiteSpace: "nowrap",
         }}
       >
         {text}
       </div>
-      <div
-        style={{
-          borderRadius: 4,
-          padding: 4,
-          background: "rgba(0, 0, 0, 0.05)",
-        }}
-      >
-        {children}
-      </div>
+      {children}
     </div>
   );
 };
diff --git a/packages/filter/src/views/rule-joiner.tsx b/packages/filter/src/views/rule-joiner.tsx
@@ -9,11 +9,10 @@ export const RuleJoiner = ({ parent }: RuleJoinerProps) => {
   const operator = parent.op;
   return (
     <div
+      className={`rule-joiner-${operator}`}
       style={{
-        margin: 8,
+        margin: 4,
       }}
-    >
-      {operator === "or" ? "Or" : "And"}
-    </div>
+    ></div>
   );
 };
diff --git a/packages/filter/src/views/single-filter-container.tsx b/packages/filter/src/views/single-filter-container.tsx
@@ -14,6 +14,7 @@ export const SingleFilterContainer = ({
       className="single-filter-container"
       style={{
         display: "flex",
+        gap: 4,
       }}
     >
       {children}

diff --git a/packages/playground/src/filter/flatten-filter-builder.tsx b/packages/playground/src/filter/flatten-filter-builder.tsx
@@ -125,9 +125,7 @@ export const FlattenFilterBuilder = <Data,>({
                         joinBetween={[andGroup.conditions[ruleIdx - 1], rule]}
                       />
                     )}
-                    <div className="rule-container">
-                      {<FilterRule rule={rule} />}
-                    </div>
+                    <FilterRule rule={rule} />
                   </Fragment>
                 ))}
               </FilterGroupContainer>