Content checks results redesign

albinazs · Jun 6, 2024 · bda21b3 · bda21b3
1 parent a7798c1
commit bda21b3
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -40,7 +40,7 @@ <h2 class="w-dialog__title w-h1" id="title-{{ id }}">
                     {% endif %}
                 </div>
 
-                <div data-w-dialog-target="body">
+                <div class="w-dialog__body" data-w-dialog-target="body">
                     {{ children }}
                 </div>
             </div>

diff --git 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
@@ -17,7 +17,7 @@ <h3 class="w-a11y-result__header">
 </template>
 
 <div class="w-mt-12">
-    <h2 class="w-flex w-items-center w-gap-2"><span>{% trans 'Issues found' %}</span><span class="w-a11y-result__count" data-a11y-result-count>0</span></h2>
-    <div data-checks-panel></div>
+    <h2 class="w-flex w-items-center w-gap-2 w-my-5 w-text-16 w-font-bold"><span>{% trans 'Issues found' %}</span><span class="w-a11y-result__count" data-a11y-result-count>0</span></h2>
+    <div class="w-flex w-flex-col w-gap-2.5" data-checks-panel></div>
 </div>
 {{ axe_configuration|json_script:"accessibility-axe-configuration" }}