Merge pull request #332 from Budibase/Data-components-UI-tidy-up

Data Components UI Update

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 {

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 {

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>