Fix calendar in dark mode

4 files changed, 16 insertions, 6 deletions

diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
index f6242eeae..a21e7beac 100644
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -73,7 +73,7 @@
     justify-content: center;
 
     background-color: var(--mainColor);
-    color: var(--mainBackgroundColor);
+    color: var(#fff);
     font-size: 10px;
     font-weight: $font-semibold;
 
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 783464f86..478737a43 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -290,12 +290,12 @@ ngb-tabset.bootstrap {
       @include disable-default-a-behaviour;
 
       color: var(--mainForegroundColor) !important;
-
-      &.active {
-        color: #000 !important;
-      }
     }
   }
+
+  .nav-pills .nav-link.active {
+    color: #000 !important;
+  }
 }
 
 .nav-tabs .nav-link.active {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 5b3346508..e18e9ae9d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -261,6 +261,10 @@
       color: transparent;
       text-shadow: 0 0 0 #000;
     }
+
+    option {
+      color: #000;
+    }
   }
 }
 
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index b3aac9d16..6e502b028 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -197,7 +197,7 @@ p-table {
         height: auto !important;
 
         a {
-          color: #000 !important;
+          color: var(--mainForegroundColor) !important;
           font-weight: $font-semibold !important;
           margin: 0 5px !important;
           outline: 0 !important;
@@ -234,6 +234,7 @@ p-calendar .ui-datepicker {
       @extend .glyphicon-chevron-right;
       @include glyphicon-light;
 
+      color: #000 !important;
       text-align: right;
 
       .pi.pi-chevron-right {
@@ -245,6 +246,7 @@ p-calendar .ui-datepicker {
       @extend .glyphicon-chevron-left;
       @include glyphicon-light;
 
+      color: #000 !important;
       text-align: left;
 
       .pi.pi-chevron-left {
@@ -258,11 +260,15 @@ p-calendar .ui-datepicker {
     .pi.pi-chevron-up {
       @extend .glyphicon-chevron-up;
       @include glyphicon-light;
+
+      color: #000 !important;
     }
 
     .pi.pi-chevron-down {
       @extend .glyphicon-chevron-down;
       @include glyphicon-light;
+
+      color: #000 !important;
     }
   }
 }