Merge branch 'feat/growi-bot' into fix/gw5764-proptypes-warning

# Conflicts:
#	src/client/js/components/Admin/SlackIntegration/CustomBotWithoutProxyIntegrationCard.jsx

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

@@ -42,7 +42,7 @@ const BotTypeCard = (props) => {
       <div>
         <h3 className={`card-header mb-0 py-3
               ${props.botType === 'officialBot' ? 'd-flex align-items-center justify-content-center' : 'text-center'}
-              ${props.isActive ? 'bg-primary text-light' : ''}`}
+              ${props.isActive ? 'bg-primary grw-botcard-title-active' : ''}`}
         >
           <span className="mr-2">
             {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].botTypeCategory}`)}
@@ -61,7 +61,7 @@ const BotTypeCard = (props) => {
           )}
 
           {/* TODO: add an appropriate links by GW-5614 */}
-          <i className={`fa fa-external-link btn-link ${props.isActive ? 'bg-primary text-light' : ''}`} aria-hidden="true"></i>
+          <i className={`fa fa-external-link btn-link ${props.isActive ? 'grw-botcard-title-active' : ''}`} aria-hidden="true"></i>
         </h3>
       </div>
       <div className="card-body p-4">

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

@@ -18,26 +18,30 @@ const CustomBotWithProxySettings = (props) => {
 
       <div className="d-flex justify-content-center my-5 bot-integration">
 
-        <div className="card rounded shadow border-0 w-50 admin-bot-card">
+        <div className="card rounded shadow border-0 w-50 admin-bot-card mb-0">
           <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
           <div className="card-body p-4"></div>
         </div>
 
         <div className="text-center w-25 mb-5">
-          <p className="text-secondary m-0"><small>{t('admin:slack_integration.integration_sentence.integration_is_not_complete')}</small></p>
-          <p className="text-secondary"><small>{t('admin:slack_integration.integration_sentence.proceed_with_the_following_integration_procedure')}</small></p>
-
-          <div className="row m-0">
-            <hr className="border-danger align-self-center admin-border col"></hr>
-            <div className="circle text-center bg-primary border-light">
-              <p className="text-light font-weight-bold m-0 pt-3">Proxy</p>
-              <p className="text-light font-weight-bold">Server</p>
+          <div className="mt-4">
+            <small
+              className="text-secondary m-0"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
+            />
+            <div className="row m-0">
+              <hr className="border-danger align-self-center admin-border col"></hr>
+              <div className="circle text-center bg-primary border-light">
+                <p className="text-light font-weight-bold m-0 pt-3">Proxy</p>
+                <p className="text-light font-weight-bold">Server</p>
+              </div>
+              <hr className="border-danger align-self-center admin-border col"></hr>
             </div>
-            <hr className="border-danger align-self-center admin-border col"></hr>
           </div>
         </div>
 
-        <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
+        <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
           <div className="row m-0">
             <h5 className="card-title font-weight-bold mt-3 ml-4 col">GROWI App</h5>
             <div className="pull-right mt-3">

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

@@ -7,47 +7,50 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
   const { t } = useTranslation();
 
   return (
-    <div className="d-flex justify-content-center my-5 bot-integration">
-      <div className="card rounded shadow border-0 w-50 admin-bot-card">
-        <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
-        <div className="card-body p-2 w-50 mx-auto">
-          {props.slackWSNameInWithoutProxy != null && (
-          <div className="card slack-work-space-name-card">
-            <div className="m-2 text-center">
-              <h5 className="font-weight-bold">{ props.slackWSNameInWithoutProxy }</h5>
-              <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
-            </div>
-          </div>
+    <>
+
+      <div className="d-flex justify-content-center my-5 bot-integration">
+        <div className="card rounded shadow border-0 w-50 admin-bot-card mb-0">
+          <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
+          <div className="card-body p-2 w-50 mx-auto">
+            {props.slackWSNameInWithoutProxy && (
+              <div className="card slack-work-space-name-card">
+                <div className="m-2 text-center">
+                  <h5 className="font-weight-bold">{ props.slackWSNameInWithoutProxy }</h5>
+                  <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
+                </div>
+              </div>
             )}
+          </div>
         </div>
-      </div>
 
-      <div className="text-center w-25">
-        {props.isSetupSlackBot && (
-        <div className="mt-5">
-          <p className="text-success"><small className="fa fa-check"> {t('admin:slack_integration.integration_sentence.integration_successful')}</small></p>
-          <hr className="align-self-center admin-border-success border-success"></hr>
-        </div>
+        <div className="text-center w-25">
+          {props.isSetupSlackBot && (
+          <div className="mt-5">
+            <p className="text-success"><small className="fa fa-check"> {t('admin:slack_integration.integration_sentence.integration_successful')}</small></p>
+            <hr className="align-self-center admin-border-success border-success"></hr>
+          </div>
           )}
-        {!props.isSetupSlackBot && (
-        <div className="mt-4">
-          <small
-            className="text-secondary m-0"
+          {!props.isSetupSlackBot && (
+          <div className="mt-4">
+            <small
+              className="text-secondary m-0"
                 // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
-          />
-          <hr className="align-self-center admin-border-danger border-danger"></hr>
-        </div>
+              dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
+            />
+            <hr className="align-self-center admin-border-danger border-danger"></hr>
+          </div>
           )}
-      </div>
+        </div>
 
-      <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
-        <h5 className="card-title font-weight-bold mt-3 ml-4">GROWI App</h5>
-        <div className="card-body p-4 mb-5 text-center">
-          <div className="btn btn-primary">{ props.siteName }</div>
+        <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
+          <h5 className="card-title font-weight-bold mt-3 ml-4">GROWI App</h5>
+          <div className="card-body p-4 mb-5 text-center">
+            <div className="btn btn-primary">{ props.siteName }</div>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

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

@@ -155,7 +155,7 @@ const SlackIntegration = (props) => {
         onCancelClick={cancelBotChangeHandler}
       />
 
-      <div className="selecting-bot-type my-5">
+      <div className="selecting-bot-type mb-5">
         <h2 className="admin-setting-header mb-4">
           {t('admin:slack_integration.selecting_bot_types.slack_bot')}
           {/* TODO: add an appropriate link by GW-5614 */}
@@ -167,7 +167,7 @@ const SlackIntegration = (props) => {
 
         {t('admin:slack_integration.selecting_bot_types.selecting_bot_type')}
 
-        <div className="row my-4 flex-wrap-reverse justify-content-center">
+        <div className="row my-5 flex-wrap-reverse justify-content-center">
           {botTypes.map((botType) => {
             return (
               <div key={botType} className="m-3">

src/client/styles/scss/theme/_apply-colors.scss

@@ -364,6 +364,12 @@ ul.pagination {
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
+.admin-bot-card {
+  .grw-botcard-title-active {
+    color: $gray-200;
+  }
+}
+
 /*
  * Form Slider
  */

src/client/styles/scss/theme/island.scss

@@ -110,4 +110,11 @@ html[dark] {
       @include btn-page-editor-mode-manager(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
     }
   }
+
+  // Cards
+  .admin-bot-card {
+    .grw-botcard-title-active {
+      color: $color-reversal;
+    }
+  }
 }

src/client/styles/scss/theme/spring.scss

@@ -144,10 +144,19 @@ html[dark] {
     background-color: $bgcolor-global;
   }
 
+  /*
+    Cards
+  */
   .card-timeline > .card-header {
     background-color: $third-main-color;
   }
 
+  .admin-bot-card {
+    .grw-botcard-title-active {
+      color: $color-reversal;
+    }
+  }
+
   h1,
   h2 {
     color: $subthemecolor;