improve css

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

@@ -216,10 +216,10 @@ const SlackIntegration = (props) => {
             </div>
 
             <div
-              className={`card admin-bot-card mx-3 rounded shadow ${currentBotType === 'custom-bot-with-proxy' ? 'border-primary' : ''}`}
+              className={`card admin-bot-card mx-3 rounded shadow ${currentBotType === 'custom-bot-with-proxy' && 'border-primary'}`}
               onClick={() => handleBotTypeSelect('custom-bot-with-proxy')}
             >
-              <h3 className={`card-header mb-0 py-3 text-center ${currentBotType === 'custom-bot-with-proxy' ? 'bg-primary text-light' : ''}`}>
+              <h3 className={`card-header mb-0 py-3 text-center ${currentBotType === 'custom-bot-with-proxy' && 'bg-primary text-light'}`}>
                 <span className="mr-2">
                   {t('admin:slack_integration.custom_bot_with_proxy')}
                 </span>

src/client/styles/scss/_admin.scss

@@ -198,20 +198,9 @@
   }
   .border-primary {
     border-width: 2px;
+    // border-radius: 30px;
   }
-  .bot-type-disc-easy {
-    color: #33d541;
-  }
-  .bot-type-disc-normal {
-    color: #e6a63c;
-  }
-  .bot-type-disc-difficult {
-    color: #ff5757;
-  }
-  .bot-type-disc-possible {
-    color: #33d541;
-  }
-  .bot-type-disc-impossible {
-    color: #ff5757;
+  .rounded {
+    // border-radius: 30px;
   }
 }

src/client/styles/scss/theme/_apply-colors.scss

@@ -591,3 +591,24 @@ mark.rbt-highlight-text {
 .grw-btn-page-management:focus {
   background-color: rgba($color-link, 0.15);
 }
+
+/*
+  Slack Integration
+*/
+.selecting-bot-type {
+  .bot-type-disc-easy {
+    color: #33d541;
+  }
+  .bot-type-disc-normal {
+    color: #e6a63c;
+  }
+  .bot-type-disc-difficult {
+    color: #ff5757;
+  }
+  .bot-type-disc-possible {
+    color: $info;
+  }
+  .bot-type-disc-impossible {
+    color: $gray-500;
+  }
+}