From f27ae13ec794e2ed138fa6e7e8cfc69a7046ea8e Mon Sep 17 00:00:00 2001
From: fritzschoff <max.j.f@gmx.de>
Date: Tue, 26 Apr 2022 15:10:10 +0100
Subject: [PATCH] fix(accordion): fixed icon bug

---
 src/components/Accordion.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
index 4b2a081..8136727 100644
--- a/src/components/Accordion.tsx
+++ b/src/components/Accordion.tsx
@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { IconButton } from '..';
 import colors from '../styles/colors';
 import ArrowDropdownDownIcon from './Icons/ArrowDropdownDownIcon';
 import ArrowDropdownUpIcon from './Icons/ArrowDropdownUpIcon';
@@ -29,9 +30,13 @@ export default function Accordion({
 						{headerChildren}
 						<StyledIconWrapper>
 							{isOpen ? (
-								<ArrowDropdownUpIcon active={true} />
+								<IconButton rounded onClick={() => setOpen(!open)} size="tiniest">
+									<ArrowDropdownUpIcon active={true} />
+								</IconButton>
 							) : (
-								<ArrowDropdownDownIcon active={true} />
+								<IconButton rounded onClick={() => setOpen(!open)} size="tiniest">
+									<ArrowDropdownDownIcon active={true} />
+								</IconButton>
 							)}
 						</StyledIconWrapper>
 					</AccordionHeader>
@@ -46,9 +51,13 @@ export default function Accordion({
 					{headerChildren}
 					<StyledIconWrapper>
 						{isOpen ? (
-							<ArrowDropdownUpIcon active={true} />
+							<IconButton rounded onClick={() => setOpen(!open)} size="tiniest">
+								<ArrowDropdownUpIcon active={true} />
+							</IconButton>
 						) : (
-							<ArrowDropdownDownIcon active={true} />
+							<IconButton rounded onClick={() => setOpen(!open)} size="tiniest">
+								<ArrowDropdownDownIcon active={true} />
+							</IconButton>
 						)}
 					</StyledIconWrapper>
 				</AccordionHeader>
@@ -77,10 +86,10 @@ const StyledAccordionWrapper = styled.div`
 `;
 
 const AccordionHeader = styled.div`
-	display: flex;
 	cursor: pointer;
 	width: 100%;
 	height: 100%;
+	position: relative;
 `;
 
 const AccordionContent = styled.div<{ visible: boolean }>`
@@ -100,4 +109,8 @@ const AccordionContent = styled.div<{ visible: boolean }>`
 
 const StyledIconWrapper = styled.div`
 	margin-left: auto;
+	position: absolute;
+	right: 0px;
+	top: 50%;
+	transform: translate(0, -50%);
 `;