Deleted CSS, added accordion wip

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

@@ -81,13 +81,6 @@ const CustomBotWithoutProxySettings = (props) => {
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_settings')}</h2>
       {/* temporarily put bellow component */}
       <SlackGrowiBridging siteName={siteName} slackWorkSpaceName={slackWSNameInWithoutProxy} />
-      <div className="row my-5">
-        <div className="mx-auto">
-          <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
-            {t('admin:slack_integration.without_proxy.create_bot')}
-          </button>
-        </div>
-      </div>
       <table className="table settings-table">
         <colgroup>
           <col className="item-name" />
@@ -133,50 +126,119 @@ const CustomBotWithoutProxySettings = (props) => {
 
       <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
 
-      <div className="accordion" id="accordionExample">
-        <div className="card admin-accordion-card">
+      <div className="accordion mb-5" id="accordionExample">
+
+        <div className="card mb-0">
+
           <div className="card-header" id="headingOne">
             <h2 className="mb-0">
               <button
-                className="btn btn-link btn-block text-left"
+                className="btn btn-link btn-block d-flex justify-content-between"
                 type="button"
                 data-toggle="collapse"
                 data-target="#collapseOne"
                 aria-expanded="true"
                 aria-controls="collapseOne"
               >
-                Collapsible Group Item #1
+                ① Botを作成する
+                <i className="fa fa-chevron-down"></i>
               </button>
             </h2>
           </div>
 
           <div id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
             <div className="card-body">
-              Anim pariatur cliche reprehenderit, nim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
+              <div className="row my-5">
+                <div className="mx-auto">
+                  <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
+                    {t('admin:slack_integration.without_proxy.create_bot')}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <div className="card mb-0">
+
+          <div className="card-header" id="headingTwo">
+            <h2 className="mb-0">
+              <button
+                className="btn btn-link btn-block d-flex justify-content-between"
+                type="button"
+                data-toggle="collapse"
+                data-target="#collapseOne"
+                aria-expanded="true"
+                aria-controls="collapseOne"
+              >
+                ① Botを作成する
+                <i className="fa fa-chevron-down"></i>
+              </button>
+            </h2>
+          </div>
+
+          <div id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+            <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.
             </div>
           </div>
+
         </div>
-        <div className="card admin-accordion-card">
-          <div className="card-header" id="headingTwo">
+
+        <div className="card mb-0">
+
+          <div className="card-header" id="headingThree">
             <h2 className="mb-0">
               <button
-                className="btn btn-link btn-block text-left collapsed"
+                className="btn btn-link btn-block d-flex justify-content-between"
                 type="button"
                 data-toggle="collapse"
-                data-target="#collapseTwo"
-                aria-expanded="false"
-                aria-controls="collapseTwo"
+                data-target="#collapseOne"
+                aria-expanded="true"
+                aria-controls="collapseOne"
               >
-                Collapsible Group Item #2
+                ② BotをSlackにインストールする
                 <i className="fa fa-chevron-down"></i>
               </button>
             </h2>
           </div>
-          <div id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+
+          <div id="collapseThree" className="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
+            <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.
+            </div>
+          </div>
+
+        </div>
+
+        <div className="card mb-0">
+
+          <div className="card-header" id="headingThree">
+            <h2 className="mb-0">
+              <button
+                className="btn btn-link btn-block d-flex justify-content-between"
+                type="button"
+                data-toggle="collapse"
+                data-target="#collapseOne"
+                aria-expanded="true"
+                aria-controls="collapseOne"
+              >
+                ③ Signing SecretとBot Tokenを登録する
+                <i className="fa fa-chevron-down"></i>
+              </button>
+            </h2>
+          </div>
+
+          <div id="collapseThree" className="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
             <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
@@ -185,22 +247,27 @@ const CustomBotWithoutProxySettings = (props) => {
               labore sustainable VHS.
             </div>
           </div>
+
         </div>
-        <div className="card admin-accordion-card">
+
+        <div className="card mb-0">
+
           <div className="card-header" id="headingThree">
             <h2 className="mb-0">
               <button
-                className="btn btn-link btn-block text-left collapsed"
+                className="btn btn-link btn-block d-flex justify-content-between"
                 type="button"
                 data-toggle="collapse"
-                data-target="#collapseThree"
-                aria-expanded="false"
-                aria-controls="collapseThree"
+                data-target="#collapseOne"
+                aria-expanded="true"
+                aria-controls="collapseOne"
               >
-                Collapsible Group Item #3
+                ④ 連携状況のテストをする
+                <i className="fa fa-chevron-down"></i>
               </button>
             </h2>
           </div>
+
           <div id="collapseThree" className="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
             <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
@@ -210,7 +277,9 @@ const CustomBotWithoutProxySettings = (props) => {
               labore sustainable VHS.
             </div>
           </div>
+
         </div>
+
       </div>
     </>
   );

src/client/styles/scss/_admin.scss

@@ -87,10 +87,6 @@
     cursor: pointer;
   }
 
-  .admin-accordion-card {
-    margin-bottom: 0;
-  }
-
   //// TODO: migrate to Bootstrap 4
   //// omit all .btn-toggle and use Switches
   //// https://getbootstrap.com/docs/4.2/components/forms/#switches