added photos

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

@@ -1,6 +1,12 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Collapse } from 'reactstrap';
+import installYourAppIntroductionImage from '../../../../../../public/images/slack-integration/slack-bot-install-your-app-introduction.png';
+import installToWorkspaceImage from '../../../../../../public/images/slack-integration/slack-bot-install-to-workspace.png';
+import installYourAppTransitionDestinationImage from '../../../../../../public/images/slack-integration/slack-bot-install-your-app-transition-destination.png';
+import installYourAppCompleteImage from '../../../../../../public/images/slack-integration/slack-bot-install-your-app-complete.png';
+import workspaceJoinedBotImage from '../../../../../../public/images/slack-integration/slack-bot-install-to-workspace-joined-bot.png';
+import introductionToChannelImage from '../../../../../../public/images/slack-integration/slack-bot-install-your-app-introduction-to-channel.png';
 
 const CustomBotWithoutSettingsAccordion = () => {
   const { t } = useTranslation('admin');
@@ -59,18 +65,18 @@ const CustomBotWithoutSettingsAccordion = () => {
         </div>
         <Collapse isOpen={currentlyOpenAccordionIndex === 1}>
           <div className="card-body px-3 py-4">
-            <div className="container">
+            <div className="container w-75">
               <p className="text-dark">1. Install your app をクリックします。</p>
-              <img src="../../../../../../public/images/slack-integration/slack-bot-install-your-app-introduction.png" className="border border-light mb-4" />
+              <img src={installYourAppIntroductionImage} className="border border-light img-fluid mb-4" />
               <p className="text-dark">2. Install to Workspace をクリックします。</p>
-              <img src="../../../../../../public/images/slack-integration/slack-bot-install-your-app-introduction.png" className="border border-light mb-4" />
+              <img src={installToWorkspaceImage} className="border border-light img-fluid mb-4" />
               <p className="text-dark">3. 遷移先の画面にて、Allowをクリックします。</p>
-              <img src="../../../../../../public/images/slack-integration/slack-bot-install-your-app-introduction.png" className="border border-light mb-4" />
+              <img src={installYourAppTransitionDestinationImage} className="border border-light img-fluid mb-4" />
               <p className="text-dark">4. Install your app の右側に 緑色のチェックがつけばワークスペースへのインストール完了です。</p>
-              <img src="../../../../../../public/images/slack-integration/slack-bot-install-your-app-introduction.png" className="border border-light mb-4" />
+              <img src={installYourAppCompleteImage} className="border border-light img-fluid mb-4" />
               <p className="text-dark">5. GROWI bot を使いたいチャンネルに @example を使用して招待します。</p>
-              <img src="../../../../../../public/images/slack-integration/slack-bot-install-your-app-introduction.png" className="border border-light" />
-
+              <img src={workspaceJoinedBotImage} className="border border-light img-fluid" />
+              <img src={introductionToChannelImage} className="border border-light img-fluid" />
             </div>
           </div>
         </Collapse>