fix: fix various dark theme issues with Teams tab (#114)

* fix: fix various dark theme issues with Teams tab

* fix: add #767676 to grey color for improving readability

---------

Co-authored-by: Hina Khadim <[email protected]>

changelog.d/20241206_184802_dawoud.sheraz_teams_tab_dark_theme_fixups.md

@@ -0,0 +1 @@
+- [Bugfix] Fix various dark theme issues with Teams tab on LMS. (by @dawoudsheraz)

tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss

@@ -1325,6 +1325,95 @@ body.indigo-dark-theme {
       font-weight: 500;
     }
   } 
+  &.view-teams {
+    .page-header {
+      .page-title {
+        color: $text-color-primary;
+      }
+      .page-description {
+        color: $text-color-d;
+      }
+    }
+    .page-content-nav .nav-item {
+      color: $text-color-d;
+      &.is-active{ border-color: $primary-d; }
+    }
+    .page-content-main {
+      span.listing-count, span.listing-sort .field-label {
+        color: $text-color-d;
+      }
+    }
+
+    ul.topics-list li.topic-card{
+      background-color: $body-bg-d;
+
+      div.wrapper-card-meta {
+        background-color: $body-bg-d;
+      }
+
+    }
+
+    ul.cards-list li.list-card {
+      background-color: $body-bg-d;
+
+      div.wrapper-card-meta {
+        background-color: $body-bg-d;
+      }
+    }
+
+    .teams-content .teams-main .team-edit-fields {
+      .team-required-fields .u-field-title, .team-optional-fields .u-field-title{
+        color: $text-color-d;
+      }
+    }
+
+    .listing-tools{ color: $text-color-d; }
+    .u-field-message {
+      .u-field-message-help, .u-field-message-notification{
+        color: grey;
+      }
+    }
+    .team-profile{
+      .page-content-secondary{
+        color: grey;
+      }
+    } 
+
+    .card {
+      .card-type, .card-description{
+        color: grey;
+      }
+
+      .wrapper-card-meta{
+        background: $primary-light-d;
+        .meta-detail{ color: $text-color-primary; }
+      } 
+
+      .card-actions .action-view{
+        border-color: $primary-d;
+        color: $primary-d;
+        &:hover{
+          background-color: $primary-d;
+          color: $primary-light-d;
+        }
+      }
+    }
+
+    .btn-secondary,.btn-link,
+    .edit-members .action-remove-member {
+      color: $primary-d;
+    }
+
+    .action-primary{
+      background: $primary-d;
+      color: $primary-light-d;
+    }
+
+    .teams-content #teams-message.wrapper-msg{
+      background: $primary-light-d;
+      div.msg{ color: $text-color-d; }
+    }
+  }
 }
 @import '../../../extra/footer';
 @import '../../../extra/header';