improves design

src/Chest.elm

@@ -88,9 +88,11 @@ view mode route model =
     in
     article
         [ class "section" ]
-        [ p [ class "heading" ] [ text header ]
-        , viewSearchBar
-        , table [ class "table is-fullwidth is-hoverable" ]
+        [ div [ class "columns"]
+              [ div [ class "column is-one-third" ] [ p [ class "title" ] [ text header ] ]
+              , div [ class "column" ] [ viewSearchBar ]
+              ]
+        , table [ class "table is-fullwidth is-striped is-hoverable" ]
             [ thead [ class "table-header" ]
                 [ th [] [ text "Nom" ] ]
             , tbody [] <| List.map (viewItemTableRow isSelected rowControls) shownItems
@@ -102,7 +104,11 @@ claimedItemRenderer : (Item -> Bool) -> Item -> Html Msg
 claimedItemRenderer isClaimed item =
     case isClaimed item of
         True ->
-            renderIcon "fas fa-praying-hands" "1x"
+            renderIcon
+            { icon = "fas fa-praying-hands"
+            , size = "small"
+            , ratio = "1x"
+            }
 
         False ->
             text ""
@@ -193,7 +199,12 @@ switchSelectionState id selection =
 
 viewSearchBar : Html Msg
 viewSearchBar =
-    input [ class "input" ] []
+    div [ class "field" ]
+        [ p [ class "control has-icons-left" ]
+              [ input [ class "input" ] []
+              , span [ class "icon is-left" ] [ i [ class "fas fa-search" ] [] ]
+              ]
+        ]
 
 
 targetItemsFor : Route -> Model -> List Item

src/Main.elm

@@ -533,7 +533,7 @@ viewHeaderBar model =
     nav [ class "navbar container", class "is-info" ]
         [ div [ class "navbar-brand" ]
             [ a [ class "navbar-item", href "/" ]
-                [ renderIcon "fab fa-d-and-d" "2x"
+                [ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" }
                 , span [] [ text model.player.name ]
                 ]
             , a [ class "navbar-burger is-active" ]
@@ -545,7 +545,7 @@ viewHeaderBar model =
         , div [ class "navbar-menu is-active" ]
             [ div [ class "navbar-end" ]
                 [ a [ class "navbar-item", href "/marchand" ]
-                    [ renderIcon "fas fa-store-alt" "1x"
+                    [ renderIcon { icon = "fas fa-store-alt", ratio = "1x", size = "medium" }
                     , span [] [ text "Marchand" ]
                     ]
                 , a
@@ -558,7 +558,7 @@ viewHeaderBar model =
                             "/coffre"
                         )
                     ]
-                    [ renderIcon "fas fa-gem" "1x"
+                    [ renderIcon { icon = "fas fa-gem", ratio = "1x", size = "medium" }
                     , span []
                         [ text
                             (if model.player.id == 0 then

src/Utils.elm

@@ -4,6 +4,6 @@ import Html exposing (..)
 import Html.Attributes exposing (..)
 
 
-renderIcon name size =
-    span [ class <| "icon is-medium" ]
-        [ i [ class <| name ++ " fa-" ++ size ] [] ]
+renderIcon params =
+    span [ class <| "icon is-" ++ params.size ]
+        [ i [ class <| params.icon ++ " fa-" ++ params.ratio ] [] ]