Skip to content

fix: Change style of custom donation field to match comps

stephen requested to merge frontend-tickets--custom-donation-type into main

As ticket #37 (closed) points out, the styling of the custom donation field is off-spec. Some changes were made to account for this:

  • The .tiny convenience class was added to the .input-group-text element containing the `fix: Change style of custom donation field to match comps character, and its CSS adjusted so it would remain vertically centered in the text field.
  • Text colors were adjusted, with the .input-group-text element containing USD given the "de-emphasized" copy accent color and the other text given the off-black color used as the standard type color elsewhere.

Additionally, since the shape of the field has changed since these fields were first built out, the border-radius was removed from the custom donation field, and the complex SASS rigging used to position all the elements around the text field was adjusted such that:

  • There is now a bottom 3px 30%-purple border on the custom donation field when it is not in focus.
  • When in focus, that field has an all-sides 3px 70%-purple border.

To achieve this effect, it was necessary to remove the fade transition when the custom entry field is focused. However, this approach removes the "jiggle" that the price copy previously made when focused, leading to an overall cleaner effect.

Closes: #37 (closed)

Edited by stephen

Merge request reports