fix: Removes margin from the accordion's chevron

src/components/Molecules/Accordion/Accordion.js

@@ -7,15 +7,6 @@ import spacing from '../../../theme/shared/spacing';
 import menuGroupIcon from '../../../theme/shared/assets/Menu-Group-Icon.svg';
 import defaultBoxShadow from '../../../theme/shared/boxShadows';
 
-const Container = styled.div`
-  border-radius: 1rem;
-  background: ${({ theme }) => theme.color('white')};
-  ${defaultBoxShadow()}
-  &:hover {
-    ${defaultBoxShadow(true)}
-  }
-`;
-
 const ChevronKeyframes = keyframes`
  0% { margin-top: 0rem; }
  50% { margin-top: 0.5rem; }
@@ -56,6 +47,19 @@ const MenuGroupIcon = styled.img`
   transition: transform 0.15s ease-in-out;
 `;
 
+const Container = styled.div`
+  border-radius: 1rem;
+  background: ${({ theme }) => theme.color('white')};
+  ${defaultBoxShadow()}
+  &:hover {
+    ${defaultBoxShadow(true)}
+  }
+
+  ${MenuGroupIcon} {
+    margin: 0;
+  }
+`;
+
 const Copy = styled.div`
   overflow: hidden;
   height: 0;

src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap

@@ -40,7 +40,7 @@ exports[`renders correctly 1`] = `
   line-height: inherit;
 }
 
-.c8 {
+.c9 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -52,26 +52,16 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
-.c8 {
+.c9 {
   font-size: 1rem;
   line-height: normal;
 }
 
-.c8 span {
+.c9 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c0 {
-  border-radius: 1rem;
-  background: #FFFFFF;
-  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
-}
-
-.c0:hover {
-  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
-}
-
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -117,7 +107,7 @@ exports[`renders correctly 1`] = `
   align-content: center;
 }
 
-.c6 {
+.c7 {
   height: 24px;
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
@@ -127,7 +117,21 @@ exports[`renders correctly 1`] = `
   transition: transform 0.15s ease-in-out;
 }
 
-.c7 {
+.c0 {
+  border-radius: 1rem;
+  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
+
+.c0:hover {
+  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+}
+
+.c0 .c6 {
+  margin: 0;
+}
+
+.c8 {
   overflow: hidden;
   height: 0;
   visibility: none;
@@ -169,21 +173,21 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c8 {
+  .c9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c8 {
+  .c9 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:740px) {
-  .c7 {
+  .c8 {
     padding: 0 3rem;
   }
 }
@@ -212,16 +216,16 @@ exports[`renders correctly 1`] = `
       <img
         alt=""
         aria-hidden="true"
-        className="c6"
+        className="c6 c7"
         src="mock.asset"
       />
     </div>
   </button>
   <div
-    className="c7"
+    className="c8"
   >
     <p
-      className="c8"
+      className="c9"
     >
       Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information
     </p>