style the LoggedIn page

elm/src/Anonymous.elm

@@ -1,5 +1,6 @@
 module Anonymous exposing (..)
 
+import Component exposing (..)
 import Credentials exposing (..)
 
 -- elm/json
@@ -62,7 +63,7 @@ update msg model =
 -- VIEW
 
 view : Model -> Element Msg
-view model = Element.row [ Element.width fill ]
+view model = Component.mainRow
   [ Credentials.view "Register User" RegisterData Register model.register
   , Credentials.view "Login" LoginData Login model.login
   ]

elm/src/Component.elm

@@ -7,16 +7,35 @@ import Element exposing (..)
 import Element.Background exposing (..)
 import Element.Border exposing (..)
 import Element.Input exposing (..)
+import Element.Font
+
+mainRow : List ( Element msg ) -> Element msg
+mainRow elements = row [ Element.width fill ] elements
+
+mainColumn : List ( Element msg ) -> Element msg
+mainColumn elements = column
+  [ normalPadding
+  , bigSpacing
+  , Element.width fill
+  , alignTop
+  ]
+  elements
+
+columnTitle : String -> Element msg
+columnTitle title = el [ Element.centerX ] ( Element.text title )
 
 button : msg -> String -> Element msg
 button message label = Element.Input.button
-    [ Element.padding 5
-    , Element.Background.color blue
-    , Element.Border.color purple
-    , Element.Border.width 2
-    , Element.Border.rounded 10
-    , Element.focused [ Element.Background.color purple ]
-    ]
+    ( [ Element.padding 5
+      , Element.focused [ Element.Background.color purple ]
+      ] ++ buttonStyle )
     { onPress = Just message
     , label   = Element.text label
     }
+
+tableHeader : String -> Element msg
+tableHeader header = Element.el
+  [ headerFont
+  , Element.Font.center
+  ]
+  ( Element.text header)

elm/src/Credentials.elm

@@ -61,12 +61,8 @@ updateSubmit decoder url credentials submitMessage model =
 -- VIEW
 
 view : String -> (CredentialsMessage -> msg) -> (SubmitMessage a -> msg) -> Model -> Element msg
-view title liftModel liftMessage credentials = column
-  [ normalPadding
-  , bigSpacing
-  , Element.width fill
-  ]
-  [ el [ Element.centerX ] ( Element.text title )
+view title liftModel liftMessage credentials = Component.mainColumn
+  [ Component.columnTitle title
   , column
     [ normalSpacing
     , Element.centerX

elm/src/Logged.elm

@@ -3,6 +3,7 @@ module Logged exposing (..)
 import Anonymous exposing (..)
 import Component exposing (..)
 import LoggedModel exposing (..)
+import Style exposing (..)
 import Tags exposing (..)
 
 -- elm/http
@@ -18,6 +19,7 @@ import Url.Builder exposing (..)
 
 -- mdgriffith/elm-ui
 import Element exposing (..)
+import Element.Border exposing (..)
 import Element.Input exposing (..)
 
 -- MODEL
@@ -59,28 +61,38 @@ update msg model = case msg of
 -- VIEW
 
 viewTag : Tag -> Element msg
-viewTag tag = Element.el [] ( Element.text tag.name )
+viewTag tag = Element.el
+  [ normalPadding
+  , normalSpacing
+  ]
+  ( Element.text tag.name )
 
 view : Model -> Element Msg
-view model = row []
-  [ column []
-    [ el [] ( Element.text "Contents" )
+view model = Component.mainRow
+  [ Component.mainColumn
+    [ Component.columnTitle "Contents"
     , Element.map NewFilter ( Tags.view viewTag "Filter by tag" "Add filter" model.filters )
-    , Element.table []
+    , Element.table
+      [ normalPadding
+      ]
       { data = model.contents
       , columns =
-        [ { header = Element.text "content"
+        [ { header = tableHeader "Content"
           , width = fill
-          , view = \content -> Element.text content.message
+          , view = \content -> Element.el
+            ( normalPadding :: tableRowStyle )
+            ( Element.text content.message )
           }
-        , { header = Element.text "tags"
+        , { header = tableHeader "Tags"
           , width = fill
-          , view = \content -> row [] ( List.map viewTag content.tags ) }
+          , view = \content -> Element.el
+            tableRowStyle
+            ( row [] ( List.map viewTag content.tags ) ) }
         ]
       }
     ]
-  , column []
-    [ el [] ( Element.text "Add content" )
+  , Component.mainColumn
+    [ Component.columnTitle "Add content"
     , Element.Input.text []
       { onChange = NewContent
       , text = model.newContent

elm/src/Style.elm

@@ -1,6 +1,8 @@
 module Style exposing (..)
 
 import Element exposing (..)
+import Element.Background exposing (..)
+import Element.Border exposing (..)
 import Element.Font exposing (..)
 
 -- COLORS
@@ -16,6 +18,9 @@ purple = rgb255 200 200 250
 titleFont : Attr decorative msg
 titleFont = Element.Font.size 40
 
+headerFont : Attr decorative msg
+headerFont = Element.Font.size 25
+
 -- SPACING
 
 normalSpacing : Attribute msg
@@ -31,3 +36,20 @@ normalPadding = padding 10
 
 bigPadding : Attribute msg
 bigPadding = padding 20
+
+-- BUTTON STYLE
+
+buttonStyle : List ( Attribute msg )
+buttonStyle =
+  [ Element.Background.color blue
+  , Element.Border.color purple
+  , Element.Border.width 2
+  , Element.Border.rounded 10
+  ]
+
+tableRowStyle : List ( Attribute msg )
+tableRowStyle =
+  [ Element.Border.solid
+  , Element.Border.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
+  , height fill
+  ]

elm/src/Tags.elm

@@ -57,22 +57,28 @@ remove value list = case list of
 -- VIEW
 
 removable : String -> Element Msg -> Element Msg
-removable id element = row []
+removable id element = row
+  [ normalSpacing ]
   [ element
-  , Element.el [ onClick ( Remove id ) ] ( Element.text "x" )
+  , Element.el
+    ( ( onClick ( Remove id ) ) :: buttonStyle )
+    ( Element.text "x" )
   ]
 
 viewRemovableTag : ( Tag -> Element Msg ) -> Tag -> Element Msg
 viewRemovableTag viewTag tag = removable tag.name ( viewTag tag )
 
 view : ( Tag -> Element Msg ) -> String -> String -> Model -> Element Msg
-view viewTag label submitText model = column []
-  [ Element.row [] ( List.map (viewRemovableTag viewTag) model.tags )
-  , Element.el [] ( Element.Input.text []
+view viewTag label submitText model = column
+  [ normalSpacing
+  , Element.centerX
+  ]
+  [ Element.el [] ( Element.Input.text []
     { onChange    = NewTag
     , text        = model.newTag
     , placeholder = Just ( placeholder [] ( Element.text label ) )
     , label       = labelAbove [] ( Element.text label )
     } )
   , Component.button Submit submitText
+  , Element.row [ normalSpacing ] ( List.map (viewRemovableTag viewTag) model.tags )
   ]