From 0d7cd5ec2e6f2b1aee4ea424ec597706b370f1fa Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 24 Mar 2020 11:12:08 +0000 Subject: [PATCH] frontend panel nav items highlights Changes include Font updates Font spacing added Font weights changed --- .../ComponentsPaneSwitcher.svelte | 11 ++++---- .../src/userInterface/LayoutEditor.svelte | 26 ++++++------------- .../userInterface/UserInterfaceRoot.svelte | 15 ++++++----- 3 files changed, 23 insertions(+), 29 deletions(-) diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte index 12c0206407..e17b6f4198 100644 --- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte @@ -59,27 +59,28 @@ .switcher { display: flex; - justify-content: space-between; margin-bottom: 20px; padding: 0 20px 20px; border-bottom: 1px solid #d8d8d8; } .switcher > button { + text-rendering: optimizeLegibility; display: inline-block; border: none; margin: 0; padding: 0; cursor: pointer; font-size: 14px; - font-weight: 400; - text-transform: uppercase; - color: var(--secondary60); + font-weight: 500; + color: var(--secondary40); + margin-right: 20px; + letter-spacing: 1px; } .switcher > .selected { color: var(--secondary100); - font-weight: 500; + font-weight: 600; } .panel { diff --git a/packages/builder/src/userInterface/LayoutEditor.svelte b/packages/builder/src/userInterface/LayoutEditor.svelte index f48c1f3c77..5f8885457e 100644 --- a/packages/builder/src/userInterface/LayoutEditor.svelte +++ b/packages/builder/src/userInterface/LayoutEditor.svelte @@ -54,9 +54,7 @@ const newValue = n => Array(n).fill("") -

Styles

- -

Display

+

Layout

{#each Object.entries(display) as [key, [name, meta, size]] (component._id + key)}
@@ -87,7 +85,7 @@ {/each}
--> -

Spacing

+

Spacing

{#each Object.entries(spacing) as [key, [name, meta, size]] (component._id + key)}
@@ -102,7 +100,7 @@ {/each}
-

Size

+

Size

{#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)}
@@ -117,7 +115,7 @@ {/each}
-

Z-Index

+

Order

{#each Object.entries(zindex) as [key, [name, meta, size]] (component._id + key)}
@@ -135,19 +133,11 @@ h3 { text-transform: uppercase; font-size: 12px; - font-weight: 700; - color: #000333; - opacity: 0.6; - margin-bottom: 10px; - } - - h4 { - text-transform: uppercase; - font-size: 10px; - font-weight: 700; + font-weight: 600; color: #000333; opacity: 0.4; - margin-bottom: 15px; + margin-bottom: 10px; + letter-spacing: 1px; } h5 { @@ -168,6 +158,6 @@ } .grid { - grid-template-columns: 70px 1fr; + grid-template-columns: 70px 2fr; } diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte index 8fd3039eb5..3982bbfdaa 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -160,8 +160,9 @@ text-transform: uppercase; padding-left: 20px; margin-top: 20px; - font-weight: 700; - opacity: 0.6; + font-weight: 600; + opacity: 0.4; + letter-spacing: 1px; } .components-nav-header { @@ -169,8 +170,9 @@ color: #000333; text-transform: uppercase; margin-top: 20px; - font-weight: 700; - opacity: 0.6; + font-weight: 600; + opacity: 0.4; + letter-spacing: 1px; } .nav-header { @@ -220,10 +222,11 @@ .navigator-title { font-size: 14px; color: var(--secondary100); - font-weight: 500; - text-transform: uppercase; + font-weight: 600; padding: 0 20px 20px 20px; line-height: 1rem !important; + letter-spacing: 1px; + } .border-line {