fix: add styling for notes in notes page and learning mfe notes-xblock

overhangio · Dec 7, 2024 · 375cfb4 · 375cfb4
1 parent 85d52e9
commit 375cfb4
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 5 deletions.
diff --git a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss
@@ -1360,22 +1360,79 @@ body.indigo-dark-theme {
     }
 
     .wrapper-tabs .tab-list{
-      .tabs-label{
-        color: grey;
+      .tab .tab-label{
+        color: lightgrey;
       }
 
-      .tab.is-active .tab-label{
-        color: $text-color-d;
-        border-bottom-color: $text-color-primary;
+      .tab.is-active{ 
+        .tab-label{
+          color: $text-color-d;
+          border-bottom-color: $text-color-primary;
+        }
+      }
+
+      #view-search-results .action-close{
+        color: $primary-d;
+        background: $body-bg-d;
+        border-color: transparent;
+        box-shadow: none;
       }
     } 
 
+    .listing-tools{ color: lightgrey; }
+
     .placeholder{ 
       border-color: $primary-d; 
       background: $primary-light-d;
 
       .placeholder-title{ color: $text-color-d; }
     }
+
+    .wrapper-notes-search{
+      .search-notes-input{
+        background: $primary-light-d;
+        color: $text-color-d;
+        border: 1px solid grey;
+      }
+      .search-notes-submit{
+        background: $primary-d;
+        border-color: $primary-d;
+      }
+    }
+
+    .ui-loading{
+      border-color: $primary-d;
+      background: $body-bg-d;
+    }
+
+    .tab-panel.note-group{
+      .note{
+        .wrapper-note-excerpts{
+          border-color: orange;
+          .note-excerpt{
+            background: orange;
+            color: $body-bg-d;
+          }
+
+          .note-comments .note-comment-p{ color: $text-color-d; }
+        }
+        &:hover{ 
+          .note-excerpt{
+            background: $danger-d;
+          }
+        }
+
+        footer.reference .wrapper-reference-content{
+          a.reference-meta{
+            color: $primary-d; 
+          }
+          .reference-meta{ 
+            color: $text-color-d; 
+            &::after{ color: $text-color-primary; }
+          }
+        }
+      }
+    }
   } 
 
 }

diff --git a/tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss b/tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss
@@ -463,4 +463,87 @@
         }
 
     }
+
+    .edx-notes-wrapper{
+        .annotator-hl{
+            background: orange;
+            color: $primary-light-d;
+        }
+
+        .annotator-outer.annotator-viewer{
+            div:first-of-type{
+                color: $text-color-d;
+            }
+
+            .annotator-annotation.annotator-item{
+                background: $body-bg-d;
+
+                .annotator-note{
+                    color: $text-color-d !important;
+                }
+
+                .annotator-tags{
+                    border-color: $primary-light-d;
+                    .annotator-tag{
+                        background: lightgrey;
+                        color: $primary-light-d;
+
+                    }
+                } 
+            }
+
+            .annotator-controls {
+                .annotator-close::before,
+                .annotator-edit::before,
+                .annotator-delete::before{
+                    color: $primary-d;
+                }
+            }
+        }
+
+        .annotator-adder{
+            button{
+                background: $primary-light-d !important;
+                &::after{ 
+                    color: $primary-d;
+                    text-shadow: none;
+                }
+                &::before{ background: $primary-light-d;}
+            }
+        }
+
+        .annotator-outer.annotator-editor{
+            .annotator-widget{
+                background: $body-bg-d !important;
+            }
+            .annotator-listing{
+                background: $body-bg-d;
+                .annotator-item{
+                    border-top: 1px solid grey;
+                    &:first-child textarea{
+                        background: $light-overlay-d !important;
+                        color: $text-color-d !important;
+                    }
+                    input{
+                        background: $light-overlay-d;
+                        color: $text-color-d;
+                    }
+                }
+            }
+            .annotator-controls{
+                background: $primary-light-d !important;
+                box-shadow: none;
+                .annotator-save{
+                    background: $primary-d;
+                    color: $primary-light-d;
+                    &:hover{
+                        color: $primary-light-d;
+                    }
+                }
+                .annotator-cancel{
+                    color: $primary-d;
+                }
+            }
+        }  
+    }
 }