edited borders etc

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

@@ -132,7 +132,7 @@ const CustomBotWithoutProxySettings = (props) => {
 
       <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
 
-      <div className="my-5 mx-3">
+      <div className="my-5 mx-3 bg-alert">
         <CustomBotWithoutProxySettingsAccordion />
       </div>
 

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

@@ -1,132 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Collapse } from 'reactstrap';
 
 const CustomBotWithoutSettingsAccordion = () => {
   const { t } = useTranslation('admin');
+  const [currentlyOpenAccordionIndex, setCurrentlyOpenAccordionIndex] = useState(false);
+  const toggleAccordion = (i) => {
+    setCurrentlyOpenAccordionIndex(i);
+  };
 
   return (
-    <div className="accordion shadow" id="withoutProxySettingsAccordion">
-
-      <div className="card border-0 mb-0">
-
-        <div className="card-header">
-          <h2 className="mb-0">
-            <button
-              className="btn btn-link btn-block d-flex text-decoration-none"
-              type="button"
-              data-toggle="collapse"
-              data-target="#collapsibleMakeBotSection"
-            >
-              ① {t('slack_integration.without_proxy.create_bot')}
-            </button>
-          </h2>
+    <div className="card rounded border-0 shadow" id="customBotWithoutProxySettingsAccordion">
+      <div className="card border-0 mb-0 rounded-top">
+        <div className="card-header clickable rounded-top" onClick={() => toggleAccordion(0)}>
+        ① {t('slack_integration.without_proxy.create_bot')}
         </div>
-
-        <div id="collapsibleMakeBotSection" className="collapse" data-parent="#withoutProxySettingsAccordion">
+        <Collapse isOpen={currentlyOpenAccordionIndex === 0}>
           <div className="card-body">
-            <div className="row my-5">
-              <div className="mx-auto">
-                <div>
-                  <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
-                    {t('slack_integration.without_proxy.create_bot')}
-                    <i className="fa fa-external-link ml-1" aria-hidden="true"></i>
-                  </button>
-                </div>
-                <a href="#">
-                  <p className="text-center mt-1">
-                    <small>
-                      作成方法はこちら
-                      <i className="fa fa-external-link ml-1" aria-hidden="true"/>
-                    </small>
-                  </p>
-                </a>
-
-              </div>
-            </div>
+          BODY 1
           </div>
-        </div>
-
+        </Collapse>
       </div>
-
-      <div className="card mb-0">
-
-        <div className="card-header">
-          <h2 className="mb-0">
-            <button
-              className="btn btn-link btn-block d-flex text-decoration-none"
-              type="button"
-              data-toggle="collapse"
-              data-target="#collapsibleInstallBotSection"
-            >
-              ② {t('slack_integration.without_proxy.install_bot_to_slack')}
-            </button>
-          </h2>
+      <div className="card border-0 mb-0">
+        <div className="card-header clickable" onClick={() => toggleAccordion(1)}>
+        ② {t('slack_integration.without_proxy.install_bot_to_slack')}
         </div>
-
-        <div id="collapsibleInstallBotSection" className="collapse" data-parent="#withoutProxySettingsAccordion">
+        <Collapse isOpen={currentlyOpenAccordionIndex === 1}>
           <div className="card-body">
-            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
-            dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
-            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
-            butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus
-            labore sustainable VHS.
+          BODY 2
           </div>
-        </div>
-
+        </Collapse>
       </div>
-
-      <div className="card mb-0">
-
-        <div className="card-header">
-          <h2 className="mb-0">
-            <button
-              className="btn btn-link btn-block d-flex text-decoration-none"
-              type="button"
-              data-toggle="collapse"
-              data-target="#collapsibleSecretTokenSection"
-            >
-              ③ {t('slack_integration.without_proxy.register_secret_and_token')}
-            </button>
-          </h2>
+      <div className="card border-0 mb-0">
+        <div className="card-header clickable" onClick={() => toggleAccordion(2)}>
+        ③ {t('slack_integration.without_proxy.register_secret_and_token')}
         </div>
-
-        <div id="collapsibleSecretTokenSection" className="collapse" data-parent="#withoutProxySettingsAccordion">
+        <Collapse isOpen={currentlyOpenAccordionIndex === 2}>
           <div className="card-body">
-            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
-            dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
-            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
-            butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus
-            labore sustainable VHS.
+          BODY 3
           </div>
-        </div>
-
+        </Collapse>
       </div>
-
-      <div className="card mb-0">
-
-        <div className="card-header">
-          <h2 className="mb-0">
-            <button
-              className="btn btn-link btn-block d-flex text-decoration-none"
-              type="button"
-              data-toggle="collapse"
-              data-target="#collapsibleTestConnectionSection"
-            >
-              ④ {t('slack_integration.without_proxy.test_connection')}
-            </button>
-          </h2>
+      <div className="card border-0 mb-0 rounded-bottom">
+        <div className="card-header clickable rounded-bottom" onClick={() => toggleAccordion(3)}>
+        ④ {t('slack_integration.without_proxy.test_connection')}
         </div>
-
-        <div id="collapsibleTestConnectionSection" className="collapse" data-parent="#withoutProxySettingsAccordion">
-          <div className="card-body">
-            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
-            dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
-            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
-            butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus
-            labore sustainable VHS.
+        <Collapse isOpen={currentlyOpenAccordionIndex === 3}>
+          <div className="card-body rounded-bottom">
+          BODY 4
           </div>
-        </div>
-
+        </Collapse>
       </div>
 
     </div>

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

@@ -121,7 +121,7 @@ const SlackIntegration = (props) => {
         <div className="card-deck mx-auto">
 
           <div
-            className={`card admin-bot-card mx-3 py-5 rounded ${currentBotType === 'official-bot' ? 'border-info' : ''}`}
+            className={`card clickable mx-3 py-5 rounded ${currentBotType === 'official-bot' ? 'border-info' : ''}`}
             onClick={() => handleBotTypeSelect('official-bot')}
           >
             <div className="card-body">
@@ -131,7 +131,7 @@ const SlackIntegration = (props) => {
           </div>
 
           <div
-            className={`card admin-bot-card mx-3 py-5 rounded ${currentBotType === 'custom-bot-without-proxy' ? 'border-info' : ''}`}
+            className={`card clickable mx-3 py-5 rounded ${currentBotType === 'custom-bot-without-proxy' ? 'border-info' : ''}`}
             onClick={() => handleBotTypeSelect('custom-bot-without-proxy')}
           >
             <div className="card-body">
@@ -141,7 +141,7 @@ const SlackIntegration = (props) => {
           </div>
 
           <div
-            className={`card admin-bot-card mx-3 py-5 rounded ${currentBotType === 'custom-bot-with-proxy' ? 'border-info' : ''}`}
+            className={`card clickable mx-3 py-5 rounded ${currentBotType === 'custom-bot-with-proxy' ? 'border-info' : ''}`}
             onClick={() => handleBotTypeSelect('custom-bot-with-proxy')}
           >
             <div className="card-body">

src/client/styles/scss/_admin.scss

@@ -83,7 +83,7 @@
     }
   }
 
-  .admin-bot-card {
+  .clickable {
     cursor: pointer;
   }