Merge pull request #3834 from weseek/feat/GW-5901-responsive-integration-diagram

Feat/gw 5901 responsive integration diagram

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

@@ -4,8 +4,11 @@ import PropTypes from 'prop-types';
 import { UncontrolledTooltip } from 'reactstrap';
 
 const ProxyCircle = () => (
-  <div className="grw-bridge-proxy-circle position-absolute bg-primary border-light">
-    <p className="circle-inner text-light font-weight-bold">Proxy Server</p>
+  <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>
+    </div>
   </div>
 );
 

src/client/styles/scss/_admin.scss

@@ -136,12 +136,18 @@ $slack-work-space-name-card-border: #efc1f6;
     }
 
     .grw-bridge-proxy-circle {
-      left: 50%;
-      width: 100px;
-      height: 100px;
-      border: 13px solid;
-      border-radius: 50%;
-      transform: translate(-50%, -50%);
+      .circle {
+        left: 50%;
+        width: 100px;
+        height: 100px;
+        border: 13px solid;
+        transform: translate(-50%, -50%);
+        @include media-breakpoint-down(md) {
+          width: 50px;
+          height: 50px;
+          border: 8px solid;
+        }
+      }
 
       .circle-inner {
         position: absolute;