Improve darkmode.

nfdi4plants · Mar 8, 2021 · 6b5a56f · 6b5a56f
1 parent 37503a5
commit 6b5a56f
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 49 deletions.
diff --git a/src/Client/CustomComponents/Navbar.fs b/src/Client/CustomComponents/Navbar.fs
@@ -232,7 +232,7 @@ let navbarComponent (model : Model) (dispatch : Msg -> unit) =
         ]
         Navbar.menu [Navbar.Menu.Props [Id "navbarMenu"; Class (if model.SiteStyleState.BurgerVisible then "navbar-menu is-active" else "navbar-menu") ; ExcelColors.colorControl model.SiteStyleState.ColorMode]] [
             Navbar.Dropdown.div [ ] [
-                Navbar.Item.a [Navbar.Item.Props [Href Shared.URLs.DocsFeatureUrl ; Target "_Blank"; Style [ Color model.SiteStyleState.ColorMode.Text]]] [
+                Navbar.Item.a [Navbar.Item.Props [ Href Shared.URLs.DocsFeatureUrl ; Target "_Blank"; Style [ Color model.SiteStyleState.ColorMode.Text]]] [
                     str "How to use"
                 ]
                 Navbar.Item.a [Navbar.Item.Props [Href @"https://github.com/nfdi4plants/Swate/issues/new/choose"; Target "_Blank"; Style [ Color model.SiteStyleState.ColorMode.Text]]] [

diff --git a/src/Client/Views/FilePickerView.fs b/src/Client/Views/FilePickerView.fs
@@ -202,14 +202,14 @@ let dragAndDropElement (model:Model) (dispatch: Msg -> unit) id =
             eve.preventDefault()
             //eve.target?style?backgroundColor <- "lightgrey"
             //eve.target?style?borderBottom <- "5px solid darkgrey"
-            parent()?style?backgroundColor <- "lightgrey"
+            parent()?style?backgroundColor <- model.SiteStyleState.ColorMode.ControlForeground
             parent()?style?borderBottom <- "5px solid darkgrey"
         )
         OnDragLeave (fun eve ->
             eve.preventDefault()
             //eve.target?style?backgroundColor <- ExcelColors.colorfullMode.BodyBackground
             //eve.target?style?borderBottom <- "0px solid darkgrey"
-            parent()?style?backgroundColor <- ExcelColors.colorfullMode.BodyBackground
+            parent()?style?backgroundColor <- model.SiteStyleState.ColorMode.BodyBackground
             parent()?style?borderBottom <- "0px solid darkgrey"
         )
         OnDragEnd (fun eve ->
@@ -236,7 +236,7 @@ let dragAndDropElement (model:Model) (dispatch: Msg -> unit) id =
             eve.preventDefault()
             dropped <- true
             UpdateDNDDropped true |> FilePicker |> dispatch
-            parent()?style?backgroundColor  <- ExcelColors.colorfullMode.BodyBackground
+            parent()?style?backgroundColor  <- model.SiteStyleState.ColorMode.BodyBackground
             parent()?style?borderBottom     <- "0px solid darkgrey"
 
             let prevId      = eve.dataTransfer.getData("text")

diff --git a/src/Client/Views/ProtocolInsertView.fs b/src/Client/Views/ProtocolInsertView.fs
@@ -98,14 +98,18 @@ let isViableISADotNetProcess (isaProcess:ISADotNet.Process) =
     else
         false, Some <| sprintf "Process contains missing values: %A" (isExistingChecks |> Collections.Array.map fst)
 
-let paramValuePairElement (ppv:ISADotNet.ProcessParameterValue) =
-    Table.table [Table.IsFullWidth; Table.IsBordered][
+let paramValuePairElement (model:Model) (ppv:ISADotNet.ProcessParameterValue) =
+    Table.table [
+        Table.IsFullWidth;
+        Table.IsBordered
+        Table.Props [Style [BackgroundColor model.SiteStyleState.ColorMode.BodyBackground; Color model.SiteStyleState.ColorMode.Text]]
+    ][
         thead [][
             tr [][
-                th [Style [Width "50%"]] [
+                th [Style [Width "50%"; Color model.SiteStyleState.ColorMode.Text]] [
                     str (annotationValueToString ppv.Category.Value.ParameterName.Value.Name.Value)
                 ]
-                th [][
+                th [Style [Color model.SiteStyleState.ColorMode.Text]][
                     str (termAccessionReduce ppv.Category.Value.ParameterName.Value.TermAccessionNumber.Value)
                 ]
             ]
@@ -156,7 +160,7 @@ let displayProtocolInfoElement isViable (errorMsg:string option) (model:Model) d
                     str (sprintf " - Version %s" model.ProtocolInsertState.ProcessModel.Value.ExecutesProtocol.Value.Version.Value)
                 ]
                 for paramValuePair in paramValuePairs do
-                    yield paramValuePairElement paramValuePair
+                    yield paramValuePairElement model paramValuePair
             ]
         ]
 
@@ -247,7 +251,6 @@ let protocolInsertElement uploadId (model:Model) dispatch =
     div [
         Style [
             BorderLeft (sprintf "5px solid %s" NFDIColors.Mint.Base)
-            //BorderRadius "15px 15px 0 0"
             Padding "0.25rem 1rem"
             MarginBottom "1rem"
         ]
@@ -343,13 +346,17 @@ let showDatabaseProtocolTemplate (model:Model) dispatch =
         toProtocolSearchElement model dispatch
 
         if model.ProtocolInsertState.ProtocolSelected.IsSome then
-            Table.table [Table.IsFullWidth; Table.IsStriped; Table.IsBordered][
+            Table.table [
+                Table.IsFullWidth;
+                Table.IsBordered
+                Table.Props [Style [Color model.SiteStyleState.ColorMode.Text; BackgroundColor model.SiteStyleState.ColorMode.BodyBackground]]
+            ][
                 thead [][
                     tr [][
-                        th [][str "Column"]
-                        th [][str "Column TAN"]
-                        th [][str "Unit"]
-                        th [][str "Unit TAN"]
+                        th [Style [Color model.SiteStyleState.ColorMode.Text]][str "Column"]
+                        th [Style [Color model.SiteStyleState.ColorMode.Text]][str "Column TAN"]
+                        th [Style [Color model.SiteStyleState.ColorMode.Text]][str "Unit"]
+                        th [Style [Color model.SiteStyleState.ColorMode.Text]][str "Unit TAN"]
                     ]
                 ]
                 tbody [][

diff --git a/src/Client/Views/ProtocolSearchView.fs b/src/Client/Views/ProtocolSearchView.fs
@@ -14,7 +14,7 @@ open Model
 open Messages
 
 
-let breadcrumbEle dispatch =
+let breadcrumbEle (model:Model) dispatch =
     Breadcrumb.breadcrumb [Breadcrumb.HasArrowSeparator][
         Breadcrumb.item [][
             a [
@@ -23,8 +23,11 @@ let breadcrumbEle dispatch =
                 str (Routing.Route.ProtocolInsert.toStringRdbl)
             ]
         ]
-        Breadcrumb.item [ Breadcrumb.Item.IsActive true ][
+        Breadcrumb.item [
+            Breadcrumb.Item.IsActive true
+        ][
             a [
+                Style [Color model.SiteStyleState.ColorMode.Text]
                 OnClick (fun e -> UpdatePageState (Some Routing.Route.ProtocolInsert) |> dispatch)
             ][
                 str Routing.Route.ProtocolSearch.toStringRdbl
@@ -62,9 +65,9 @@ let fileSortElements (model:Model) dispatch =
         else
             [||]
     div [ Style [MarginBottom "0.75rem"] ][
-        Columns.columns [Columns.IsMobile; Columns.Props [Style [MarginBottom "0"]]] [
+        Columns.columns [Columns.IsMobile; Columns.Props [Style [MarginBottom "0";]]] [
             Column.column [ ] [
-                Label.label [Label.Size IsSmall] [str "Search by protocol name"]
+                Label.label [Label.Size IsSmall; Label.Props [Style [Color model.SiteStyleState.ColorMode.Text]]] [str "Search by protocol name"]
                 Control.div [
                     Control.HasIconRight
                 ] [
@@ -80,7 +83,7 @@ let fileSortElements (model:Model) dispatch =
             ]
 
             Column.column [ ] [
-                Label.label [Label.Size IsSmall] [str "Search for tags"]
+                Label.label [Label.Size IsSmall; Label.Props [Style [Color model.SiteStyleState.ColorMode.Text]]] [str "Search for tags"]
                 Control.div [
                     Control.HasIconRight
                 ] [
@@ -95,9 +98,10 @@ let fileSortElements (model:Model) dispatch =
                             [ ] ]
                     /// Pseudo dropdown
                     Box.box' [Props [Style [
+                        yield! ExcelColors.colorControlInArray model.SiteStyleState.ColorMode
                         Position PositionOptions.Absolute
                         Width "100%"
-                        Border "0.5px solid darkgrey"
+                        //Border "0.5px solid"
                         if hitTagList |> Array.isEmpty then Display DisplayOptions.None
                     ]]] [
                         Tag.list [][
@@ -120,7 +124,7 @@ let fileSortElements (model:Model) dispatch =
                 yield
                     Control.div [ ] [
                         Tag.list [Tag.List.HasAddons][
-                            Tag.tag [Tag.Color IsInfo; Tag.Props [Style [Border (sprintf "0.2px solid %s" NFDIColors.LightBlue.Base) ]]] [str selectedTag]
+                            Tag.tag [Tag.Color IsInfo; Tag.Props [Style [Border "0px"]]] [str selectedTag]
                             Tag.delete [
                                 Tag.CustomClass "clickableTagDelete"
                                 //Tag.Color IsWarning;
@@ -146,7 +150,7 @@ let protocolElement i (sortedTable:ProtocolTemplate []) (model:Model) dispatch =
             if isActive then
                 Class "nonSelectText"
             else
-                Class "nonSelectText validationTableEle"
+                Class "nonSelectText hoverTableEle"
             Style [
                 Cursor "pointer"
                 UserSelect UserSelectOptions.None
@@ -179,13 +183,13 @@ let protocolElement i (sortedTable:ProtocolTemplate []) (model:Model) dispatch =
                 Style [
                     Padding "0"
                     if isActive then
-                        BorderBottom (sprintf "2px solid %s" ExcelColors.colorfullMode.Accent)
+                        BorderBottom (sprintf "2px solid %s" model.SiteStyleState.ColorMode.Accent)
                     if not isActive then
                         Display DisplayOptions.None
                 ]
                 ColSpan 5
             ] [
-                Box.box' [][
+                Box.box' [Props [Style [BorderRadius "0px"; yield! ExcelColors.colorControlInArray model.SiteStyleState.ColorMode]]][
                     Columns.columns [][
                         Column.column [][
                             Text.div [][
@@ -260,20 +264,17 @@ let protocolElementContainer (model:Model) dispatch =
     ] [
         fileSortElements model dispatch
         Table.table [
-            //Table.IsBordered
             Table.IsFullWidth
             Table.IsStriped
+            Table.Props [Style [BackgroundColor model.SiteStyleState.ColorMode.BodyBackground; Color model.SiteStyleState.ColorMode.Text]]
         ] [
             thead [][
                 tr [][
-
-                ]
-                tr [][
-                    th [][ str "Protocol Name"      ]
-                    th [][ str "Documentation"      ]
-                    th [][ str "Protocol Version"   ]
-                    th [][ str "Uses"               ]
-                    th [][]
+                    th [ Style [ Color model.SiteStyleState.ColorMode.Text] ][ str "Protocol Name"      ]
+                    th [ Style [ Color model.SiteStyleState.ColorMode.Text] ][ str "Documentation"      ]
+                    th [ Style [ Color model.SiteStyleState.ColorMode.Text] ][ str "Protocol Version"   ]
+                    th [ Style [ Color model.SiteStyleState.ColorMode.Text] ][ str "Uses"               ]
+                    th [ Style [ Color model.SiteStyleState.ColorMode.Text] ][]
                 ]
             ]
             tbody [][
@@ -292,7 +293,7 @@ let protocolSearchViewComponent (model:Model) dispatch =
         // https://keycode.info/
         OnKeyDown (fun k -> if k.key = "Enter" then k.preventDefault())
     ] [
-        breadcrumbEle dispatch
+        breadcrumbEle model dispatch
 
         if isEmpty && not isLoading then
             Help.help [Help.Color IsDanger][str "No Protocols were found. This can happen if connection to the server was lost. You can try reload this site or contact a developer."]

diff --git a/src/Client/Views/SettingsView.fs b/src/Client/Views/SettingsView.fs
@@ -82,11 +82,11 @@ let settingsViewComponent (model:Model) dispatch =
     ][
         Label.label [Label.Size Size.IsLarge; Label.Props [Style [Color model.SiteStyleState.ColorMode.Accent]]][ str "Swate Settings"]
 
-        Label.label [][str "Customize Swate"]
+        Label.label [Label.Props [Style [Color model.SiteStyleState.ColorMode.Accent]]][str "Customize Swate"]
         toggleDarkModeElement model dispatch
 
 
-        Label.label [][str "Advanced Settings"]
+        Label.label [Label.Props [Style [Color model.SiteStyleState.ColorMode.Accent]]][str "Advanced Settings"]
         customXmlSettings model dispatch
         dataStewardsSettings model dispatch
         protocolSettings model dispatch

diff --git a/src/Client/Views/SettingsXmlView.fs b/src/Client/Views/SettingsXmlView.fs
@@ -282,7 +282,7 @@ let displaySingleTableValidationEle (model:Model) dispatch (tableValidation:Vali
         thead [][
             tr [
                 Style [Cursor "pointer"]
-                Class "validationTableEle"
+                Class "hoverTableEle"
                 OnClick (fun e ->
                     let next = if isActive then None else Some tableValidation
                     UpdateActiveSwateValidation next |> SettingsXmlMsg |> dispatch
@@ -546,7 +546,7 @@ let displaySingleProtocolGroupEle model dispatch (protocolGroup:GroupTypes.Proto
         thead [][
             tr [
                 Style [Cursor "pointer"]
-                Class "validationTableEle"
+                Class "hoverTableEle"
                 OnClick (fun e ->
                     let next = if isActive then None else Some protocolGroup
                     UpdateActiveProtocolGroup next |> SettingsXmlMsg |> dispatch

diff --git a/src/Client/Views/ValidationView.fs b/src/Client/Views/ValidationView.fs
@@ -31,12 +31,12 @@ let columnListElement ind (columnValidation:ColumnValidation) (model:Model) disp
         if isActive then
             Class "nonSelectText"
         else
-            Class "nonSelectText validationTableEle"
+            Class "nonSelectText hoverTableEle"
         Style [
             Cursor "pointer"
             UserSelect UserSelectOptions.None
             if isActive then
-                BackgroundColor model.SiteStyleState.ColorMode.ElementBackground
+                BackgroundColor NFDIColors.Mint.Darker10
             if isActive then
                 Color "white"
             else
@@ -260,8 +260,9 @@ let sliderElements id columnValidation model dispatch =
                     Control.div [][
                         Button.a [
                             Button.Color IsWarning
-                            Button.IsLight
-                            Button.Props [Style [Padding "0rem"]]
+                            //Button.IsLight
+                            Button.IsOutlined
+                            Button.Props [Style [Padding "0rem"; BorderColor model.SiteStyleState.ColorMode.BodyForeground]]
                             Button.OnClick (fun e ->
                                 let nextColumnValidation = {
                                     columnValidation with
@@ -278,14 +279,15 @@ let sliderElements id columnValidation model dispatch =
                                     Fa.Solid.Star
                                 else
                                     Fa.Regular.Star
-                                Fa.Props [Style [Color NFDIColors.Yellow.Base]]
+                                //Fa.Props [Style [Color NFDIColors.Yellow.Base]]
                             ][]
                         ]
                     ]
             yield
                 Button.a [
                     Button.Color IsDanger
-                    Button.IsLight
+                    Button.Props [Style [BorderColor model.SiteStyleState.ColorMode.BodyForeground]]
+                    Button.IsOutlined
                     Button.OnClick (fun e ->
                         let nextColumnValidation = {
                             columnValidation with
@@ -343,7 +345,7 @@ let optionsElement ind (columnValidation:ColumnValidation) (model:Model) dispatc
             ColSpan 4
             Style [
                 Padding "0";
-                if isVisible then BorderBottom (sprintf "2px solid %s" model.SiteStyleState.ColorMode.Accent)
+                if isVisible then BorderBottom (sprintf "2px solid %s" NFDIColors.Mint.Base)
             ]
         ][
             Box.box' [

diff --git a/src/Client/style.scss b/src/Client/style.scss
@@ -81,16 +81,21 @@ a:hover {
     @extend .delete
 }
 
+a.navbar-item:hover {
+    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) !important;
+}
+
 .delete:hover {
     @extend .delete;
     background-color: $danger
 }
 
-.validationTableEle {
+.hoverTableEle {
 }
 
-.validationTableEle:hover {
-    background-color: #E8E8E8 !important
+.hoverTableEle:hover {
+    /*background-color: #E8E8E8 !important*/
+    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
 }
 
 .clickableTag {