Add font-color property to Line

The U4 line was bothering me because the font-color should be black and given the background color to be quite bright, the white font was making it quite unreadable.
marceloboeira · Feb 10, 2019 · 8b636a9 · 8b636a9
1 parent acda634
commit 8b636a9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/src/Application.elm b/src/Application.elm
@@ -88,7 +88,13 @@ update action state =
 
 viewLine : Line -> Html Action
 viewLine l =
-    button [ class "line", style "background-color" l.color, onClick (Verify l) ] [ text l.name ]
+    button
+        [ class "line"
+        , style "background-color" l.backgroundColor
+        , style "color" l.fontColor
+        , onClick (Verify l)
+        ]
+        [ text l.name ]
 
 
 viewScore : Int -> Html Action

diff --git a/src/BVG/Line.elm b/src/BVG/Line.elm
@@ -4,7 +4,10 @@ import List.Extra exposing (getAt)
 
 
 type alias Line =
-    { name : String, color : String }
+    { name : String
+    , backgroundColor : String
+    , fontColor : String
+    }
 
 
 
@@ -13,15 +16,15 @@ type alias Line =
 
 all : List Line
 all =
-    [ Line "U1" "#59ff00"
-    , Line "U2" "#ff3300"
-    , Line "U3" "#00ff66"
-    , Line "U4" "#ffe600"
-    , Line "U5" "#664019"
-    , Line "U6" "#4d66ff"
-    , Line "U7" "#33ccff"
-    , Line "U8" "#0061da"
-    , Line "U9" "#ff7300"
+    [ Line "U1" "#59ff00" "#fff"
+    , Line "U2" "#ff3300" "#fff"
+    , Line "U3" "#00ff66" "#fff"
+    , Line "U4" "#ffe600" "#000"
+    , Line "U5" "#664019" "#fff"
+    , Line "U6" "#4d66ff" "#fff"
+    , Line "U7" "#33ccff" "#fff"
+    , Line "U8" "#0061da" "#fff"
+    , Line "U9" "#ff7300" "#fff"
     ]
 
 
@@ -32,4 +35,4 @@ find x =
             l
 
         Nothing ->
-            Line "" ""
+            Line "" "" ""
diff --git a/tests/BVG/LineTest.elm b/tests/BVG/LineTest.elm
@@ -6,19 +6,27 @@ import List exposing (head, length)
 import Test exposing (..)
 
 
+u1 =
+    Line "U1" "#59ff00" "#fff"
+
+
+emptyLine =
+    Line "" "" ""
+
+
 suite : Test
 suite =
     describe "Line"
         [ describe "all"
             [ test "has the correct size" <| \() -> Expect.equal (length Line.all) 9
-            , test "return line elements" <| \() -> Expect.equal (head Line.all) (Just (Line "U1" "#59ff00"))
+            , test "return line elements" <| \() -> Expect.equal (head Line.all) (Just u1)
             ]
         , describe "find"
             [ describe "when the input is within range"
-                [ test "return the expected line" <| \() -> Expect.equal (Line.find 1) (Line "U1" "#59ff00")
+                [ test "return the expected line" <| \() -> Expect.equal (Line.find 1) u1
                 ]
             , describe "when the input out of range"
-                [ test "return an empty line" <| \() -> Expect.equal (Line.find 100) (Line "" "")
+                [ test "return an empty line" <| \() -> Expect.equal (Line.find 100) emptyLine
                 ]
             ]
         ]