From aa449e472940f7e86976d977ae296ef74dcacaa1 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 19 Feb 2021 15:49:54 +0000
Subject: [PATCH] Updating cypress tests as well as changing the auto column
 icons a bit to improve the look.

---
 .../cypress/integration/createTable.spec.js   |  2 +-
 .../cypress/integration/createView.spec.js    | 22 +++++++++++++++----
 .../DataTable/TableHeader/TableHeader.svelte  | 14 +++++++-----
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js
index d309f4fcb9..067505cfab 100644
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/packages/builder/cypress/integration/createTable.spec.js
@@ -30,7 +30,7 @@ context("Create a Table", () => {
     // Unset table display column
     cy.contains("display column").click()
     cy.contains("Save Column").click()
-    cy.contains("nameupdated").should("have.text", "nameupdated")
+    cy.contains("nameupdated ").should("have.text", "nameupdated ")
   })
 
   it("edits a row", () => {
diff --git a/packages/builder/cypress/integration/createView.spec.js b/packages/builder/cypress/integration/createView.spec.js
index bdc89bec53..cfafdc6705 100644
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@@ -1,3 +1,11 @@
+function removeSpacing(headers) {
+  let newHeaders = []
+  for (let header of headers) {
+    newHeaders.push(header.replace(/\s\s+/g, " "))
+  }
+  return newHeaders
+}
+
 context("Create a View", () => {
   before(() => {
     cy.visit("localhost:4001/_builder")
@@ -28,7 +36,7 @@ context("Create a View", () => {
       const headers = Array.from($headers).map(header =>
         header.textContent.trim()
       )
-      expect(headers).to.deep.eq([ 'rating', 'age', 'group' ])
+      expect(removeSpacing(headers)).to.deep.eq([ "rating Number", "age Number", "group Text" ])
     })
   })
 
@@ -60,13 +68,19 @@ context("Create a View", () => {
       const headers = Array.from($headers).map(header =>
         header.textContent.trim()
       )
-      expect(headers).to.deep.eq([ 'avg', 'sumsqr', 'count', 'max', 'min', 'sum', 'field' ])
+      expect(removeSpacing(headers)).to.deep.eq([ "avg Number",
+        "sumsqr Number",
+        "count Number",
+        "max Number",
+        "min Number",
+        "sum Number",
+        "field Text" ])
     })
     cy.get(".ag-cell").then($values => {
       let values = Array.from($values).map(header =>
         header.textContent.trim()
       )
-      expect(values).to.deep.eq([ '31', '5347', '5', '49', '20', '155', 'age' ])
+      expect(values).to.deep.eq([ "31", "5347", "5", "49", "20", "155", "age" ])
     })
   })
 
@@ -85,7 +99,7 @@ context("Create a View", () => {
       .find(".ag-cell")
       .then($values => {
         const values = Array.from($values).map(value => value.textContent)
-        expect(values).to.deep.eq([ 'Students', '23.333333333333332', '1650', '3', '25', '20', '70' ])
+        expect(values).to.deep.eq([ "Students", "23.333333333333332", "1650", "3", "25", "20", "70" ])
       })
   })
 
diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
index a93222b4f9..e929bbc206 100644
--- a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
@@ -62,9 +62,11 @@
   on:mouseover={() => (hovered = true)}
   on:mouseleave={() => (hovered = false)}>
   <div class="column-header">
-    {#if field.autocolumn}<i class="auto ri-magic-fill" />{/if}
     <div class="column-header-text">
-      <div class="column-header-name">{displayName}</div>
+      <div class="column-header-name">
+        {displayName}
+        {#if field.autocolumn}<i class="auto ri-magic-fill" />{/if}
+      </div>
       {#if type}
         <div class="column-header-type">{type}</div>
       {/if}
@@ -149,10 +151,12 @@
     font-weight: 500;
   }
   .auto {
-    font-size: var(--font-size-xs);
+    font-size: 9px;
     transition: none;
-    margin-right: 6px;
-    margin-top: 2px;
+    position: relative;
+    margin-left: 2px;
+    top: -3px;
+    color: var(--grey-6);
   }
 
   .icon:hover {