chore: promotion UI spacing fixes (#7826)

packages/admin-next/dashboard/src/routes/promotions/common/edit-rules/components/rules-form-field/rules-form-field.tsx

@@ -119,7 +119,7 @@ export const RulesFormField = ({
         {t(`promotions.fields.conditions.${ruleType}.title`)}
       </Heading>
 
-      <Text className="text-ui-fg-subtle txt-small mb-10">
+      <Text className="text-ui-fg-subtle txt-small mb-6">
         {t(`promotions.fields.conditions.${ruleType}.description`)}
       </Text>
 
@@ -296,7 +296,7 @@ export const RulesFormField = ({
         )
       })}
 
-      <div className="mt-8">
+      <div className={!!fields.length ? "mt-6" : ""}>
         <Button
           type="button"
           variant="secondary"
@@ -313,22 +313,24 @@ export const RulesFormField = ({
           {t("promotions.fields.addCondition")}
         </Button>
 
-        <Button
+        {!!fields.length && (
-          type="button"
+          <Button
-          variant="transparent"
+            type="button"
-          className="text-ui-fg-muted hover:text-ui-fg-subtle ml-2 inline-block"
+            variant="transparent"
-          onClick={() => {
+            className="text-ui-fg-muted hover:text-ui-fg-subtle ml-2 inline-block"
-            const indicesToRemove = fields
+            onClick={() => {
-              .map((field: any, index) => (field.required ? null : index))
+              const indicesToRemove = fields
-              .filter((f) => f !== null)
+                .map((field: any, index) => (field.required ? null : index))
+                .filter((f) => f !== null)
 
-            setRulesToRemove &&
+              setRulesToRemove &&
-              setRulesToRemove(fields.filter((field: any) => !field.required))
+                setRulesToRemove(fields.filter((field: any) => !field.required))
-            remove(indicesToRemove)
+              remove(indicesToRemove)
-          }}
+            }}
-        >
+          >
-          {t("promotions.fields.clearAll")}
+            {t("promotions.fields.clearAll")}
-        </Button>
+          </Button>
+        )}
       </div>
     </div>
   )