Dark mode (#1151)

* Enable switching to dark mode through settings.

* Fixed .chunking-step background color

* Updated wa-background and wa-foreground

* Updated -wa-primary to color brand base

Sets correct color for blue text in "New Project / Start" and "Consume and Verbalize / Start"

* Updated appBar styles

* Fixed background color
* Removed button borders
* Fixed icon colors
* Fixed button text colors
* Removed unnecessary styles in app-bar.css

* Updated styles for Home option button

* Added 2px border

* Update translation-card-2.css

* Fixed background color for translation cards
* Added borders around non active translation cards
* Fixed text/icon colors

* Added border for option-button

* Updated table-view.css

* Gave it a rounded border
* Updated the header background

* Updated progress bar background

* table-view hover background color update

* Prevents tableview row background color from going light on click

* Comments

* Fixed translation steps border color

* Updated chapter-selector.css

* Increased border width to 2px
* Updated border color

* Updated styles for translation undo/redo buttons

* Added more styles for btn--icon--primary.
* Made border size constant for enabled/disabled states
* Increased border size to 2px

* Updated waveform color for 5 second padding

* Updated chunk-item.css

* Updated background color on hover
* Updated selected background color

* Updated styles for ChunkTakeCard buttons

* Updated background color and icon color
* Updated borders for play, trash and select buttons

* Updated wa-slider styles

* Updated background color for slider
* Updated thumb color

* Updated hover for play-back speed options

* Updated border color for source text back button

* Updated background color for waveform image container

* Updated marker-node.css

* Updated background color to be -wa-foreground instead of gradient

* Updated scrolling-waveform.css

* Removed border between markers

* Added border around delete vm marker icon

* Fixed primary button background and text color

* Updated consume__btn active color

* Made pause button text visible in dark mode

* Updated save, and cancel button styles on blind draft page

* Added default text file to btn--icon--secondary
* Made save and cancel buttons use the btn--icon--secondary class instead of btn--secondary
* Added consume__btn--secondary class to account for blue text/border around save button

* Updated peer edit record and confirm buttons

* Updated text, border, and icon color.

* Updated -wa-primary-light to fix chapter selector selected color

* Fixed css errors

* Allows Narration page to respond to theme changes

* Updates Narration waveform color on theme change

* Added .btn--tertiary2 style class

* Implemented new style class in Narration header undo, redo, and context menu buttons.

* Updated next/previous verse buttons

* Added .btn--secondary2 and used for Play All button

* Updated play/pause verse buttons

* Updated teleprompter card buttons

* Updated sticky verse resume button

* Updated verse marker colors

* Fixed chapter selector hover color

* Updated verseMenu and narrationMenu item hovers

* Removed btn--icon--primary/secondary

* Removed btn--teriary2 placeholder style class

* Removed btn--secondary2 placeholder style class

* Removed btn--primary2 placeholder style class

* Updated chapter selector buttons

* Updated ContributorDialog

* Updated radio button and text field colors

* Updated ExportProject's close button

* Updated NotificationSnackBar close button

* Fixed loading modal color

* Fixed chunk-item hover colors

* Binds loading modal theme to settings theme

Fixes bug where the theme was changed to dark mode, but the loading modal was still in light mode. This happened because the theme was changed, but the loading modal theme was only set on dock.

* Updated the main section options buttons

* Changed the background color

* Updated button styles

* Binds narration waveform color to theme on dock

* Recording section waveform reacts to theme changes

* Consume waveform reacts to theme changes and color update

* Updated waveform colors for light-mode
* Allows Consume waveform to react to changes in theme mode.

* Chunking waveform reacts to theme changes

* Force changes to be saved when undock is caused by a change in theme color

* Peer edit waveform reacts to theme changes

* Updates chapter review waveform on theme change

* Avoids clearing the undo/redo stack on them change and keeps placed markers on them change.

* Fixed chunking undo/redo bug after theme change

* Fixed peer edit undo/redo bug after theme change

* Cleaned up consume on theme change code.

* clean up

* clean up

* clean up

* clean up

* clean up

* Updated remove chunk buttons

* Updated remove contributor button

* Updated secondary button active styles

* Updated MarkerPlacementWaveform

* Updated style class to marker-waveform
* Used MarkersContainer instead of MarkerTrackControl
* Sets canDeleteMarkerProperty to false

* Revert "Updated MarkerPlacementWaveform"

This reverts commit 401df88.

* Updated Verse Edit markers and reverted scrolling-waveform style change

* Added strokes around highlights back in
* Updated MarkerView to use MarkerWaveform and not MarkerPlacementWaveform

* Clean up and changed Marker Edit's verse marker styles

* Updated -wa-combobox styles

* Updated selected and hover styles

* Fixed merge errors

* Binds Narration loading modal themeProperty to appColorMode

* Updated check for hasAudio and hasPlayer

* Clean up

* Made topTrack line visible in Marker App

Modified stylesheet imports based on imports from Translation. This is because the topTrack line only became visible when I opened the Translation page, then came back to the Marker App.

* Prevents marker-node's title-section from overflowing

* Prior to this, the marker node's title-section was overflowing into the the border for the waveform. This was very noticeable in dark mode

* Removed unnecessary forceSaveChanges

jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/ContributorCell.kt

@@ -63,8 +63,8 @@ class ContributorCell : HBox() {
         )
 
         button {
-            addClass("btn", "btn--icon", "btn--borderless", "contributor__list-cell__delete-btn")
-            graphic = FontIcon(Material.DELETE).addClass("delete-icon")
+            addClass("btn", "btn--tertiary", "btn--borderless")
+            graphic = FontIcon(Material.DELETE)
             tooltip(messages["remove"])
             setOnAction {
                 val index = if (indexProperty.value < 0) {

jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/canvas/WaveformLayer.kt

@@ -18,17 +18,47 @@
  */
 package org.wycliffeassociates.otter.jvm.controls.canvas
 
+import io.reactivex.Observable
+import io.reactivex.schedulers.Schedulers
 import javafx.scene.canvas.Canvas
 import javafx.scene.canvas.GraphicsContext
 import javafx.scene.paint.Paint
+import org.slf4j.LoggerFactory
+import org.wycliffeassociates.otter.common.data.ColorTheme
 import org.wycliffeassociates.otter.common.recorder.ActiveRecordingRenderer
 
 private const val USHORT_SIZE = 65535.0
+const val WAV_COLOR_LIGHT = "#999999"
+const val WAV_COLOR_DARK = "#808080"
 
-class WaveformLayer(private val renderer: ActiveRecordingRenderer) : IDrawable {
+class WaveformLayer(
+    private val renderer: ActiveRecordingRenderer,
+    colorThemeObservable: Observable<ColorTheme>
+) : IDrawable {
+
+    private val logger = LoggerFactory.getLogger(WaveformLayer::class.java)
+
+    private var waveformColor = WAV_COLOR_LIGHT
+
+    init {
+        colorThemeObservable
+            .subscribeOn(Schedulers.io())
+            .doOnError { e ->
+                logger.error("Error in the volume bar", e)
+            }
+            .subscribe {
+                it?.let {
+                    if (it == ColorTheme.LIGHT) {
+                        waveformColor = WAV_COLOR_LIGHT
+                    } else {
+                        waveformColor = WAV_COLOR_DARK
+                    }
+                }
+            }
+    }
 
     override fun draw(context: GraphicsContext, canvas: Canvas) {
-        context.stroke = Paint.valueOf("#66768B")
+        context.stroke = Paint.valueOf(waveformColor)
         context.lineWidth = 1.0
 
         val buffer = renderer.floatBuffer.array

jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/chapterselector/ChapterGrid.kt

@@ -57,7 +57,7 @@ class ChapterGrid(val list: List<ChapterGridItemData>) : GridPane() {
             val node = StackPane().apply {
                 button(chapter.number.toString()) {
                     addClass(
-                        "btn", "btn--secondary", "btn--borderless", "chapter-grid__btn"
+                        "btn", "btn--tertiary", "btn--borderless", "chapter-grid__btn"
                     )
                     togglePseudoClass("selected", chapter.selected)
                     setOnAction {

jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/dialog/ContributorDialog.kt

@@ -43,12 +43,12 @@ class ContributorDialog : OtterDialog() {
             spacing = 10.0
             hbox {
                 addClass("contributor-dialog__header")
-                label (messages["modifyContributors"]) {
+                label(messages["modifyContributors"]) {
                     addClass("h3")
                 }
                 region { hgrow = Priority.ALWAYS }
                 button {
-                    addClass("btn", "btn--secondary")
+                    addClass("btn", "btn--tertiary", "btn--borderless")
                     graphic = FontIcon(MaterialDesign.MDI_CLOSE_CIRCLE)
                     tooltip(messages["close"])
                     action { close() }
@@ -75,7 +75,7 @@ class ContributorDialog : OtterDialog() {
             hgrow = Priority.ALWAYS
             addClass("contributor-dialog__action")
 
-            button (messages["save"]) {
+            button(messages["save"]) {
                 addClass("btn", "btn--primary", "btn--borderless", "contributor-dialog__action__confirm-btn")
                 graphic = FontIcon(MaterialDesign.MDI_CHECK_CIRCLE)
                 tooltip(this.text)

jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/media/SimpleAudioPlayer.kt

@@ -95,7 +95,7 @@ class SimpleAudioPlayer(
         nodeOrientation = NodeOrientation.LEFT_TO_RIGHT
 
         button {
-            addClass("btn", "btn--icon")
+            addClass("btn", "btn--secondary")
             textProperty().bind(playPauseTextBinding())
             tooltip {
                 textProperty().bind(playPauseTextBinding(true))
@@ -116,7 +116,7 @@ class SimpleAudioPlayer(
             hgrow = Priority.ALWAYS
             addClass("audio-player--center")
 
-            label(titleTextProperty){
+            label(titleTextProperty) {
                 addClass("h5", "h5--60", "audio-player__title")
                 visibleWhen { textProperty().isNotEmpty }
                 managedWhen(visibleProperty())

jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/narration/NarrationTextItem.kt

@@ -82,11 +82,10 @@ class NarrationTextItem : VBox() {
             borderpane {
                 center = stackpane {
                     button {
-                        addClass("btn", "btn--secondary")
+                        addClass("btn", "btn--tertiary")
                         graphic = FontIcon(MaterialDesign.MDI_PLAY)
                         tooltip(messages["play"])
 
-
                         enableWhen {
                             isPlayEnabledProperty
                         }
@@ -103,7 +102,7 @@ class NarrationTextItem : VBox() {
                         )
                     }
                     button {
-                        addClass("btn", "btn--secondary")
+                        addClass("btn", "btn--tertiary")
                         graphic = FontIcon(MaterialDesign.MDI_PAUSE)
                         tooltip(messages["pause"])
                         enableWhen {
@@ -333,7 +332,7 @@ class NarrationTextItem : VBox() {
                         alignment = Pos.CENTER
                         prefWidth = 316.0
                         styleClass.clear()
-                        addClass("btn", "btn--secondary")
+                        addClass("btn", "btn--primary")
                         addPseudoClass("inactive")
                         text = messages["record"]
                         graphic = FontIcon(MaterialDesign.MDI_MICROPHONE)

jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/narration/StickyVerse.kt

@@ -52,8 +52,8 @@ class StickyVerse : HBox() {
     }
 }
 
-class ResumeVerseEvent: FXEvent()
+class ResumeVerseEvent : FXEvent()
 
 fun EventTarget.stickyVerse(op: StickyVerse.() -> Unit = {}) =
     StickyVerse().attachTo(this, op) {
-}
+    }

jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/popup/NotificationSnackBar.kt

@@ -35,9 +35,9 @@ import tornadofx.*
 import tornadofx.FX.Companion.messages
 import tornadofx.FX.Companion.primaryStage
 
-private const val SNACK_BAR_TO_SCREEN_RATIO = 9.0/10.0
+private const val SNACK_BAR_TO_SCREEN_RATIO = 9.0 / 10.0
 
-class NotificationSnackBar(notification: NotificationViewData): HBox() {
+class NotificationSnackBar(notification: NotificationViewData) : HBox() {
 
     val titleProperty = SimpleStringProperty(notification.title)
     val messageProperty = SimpleStringProperty(notification.message)
@@ -65,11 +65,13 @@ class NotificationSnackBar(notification: NotificationViewData): HBox() {
                             addClass("active-icon")
                         }
                     }
+
                     NotificationStatusType.FAILED, NotificationStatusType.WARNING -> {
                         FontIcon(MaterialDesign.MDI_ALERT).apply {
                             addClass("danger-icon")
                         }
                     }
+
                     else -> Region()
                 }
             })
@@ -104,7 +106,7 @@ class NotificationSnackBar(notification: NotificationViewData): HBox() {
         }
 
         button {
-            addClass("btn", "btn--icon", "btn--borderless")
+            addClass("btn", "btn--icon", "btn--tertiary")
             tooltip(messages["dismiss"])
             graphic = FontIcon(MaterialDesign.MDI_CLOSE_CIRCLE).apply {
                 addClass("dismiss-icon")

jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/skins/MarkerNodeSkin.kt

@@ -52,7 +52,7 @@ class MarkerNodeSkin(val control: MarkerNode) : SkinBase<MarkerNode>(control) {
                     minWidth = USE_PREF_SIZE
                 }
                 button {
-                    addClass("btn", "btn--icon", "btn--borderless", "normal-text")
+                    addClass("btn", "btn--tertiary", "normal-text")
                     graphic = FontIcon(MaterialDesign.MDI_DELETE).addClass("wa-icon")
                     tooltip(messages["remove_chunk"])
                     visibleWhen { control.canBeDeletedProperty }

jvm/controls/src/main/resources/css/chapter-selector.css

@@ -19,9 +19,10 @@
 .chapter-selector__controls {
     -fx-alignment: center;
     -fx-background-radius: 6px;
-    -fx-border-color: -wa-black-30;
+    -fx-border-color: -wa-surface-border;
     -fx-border-radius: 16px;
     -fx-border-style: solid;
+    -fx-border-width: 2px
 }
 
 .chapter-selector__title {
@@ -52,14 +53,14 @@
 .chapter-selector .btn.chapter-selector__btn-prev {
     -fx-background-radius: 16px 0 0 16px;
     -fx-border-radius: 16px 0 0 16px;
-    -fx-border-width: 0 1 0 0;
-    -fx-border-color: -wa-foreground-hover;
+    -fx-border-width: 0 2 0 0;
+    -fx-border-color: -wa-surface-border;
 ;
 }
 
 .chapter-selector .btn.chapter-selector__btn-next {
     -fx-background-radius: 0 16px 16px 0;
     -fx-border-radius: 0 16px 16px 0;
-    -fx-border-width: 0 0 0 1;
-    -fx-border-color: -wa-foreground-hover;
+    -fx-border-width: 0 0 0 2;
+    -fx-border-color: -wa-surface-border;
 }

jvm/controls/src/main/resources/css/checkbox-button.css

@@ -30,11 +30,11 @@
 }
 
 .checkbox-button:hover {
-    -fx-background-color: -wa-secondary-btn-background-hover;
+    -fx-background-color: -wa-primary-05;
 }
 
 .checkbox-button:pressed {
-    -fx-background-color: -wa-secondary-btn-background-pressed;
+    -fx-background-color: -wa-primary-10;
 }
 
 .checkbox-button:selected {

jvm/controls/src/main/resources/css/confirm-dialog.css

@@ -44,7 +44,7 @@
     -fx-spacing: 16;
     -fx-padding: 16 12;
     -fx-text-alignment: justify;
-    -fx-background-color: -wa-dialog-background;
+    -fx-background-color: -wa-foreground;
     -fx-alignment: center;
 }