From ea46fd0283ca51563e50df3816668b10a1081cc4 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 2 Apr 2020 15:11:27 +0100
Subject: [PATCH] Styling changes

Font stlyes changed
Margin revised
Table fonts updated
Select component updated
---
 packages/builder/src/BackendRoot.svelte       |  2 +-
 .../src/components/common/ActionButton.svelte |  3 +-
 .../components/common/Icons/DownArrow.svelte  | 10 +++++++
 .../src/components/common/Icons/index.js      |  1 +
 .../src/components/common/Select.svelte       | 21 +++++++-------
 .../components/database/DatabaseRoot.svelte   |  9 +++++-
 .../ModelDataTable/ModelDataTable.svelte      | 28 +++++++++++++++----
 .../src/components/nav/BackendNav.svelte      |  2 +-
 8 files changed, 57 insertions(+), 19 deletions(-)
 create mode 100644 packages/builder/src/components/common/Icons/DownArrow.svelte

diff --git a/packages/builder/src/BackendRoot.svelte b/packages/builder/src/BackendRoot.svelte
index 50dd713196..f127c803cb 100644
--- a/packages/builder/src/BackendRoot.svelte
+++ b/packages/builder/src/BackendRoot.svelte
@@ -37,7 +37,7 @@
 
   .content {
     flex: 1 1 auto;
-    margin: 40px 40px;
+    margin: 20px 40px;
   }
 
   .nav {
diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
index f4f13c0757..7f04f59e8f 100644
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ b/packages/builder/src/components/common/ActionButton.svelte
@@ -46,7 +46,8 @@
 
   .button:hover {
     cursor: pointer;
-    font-weight: 700;
+    font-weight: 600;
+    filter:saturate(90%);
   }
 
   .button:disabled {
diff --git a/packages/builder/src/components/common/Icons/DownArrow.svelte b/packages/builder/src/components/common/Icons/DownArrow.svelte
new file mode 100644
index 0000000000..9f5f1f25d9
--- /dev/null
+++ b/packages/builder/src/components/common/Icons/DownArrow.svelte
@@ -0,0 +1,10 @@
+<svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    width="100%" 
+    height="100%">
+    <path fill="none" d="M0 0h24v24H0z"/>
+    <path 
+        fill="rgba(0,3,51,1)"
+        d="M12 14l-4-4h8z" />
+</svg>
diff --git a/packages/builder/src/components/common/Icons/index.js b/packages/builder/src/components/common/Icons/index.js
index f62fb42ca0..fae247b311 100644
--- a/packages/builder/src/components/common/Icons/index.js
+++ b/packages/builder/src/components/common/Icons/index.js
@@ -4,6 +4,7 @@ export { default as TerminalIcon } from "./Terminal.svelte"
 export { default as InputIcon } from "./Input.svelte"
 export { default as ImageIcon } from "./Image.svelte"
 export { default as ArrowDownIcon } from "./ArrowDown.svelte"
+export { default as DownArrowIcon } from "./DownArrow.svelte"
 export { default as CircleIndicator } from "./CircleIndicator.svelte"
 export { default as PencilIcon } from "./Pencil.svelte"
 export { default as EventsIcon } from "./Events.svelte"
diff --git a/packages/builder/src/components/common/Select.svelte b/packages/builder/src/components/common/Select.svelte
index 1fd2c06935..39dbe6d059 100644
--- a/packages/builder/src/components/common/Select.svelte
+++ b/packages/builder/src/components/common/Select.svelte
@@ -19,22 +19,22 @@
 
 <style>
   .select-container {
-    font-size: 0.9rem;
-    color: var(--secondary50);
+    font-size: 14px;
+    color: var(--secondary60);
     font-weight: bold;
     position: relative;
-    max-width: 300px;
-    min-width: 200px;
+    max-width: 400px;
+    min-width: 275px;
   }
 
   .adjusted {
-    padding-left: 2.5em;
+    padding-left: 30px;
   }
 
   i {
     position: absolute;
-    left: 8px;
-    top: 8px;
+    left: 10px;
+    top: 10px;
   }
 
   select {
@@ -42,8 +42,9 @@
     display: block;
     font-family: sans-serif;
     font-weight: 400;
+    font-size: 14px;
     color: #000333;
-    padding: 0 2.6em 0em 1.4em;
+    padding: 0 40px 0px 20px;
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
@@ -51,7 +52,7 @@
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
-    background: var(--lightslate);
+    background: var(--white);
   }
 
   .arrow {
@@ -62,6 +63,6 @@
     width: 30px;
     height: 30px;
     pointer-events: none;
-    color: var(--primary100);
+    color: var(--secondary100);
   }
 </style>
diff --git a/packages/builder/src/components/database/DatabaseRoot.svelte b/packages/builder/src/components/database/DatabaseRoot.svelte
index 3489acb032..d1cd745742 100644
--- a/packages/builder/src/components/database/DatabaseRoot.svelte
+++ b/packages/builder/src/components/database/DatabaseRoot.svelte
@@ -63,7 +63,7 @@
 <div class="root">
   <div class="node-view">
     <div class="database-actions">
-      <div class="budibase__label--big">{breadcrumbs}</div>
+      <div class="breadcrumb">{breadcrumbs}</div>
       {#if $backendUiStore.selectedDatabase.id}
         <ActionButton
           primary
@@ -92,6 +92,13 @@
     flex: 1 1 auto;
   }
 
+  .breadcrumb {
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--secondary60);
+  }
+
   .database-actions {
     display: flex;
     justify-content: space-between;
diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
index efb083f831..1b35a094ee 100644
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@@ -99,9 +99,9 @@
 
 <section>
   <div class="table-controls">
-    <h4 class="budibase__title--3">
+    <h2 class="title">
       {takeRight(2, $backendUiStore.breadcrumbs).join(' / ')}
-    </h4>
+    </h2>
     <Select icon="ri-eye-line" bind:value={$backendUiStore.selectedView}>
       {#each views as view}
         <option value={view}>{view.name}</option>
@@ -166,6 +166,18 @@
 </section>
 
 <style>
+
+  .title {
+    font-size: 24px;
+    font-weight: 600;
+    text-rendering: optimizeLegibility;
+    text-transform: capitalize;
+  }
+
+  .select {
+    background: white;
+  }
+
   table {
     border: 1px solid #ccc;
     background: #fff;
@@ -174,19 +186,24 @@
   }
 
   thead {
-    background: var(--background-button);
+    background: #f9f9f9;
+    border: 1px solid #ccc;
   }
 
   thead th {
     color: var(--button-text);
     text-transform: capitalize;
     font-weight: 500;
+    font-size: 14px;  
+    text-rendering: optimizeLegibility;
+    letter-spacing: 1px;
   }
 
   tbody tr {
     border-bottom: 1px solid #ccc;
     transition: 0.3s background-color;
-    color: var(--darkslate);
+    color: var(--secondary100);
+    font-size: 14px;
   }
 
   tbody tr:hover {
@@ -196,7 +213,8 @@
   .table-controls {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: baseline;
+    margin-top: 10px;
   }
 
   .ri-more-line:hover,
diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index 6454d48fac..458e5c67df 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/packages/builder/src/components/nav/BackendNav.svelte
@@ -50,7 +50,7 @@
     flex-direction: column;
     max-height: 100%;
     height: 100%;
-    background-color: var(--white);
+    background: var(--white);
   }
 
   .nav-group-header {