From 4b5817b3208d400da210b9ee1a9d7849ebba878d Mon Sep 17 00:00:00 2001 From: mghenciu <52494172+mghenciu@users.noreply.github.com> Date: Fri, 1 Sep 2023 10:55:35 +0300 Subject: [PATCH 1/5] Adds more bg contrast for Accordions in dashboard --- src/dashboard/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/dashboard/style.scss b/src/dashboard/style.scss index 9430a1563..a0b191370 100644 --- a/src/dashboard/style.scss +++ b/src/dashboard/style.scss @@ -161,10 +161,17 @@ &:hover { border-bottom: 1px solid #d6e2ed !important; + background: #E8E8E8; } } } + .components-panel__body-toggle { + &:hover { + background: #E8E8E8; + } + } + &.is-pro { .components-panel__body-title { .components-button { From d00f775af0d8f9c273a89e12272c2dd86e26a7e0 Mon Sep 17 00:00:00 2001 From: mghenciu <52494172+mghenciu@users.noreply.github.com> Date: Fri, 1 Sep 2023 13:31:59 +0300 Subject: [PATCH 2/5] 3px bottom margin; hover for top navigation panels --- src/dashboard/style.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/dashboard/style.scss b/src/dashboard/style.scss index a0b191370..9d3ab2154 100644 --- a/src/dashboard/style.scss +++ b/src/dashboard/style.scss @@ -89,9 +89,17 @@ margin: 0; border: 0; cursor: pointer; + margin-right: 8px; + + &:hover { + span { + color: #282828; + } + border-bottom: 3px solid #e5e5e5; + } &.is-active { - border-bottom: 4px solid #1E7DB2; + border-bottom: 3px solid #1E7DB2; span { color: #282828; @@ -100,7 +108,7 @@ @media ( max-width: 960px ) { border-bottom: 0; - border-left: 4px solid #1E7DB2; + border-left: 3px solid #1E7DB2; } } From 5dcf302c3c1c3305ab75e30e6c2ce70d78522021 Mon Sep 17 00:00:00 2001 From: mghenciu <52494172+mghenciu@users.noreply.github.com> Date: Fri, 1 Sep 2023 14:23:23 +0300 Subject: [PATCH 3/5] Fixes links, focus and secondary button --- src/dashboard/style.scss | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/dashboard/style.scss b/src/dashboard/style.scss index 9d3ab2154..fd0682cc8 100644 --- a/src/dashboard/style.scss +++ b/src/dashboard/style.scss @@ -1,5 +1,9 @@ @import "../blocks/plugins/feedback/editor.scss"; +:root { + --main-link-color: #2271b1; + } + * { box-sizing: inherit; } @@ -33,6 +37,10 @@ --wp-admin-theme-color-darker-20: #d5654f; --wp-admin-theme-color-darker-10: #dd6851; } + + &.is-link { + color: var(--main-link-color); + } } .otter-header { @@ -262,8 +270,8 @@ } &:focus { - border-color: #00a0d2; - box-shadow: 0 0 0 1px #00a0d2; + border-color: var(--main-link-color); + box-shadow: 0 0 0 1px var(--main-link-color); outline: 2px solid transparent; outline-offset: -2px; } @@ -305,6 +313,8 @@ padding: 2px 20px; font-size: 14px; margin-right: 10px; + color: var(--main-link-color); + box-shadow: inset 0 0 0 1px var(--main-link-color); } .components-external-link { @@ -357,6 +367,8 @@ .is-secondary { padding: 2px 20px; font-size: 14px; + color: var(--main-link-color); + box-shadow: inset 0 0 0 1px var(--main-link-color); &:not(:last-child) { margin-right: 15px; @@ -499,6 +511,15 @@ justify-content: center; } } + + .components-form-toggle.is-checked .components-form-toggle__track { + background-color: var(--main-link-color); + } + + .components-textarea-control__input:focus, + .components-text-control__input:focus { + border-color: var(--main-link-color); + } } .otter-button-control { From 76686143393128be86d4086430dabfc4ba967d86 Mon Sep 17 00:00:00 2001 From: mghenciu <52494172+mghenciu@users.noreply.github.com> Date: Fri, 1 Sep 2023 15:14:41 +0300 Subject: [PATCH 4/5] Focus state fix --- src/dashboard/style.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/dashboard/style.scss b/src/dashboard/style.scss index fd0682cc8..d97888fad 100644 --- a/src/dashboard/style.scss +++ b/src/dashboard/style.scss @@ -315,6 +315,10 @@ margin-right: 10px; color: var(--main-link-color); box-shadow: inset 0 0 0 1px var(--main-link-color); + + &:focus { + box-shadow: inset 0 0 0 1.5px var(--main-link-color); + } } .components-external-link { @@ -373,6 +377,10 @@ &:not(:last-child) { margin-right: 15px; } + + &:focus { + box-shadow: inset 0 0 0 1.5px var(--main-link-color); + } } } } @@ -519,6 +527,7 @@ .components-textarea-control__input:focus, .components-text-control__input:focus { border-color: var(--main-link-color); + box-shadow: 0 0 0 1px var(--main-link-color); } } From 108a699fbf83847b84b94a8407888dae90b38b96 Mon Sep 17 00:00:00 2001 From: mghenciu <52494172+mghenciu@users.noreply.github.com> Date: Tue, 12 Sep 2023 12:07:40 +0300 Subject: [PATCH 5/5] Fixes based on the code review --- src/dashboard/style.scss | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/dashboard/style.scss b/src/dashboard/style.scss index d97888fad..deeaac940 100644 --- a/src/dashboard/style.scss +++ b/src/dashboard/style.scss @@ -1,9 +1,5 @@ @import "../blocks/plugins/feedback/editor.scss"; -:root { - --main-link-color: #2271b1; - } - * { box-sizing: inherit; } @@ -31,6 +27,8 @@ } #otter { + --main-link-color: #2271b1; + .components-button { &.is-primary { --wp-admin-theme-color: #ed6f57; @@ -524,8 +522,16 @@ background-color: var(--main-link-color); } - .components-textarea-control__input:focus, - .components-text-control__input:focus { + #o-feedback { + box-shadow: inset 0 0 0 1px var(--main-link-color); + color: var(--main-link-color); + + &:focus { + box-shadow: inset 0 0 0 1.5px var(--main-link-color); + } + } + + :is(.components-textarea-control__input, .components-text-control__input):focus { border-color: var(--main-link-color); box-shadow: 0 0 0 1px var(--main-link-color); }