1 files changed, 69 insertions, 18 deletions

diff --git a/src/Styles.elm b/src/Styles.elm
index 36bd1a3..db5b0ce 100644
--- a/src/Styles.elm
+++ b/src/Styles.elm
@@ -1,5 +1,6 @@
 module Styles exposing (..)
 
+import Base exposing (WordStatus(..))
 import Css exposing (..)
 import Css.Global exposing (global, selector)
 import Html
@@ -10,27 +11,43 @@ styledButton : List (Attribute msg) -> List (Html msg) -> Html msg
 styledButton =
     styled
         button
-        [ margin (px 12)
-        , color (hex "#000")
+        [ marginTop (px 12)
+        , marginBottom (px 12)
+        , paddingTop (px 12)
+        , paddingBottom (px 12)
+        , paddingLeft (px 0)
+        , paddingRight (px 12)
         , fontFamily monospace
-        , backgroundColor (hex "#ddd")
         , border (px 0)
+        , backgroundColor (hex "#fff")
         , borderRadius (px 4)
-        , padding (px 12)
         ]
 
 
-styledInput : List (Attribute msg) -> List (Html msg) -> Html msg
-styledInput =
+correctInputStyle : Style
+correctInputStyle =
+    color (hex "#000")
+
+
+wrongInputStyle : Style
+wrongInputStyle =
+    wrongWordStyle
+
+
+styledInput : Bool -> List (Attribute msg) -> List (Html msg) -> Html msg
+styledInput inputStatus =
     styled
         input
-        [ margin (px 12)
-        , color (hex "#000")
-        , fontFamily monospace
-        , backgroundColor (hex "#eee")
-        , border (px 0)
-        , borderRadius (px 4)
-        , padding (px 12)
+        [ fontFamily monospace
+        , if inputStatus then
+            correctInputStyle
+
+          else
+            wrongInputStyle
+        , border zero
+        , paddingTop (px 12)
+        , paddingBottom (px 12)
+        , width (pct 95)
         ]
 
 
@@ -55,14 +72,12 @@ styledTextBox : List (Attribute msg) -> List (Html msg) -> Html msg
 styledTextBox =
     styled
         div
-        [ margin (px 12)
-        , color (hex "#000")
+        [ color (hex "#000")
         , fontFamily monospace
-        , backgroundColor (hex "#eee")
         , border (px 0)
         , borderRadius (px 4)
-        , padding (px 12)
-        , width (px 500)
+        , paddingTop (px 12)
+        , paddingBottom (px 12)
         , display inlineBlock
         ]
 
@@ -74,3 +89,39 @@ actionContainer =
         [ padding (px 12)
         , width (pct 100)
         ]
+
+
+wrongWordStyle : Style
+wrongWordStyle =
+    color (hex "#f07178")
+
+
+correctWordStyle : Style
+correctWordStyle =
+    color (hex "#13CA91")
+
+
+todoWordStyle : Style
+todoWordStyle =
+    color (hex "#787878")
+
+
+currentWordStyle : Style
+currentWordStyle =
+    textDecoration underline
+
+
+wordStyle : WordStatus -> Style
+wordStyle w =
+    case w of
+        Correct ->
+            correctWordStyle
+
+        Wrong ->
+            wrongWordStyle
+
+        Todo ->
+            todoWordStyle
+
+        CurrentWord ->
+            currentWordStyle