From 410fc5423b39205799cc45e7d0d7011129cf5bed Mon Sep 17 00:00:00 2001
From: Alexandre Monjol <alexandre.monjol@gmail.com>
Date: Tue, 15 Nov 2022 11:44:37 +0000
Subject: [PATCH] =?UTF-8?q?fix(qa)=20=F0=9F=91=80handle=20simple=20style?=
 =?UTF-8?q?=20QA=20returns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/plans/ChargeAccordion.tsx |  7 ++--
 src/pages/CreateBillableMetric.tsx       | 46 ++++++++++++------------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/components/plans/ChargeAccordion.tsx b/src/components/plans/ChargeAccordion.tsx
index 6eb074450..234ff23cd 100644
--- a/src/components/plans/ChargeAccordion.tsx
+++ b/src/components/plans/ChargeAccordion.tsx
@@ -121,7 +121,7 @@ export const ChargeAccordion = memo(
                       : translate('text_624aa732d6af4e0103d40e65')
                   }
                 >
-                  <Button
+                  <TrashButton
                     variant="quaternary"
                     size="small"
                     icon="trash"
@@ -277,5 +277,8 @@ const Title = styled.div`
 const ValidationIcon = styled(Icon)`
   display: flex;
   align-items: center;
-  margin-right: ${theme.spacing(3)};
+`
+
+const TrashButton = styled(Button)`
+  margin-left: ${theme.spacing(3)};
 `
diff --git a/src/pages/CreateBillableMetric.tsx b/src/pages/CreateBillableMetric.tsx
index e0d575add..24073d697 100644
--- a/src/pages/CreateBillableMetric.tsx
+++ b/src/pages/CreateBillableMetric.tsx
@@ -286,26 +286,30 @@ const CreateBillableMetric = () => {
                     </Typography>
                   }
                 >
-                  <AccordionContent>
-                    <JsonEditorField
-                      name="group"
-                      label={translate('text_633d410368cc8282af232131')}
-                      helperText={<Typography html={translate('text_633d410368cc8282af232143')} />}
-                      placeholder={translate('text_633d410368cc8282af23213d')}
-                      disabled={isEdition && !billableMetric?.canBeDeleted}
-                      customInvalidError={translate('text_633b622c201ca8b521bcad59')}
-                      formikProps={formikProps}
-                    />
+                  <JsonEditorField
+                    name="group"
+                    label={translate('text_633d410368cc8282af232131')}
+                    helperText={
+                      <Typography
+                        variant="caption"
+                        color="grey600"
+                        html={translate('text_633d410368cc8282af232143')}
+                      />
+                    }
+                    placeholder={translate('text_633d410368cc8282af23213d')}
+                    disabled={isEdition && !billableMetric?.canBeDeleted}
+                    customInvalidError={translate('text_633b622c201ca8b521bcad59')}
+                    formikProps={formikProps}
+                  />
 
-                    {errorCode === FORM_ERRORS_ENUM.invalidGroupValue && (
-                      <GroupAlert type="danger">
-                        <Typography
-                          color="inherit"
-                          html={translate('text_633d410368cc8282af23214e')}
-                        />
-                      </GroupAlert>
-                    )}
-                  </AccordionContent>
+                  {errorCode === FORM_ERRORS_ENUM.invalidGroupValue && (
+                    <GroupAlert type="danger">
+                      <Typography
+                        color="inherit"
+                        html={translate('text_633d410368cc8282af23214e')}
+                      />
+                    </GroupAlert>
+                  )}
                 </Accordion>
 
                 <ButtonContainer>
@@ -363,10 +367,6 @@ const ComboboxHeader = styled.div`
   }
 `
 
-const AccordionContent = styled.div`
-  padding: ${theme.spacing(4)};
-`
-
 const GroupAlert = styled(Alert)`
   margin-top: ${theme.spacing(6)};
 `