From e9656f7b96baa72f43b9396c1fa7a778b2cd7646 Mon Sep 17 00:00:00 2001 From: Jip Date: Tue, 30 Jun 2020 15:47:50 +0200 Subject: [PATCH 1/6] Remove margin from last field-group --- packages/components/src/field-group/field-group.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/field-group/field-group.css b/packages/components/src/field-group/field-group.css index 2276213018..7d3e585502 100644 --- a/packages/components/src/field-group/field-group.css +++ b/packages/components/src/field-group/field-group.css @@ -5,6 +5,10 @@ margin: 0 0 24px 0; } +.yoast-field-group:last-of-type { + margin-bottom: 0; +} + .yoast-field-group__title { display: flex; align-items: center; From 09b1ebdea478b2350c8b690286c851d05408ac5a Mon Sep 17 00:00:00 2001 From: Jip Date: Tue, 30 Jun 2020 15:48:10 +0200 Subject: [PATCH 2/6] Reduce font weight of labels --- packages/components/src/toggle/toggle.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/toggle/toggle.css b/packages/components/src/toggle/toggle.css index a5d84d0277..9eb7781f1c 100644 --- a/packages/components/src/toggle/toggle.css +++ b/packages/components/src/toggle/toggle.css @@ -29,7 +29,7 @@ .yoast-toggle__item-title { display: flex; - font-weight: bold; + font-weight: 500; align-items: center; } From f88cfbb675b31f59113a99305f886cfec692ff59 Mon Sep 17 00:00:00 2001 From: Jip Date: Tue, 30 Jun 2020 15:48:33 +0200 Subject: [PATCH 3/6] Make the border-color more prominent Clean up unused SVG reference --- packages/replacement-variable-editor/src/shared.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/replacement-variable-editor/src/shared.js b/packages/replacement-variable-editor/src/shared.js index 6f18cbb14b..d1e9369105 100644 --- a/packages/replacement-variable-editor/src/shared.js +++ b/packages/replacement-variable-editor/src/shared.js @@ -54,8 +54,5 @@ export const TriggerReplacementVariableSuggestionsButton = styled( StandardButto font-size: 13px; width: 103px; height: 28px; - & svg { - ${ getDirectionalStyle( "margin-right", "margin-left" ) }: 7px; - fill: ${ colors.$color_grey_dark }; - } + border-color: rgba(0, 0, 0, .2); `; From dba2c8db68791397421bf666daab848629b19184 Mon Sep 17 00:00:00 2001 From: Jip Date: Tue, 30 Jun 2020 17:35:02 +0200 Subject: [PATCH 4/6] Reduce toggle spacing & remove line --- packages/components/src/toggle/toggle.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/toggle/toggle.css b/packages/components/src/toggle/toggle.css index 9eb7781f1c..66ca51ffb9 100644 --- a/packages/components/src/toggle/toggle.css +++ b/packages/components/src/toggle/toggle.css @@ -6,9 +6,8 @@ .yoast-toggle__item { display: flex; justify-content: space-between; - padding-bottom: 16px; - border-bottom: 1px solid var(--yoast-color-border); - margin-bottom: 16px; + padding-bottom: 8px; + margin-bottom: 8px; } .yoast-toggle__item-disabled { From 7179ade0f56e0a907c22618e791c5efb53dffec3 Mon Sep 17 00:00:00 2001 From: Jip Date: Wed, 1 Jul 2020 13:08:50 +0200 Subject: [PATCH 5/6] Move upsell in features inside the paper And hide the toggle --- packages/components/src/toggle/toggle.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/components/src/toggle/toggle.css b/packages/components/src/toggle/toggle.css index 66ca51ffb9..7adaf03b54 100644 --- a/packages/components/src/toggle/toggle.css +++ b/packages/components/src/toggle/toggle.css @@ -14,9 +14,11 @@ position: relative; } +.yoast-toggle__item-disabled .yoast-toggle { + display: none; +} + .yoast-toggle__item-disabled .yoast-button.yoast-button--buy { - position: absolute; - left: 100%; margin-left: 32px; white-space: nowrap; } From d840d2ab80450d2e2ca4cca7eed332b1c1b39019 Mon Sep 17 00:00:00 2001 From: Jip Date: Fri, 3 Jul 2020 12:17:29 +0200 Subject: [PATCH 6/6] Use darker color on the toggle label --- packages/components/src/CardBanner.js | 10 +++++----- packages/components/src/toggle/toggle.css | 6 +----- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/components/src/CardBanner.js b/packages/components/src/CardBanner.js index 9b5a8c92db..32230e51c3 100644 --- a/packages/components/src/CardBanner.js +++ b/packages/components/src/CardBanner.js @@ -7,14 +7,14 @@ import { colors } from "@yoast/style-guide"; const BannerContents = styled.span` position: absolute; - + top: 8px; left: -8px; - + font-weight: 500; color: ${ props => props.textColor }; line-height: 16px; - + background-color: ${ props => props.backgroundColor }; padding: 8px 16px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); @@ -22,10 +22,10 @@ const BannerContents = styled.span` const BannerTriangle = styled.span` position: absolute; - + top: 40px; left: -8px; - + /* This code makes the triangle. */ border-top: 8px solid ${ colors.$color_purple_dark }; border-left: 8px solid transparent; diff --git a/packages/components/src/toggle/toggle.css b/packages/components/src/toggle/toggle.css index 7adaf03b54..f350d17b74 100644 --- a/packages/components/src/toggle/toggle.css +++ b/packages/components/src/toggle/toggle.css @@ -1,8 +1,3 @@ -.yoast-feature { - max-width: 600px; - margin-right: 150px; -} - .yoast-toggle__item { display: flex; justify-content: space-between; @@ -32,6 +27,7 @@ display: flex; font-weight: 500; align-items: center; + color: var(--yoast-color-default-darker); } input[type=checkbox].yoast-toggle__checkbox {