From 4e2afc966bc4b37dd425d99c83cfe715563ffcc8 Mon Sep 17 00:00:00 2001 From: Albina <51043550+albinazs@users.noreply.github.com> Date: Mon, 17 Jun 2024 18:25:36 +0300 Subject: [PATCH] Content checks results redesign (#12019) --- client/scss/components/_a11y-result.scss | 35 ++++++++++++------- client/scss/components/_userbar.scss | 13 +++++-- client/src/components/CommentApp/main.scss | 2 +- client/src/tokens/typography.js | 1 + .../wagtailadmin/shared/dialog/dialog.html | 2 +- .../shared/page_status_tag_new.html | 2 +- .../shared/side_panels/checks.html | 4 +-- 7 files changed, 39 insertions(+), 20 deletions(-) diff --git a/client/scss/components/_a11y-result.scss b/client/scss/components/_a11y-result.scss index be571ceeb747..caf97c80b6a7 100644 --- a/client/scss/components/_a11y-result.scss +++ b/client/scss/components/_a11y-result.scss @@ -1,32 +1,43 @@ .w-a11y-result__row { - border-top: 1px solid theme('colors.border-furniture'); + @include box; + padding: theme('spacing.4'); } .w-a11y-result__header { margin: 0; - padding: theme('spacing.4') theme('spacing.5'); width: 100%; display: flex; justify-content: space-between; gap: theme('spacing.2'); - font: inherit; - font-weight: theme('fontWeight.bold'); + font-size: theme('fontSize.14'); + + .w-dialog--userbar & { + font-size: theme('fontSize.16'); + } } .w-a11y-result__name { - color: theme('colors.text-label'); + color: theme('colors.text-context'); + font-weight: theme('fontWeight.semibold'); } .w-a11y-result__container { display: flex; flex-wrap: wrap; - padding: 0 theme('spacing.5') theme('spacing.5') theme('spacing.5'); + gap: theme('spacing.[2.5]'); + padding-top: theme('spacing.3'); } .w-a11y-result__subtotal_count { - color: theme('colors.text-context'); + color: theme('colors.icon-primary'); width: theme('spacing.5'); text-align: center; + font-size: theme('fontSize.11'); + font-weight: theme('fontWeight.normal'); + + .w-dialog--userbar & { + font-size: theme('fontSize.14'); + } } .w-a11y-result__selector { @@ -35,8 +46,6 @@ background: theme('colors.surface-field-inactive'); color: theme('colors.text-context'); border-radius: theme('borderRadius.DEFAULT'); - margin-inline-end: theme('spacing.[2.5]'); - margin-bottom: theme('spacing.[2.5]'); padding: theme('spacing.[1.5]'); &:hover, @@ -59,7 +68,7 @@ fill: theme('colors.surface-button-default'); height: theme('spacing.[3.5]'); width: theme('spacing.[3.5]'); - margin-inline-end: theme('spacing.[2.5]'); + margin-inline-end: theme('spacing.[1.5]'); } .w-a11y-result__count { @@ -69,10 +78,10 @@ align-items: center; background-color: theme('colors.positive.100'); border-radius: theme('borderRadius.full'); - font-size: theme('fontSize.14'); + font-size: theme('fontSize.11'); line-height: theme('lineHeight.none'); - height: theme('spacing.5'); - width: theme('spacing.5'); + height: theme('spacing.4'); + width: theme('spacing.4'); color: theme('colors.text-button'); &.has-errors { diff --git a/client/scss/components/_userbar.scss b/client/scss/components/_userbar.scss index 6b004506d3d5..dddb5899828d 100644 --- a/client/scss/components/_userbar.scss +++ b/client/scss/components/_userbar.scss @@ -239,6 +239,7 @@ $positions: ( padding: 0; min-height: unset; max-height: 60vh; + font-size: theme('fontSize.14'); } .w-dialog__header { @@ -247,15 +248,23 @@ $positions: ( justify-content: space-between; } + .w-dialog__body { + padding: 0 theme('spacing.[7.5]') theme('spacing.[7.5]'); + display: flex; + flex-direction: column; + gap: theme('spacing.[2.5]'); + } + .w-dialog__title { @apply w-h3; - padding: theme('spacing.4') theme('spacing.5'); + color: theme('colors.text-context'); + padding: theme('spacing.[7.5]'); margin-bottom: 0; } .w-dialog__subtitle { @apply w-body-text; - padding-inline-end: theme('spacing.5'); + padding-inline-end: theme('spacing.[7.5]'); display: flex; align-items: center; gap: theme('spacing.2'); diff --git a/client/src/components/CommentApp/main.scss b/client/src/components/CommentApp/main.scss index 5ea8474888dd..2ad83a35b002 100644 --- a/client/src/components/CommentApp/main.scss +++ b/client/src/components/CommentApp/main.scss @@ -4,7 +4,7 @@ $color-comment-separator: theme('colors.border-furniture'); $color-box-background: theme('colors.surface-page'); $color-box-background-focused: theme('colors.surface-page'); -$color-box-border: theme('colors.border-field-default'); +$color-box-border: theme('colors.border-furniture'); $color-box-border-focused: theme('colors.border-field-hover'); $color-box-text: theme('colors.text-context'); $box-border-radius: 5px; diff --git a/client/src/tokens/typography.js b/client/src/tokens/typography.js index b27763f965ec..89f6c9674624 100644 --- a/client/src/tokens/typography.js +++ b/client/src/tokens/typography.js @@ -72,6 +72,7 @@ const fontFamily = { * These values are used in combinations create typography defaults */ const fontSize = { + 11: '0.6875rem', 14: '0.875rem', 15: '0.9375rem', 16: '1rem', diff --git a/wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html b/wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html index 53dc13f910e1..8eb4c584b209 100644 --- a/wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html +++ b/wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html @@ -40,7 +40,7 @@

{% endif %} -
+
{{ children }}
diff --git a/wagtail/admin/templates/wagtailadmin/shared/page_status_tag_new.html b/wagtail/admin/templates/wagtailadmin/shared/page_status_tag_new.html index 4673037d46b0..f1c0699a77a8 100644 --- a/wagtail/admin/templates/wagtailadmin/shared/page_status_tag_new.html +++ b/wagtail/admin/templates/wagtailadmin/shared/page_status_tag_new.html @@ -21,7 +21,7 @@ w-whitespace-nowrap w-px-1 w-ml-3 - w-text-[0.6875rem] + w-text-11 w-rounded-sm w-bg-transparent w-text-text-meta diff --git a/wagtail/admin/templates/wagtailadmin/shared/side_panels/checks.html b/wagtail/admin/templates/wagtailadmin/shared/side_panels/checks.html index e8f10427ef8c..85f17b73b92e 100644 --- a/wagtail/admin/templates/wagtailadmin/shared/side_panels/checks.html +++ b/wagtail/admin/templates/wagtailadmin/shared/side_panels/checks.html @@ -17,7 +17,7 @@

-

{% trans 'Issues found' %}0

-
+

{% trans 'Issues found' %}0

+
{{ axe_configuration|json_script:"accessibility-axe-configuration" }}