diff --git a/jarbas/layers/elm/Reimbursement/Company/View.elm b/jarbas/layers/elm/Reimbursement/Company/View.elm index dff289d7f..6e763611c 100644 --- 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 index 051dfa47f..2393d01ce 100644 --- 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 index d85afdd86..712506e99 100644 --- 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 ]