display active para length

3 files changed, 15 insertions, 6 deletions

diff --git a/src/Main.elm b/src/Main.elm
index ab10e82..51c3292 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -233,7 +233,7 @@ view model =
             [ div
                 [ style "width" "100%"
                 ]
-                [ viewWordLengthOptions
+                [ viewWordLengthOptions model.config
                 , div
                     [ style "float" "right" ]
                     [ styledButton [ onClick Redo ] [ text "redo" ] ]
diff --git a/src/Styles.elm b/src/Styles.elm
index 7b2eea7..20a886a 100644
--- a/src/Styles.elm
+++ b/src/Styles.elm
@@ -35,7 +35,6 @@ styledButton =
         , paddingBottom (px 12)
         , paddingLeft (px 0)
         , paddingRight (px 0)
-        , fontFamily monospace
         , border (px 0)
         , backgroundColor (hex "#fff")
         , borderRadius (px 4)
diff --git a/src/Views.elm b/src/Views.elm
index 3a8afed..b74bf98 100644
--- a/src/Views.elm
+++ b/src/Views.elm
@@ -101,8 +101,8 @@ viewAccuracy model =
         accuracy
 
 
-viewWordLengthOptions : Html Msg
-viewWordLengthOptions =
+viewWordLengthOptions : Base.Config -> Html Msg
+viewWordLengthOptions config =
     let
         wl =
             [ 10, 25, 50, 100 ]
@@ -117,8 +117,18 @@ viewWordLengthOptions =
         ]
         (List.map
             (\len ->
-                li [ css [ display inline ] ]
-                    [ styledButton [ onClick (Base.WordLengthChanged len) ]
+                li
+                    [ css [ display inline ] ]
+                    [ styledButton
+                        [ onClick (Base.WordLengthChanged len)
+                        , css <|
+                            List.singleton <|
+                                if config.length == len then
+                                    textDecoration underline
+
+                                else
+                                    textDecoration Css.none
+                        ]
                         [ text <| String.fromInt len ]
                     ]
             )