Adding chevron

src/client/js/components/Admin/SlackIntegration/CustomBotWithoutProxySettingsAccordion.jsx

@@ -4,8 +4,12 @@ import { Collapse } from 'reactstrap';
 
 const CustomBotWithoutSettingsAccordion = () => {
   const { t } = useTranslation('admin');
-  const [currentlyOpenAccordionIndex, setCurrentlyOpenAccordionIndex] = useState(false);
+  const [currentlyOpenAccordionIndex, setCurrentlyOpenAccordionIndex] = useState(null);
   const toggleAccordion = (i) => {
+    if (currentlyOpenAccordionIndex === i) {
+      setCurrentlyOpenAccordionIndex(null);
+      return;
+    }
     setCurrentlyOpenAccordionIndex(i);
   };
 
@@ -13,8 +17,9 @@ const CustomBotWithoutSettingsAccordion = () => {
     <div className="card border-0 rounded-lg shadow overflow-hidden" id="customBotWithoutProxySettingsAccordion">
 
       <div className="card border-0 rounded-lg mb-0">
-        <div className="card-header clickable py-1" onClick={() => toggleAccordion(0)}>
+        <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => toggleAccordion(0)}>
           <p className="mb-0 text-primary">{`① ${t('slack_integration.without_proxy.create_bot')}`}</p>
+          <i className="fa fa-chevron-down" />
         </div>
         <Collapse isOpen={currentlyOpenAccordionIndex === 0}>
           <div className="card-body">
@@ -42,8 +47,9 @@ const CustomBotWithoutSettingsAccordion = () => {
       </div>
 
       <div className="card border-0 rounded-lg mb-0">
-        <div className="card-header clickable py-1" onClick={() => toggleAccordion(1)}>
+        <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => toggleAccordion(1)}>
           <p className="mb-0 text-primary">{`② ${t('slack_integration.without_proxy.install_bot_to_slack')}`}</p>
+          <i className="fa fa-chevron-down" />
         </div>
         <Collapse isOpen={currentlyOpenAccordionIndex === 1}>
           <div className="card-body">
@@ -53,8 +59,9 @@ const CustomBotWithoutSettingsAccordion = () => {
       </div>
 
       <div className="card border-0 rounded-lg mb-0">
-        <div className="card-header clickable py-1" onClick={() => toggleAccordion(2)}>
+        <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => toggleAccordion(2)}>
           <p className="mb-0 text-primary">{`③ ${t('slack_integration.without_proxy.register_secret_and_token')}`}</p>
+          <i className="fa fa-chevron-down" />
         </div>
         <Collapse isOpen={currentlyOpenAccordionIndex === 2}>
           <div className="card-body">
@@ -64,8 +71,9 @@ const CustomBotWithoutSettingsAccordion = () => {
       </div>
 
       <div className="card border-0 rounded-lg mb-0">
-        <div className="card-header clickable py-1" onClick={() => toggleAccordion(3)}>
+        <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => toggleAccordion(3)}>
           <p className="mb-0 text-primary">{`④ ${t('slack_integration.without_proxy.test_connection')}`}</p>
+          <i className="fa fa-chevron-down" />
         </div>
         <Collapse isOpen={currentlyOpenAccordionIndex === 3}>
           <div className="card-body">