Skip to content

Commit

Permalink
fix: add dark-theme to notes and textbook page (#115)
Browse files Browse the repository at this point in the history 
* fix: add dark-theme to notes and textbook page

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

* chore: add changelog-entry
  • Loading branch information
@hinakhadim
hinakhadim authored Dec 9, 2024
1 parent 7e5cc4b commit c97f383
Show file tree
Hide file tree
Showing 3 changed files with 236 additions and 42 deletions.
1 change: 1 addition & 0 deletions changelog.d/20241209_134456_hina.khadim_teams_notes_page.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- [Bugfix] Update dark-theme styles for Notes and Textbook Page (by @hinakhadim)
194 changes: 152 additions & 42 deletions tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,33 +298,35 @@ nav.wrapper-preview-menu {
}
}
}
body.view-statictab, body.view-instructordash, body.view-teams, body.view-wiki {
.wrapper-course-material {
margin: 0 auto;
max-width: 1600px;
padding: 20px 15px !important;
.tabs.course-tabs {
margin: 0 0 10px;
border-bottom: 1px solid #E5E7EB;
li {
margin: 0 32px 0 0;
a {
border-width: 2px;
font-size: 14px;
font-weight: 500;
color: $light-dark;
&:hover, &:visited {
color: $dark;
border-color: transparent;
}
&.active {
color: $dark;
border-color: $primary;
}
.wrapper-course-material[aria-label="Course Material"] {
margin: 0 auto;
max-width: 1600px;
padding: 20px 15px !important;
.tabs.course-tabs {
margin: 0 0 10px;
border-bottom: 1px solid #E5E7EB;
padding: 0;
li {
margin: 0 32px 0 0;
a {
border-width: 2px;
font-size: 14px;
font-weight: 500;
color: $light-dark;
&:hover, &:visited {
color: $dark;
border-color: transparent;
}
&.active {
color: $dark;
border-color: $primary;
}
}
}
}
}
body.view-statictab, body.view-instructordash, body.view-teams, body.view-wiki,
body.view-student-notes {
#main {
.container {
padding: 0;
Expand Down Expand Up @@ -764,6 +766,12 @@ body.view-wiki{
}
}
}
// Textbook Page
body div.book-wrapper{
margin: 0 auto;
max-width: 1600px;
}

body.indigo-dark-theme {
input:-webkit-autofill,
input:-webkit-autofill:hover,
Expand Down Expand Up @@ -797,31 +805,33 @@ body.indigo-dark-theme {
.idash-section .no-pending-tasks-message p {
color: $text-color-d;
}
&.view-statictab, &.view-instructordash, &.view-teams, &.view-wiki {
.wrapper-course-material {
.tabs.course-tabs {
border-bottom: 1px solid $primary-light-d;
li {
a {
color: $text-color-d;
&:hover, &:visited {
color: $text-color-primary;
border-color: transparent;
}
&.active {
color: $text-color-d;
border-color: $text-color-d;
}
}
}
}
}
&.view-statictab, &.view-instructordash, &.view-teams, &.view-wiki,
&.view-student-notes {
.window-wrap {
background: none;
}
#email-students-beta-tip {
color: #111827;
}
.wrapper-course-material {
.tabs.course-tabs {
border-bottom: 1px solid $primary-light-d;
li {
a {
color: $text-color-d;
&:hover, &:visited {
color: $text-color-primary;
border-color: transparent;
}
&.active {
color: $text-color-d;
border-color: $text-color-d;
}
}
}
}
}

.instructor-dashboard-content-2 {
a.instructor-info-action {
background: $primary-d;
Expand Down Expand Up @@ -1414,6 +1424,106 @@ body.indigo-dark-theme {
div.msg{ color: $text-color-d; }
}
}

// Textbook Page
.book-wrapper{
.book-sidebar{
background: $primary-light-d;
#booknav a{
color: $text-color-d;
&:hover{
color: $text-color-primary;
}
}
}
}

// Notes Page
&.view-student-notes{
.wrapper-student-notes{
background: $body-bg-d;
}

.wrapper-title .page-title .page-subtitle{
color: $text-color-d;
}

.wrapper-tabs .tab-list{
.tab .tab-label{
color: lightgrey;
}

.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; }
}
}
}
}
}

}
@import '../../../extra/footer';
@import '../../../extra/header';
Expand Down
83 changes: 83 additions & 0 deletions tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
}

0 comments on commit c97f383

Please sign in to comment.