From 0c774e7dd1d042909b2b4b77e01da26885ace111 Mon Sep 17 00:00:00 2001
From: Beth Menzies <beth@incuna.com>
Date: Thu, 23 May 2019 15:55:14 +0100
Subject: [PATCH] increase font size across admin, improve color contrast
---
client/scss/components/_button.scss | 2 +-
client/scss/components/_header.scss | 4 ++++
client/scss/components/_help-block.scss | 2 +-
client/scss/components/_listing.scss | 4 ++--
client/scss/components/_messages.scss | 9 ++++-----
client/scss/components/_messages.status.scss | 4 ++--
client/scss/elements/_forms.scss | 4 ++++
client/scss/elements/_typography.scss | 4 ++--
client/scss/settings/_variables.scss | 16 +++++++++-------
.../templates/wagtailimages/images/edit.html | 2 +-
10 files changed, 30 insertions(+), 21 deletions(-)
diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss
index d6e0e9003a..b7f8a3f04d 100644
--- a/client/scss/components/_button.scss
+++ b/client/scss/components/_button.scss
@@ -222,7 +222,7 @@
&.disabled {
background-color: $color-grey-3;
border-color: $color-grey-3;
- color: lighten($color-grey-2, 15%);
+ color: $color-grey-2;
cursor: default;
}
diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss
index ad2c86a1ea..a57982e253 100644
--- a/client/scss/components/_header.scss
+++ b/client/scss/components/_header.scss
@@ -92,6 +92,10 @@ header {
}
}
+ .error-message {
+ color: inherit;
+ }
+
.fields {
margin-top: -0.5em;
diff --git a/client/scss/components/_help-block.scss b/client/scss/components/_help-block.scss
index 38fc3a30f3..20d011b62e 100644
--- a/client/scss/components/_help-block.scss
+++ b/client/scss/components/_help-block.scss
@@ -14,7 +14,7 @@
}
a {
- color: $color-teal;
+ color: $color-link;
}
}
diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss
index e68c2df1b4..52743d50c6 100644
--- a/client/scss/components/_listing.scss
+++ b/client/scss/components/_listing.scss
@@ -44,7 +44,7 @@ ul.listing {
border-bottom: 1px solid $color-grey-4;
th {
- font-size: 0.85em;
+ font-size: 0.9em;
text-align: left;
font-weight: normal;
white-space: nowrap;
@@ -129,7 +129,7 @@ ul.listing {
}
.parent a {
- color: $color-link-hover;
+ color: $color-white;
}
.status-tag {
diff --git a/client/scss/components/_messages.scss b/client/scss/components/_messages.scss
index 6d05a87771..52f1555e25 100644
--- a/client/scss/components/_messages.scss
+++ b/client/scss/components/_messages.scss
@@ -32,7 +32,7 @@
}
.error {
- background-color: $color-red;
+ background-color: $color-red-dark;
&:before {
font-family: wagtail;
@@ -41,7 +41,7 @@
}
.warning {
- background-color: $color-orange;
+ background-color: $color-orange-dark;
&:before {
font-family: wagtail;
@@ -50,7 +50,7 @@
}
.success {
- background-color: $color-green;
+ background-color: $color-green-dark;
&:before {
font-family: wagtail;
@@ -64,11 +64,10 @@
.button-secondary {
border-color: rgba(255, 255, 255, 0.5);
- color: rgba(255, 255, 255, 0.8);
+ color: $color-white;
&:hover {
border-color: transparent;
- color: $color-white;
}
}
diff --git a/client/scss/components/_messages.status.scss b/client/scss/components/_messages.status.scss
index c2a2c85937..0217396341 100644
--- a/client/scss/components/_messages.status.scss
+++ b/client/scss/components/_messages.status.scss
@@ -1,9 +1,9 @@
.status-msg {
&.success {
- color: $color-green;
+ color: $color-green-dark;
}
&.failure {
- color: $color-red;
+ color: $color-red-dark;
}
}
diff --git a/client/scss/elements/_forms.scss b/client/scss/elements/_forms.scss
index 5a4242810c..e761bdab24 100644
--- a/client/scss/elements/_forms.scss
+++ b/client/scss/elements/_forms.scss
@@ -40,6 +40,10 @@ label,
display: inline;
}
+ &.no-float {
+ float: none;
+ }
+
@include media-breakpoint-up(sm) {
@include column(2);
padding-top: 1.2em;
diff --git a/client/scss/elements/_typography.scss b/client/scss/elements/_typography.scss
index 92a0ddd382..5d5b37f9fb 100644
--- a/client/scss/elements/_typography.scss
+++ b/client/scss/elements/_typography.scss
@@ -8,7 +8,7 @@
body {
-webkit-font-smoothing: antialiased; // Do not remove!
font-family: Open Sans, Arial, sans-serif;
- font-size: 80%;
+ font-size: 85%;
line-height: 1.5em;
color: $color-text-base;
}
@@ -84,7 +84,7 @@ dl {
}
dt {
- color: darken($color-grey-3, 15%);
+ color: $color-grey-2;
text-transform: uppercase;
font-size: 0.9em;
}
diff --git a/client/scss/settings/_variables.scss b/client/scss/settings/_variables.scss
index e53218d2d9..045f8a1c1a 100644
--- a/client/scss/settings/_variables.scss
+++ b/client/scss/settings/_variables.scss
@@ -34,8 +34,11 @@ $color-teal-dark: darken(adjust-hue($color-teal, 1), 7);
$color-blue: #71b2d4;
$color-red: #cd3238;
+$color-red-dark: #b4191f;
$color-orange: #e9b04d;
+$color-orange-dark: #bb5b03;
$color-green: #189370;
+$color-green-dark: #157b57;
$color-salmon: #f37e77;
$color-salmon-light: #fcf2f2;
$color-white: #fff;
@@ -44,7 +47,6 @@ $color-black: #000;
// darker to lighter
$color-grey-1: darken($color-white, 80);
$color-grey-2: darken($color-white, 70);
-
$color-grey-3: darken($color-white, 15);
$color-grey-4: darken($color-white, 10);
$color-grey-5: darken($color-white, 2);
@@ -62,13 +64,13 @@ $color-input-error-bg: lighten(saturate($color-red, 28), 45);
$color-button: $color-teal;
$color-button-hover: $color-teal-darker;
-$color-button-yes: $color-green;
+$color-button-yes: $color-green-dark;
$color-button-yes-hover: darken($color-button-yes, 8%);
-$color-button-no: $color-red;
+$color-button-no: $color-red-dark;
$color-button-no-hover: darken($color-button-no, 20%);
-$color-button-warning: $color-orange;
-$color-button-warning-hover: darken($color-orange, 20%);
-$color-link: $color-teal;
+$color-button-warning: $color-orange-dark;
+$color-button-warning-hover: darken($color-button-warning, 20%);
+$color-link: $color-teal-darker;
$color-link-hover: $color-teal-dark;
$color-text-base: darken($color-white, 85);
@@ -86,7 +88,7 @@ $font-serif: Roboto Slab, Georgia, serif;
// misc sizing
$thumbnail-width: 130px;
-$menu-width: 180px;
+$menu-width: 200px;
$menu-width-max: 320px;
$mobile-nav-indent: 50px;
diff --git a/wagtail/images/templates/wagtailimages/images/edit.html b/wagtail/images/templates/wagtailimages/images/edit.html
index e82b5f2e65..c2927f354d 100644
--- a/wagtail/images/templates/wagtailimages/images/edit.html
+++ b/wagtail/images/templates/wagtailimages/images/edit.html
@@ -75,7 +75,7 @@
<div class="row">
<div class="col8 divider-after">
- <h2 class="label u-text-transform-uppercase">{% trans "Focal point" %} <span class="u-text-weight-normal">{% trans "(optional)" %}</span></h2>
+ <h2 class="label no-float u-text-transform-uppercase">{% trans "Focal point" %} <span class="u-text-weight-normal">{% trans "(optional)" %}</span></h2>
<p>{% trans "To define this image's most important region, drag a box over the image above." %} {% if image.focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>
<button class="button button-secondary no remove-focal-point" type="button">{% trans "Remove focal area" %}</button>