From f538be6748668983147e0a0705691e08847fa762 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@element.io>
Date: Fri, 4 Dec 2020 17:16:44 +0100
Subject: [PATCH] render back button in client list as left chevron

---
 css/client.css             | 20 ++++++++++++++++++++
 images/chevron-left.svg    | 10 ++++++++++
 src/open/ClientListView.js |  5 +++--
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 images/chevron-left.svg

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 @@
+<svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="8" height="17" fill="white" transform="translate(8.5 17) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>
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)))
 		]);