Improve layout legibility and hierarchy

juliatessler · Apr 24, 2020 · e170a4c · e170a4c
1 parent 5ec1736
commit e170a4c
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 46 deletions.
diff --git a/jarbas/layers/elm/Reimbursement/Company/View.elm b/jarbas/layers/elm/Reimbursement/Company/View.elm
@@ -82,11 +82,19 @@ viewCompany lang apiKey company =
         source =
             "http://www.receita.fazenda.gov.br/PessoaJuridica/CNPJ/cnpjreva/cnpjreva_solicitacao2.asp"
     in
-        div
-            []
+        Options.styled div
+            [ Options.css "background-color" "white"
+            , Options.css "border" "1px solid #e0e0e0"
+            , Options.css "border-radius" "4px"
+            , Options.css "margin-bottom" "16px"
+            , Options.css "padding" "16px"
+            ]
             [ Options.styled
                 p
-                [ Typography.subhead ]
+                [ Typography.subhead
+                , Options.css "border-bottom" "1px solid #e0e0e0"
+                , Options.css "padding-bottom" "8px"
+                ]
                 [ icon
                 , text title
                 , location
@@ -103,23 +111,16 @@ viewCompany lang apiKey company =
 
 viewRow : ( String, String ) -> Html.Html Msg
 viewRow ( label, value ) =
-    let
-        styles =
-            [ Options.css "display" "flex"
-            , Options.css "justify-content" "space-between"
-            , Options.css "align-items" "center"
-            ]
-
-        labelStyles =
-            Options.css "width" "30%" :: styles
-    in
-        Options.styled div
-            [ Options.css "display" "flex"
-            , Options.css "flex-direction" "row"
-            ]
-            [ Options.styled span (Typography.body2 :: labelStyles) [ text label ]
-            , Options.styled span (Typography.body1 :: styles) [ text value ]
-            ]
+    Options.styled div
+        [ Options.css "display" "grid"
+        , Options.css "grid-template-columns" "0.33fr 0.66fr"
+        , Options.css "grid-column-gap" "8px"
+        ]
+        [ Options.styled span
+          [ Typography.body2, Options.css "color" "#757575" ]
+          [ text label ]
+        , Options.styled span [ Typography.body1 ] [ text value ]
+        ]
 
 
 viewActivity : Activity -> Html.Html Msg
@@ -135,8 +136,8 @@ viewActivities ( label, activities ) =
                 |> List.intersperse (br [] [])
     in
         Options.styled div
-            []
-            [ Options.styled span [ Typography.body2 ] [ text label ]
+            [ Options.css "margin-top" "16px" ]
+            [ Options.styled span [ Typography.body2, Options.css "color" "#757575" ] [ text label ]
             , br [] []
             , Options.styled span [ Typography.body1 ] value
             ]

diff --git a/jarbas/layers/elm/Reimbursement/RelatedTable/View.elm b/jarbas/layers/elm/Reimbursement/RelatedTable/View.elm
@@ -86,16 +86,24 @@ view model title =
     if Array.isEmpty model.results.reimbursements then
         text ""
     else
-        div []
+        Options.styled div
+            [ Options.css "background-color" "white"
+            , Options.css "border" "1px solid #e0e0e0"
+            , Options.css "border-radius" "4px"
+            , Options.css "margin-bottom" "16px"
+            , Options.css "padding" "16px"
+            ]
             [ Options.styled
                 p
                 [ Typography.subhead
-                , Options.css "margin-top" "2em"
+                , Options.css "border-bottom" "1px solid #e0e0e0"
+                , Options.css "padding-bottom" "8px"
+                , Options.css "margin-bottom" "24px"
                 ]
                 [ Icon.view
                     "today"
                     [ Options.css "transform" "translateY(0.4rem)" ]
-                , text title
+                , text (" " ++ title)
                 ]
             , model.results.reimbursements
                 |> Array.toIndexedList

diff --git a/jarbas/layers/elm/Reimbursement/View.elm b/jarbas/layers/elm/Reimbursement/View.elm
@@ -239,23 +239,16 @@ viewError lang error =
 
 viewReimbursementBlockLine : Language -> Field -> Html Msg
 viewReimbursementBlockLine lang field =
-    let
-        styles =
-            [ Options.css "display" "flex"
-            , Options.css "justify-content" "space-between"
-            , Options.css "align-items" "center"
-            ]
-
-        labelStyles =
-            Options.css "width" "30%" :: styles
-    in
-        Options.styled div
-            [ Options.css "display" "flex"
-            , Options.css "flex-direction" "row"
-            ]
-            [ Options.styled span (Typography.body2 :: labelStyles) [ text <| Fields.getLabelTranslation lang field ]
-            , Options.styled span (Typography.body1 :: styles) [ text <| Fields.getValue field ]
-            ]
+    Options.styled div
+        [ Options.css "display" "grid"
+        , Options.css "grid-template-columns" "0.33fr 0.66fr"
+        , Options.css "grid-column-gap" "8px"
+        ]
+        [ Options.styled span
+          [ Typography.body2, Options.css "color" "#757575" ]
+          [ text <| Fields.getLabelTranslation lang field ]
+        , Options.styled span [ Typography.body1 ] [ text <| Fields.getValue field ]
+        ]
 
 
 viewSummaryPs : Language -> Reimbursement -> Html Msg
@@ -322,9 +315,18 @@ viewReimbursementBlock lang reimbursement ( title, icon, fields ) =
             else
                 text ""
     in
-        div []
+        Options.styled div
+            [ Options.css "background-color" "white"
+            , Options.css "border" "1px solid #e0e0e0"
+            , Options.css "border-radius" "4px"
+            , Options.css "margin-bottom" "16px"
+            , Options.css "padding" "16px"
+            ]
             [ Options.styled p
-                [ Typography.subhead ]
+                [ Typography.subhead
+                , Options.css "border-bottom" "1px solid #e0e0e0"
+                , Options.css "padding-bottom" "8px"
+                ]
                 [ iconTag, text (" " ++ title) ]
             , List.ul [] (List.map (viewReimbursementBlockLine lang) fields)
             , ps
@@ -537,7 +539,7 @@ viewReimbursements model =
         title =
             cell [ size Desktop 12, size Tablet 8, size Phone 4 ]
                 [ Options.styled div
-                    [ Typography.center, Typography.display1 ]
+                    [ Typography.center, Typography.body1 ]
                     [ results |> text ]
                 ]
 
@@ -563,7 +565,7 @@ viewReimbursements model =
 
 view : Model -> Html Msg
 view model =
-    div []
+    Options.styled div [ Options.css "background-color" "#fafafa" ]
         [ SearchView.view model
         , viewReimbursements model
         ]