Modern theme the success message and error message look too similar

Bug #1821657 reported by Robert Lyon on 2019-03-26
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
High
Evonne Cheung

Bug Description

Normally we have a green background to success messages

But on modern theme we have a greyish-rose background on success

Robert Lyon (robertl-9) wrote :
Changed in mahara:
status: New → Confirmed
importance: Undecided → High
milestone: none → 19.04.0
Robert Lyon (robertl-9) wrote :

Looking at all the core themes side by side I see the success message colour lacks 'green-ness' for a few themes - the info / warning colours look ok.

I also notice that the messages are bigger on the Modern theme as well - is that intentional?

Changed in mahara:
assignee: nobody → Evonne Cheung (evonne)
Evonne Cheung (evonne) on 2019-04-09
Changed in mahara:
status: Confirmed → In Progress
Evonne Cheung (evonne) wrote :

Somehow, the success colour was set to be the theme primary color in Raw, so Modern inherited it's blue primary color. Have now reset Raw $success to a green.

Then realised that alerts (bootstrap) and states (mahara) are calculated in different places, rewrite parts of states to inherit the same variables as alerts so overriding only need to change a single variable in bootstrap-variable.scss (eg $info, $warning, $success, $danger)

Stripped out state/alert variables from themes except Raw as don't actually see the need to have them different. But the previous step is still useful when there's specific need for inverse alerts/states.

Modern alert messages had a bigger padding given to it, removed it as don't see how it's relevant.

Changed in mahara:
status: In Progress → Fix Committed
Robert Lyon (robertl-9) on 2019-04-10
Changed in mahara:
status: Fix Committed → In Progress
Steven (stevens-q) wrote :

Commit hash: 901d1441c0c3dd2b8bcf1d317ed3911b91cecfbf
Environment tested: Master
Browser tested: Chrome
PRECONDITIONS:
------------------------
1) View style guide page with each of the following themes enabled
      a) Raw
      b) default
      c) Modern
      d) Ocean
      e) Primary school

TEST STEPS:
------------------------
1) Log in as Site admin
2) Browse to the style guide page for alerts http://mahara.stevens-lp.dynamic.wgtn.cat-it.co.nz/theme/styleguide.php
3) Verify that the text size for Success and Error messages are .875rem ( the same as messages in other themes)
4) Verify the Success alert background colours are as followsfor the Modern theme:
      a) Success alert = light grey (#d7dadd)
      b) Danger alert = light red (#f7dddc)

Catalyst QA

Reviewed: https://reviews.mahara.org/9734
Committed: https://git.mahara.org/mahara/mahara/commit/901d1441c0c3dd2b8bcf1d317ed3911b91cecfbf
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 901d1441c0c3dd2b8bcf1d317ed3911b91cecfbf
Author: Evonne Cheung <email address hidden>
Date: Wed Apr 10 13:10:30 2019 +1200

Bug #1821657 Modern theme the success message and error message look too similar

$success was set to be the $theme-primary-color in Raw, so Modern
inherited it's own $theme-primary-color which is blue/gray. Have
now reset Raw $success to a green.

Rewrote states to inherit the same variables as alerts so
overriding only need to change a single variable in
bootstrap-variable.scss (eg $info, $warning, $success, $danger)

Stripped out state/alert variables from themes except Raw as don't
actually see the need to have them different.

Modern alert messages had a bigger padding given to it, removed it
as don't see how it's relevant.

behatnotneeded

Change-Id: Iac9d8b52e5b085aaae2d4825296afac0651b0fee

Reviewed: https://reviews.mahara.org/9746
Committed: https://git.mahara.org/mahara/mahara/commit/c67e914462e136e4c758b3bcb067e77c0d0df0b8
Submitter: Robert Lyon (<email address hidden>)
Branch: 19.04_STABLE

commit c67e914462e136e4c758b3bcb067e77c0d0df0b8
Author: Evonne Cheung <email address hidden>
Date: Wed Apr 10 13:10:30 2019 +1200

Bug #1821657 Modern theme the success message and error message look too similar

$success was set to be the $theme-primary-color in Raw, so Modern
inherited it's own $theme-primary-color which is blue/gray. Have
now reset Raw $success to a green.

Rewrote states to inherit the same variables as alerts so
overriding only need to change a single variable in
bootstrap-variable.scss (eg $info, $warning, $success, $danger)

Stripped out state/alert variables from themes except Raw as don't
actually see the need to have them different.

Modern alert messages had a bigger padding given to it, removed it
as don't see how it's relevant.

behatnotneeded

Change-Id: Iac9d8b52e5b085aaae2d4825296afac0651b0fee
(cherry picked from commit 901d1441c0c3dd2b8bcf1d317ed3911b91cecfbf)

Robert Lyon (robertl-9) on 2019-04-11
Changed in mahara:
status: In Progress → Fix Committed
Changed in mahara:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers