diff --git a/css/client.css b/css/client.css index 6aa01ef..ec2f251 100644 --- a/css/client.css +++ b/css/client.css @@ -2,6 +2,25 @@ padding: 16px 0; } +.ClientListView > h2 { + display: flex; + align-items: center; +} + +.ClientListView > h2 .back { + background: url('../images/chevron-left.svg'); + background-color: none; + background-size: 40%; + background-repeat: no-repeat; + background-position: center; + border: none; + width: 24px; + height: 24px; + padding: 16px; + cursor: pointer; + margin-right: 8px; +} + .ClientView { border: 1px solid #E6E6E6; border-radius: 8px; @@ -29,6 +48,7 @@ height: 60px; overflow: hidden; display: block; + margin-left: 8px; } .ClientView .actions a.badge { diff --git a/images/chevron-left.svg b/images/chevron-left.svg new file mode 100644 index 0000000..27f4dce --- /dev/null +++ b/images/chevron-left.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/open/ClientListView.js b/src/open/ClientListView.js index 25fce93..7d91f4a 100644 --- a/src/open/ClientListView.js +++ b/src/open/ClientListView.js @@ -62,10 +62,11 @@ class AllClientsView extends TemplateView { class ContinueWithClientView extends TemplateView { render(t, vm) { + const backTitle = "Back to all clients"; return t.div({className: "ClientListView"}, [ t.h2([ - `Continue with ${vm.clientViewModel.name} `, - t.button({onClick: () => vm.showAll()}, "Back") + t.button({className: "back", ["aria-label"]: backTitle, title: backTitle, onClick: () => vm.showAll()}), + t.span(`Continue with ${vm.clientViewModel.name}`) ]), t.div({className: "list"}, t.view(new ClientView(vm.clientViewModel))) ]);