From f56662dac4de22613b60253031a3b44ae38f570b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 18:23:11 +0100
Subject: [PATCH] Update FlatButton and CategoryTab styles

---
 .../components/userInterface/CategoryTab.svelte   |  6 +++---
 .../userInterface/ComponentPropertiesPanel.svelte |  2 +-
 .../components/userInterface/FlatButton.svelte    | 15 +++++++--------
 .../src/pages/[application]/design/_layout.svelte |  2 +-
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte
index 15335cbb87..3b5dce84e0 100644
--- a/packages/builder/src/components/userInterface/CategoryTab.svelte
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@@ -1,7 +1,7 @@
 <script>
   export let categories = []
   export let selectedCategory = {}
-  export let onClick = category => {}
+  export let onClick = (category) => {}
 </script>
 
 <div class="tabs">
@@ -19,8 +19,8 @@
   .tabs {
     display: flex;
     list-style: none;
-    font-size: 18px;
-    font-weight: 600;
+    font-size: var(--font-size-m);
+    font-weight: 500;
   }
 
   li {
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index dead297956..7b1c794610 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -107,7 +107,7 @@
   }
 
   .instance-name {
-    font-size: 14px;
+    font-size: var(--font-size-xs);
     font-weight: 500;
     color: var(--grey-7);
   }
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index f27a2902ee..3ae8eebca3 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -3,7 +3,7 @@
   export let value = ""
   export let text = ""
   export let icon = ""
-  export let onClick = value => {}
+  export let onClick = (value) => {}
   export let selected = false
 
   $: useIcon = !!icon
@@ -22,23 +22,22 @@
 <style>
   .flatbutton {
     cursor: pointer;
-    max-height: 36px;
-    padding: 8px 2px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
-    background: #ffffff;
+    background: white;
     color: var(--grey-7);
-    border-radius: 5px;
-    font-size: 14px;
-    font-weight: 400;
+    border-radius: var(--border-radius-m);
+    font-size: var(--font-size-xs);
+    font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
   }
 
   .selected {
-    background: var(--grey-3);
+    background: var(--grey-2);
     color: var(--ink);
   }
 
diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index 132aa5552d..7bd37902ad 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -105,7 +105,7 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
   }
 
   .nav-group-header > div:nth-child(1) {