From d95c4c7a54bc8250f7d5c59e7f28e02325366c68 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 23 Jun 2020 21:29:18 +0100
Subject: [PATCH] Selected pseudo class removed, workflow panels updated

---
 packages/builder/src/budibase.css             |  6 +++---
 .../components/common/AppNotification.svelte  |  2 +-
 .../src/components/common/Input.svelte        |  8 ++++----
 .../userInterface/ComponentsHierarchy.svelte  |  6 ++----
 .../ComponentsHierarchyChildren.svelte        |  2 +-
 .../userInterface/DesignView.svelte           |  1 -
 .../userInterface/FlatButton.svelte           |  9 ++++-----
 .../userInterface/FlatButtonGroup.svelte      |  1 +
 .../userInterface/FrontendNavigatePane.svelte | 16 ++++++++-------
 .../userInterface/OptionSelect.svelte         |  7 ++++---
 .../userInterface/PageLayout.svelte           |  2 +-
 .../components/userInterface/PagesList.svelte |  3 ++-
 .../userInterface/PropertyControl.svelte      |  1 -
 .../userInterface/propertyCategories.js       | 13 ++++--------
 .../workflow/SetupPanel/SetupPanel.svelte     |  8 ++++----
 .../WorkflowPanel/BlockList/BlockList.svelte  | 20 ++++++++++---------
 packages/builder/src/pages/_layout.svelte     |  1 -
 packages/builder/src/pages/index.svelte       |  2 +-
 18 files changed, 52 insertions(+), 56 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index fcde2e391f..12ae85f240 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -57,9 +57,9 @@
 .budibase__nav-item {
     cursor: pointer;
     padding: 0 4px 0 2px;
-    height: 35px;
-    margin: 5px 0px 4px 0px;
-    border-radius: 0 5px 5px 0;
+    height: 40px;
+    margin: 0px 0px 0px 0px;
+    border-radius: 5px;
     display: flex;
     align-items: center;
     font-size: 14px;
diff --git a/packages/builder/src/components/common/AppNotification.svelte b/packages/builder/src/components/common/AppNotification.svelte
index 579ec752d4..74ea1c1fd4 100644
--- a/packages/builder/src/components/common/AppNotification.svelte
+++ b/packages/builder/src/components/common/AppNotification.svelte
@@ -55,7 +55,7 @@
   }
 
   :global(.uk-notification-message-danger) {
-    background: var(--grey-7) !important;
+    background: var(--grey-9) !important;
     color: #fff !important;
     font-size: 16px !important;
   }
diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
index b5fe468a55..fb58019bec 100644
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@@ -38,16 +38,16 @@
     height: 32px;
     font-size: 12px;
     font-weight: 500;
-    margin: 0px 0px 0px 1px;
+    margin: 0px 0px 0px 2px;
     color: var(--ink);
     opacity: 0.7;
     padding: 0px 4px;
     line-height: 1.3;
-    /* padding: 12px; */
     width: 164px;
     box-sizing: border-box;
-    border: 1px solid var(--grey-2);
-    border-radius: 2px;
+    background-color: var(--grey-3);
+    border-radius: 4px;
+    border: 1px solid var(--grey-3);
     outline: none;
   }
 
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 1ebfaaae6e..1381e66221 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -77,8 +77,7 @@
   }
 
   .title {
-    margin-left: 10px;
-    margin-top: 2px;
+    margin-left: 14px;
     font-size: 14px;
     font-weight: 400;
   }
@@ -87,8 +86,7 @@
     display: inline-block;
     transition: 0.2s;
     font-size: 24px;
-    width: 20px;
-    margin-top: 2px;
+    width: 18px;
     color: var(--grey-7);
   }
 
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 0795c8f1fd..ff3cf5300c 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -39,7 +39,7 @@
       <div
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
-        style="padding-left: {level * 20 + 53}px">
+        style="padding-left: {level * 16 + 32}px">
         <div class="nav-item">
           <i class="icon ri-arrow-right-circle-fill" />
           {get_capitalised_name(component._component)}
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 6826bddc5c..2de24864a1 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -19,7 +19,6 @@
     { value: "normal", text: "Normal" },
     { value: "hover", text: "Hover" },
     { value: "active", text: "Active" },
-    { value: "selected", text: "Selected" },
   ]
 
   $: propertyGroupNames = Object.keys(panelDefinition)
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index f5adf488cc..b7bd31cc15 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -3,18 +3,14 @@
   export let value = ""
   export let text = ""
   export let icon = ""
-  export let padding = "8px 5px;"
   export let onClick = value => {}
   export let selected = false
-  export let fontWeight = ""
 
-  $: style = buildStyle({ padding, fontWeight })
   $: useIcon = !!icon
 </script>
 
 <div
   class="flatbutton"
