fix code layout

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

@@ -25,7 +25,56 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
       </div>
 
       <div className="text-center w-25">
-        <div className="d-none d-lg-block">
+
+        {props.isIntegrationSuccess ? (
+          <>
+            <div className="d-none d-lg-block">
+              <p className="text-success small mt-5">
+                <i className="fa fa-check mr-1" />
+                {t('admin:slack_integration.integration_sentence.integration_successful')}
+              </p>
+              <hr className="align-self-center admin-border-success border-success"></hr>
+            </div>
+            <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
+              <i className="fa fa-check mr-1 text-success" />
+              <hr className="align-self-center admin-border-success border-success"></hr>
+            </div>
+            <UncontrolledTooltip placement="top" fade={false} target="integration-line-for-tooltip">
+              <small>
+                {t('admin:slack_integration.integration_sentence.integration_successful')}
+              </small>
+            </UncontrolledTooltip>
+          </>
+         ) : (
+           <>
+             <div className="d-none d-lg-block">
+               <p className="mt-4">
+                 <small
+                   className="text-danger m-0"
+                   // eslint-disable-next-line react/no-danger
+                   dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
+                 />
+               </p>
+               <hr className="align-self-center admin-border-danger border-danger"></hr>
+
+             </div>
+             <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
+               <i className="icon-info text-danger" />
+               <hr className="align-self-center admin-border-danger border-danger"></hr>
+             </div>
+             <UncontrolledTooltip placement="top" fade={false} target="integration-line-for-tooltip">
+               <small
+                 className="m-0"
+                 // eslint-disable-next-line react/no-danger
+                 dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
+               />
+             </UncontrolledTooltip>
+           </>
+         )
+        }
+
+
+        {/* <div className="d-none d-lg-block">
           {props.isIntegrationSuccess ? (
             <>
               <p className="text-success small mt-5">
@@ -48,9 +97,9 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
             </>
             )
           }
-        </div>
+        </div> */}
 
-        <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
+        {/* <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
           {props.isIntegrationSuccess ? (
             <>
               <i className="fa fa-check mr-1 text-success" />
@@ -64,7 +113,7 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
               </>
             )
           }
-        </div>
+        </div> */}
       </div>
 
       <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
@@ -74,7 +123,7 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
         </div>
       </div>
 
-      <UncontrolledTooltip placement="top" fade={false} target="integration-line-for-tooltip">
+      {/* <UncontrolledTooltip placement="top" fade={false} target="integration-line-for-tooltip">
         {props.isIntegrationSuccess ? (
           <small>
             {t('admin:slack_integration.integration_sentence.integration_successful')}
@@ -88,7 +137,7 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
             />
           )
         }
-      </UncontrolledTooltip>
+      </UncontrolledTooltip> */}
     </div>
   );
 };