setting with proxy

apps/app/src/components/Admin/SlackIntegration/Bridge.jsx

@@ -6,9 +6,9 @@ import { UncontrolledTooltip } from 'reactstrap';
 
 const ProxyCircle = () => (
   <div className="grw-bridge-proxy-circle">
-    <div className="circle position-absolute bg-primary border-light rounded-circle">
+    <div className="circle bg-primary border-light rounded-circle">
       <p className="circle-inner text-light fw-bold d-none d-lg-inline">Proxy Server</p>
-      <p className="circle-inner grw-proxy-server-name d-block d-lg-none">Proxy Server</p>
+      <p className="circle-inner grw-proxy-server-name d-inline d-lg-none">Proxy Server</p>
     </div>
   </div>
 );

apps/app/src/components/Admin/SlackIntegration/SlackIntegration.tsx

@@ -231,7 +231,7 @@ const SlackIntegration = (): JSX.Element => {
           </button>
         </div>
 
-        <div className="row my-5 flex-wrap-reverse justify-content-center">
+        <div className="my-5 d-flex flex-wrap-reverse justify-content-center">
           {botTypes.map((botType) => {
             return (
               <div key={botType} className="m-3">

apps/app/src/components/Layout/Admin.module.scss

@@ -95,9 +95,12 @@ $slack-work-space-name-card-border: #efc1f6;
       font-size: 0.6rem;
     }
     .admin-bot-card {
-      min-width: 280px;
+      min-width: 300px;
       max-width: 500px;
       border-radius: 8px !important;
+      .grw-botcard-title-active {
+        color: $gray-200;
+      }
     }
     .border-primary {
       border-width: 2px;
@@ -134,13 +137,17 @@ $slack-work-space-name-card-border: #efc1f6;
     }
 
     .grw-bridge-proxy-circle {
+      position: relative;
       .circle {
-        left: 50%;
+        position: absolute;
+        inset:0;
+        z-index: 1;
         width: 100px;
         height: 100px;
+        margin:auto;
         border: 13px solid;
-        transform: translate(-50%, -50%);
-        @include media-breakpoint-down(md) {
+
+        @include media-breakpoint-down(lg) {
           width: 50px;
           height: 50px;
           border: 8px solid;
@@ -149,12 +156,11 @@ $slack-work-space-name-card-border: #efc1f6;
 
       .circle-inner {
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-50%, 25%);
       }
       .circle-inner.grw-proxy-server-name {
         margin-top: 55px;
+        transform: translate(-50%, -25%);
       }
     }