wip

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

@@ -23,18 +23,26 @@ const CustomBotWithProxySettings = (props) => {
           <div className="card-body p-4"></div>
         </div>
 
-        <div className="text-center align-items-center justify-content-center">
+        <div className="text-center w-50 row">
 
-          <div>
-            <div className="circle-back p-1"></div>
-            <div className="circle-front">
-              <p className="text-light">Proxy</p>
-              <p className="text-light">Server</p>
+          {/* border */}
+          <hr className="border-danger align-self-center admin-border col"></hr>
+
+          {/* circle */}
+          <div className="align-self-center col">
+            <div className="circle-back">
+              <div className="circle-front mt-3">
+                <p className="text-light font-weight-bold m-0 pt-3 mt-2">Proxy</p>
+                <p className="text-light font-weight-bold">Server</p>
+              </div>
             </div>
           </div>
-          {/* <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>
-          <hr className="border-danger align-self-center admin-border"></hr> */}
+
+          {/* border */}
+          <hr className="border-danger align-self-center admin-border col"></hr>
+
+          {/* <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>
 
         <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
@@ -45,6 +53,26 @@ const CustomBotWithProxySettings = (props) => {
         </div>
       </div>
 
+
+
+
+      <div className="row text-center bot-integration">
+
+        <hr className="border-danger align-self-center admin-border col"></hr>
+
+        <div className="align-self-center col">
+          <div className="circle-back">
+            <div className="circle-front mt-3">
+              <p className="text-light font-weight-bold m-0 pt-3 mt-2">Proxy</p>
+              <p className="text-light font-weight-bold">Server</p>
+            </div>
+          </div>
+        </div>
+
+        <hr className="border-danger align-self-center admin-border col"></hr>
+      </div>
+
+
       {/* ---------------  end  ---------------*/}
 
     </>

src/client/styles/scss/_admin.scss

@@ -114,19 +114,25 @@
       border-width : 2px;
     }
     .circle-front {
-      position: relative;
-      width: 60px;
-      height: 60px;
+      // position: relative;
+      width: 74px;
+      height: 74px;
+      margin: 0 auto;
       background: #092c58;
       border-radius: 50%;
     }
     .circle-back {
-      position: absolute;
-      width: 70px;
-      height: 70px;
+      // position: absolute;
+      width: 100px;
+      height: 100px;
       background: #d0d6de;
       border-radius: 50%;
     }
+    .circle{
+      width: 100px;
+      height: 100px;
+      
+    }
   }
 
   //// TODO: migrate to Bootstrap 4