From 7b25f559c036591cc08af30a8d9bcf878aaea0e3 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 5 Jun 2020 15:08:03 +0100
Subject: [PATCH] Data Components UI Update

Changes include:
Table UI updated, including color changes, margin, padding and height adjustments,
Table centered, title added, spacing improved
login - button text includes web app name
---
 packages/standard-components/src/DataForm.svelte  | 11 ++++++-----
 packages/standard-components/src/DataTable.svelte | 13 ++++++++++---
 packages/standard-components/src/Login.svelte     |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 5836e250e9..ab515551dd 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -59,6 +59,7 @@
 </script>
 
 <form class="form" on:submit|preventDefault>
+  <h1>{modelDef.name} Form</h1>
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
@@ -79,14 +80,14 @@
 
 <style>
   .form {
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    width: 100%;
   }
 
   .form-content {
     margin-bottom: 20px;
-    justify-content: space-between;
-    align-items: baseline;
+
   }
 
   .input {
@@ -100,13 +101,13 @@
 
   .form-item {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
     margin-bottom: 16px;
   }
 
   .form-label {
     font-weight: bold;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
   }
 
   hr {
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 3619e1a39d..c0db923d58 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -65,24 +65,31 @@
   }
 
   thead {
-    background: #f9f9f9;
+    background: #393C44;
     border: 1px solid #ccc;
+    height: 40px;
+    text-align: left;
+    margin-right: 60px;
   }
 
   thead th {
-    color: var(--button-text);
+    color: #ffffff;
     text-transform: capitalize;
     font-weight: 500;
     font-size: 14px;
     text-rendering: optimizeLegibility;
     letter-spacing: 1px;
+    justify-content: left;
+    padding: 16px 20px 16px 8px;
+    margin-right: 20px;
   }
 
   tbody tr {
     border-bottom: 1px solid #ccc;
     transition: 0.3s background-color;
-    color: var(--secondary100);
+    color: #393C44;
     font-size: 14px;
+    height: 40px;
   }
 
   tbody tr:hover {
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index 34168d01f4..b52cc154ea 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -79,7 +79,7 @@
 
     <div class="login-button-container">
       <button disabled={loading} on:click={login} class={_buttonClass}>
-        {loginButtonLabel}
+        Log in to {name}
       </button>
     </div>