Merge pull request #3881 from weseek/imprv/gw6243-bot-status-adjustment

Imprv/gw6243 bot status adjustment

resource/locales/ja_JP/admin/admin.json

@@ -331,7 +331,7 @@
     },
     "custom_bot_without_proxy_integration": "Custom bot without proxy 連携",
     "integration_sentence": {
-      "integration_is_not_complete": "連携は完了していません。<br>下記の連携手順を進めてください。",
+      "integration_is_not_complete": "連携は完了していません<br>下の連携手順を進めてください",
       "integration_successful": "連携は完了しています。",
       "integration_some_ws_is_not_complete": "連携に失敗している ワークスペースがあります。"
 

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

@@ -7,7 +7,7 @@ const ProxyCircle = () => (
   <div className="grw-bridge-proxy-circle">
     <div className="circle position-absolute bg-primary border-light rounded-circle">
       <p className="circle-inner text-light font-weight-bold d-none d-lg-inline">Proxy Server</p>
-      <p className="circle-inner mt-5 d-block d-lg-none">ProxyServer</p>
+      <p className="circle-inner grw-proxy-server-name d-block d-lg-none">Proxy Server</p>
     </div>
   </div>
 );

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

@@ -14,7 +14,7 @@ const CustomBotWithProxyConnectionStatus = (props) => {
     <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>
+        <h5 className="card-title font-weight-bold mt-3 ml-3">Slack</h5>
         <div className="card-body px-5">
           {connectionStatusValues.map((connectionStatus, i) => {
             const workspaceName = connectionStatus.workspaceName || `Settings #${i}`;
@@ -36,14 +36,11 @@ const CustomBotWithProxyConnectionStatus = (props) => {
       </div>
 
       <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
-        <div className="row">
-          <h5 className="card-title font-weight-bold mt-3 ml-4 col">GROWI App</h5>
-          <div className="pull-right mt-3 mr-3">
-            <a className="icon-fw fa fa-repeat fa-2x"></a>
-          </div>
-        </div>
+        <h5 className="card-title font-weight-bold mt-3 ml-3">GROWI App
+          <a className="icon-fw fa fa-repeat float-md-right ml-2 mr-sm-3 fa-sm-lg"></a>
+        </h5>
         <div className="card-body text-center">
-          <div className="mt-5 border p-2 mx-3 bg-primary text-light">
+          <div className="mx-md-3 my-4 my-lg-5 p-2 border bg-primary text-light">
             {siteName}
           </div>
         </div>

src/client/styles/scss/_admin.scss

@@ -155,6 +155,9 @@ $slack-work-space-name-card-border: #efc1f6;
         left: 50%;
         transform: translate(-50%, -50%);
       }
+      .circle-inner.grw-proxy-server-name {
+        margin-top: 55px;
+      }
     }
 
     // switch layout for Bridge component
@@ -169,7 +172,10 @@ $slack-work-space-name-card-border: #efc1f6;
           @extend .mt-0;
         }
         .hr-container {
-          margin-top: 65px;
+          margin-top: 40px;
+          @include media-breakpoint-up(lg) {
+            margin-top: 65px;
+          }
         }
       }
     }