From f297fc18b282b5cdb282393f76e1be4cd6a3afc3 Mon Sep 17 00:00:00 2001
From: Peiman <peymannaderi3@yahoo.com>
Date: Wed, 6 Jul 2022 15:08:50 +0430
Subject: [PATCH] fix: update Accordion props and styles

---
 src/components/Accordion/Accordion.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 82e2dc1..d623ec1 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -1,5 +1,7 @@
 import clsx from 'clsx';
 import { Card, CardVariant } from 'components/Card/Card';
+import { Icon } from 'components/Icon/Icon';
+import { IconButton } from 'components/IconButton/IconButton';
 import { ArrowDropdownDownIcon } from 'components/Icons/ArrowDropdownDownIcon';
 import { useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -8,6 +10,7 @@ export interface AccordionProps {
   flat?: boolean;
   title: React.ReactNode;
   className?: string;
+  wrapperClassName?: string;
   children?: React.ReactNode;
   variant?: CardVariant;
 }
@@ -17,7 +20,8 @@ export const Accordion: React.FC<AccordionProps> = ({
   title,
   children,
   className,
-  variant
+  variant,
+  wrapperClassName = ''
 }) => {
   const [isActive, setIsActive] = useState(false);
 
@@ -25,7 +29,7 @@ export const Accordion: React.FC<AccordionProps> = ({
 
   const nodeRef = useRef(null);
   return (
-    <Card className={className} variant={variant}>
+    <Card className={className} variant={variant} wrapperClassName={wrapperClassName}>
       <div
         className={clsx('ui-flex ui-justify-between ui-items-center ui-select-none', {
           'ui-cursor-default': flat
@@ -37,14 +41,14 @@ export const Accordion: React.FC<AccordionProps> = ({
       >
         <h3 className='ui-tg-body'>{title}</h3>
         {!flat && (
-          <ArrowDropdownDownIcon
-            className={clsx(
-              'ui-transition-transform ui-text-black-600 dark:ui-text-white ui-text-base',
-              {
+          <IconButton rounded size='sm'>
+            <Icon
+              className={clsx('ui-transition-transform ui-text-primary ui-text-base', {
                 'ui-transform ui-rotate-180 ': isActive
-              }
-            )}
-          />
+              })}
+              name='Bottom-3'
+            />
+          </IconButton>
         )}
       </div>
       {/*  TODO: update the transition package */}