added widths

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

@@ -33,57 +33,57 @@ const BotTypeCard = (props) => {
   const { t } = useTranslation('admin');
 
   return (
-    <div className="card-deck">
-      <div
-        className={`card admin-bot-card rounded border-radius-sm shadow ${props.isActive ? 'border-primary' : ''}`}
-        onClick={() => props.handleBotTypeSelect(botDetails[props.botType].botType)}
-        role="button"
-        key={props.botType}
-      >
-        <div>
-          <h3 className={`card-header mb-0 py-3
+
+    <div
+      className={`card m-3 admin-bot-card rounded border-radius-sm shadow ${props.isActive ? 'border-primary' : ''}`}
+      onClick={() => props.handleBotTypeSelect(botDetails[props.botType].botType)}
+      role="button"
+      key={props.botType}
+    >
+      <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' : ''}`}
-          >
-            <span className="mr-2">
-              {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].botTypeCategory}`)}
-            </span>
+        >
+          <span className="mr-2">
+            {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].botTypeCategory}`)}
+          </span>
 
-            {/*  A recommended badge is shown on official bot card, supplementary names are shown on Custom bot cards   */}
-            {props.botType === 'officialBot'
-              ? (
-                <span className="badge badge-info mr-2">
-                  {t('admin:slack_integration.selecting_bot_types.recommended')}
-                </span>
-              ) : (
-                <span className="supplementary-bot-name mr-2">
-                  {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].supplementaryBotName}`)}
-                </span>
-              )}
+          {/*  A recommended badge is shown on official bot card, supplementary names are shown on Custom bot cards   */}
+          {props.botType === 'officialBot'
+            ? (
+              <span className="badge badge-info mr-2">
+                {t('admin:slack_integration.selecting_bot_types.recommended')}
+              </span>
+            ) : (
+              <span className="supplementary-bot-name mr-2">
+                {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].supplementaryBotName}`)}
+              </span>
+            )}
 
-            {/* 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>
-          </h3>
-        </div>
-        <div className="card-body p-4">
-          <div className="card-text">
-            <div className="my-2">
-              <img className="d-block mx-auto mb-4" src={`/images/slack-integration/slackbot-difficulty-level-${botDetails[props.botType].setUp}.svg`}></img>
-              <div className="d-flex justify-content-between mb-3">
-                <span>{t('admin:slack_integration.selecting_bot_types.multiple_workspaces_integration')}</span>
-                <img className="bot-type-disc" src={`/images/slack-integration/${botDetails[props.botType].multiWSIntegration}.png`} alt="" />
-              </div>
-              <div className="d-flex justify-content-between">
-                <span>{t('admin:slack_integration.selecting_bot_types.security_control')}</span>
-                <img className="bot-type-disc" src={`/images/slack-integration/${botDetails[props.botType].securityControl}.png`} alt="" />
-              </div>
+          {/* 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>
+        </h3>
+      </div>
+      <div className="card-body p-4">
+        <div className="card-text">
+          <div className="my-2">
+            <img className="d-block mx-auto mb-4" src={`/images/slack-integration/slackbot-difficulty-level-${botDetails[props.botType].setUp}.svg`}></img>
+            <div className="d-flex justify-content-between mb-3">
+              <span>{t('admin:slack_integration.selecting_bot_types.multiple_workspaces_integration')}</span>
+              <img className="bot-type-disc" src={`/images/slack-integration/${botDetails[props.botType].multiWSIntegration}.png`} alt="" />
+            </div>
+            <div className="d-flex justify-content-between">
+              <span>{t('admin:slack_integration.selecting_bot_types.security_control')}</span>
+              <img className="bot-type-disc" src={`/images/slack-integration/${botDetails[props.botType].securityControl}.png`} alt="" />
             </div>
           </div>
         </div>
       </div>
-
     </div>
-);
+
+
+  );
 
 };
 

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

@@ -144,7 +144,7 @@ const SlackIntegration = (props) => {
         {t('admin:slack_integration.selecting_bot_types.selecting_bot_type')}
 
         <div className="row my-4">
-          <div className="card-deck mx-auto">
+          <div className="card-deck mx-auto justify-content-center">
             {botTypes.map((botType) => {
               return (
                 <BotTypeCard

src/client/styles/scss/_admin.scss

@@ -101,6 +101,7 @@ $slack-work-space-name-card-border: #efc1f6;
     }
     .admin-bot-card {
       min-width: 280px;
+      max-width: 400px;
       border-radius: 8px !important;
     }
     .border-primary {
@@ -123,13 +124,13 @@ $slack-work-space-name-card-border: #efc1f6;
       border-radius: 8px !important;
     }
     .admin-border-danger {
-      border-style : dashed;
-      border-width : 2px;
+      border-style: dashed;
+      border-width: 2px;
     }
     .admin-border-success {
-      border-width : 3px;
+      border-width: 3px;
     }
-    .circle{
+    .circle {
       width: 100px;
       height: 100px;
       // background: #092c58;