From 74caf8496f2349a81d69412e22dd47f414040d21 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 17 Mar 2020 09:57:18 +0000 Subject: [PATCH] component nav tidy up --- packages/builder/src/common/PlusButton.svelte | 4 +--- packages/builder/src/common/Select.svelte | 9 ++++----- packages/builder/src/global.css | 6 +++--- .../userInterface/ComponentSelectionList.svelte | 12 +++++------- .../userInterface/ComponentsPaneSwitcher.svelte | 15 ++++++++------- 5 files changed, 21 insertions(+), 25 deletions(-) diff --git a/packages/builder/src/common/PlusButton.svelte b/packages/builder/src/common/PlusButton.svelte index 5baca63715..6e2e4cf58a 100644 --- a/packages/builder/src/common/PlusButton.svelte +++ b/packages/builder/src/common/PlusButton.svelte @@ -8,8 +8,6 @@ outline: none; border: none; border-radius: 5px; - background: rgba(249, 249, 249, 1); - min-width: 1.8rem; min-height: 1.8rem; padding-bottom: 10px; @@ -20,6 +18,6 @@ font-size: 1.2rem; font-weight: 700; - color: rgba(22, 48, 87, 1); + color: var(--secondary100); } diff --git a/packages/builder/src/common/Select.svelte b/packages/builder/src/common/Select.svelte index e360c1c4d6..de0c57fc41 100644 --- a/packages/builder/src/common/Select.svelte +++ b/packages/builder/src/common/Select.svelte @@ -23,11 +23,11 @@ } select { - height: 35px; + height: 40px; display: block; font-family: sans-serif; - font-weight: 500; - color: #163057; + font-weight: 400; + color: #000333; padding: 0 2.6em 0em 1.4em; width: 100%; max-width: 100%; @@ -36,8 +36,7 @@ -moz-appearance: none; -webkit-appearance: none; appearance: none; - background: #fff; - border: 1px solid #ccc; + background: var(--lightslate); } .arrow { diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 15df05b3dc..003294ee26 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -36,8 +36,8 @@ --white: #FFFFFF; --darkslate: #1a202c; - --slate: #a0aec0; - --lightslate: #f7fafc; + --slate: #d8d8d8; + --lightslate: #f9f9f9; --borderradius: 2px; --borderradiusall: 2px 2px 2px 2px; @@ -56,7 +56,7 @@ --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt; --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt; - --background-button: #e6eeff; + --background-button: #f9f9f9; --button-text: #0055ff; } diff --git a/packages/builder/src/userInterface/ComponentSelectionList.svelte b/packages/builder/src/userInterface/ComponentSelectionList.svelte index b123350f10..34e0ca8d33 100644 --- a/packages/builder/src/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/userInterface/ComponentSelectionList.svelte @@ -239,12 +239,12 @@ position: relative; padding: 0 15px; cursor: pointer; - border: 1px solid #ebebeb; + border: 1px solid #d8d8d8; border-radius: 2px; margin: 5px 0; height: 40px; box-sizing: border-box; - color: #163057; + color: #000333; display: flex; align-items: center; flex: 1; @@ -256,11 +256,10 @@ } .component > .name { - color: #163057; + color: #000333; display: inline-block; font-size: 12px; - font-weight: bold; - opacity: 0.6; + opacity: 0.8; } ul { @@ -279,12 +278,11 @@ background: #fafafa; padding: 10px; border-radius: 2px; - color: rgba(22, 48, 87, 0.6); + color:var(--secondary80); } .preset-menu > span { font-size: 12px; - font-weight: bold; text-transform: uppercase; margin-top: 5px; } diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte index 6cde6369ab..504ff18372 100644 --- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte @@ -54,14 +54,15 @@ height: 100%; display: flex; flex-direction: column; - padding: 2rem 0; + padding: 20px 0; } .switcher { display: flex; justify-content: space-between; - margin-bottom: 25px; - padding: 0 1.5rem; + margin-bottom: 20px; + padding: 0 20px 20px; + border-bottom: 1px solid #d8d8d8; } .switcher > button { @@ -70,15 +71,15 @@ margin: 0; padding: 0; cursor: pointer; - font-weight: 600; font-size: 0.85rem; + font-weight: 400; text-transform: uppercase; - color: #999; - background-color: rgba(0, 0, 0, 0); + color: var(--secondary60); } .switcher > .selected { - color: #333; + color: var(--secondary100); + font-weight: 500; } .panel {