Merge pull request #3670 from weseek/imprv/gw5694-bot-types-design-for-each-theme

Imprv/gw5694 bot types design for each theme

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

@@ -42,7 +42,7 @@ const BotTypeCard = (props) => {
       <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' : ''}`}
+              ${props.isActive ? 'bg-primary grw-botcard-title-active' : ''}`}
         >
           <span className="mr-2">
             {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].botTypeCategory}`)}
@@ -61,7 +61,7 @@ const BotTypeCard = (props) => {
           )}
 
           {/* 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>
+          <i className={`fa fa-external-link btn-link ${props.isActive ? 'grw-botcard-title-active' : ''}`} aria-hidden="true"></i>
         </h3>
       </div>
       <div className="card-body p-4">

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

@@ -364,6 +364,12 @@ ul.pagination {
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
+.admin-bot-card {
+  .grw-botcard-title-active {
+    color: $gray-200;
+  }
+}
+
 /*
  * Form Slider
  */

src/client/styles/scss/theme/island.scss

@@ -110,4 +110,11 @@ html[dark] {
       @include btn-page-editor-mode-manager(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
     }
   }
+
+  // Cards
+  .admin-bot-card {
+    .grw-botcard-title-active {
+      color: $color-reversal;
+    }
+  }
 }

src/client/styles/scss/theme/spring.scss

@@ -144,10 +144,19 @@ html[dark] {
     background-color: $bgcolor-global;
   }
 
+  /*
+    Cards
+  */
   .card-timeline > .card-header {
     background-color: $third-main-color;
   }
 
+  .admin-bot-card {
+    .grw-botcard-title-active {
+      color: $color-reversal;
+    }
+  }
+
   h1,
   h2 {
     color: $subthemecolor;