rokwire / illinois-app

Source code repository of "Illinois" App - the official mobile app of the University of Illinois.
https://app.illinois.edu/
Apache License 2.0
23 stars 20 forks source link

[USABILITY] Delete newly introduced purple color throughout app #4080

Closed vburgett closed 3 months ago

vburgett commented 4 months ago

In recent app releases, the light purple color in the below screenshot has been introduced into the app design. Please eliminate the use of this new color throughout the app.

In the below screenshot, please replace the purple background of the pop-up with white. Set the paragraph text to Proxima Nova regular and the color of all of the text (including "OK") to navy #002855.

For background colors that need to be something other than white, please revert them back to the light grey color we use throughout the app #F5F5F5. Screenshot_20240524-135154

mihail-varbanov commented 3 months ago

@vburgett, there are many unclear questions, please look at my comments inline:

VB: In recent app releases, the light purple color in the below screenshot has been introduced MV: No, it persists for years. The name of the style entry is fillColorSecondaryTransparent05, it is based on the orange fillColorSecondary with some blending applied, and it originates from the early Zeplin designs.

VB: Please eliminate the use of this new color throughout the app. MV: What do you mean by "eliminate"? Remove the triangle shading from top and bottom of the tout? Keep the triangle shading but replace the fillColorSecondaryTransparent05 with some other blending color? Which? Or, "eliminate" means something else?

VB: In the below screenshot, please replace the purple background of the pop-up with white. MV: The "purple background" comes from the color the system alert control is positioned. This is a standard behavior in iOS that I find no reason to try to change. Most probably resolving your previous request "please eliminate" would resolve this as well.

VB: Set the paragraph text to Proxima Nova regular and the color of all of the text (including "OK") to navy #2855 MV: We reuse the same alert style across the app at dozens of places. It is senseless to change the style of exactly this alert and introduce an exception. But I can update the style of the default shared alert across the app to match the style that you defined. Is this what you actually want?

VB: For background colors that need to be something other than white, please revert them back to the light grey color we use throughout the app #F5F5F5. MV: I do not understand what you mean. Could you please be more specific and provide some examples?

vburgett commented 3 months ago

Hi @mihail-varbanov

VB: In recent app releases, the light purple color in the below screenshot has been introduced MV: No, it persists for years. The name of the style entry is fillColorSecondaryTransparent05, it is based on the orange fillColorSecondary with some blending applied, and it originates from the early Zeplin designs. VB: Please see the below image. Which color in the json file is this purple color? It does not seem to be the style entry you referenced.

VB: In the below screenshot, please replace the purple background of the pop-up with white. MV: The "purple background" comes from the color the system alert control is positioned. This is a standard behavior in iOS that I find no reason to try to change. Most probably resolving your previous request "please eliminate" would resolve this as well. VB: What do you mean by this "The "purple background" comes from the color the system alert control is positioned."?

VB: Set the paragraph text to Proxima Nova regular and the color of all of the text (including "OK") to navy https://github.com/rokwire/illinois-app/pull/2855 MV: We reuse the same alert style across the app at dozens of places. It is senseless to change the style of exactly this alert and introduce an exception. But I can update the style of the default shared alert across the app to match the style that you defined. Is this what you actually want? VB: yes, please

Screenshot 2024-06-21 at 12 33 38 PM

mihail-varbanov commented 3 months ago

@vburgett, I was wrong about the purple background color. I was thinking that alert's background color has an alpha component different from 0xFF, so that the content below the dialog that (presents fillColorSecondaryTransparent05 areas) is involved in the dialog's background color. The reason for the background color appeared to be much more trivial. It comes from the default material color scheme that flutter uses by default. Anyway, setting "surface" color entry (#FFFFFF) as an explicit dialog background definition resolved the problem.

I also updated the default alert text styles. Alert body is "widget.message.medium.thin" (regular 18 fillColorPrimary). Alert title (where it is used) is "widget.message.medium" (bold 18 fillColorPrimary). The alert body's text style is used as the text button's text style. You will see below the new default look of the app alert.

Please note that there are a number of dialogs, presented by the app, that have more complex UI and different styles, that have been defined in the designs through the years. An example of such dialog is what we present on "Add to Calendar" from the Events detail panel. These dialogs are not affected by the above change because they use explicit entries from styles.json and have more complex structure than what we have in Material themes - title/content/button(s).

This was done in version 6.0.12.

Screenshot 2024-06-24 at 11 33 46 AM

vburgett commented 3 months ago

Thank you for looking into this and providing this information, @mihail-varbanov. Confirming that this particular pop-up no longer has a purple background in 6.0.12.