Style "Submit" button on "Contact Me" form

[vikascripps]

Currently the button looks like this in staging:

It should look like this:

I mentioned the font update for button text in #164. It probably is better to update text style for all buttons at once. In addition to text style change for this button, we also need to update the styling of the box. Here is a link to this button in Figma.

Here are specs for it:

[mwilkins74]

See #156. I have been unable to get this button do any restyling other than removing the rounded border edges. I have spent at least two hours trying to "expand" the button so there is more space on either side of the Submit label to no avail.

@ChuckBTaylor any suggestions?

[mwilkins74]

@vikascripps Ok, after like 3 hours of wrestling this damn button I've gotten it to look like this! phew

[vikascripps]

@mwilkins74 yay, great job! Sorry it took so long! The text style on the button is wrong but I'm assuming it will be handled in a different issue.

[mwilkins74]

@vikascripps It's using the Manrope font-family as you can see in this screenshot. Let me know if that needs to be changed to something else.

[vikascripps]

@mwilkins74 ha, I'm not sure what is happening, but the font on your screenshot is not Manrope. I understand that that's what it says when you inspect it, but this is not what Manrope looks like.

Here is what it looks like:

Here is a link to it in Google Fonts.

[mwilkins74]

@vikascripps Very weird!

Any chance the font we're seeing on render is Oswald or Roboto?

We have those declared in the application and I have a feeling Oswald may be what we're seeing even though it's telling me it's Manrope.

[vikascripps]

@mwilkins74 no, it's not either of those. They are both sans serif fonts and the one that's rendering is a serif.

[mwilkins74]

@vikascripps so Weird!!! I'll do some more exploring.

p.s. What's a serif?

[vikascripps]

@mwilkins74 serif fonts have those decorative lines or tapers (also commonly referred to as “tails” or “feet”) while sans serif fonts don't—hence the “sanes” in their title.

So a serif would look like this (I circled the "tails" mentioned above):

And a sans serif would look like this (it's very straight and does not have "tails"):

[mwilkins74]

@vikascripps I left this hanging for a couple of weeks, but I finally think I figured it out. This is the current SUBMIT button styling. When I inspect the element it still says Manrope, but now it includes a sans-serif flag as well. I think I needed to import the font into the code, which once I did this is the result.

[vikascripps]

@mwilkins74 Nice, the font looks great! I seems that the button now moved to the right, could you right align in with the right end of the 'Message' input field please? Also, the button now has rounded corners, could you make them sharp?

[mwilkins74]

@vikascripps good morning! This is current Submit button when I spin it up this morning. Let me know further thoughts.