From 3ccf45a4a4e386a6e7d2e917afb3f2b0d1c14682 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Sun, 4 Aug 2024 22:31:51 +0800
Subject: [PATCH] refactor: update filter group container styles

---
 .changeset/seven-pandas-tap.md                  |  5 +++++
 .../filter/src/views/filter-group-container.tsx | 17 ++++++-----------
 packages/filter/src/views/rule-joiner.tsx       |  7 +++----
 .../src/views/single-filter-container.tsx       |  1 +
 .../src/filter/flatten-filter-builder.tsx       |  4 +---
 5 files changed, 16 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/seven-pandas-tap.md

diff --git a/.changeset/seven-pandas-tap.md b/.changeset/seven-pandas-tap.md
new file mode 100644
index 0000000..3633e06
--- /dev/null
+++ 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
index 300af1b..afdb07b 100644
--- 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
index b8c031e..dc227e3 100644
--- 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
index 8c6f58e..1e25c0a 100644
--- 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
index 164c647..3b7e41c 100644
--- 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>