Consolidate common UI elements

assets/src/PlanningPokerEntry.elm

@@ -8,6 +8,7 @@ import Element.Border as Border
 import Element.Font as Font
 import Element.Input as Input
 import Html exposing (Html)
+import PlanningPokerUI as UI
 
 
 type User
@@ -67,49 +68,18 @@ layout model =
                 , placeholder = Just (Input.placeholder [] (text "Your name"))
                 }
             , el [ centerX ] (text "then")
-            , let
+            , UI.actionButton [ centerX ]
-                ready =
+                { isActive = not (String.isEmpty model.name)
-                    not (String.isEmpty model.name)
+                , onPress = CreateRoom
-
-                ( color, event ) =
-                    if ready then
-                        ( blue, Just CreateRoom )
-
-                    else
-                        ( lightGrey, Nothing )
-              in
-              Input.button
-                [ centerX
-                , padding 20
-                , Background.color color
-                , Font.color white
-                ]
-                { onPress = event
                 , label = text "Make a room!"
                 }
             , el
                 [ centerX
-                , Background.color red
+                , Background.color UI.red
                 , padding 20
-                , Font.color white
+                , Font.color UI.white
                 , transparent (model.error == Nothing)
                 ]
               <|
                 text (Maybe.withDefault " " model.error)
             ]
-
-
-blue =
-    rgb255 100 100 255
-
-
-red =
-    rgb255 255 100 100
-
-
-white =
-    rgb255 255 255 255
-
-
-lightGrey =
-    rgb255 200 200 200

assets/src/PlanningPokerRoom.elm

@@ -9,6 +9,7 @@ import Element.Border as Border
 import Element.Font as Font
 import Element.Input as Input
 import Html exposing (Html)
+import PlanningPokerUI as UI
 
 
 type alias Model =
@@ -118,20 +119,20 @@ navBar model =
                 |> Maybe.withDefault ""
     in
     row
-        [ Background.color blue
+        [ Background.color UI.blue
         , height (px 50)
         , width fill
         , padding 10
         ]
         [ el
             [ Font.alignLeft
-            , Font.color white
+            , Font.color UI.white
             , width fill
             ]
             (text model.name)
         , el
             [ Font.alignRight
-            , Font.color white
+            , Font.color UI.white
             ]
             (text myName)
         ]
@@ -151,10 +152,10 @@ cards selected =
                 , Border.rounded 10
                 , Background.color <|
                     if selected == Just value then
-                        blue
+                        UI.blue
 
                     else
-                        white
+                        UI.white
                 , Font.size 50
                 ]
                 { onPress = Just (Vote value)
@@ -184,7 +185,7 @@ players playerList =
                         el
                             [ padding 10
                             , Font.alignRight
-                            , Background.color lightGrey
+                            , Background.color UI.lightGrey
                             ]
                             (text <| Maybe.withDefault " " player.vote)
               }
@@ -194,24 +195,9 @@ players playerList =
 
 moderatorTools : Element Msg
 moderatorTools =
-    Input.button
+    UI.actionButton
-        [ centerX
+        [ centerX ]
-        , padding 20
+        { isActive = True
-        , Background.color blue
+        , onPress = Reset
-        , Font.color white
-        ]
-        { onPress = Just Reset
         , label = text "Reset"
         }
-
-
-blue =
-    rgb255 100 100 255
-
-
-lightGrey =
-    rgb255 200 200 200
-
-
-white =
-    rgb255 255 255 255

assets/src/PlanningPokerUI.elm

@@ -0,0 +1,51 @@
+module PlanningPokerUI exposing (actionButton, blue, lightGrey, red, white)
+
+import Element exposing (Element)
+import Element.Background as Background
+import Element.Font as Font
+import Element.Input as Input
+
+
+blue : Element.Color
+blue =
+    Element.rgb255 100 100 255
+
+
+lightGrey : Element.Color
+lightGrey =
+    Element.rgb255 200 200 200
+
+
+red : Element.Color
+red =
+    Element.rgb255 255 100 100
+
+
+white : Element.Color
+white =
+    Element.rgb255 255 255 255
+
+
+actionButton :
+    List (Element.Attribute msg)
+    -> { isActive : Bool, onPress : msg, label : Element msg }
+    -> Element msg
+actionButton attrs { isActive, onPress, label } =
+    let
+        ( color, maybeEvent ) =
+            if isActive then
+                ( blue, Just onPress )
+
+            else
+                ( lightGrey, Nothing )
+    in
+    Input.button
+        ([ Element.padding 20
+         , Background.color color
+         , Font.color white
+         ]
+            ++ attrs
+        )
+        { onPress = maybeEvent
+        , label = label
+        }