-  {style}
   class:selected
   on:click={() => onClick(value || text)}>
   {#if useIcon}
@@ -29,7 +25,11 @@
 <style>
   .flatbutton {
     cursor: pointer;
+    max-height: 36px;
     padding: 8px 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
     background: #ffffff;
     color: var(--grey-7);
@@ -37,7 +37,6 @@
     font-size: 14px;
     font-weight: 400;
     transition: all 0.3s;
-    margin-left: 5px;
     text-rendering: optimizeLegibility;
   }
 
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
index c9523f4d5a..85f998f316 100644
--- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@@ -46,6 +46,7 @@
 <style>
   .flatbutton-group {
     display: flex;
+    width: 100%
   }
 
   .button-container {
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 555e6f0bb0..80908dab7b 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -15,7 +15,6 @@
 <PagesList />
 
 <button class="newscreen" on:click={newScreen}>
-  <i class="icon ri-add-circle-fill" />
   Create New Screen
 </button>
 
@@ -30,23 +29,26 @@
 <style>
   .newscreen {
     cursor: pointer;
-    border: 1px solid var(--grey-4);
-    border-radius: 3px;
+    border: 1px solid var(--purple);
+    border-radius: 5px;
     width: 100%;
+    height: 36px;
     padding: 8px 16px;
     margin: 20px 0px 12px 0px;
     display: flex;
     justify-content: center;
     align-items: center;
-    background: white;
-    color: var(--ink);
+    background: var(--purple);
+    color: var(--white);
     font-size: 14px;
     font-weight: 500;
-    transition: all 2ms;
+    transition: all 3ms;
+    outline: none;
   }
 
   .newscreen:hover {
-    background: var(--grey-1);
+    background: var(--purple-light);
+    color: var(--purple);
   }
 
   .icon {
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index e00a3ef971..1c85a06392 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -142,15 +142,16 @@
     position: relative;
     outline: none;
     width: 160px;
-    height: 32px;
+    height: 36px;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 14px;
   }
 
   .bb-select-anchor {
     cursor: pointer;
     display: flex;
-    padding: 5px 10px;
+    padding: 0px 12px;
+    height: 36px;
     background-color: var(--grey-2);
     border-radius: 5px;
     align-items: center;
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 4f038ad314..d64ab670ba 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -77,7 +77,7 @@
   }
 
   .icon-big {
-    font-size: 24px;
+    font-size: 20px;
     color: var(--grey-7);
   }
 
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index a537feda7c..df8bdf7d99 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -43,7 +43,8 @@
 
   button {
     cursor: pointer;
-    padding: 8px 16px;
+    padding: 0px 16px;
+    height: 36px;
     text-align: center;
     background: #ffffff;
     color: var(--grey-7);
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 159efdd08e..b08371aeaf 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -54,7 +54,6 @@
     flex: 0 0 50px;
     display: flex;
     align-items: center;
-    padding: 0px 5px;
     font-size: 12px;
     font-weight: 400;
     text-align: left;
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index dcfaa8822f..407483f70f 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -262,15 +262,10 @@ export const typography = [
     key: "text-transform",
     control: FlatButtonGroup,
     buttonProps: [
-      { text: "BB", padding: "0px 5px", fontWeight: 500, value: "uppercase" },
-      { text: "Bb", padding: "0px 5px", fontWeight: 500, value: "capitalize" },
-      { text: "bb", padding: "0px 5px", fontWeight: 500, value: "lowercase" },
-      {
-        text: "&times;",
-        padding: "0px 5px",
-        fontWeight: 500,
-        value: "none",
-      },
+      { text: "BB", value: "uppercase" },
+      { text: "Bb", value: "capitalize" },
+      { text: "bb", value: "lowercase" },
+      { text: "&times;", value: "none" },
     ],
   },
   {
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index f90bc61f26..25a5bb5c21 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -180,15 +180,15 @@
 
   .config-item {
     margin: 0px 0px 4px 0px;
-    padding: 12px;
-    background: var(--grey-1);
+    padding: 12px 0px;
   }
 
   .budibase_input {
     height: 35px;
-    width: 220px;
+    width: 244px;
     border-radius: 3px;
-    border: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border: 1px solid var(--grey-2);
     text-align: left;
     color: var(--ink);
     font-size: 14px;
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
index 14fb16c6c7..ce066674f0 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
@@ -53,29 +53,31 @@
 
 <style>
   .subtabs {
-    margin-top: 27px;
+    margin-top: 20px;
     display: grid;
-    grid-gap: 5px;
     grid-auto-flow: column;
     grid-auto-columns: 1fr 1fr 1fr;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
   }
 
   .subtabs span {
     transition: 0.3s all;
     text-align: center;
     color: var(--grey-7);
-    font-weight: 500;
-    padding: 10px;
+    font-weight: 400;
+    padding: 8px 16px;
+    text-rendering: optimizeLegibility;
+    border: none !important;
+    outline: none;
   }
 
   .subtabs span.selected {
-    background: var(--grey-7);
-    color: var(--white);
-    border-radius: 2px;
+    background: var(--grey-3);
+    color: var(--ink);
+    border-radius: 5px;
   }
 
   .subtabs span:not(.selected) {
-    color: var(--grey-7);
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index 1591388e39..8d4563f7cf 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -36,7 +36,6 @@
         <Link icon={DocumentationIcon} title="Documentation" href="/" />
         <Link icon={TutorialsIcon} title="Tutorials" href="/" />
         <Link icon={CommunityIcon} title="Community" href="/" />
-        <Link icon={ContributionIcon} title="Contact" href="/" />
       </div>
 
       <div class="nav-section">
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 03ea837b4a..0d2f76a007 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -73,7 +73,7 @@
   .welcome {
     font-size: 42px;
     color: var(--ink);
-    font-weight: 900;
+    font-weight: 700;
     margin: 40px 0px 0px 80px;
   }