Make 'Add location' button more prominent

[marceloams]

• Restored standard orange button styling used across the app.
• Maintained the same behavior when the button is disabled.

Closes #511

[wbazant]

Thanks for taking on the issue, and I like the solution of applying primary property to the button.

On my desktop (Firefox browser) the button has a white border, and then a grey one:

Zoomed in:

Could you look into the button's styling and removing these? I assume the white border was an artifact and a grey one was the original attempt to make that button stand out, I think we can try make the button just orange without the shading around it, or the alternative is a white button with an orange border as we have for the Report button on the location page.

[ezwelty]

I think we can try make the button just orange without the shading around it, or the alternative is a white button with an orange border as we have for the Report button on the location page.

Agreed. But let's make it orange fill. The design principle with the buttons was to have primary behavior orange fill (add location, review location, submit), and secondary behavior (report, cancel) orange border.

(As I describe this logic, I wonder whether "Sign in" shouldn't have an orange border to clearly stand out as an action).

[marceloams]

Hey @wbazant, I’ve removed the white border from the ‘Add location’ button as you suggested. Below is a picture showing the outlined sign-in button proposed by @ezwelty. Let me know your thoughts!

[wbazant]

@marceloams thanks! Yes please to the orange outline, I made #529 to track. Did you intentionally keep the box-shadow property? The Sign Up button doesn't have it so I'd make them the same - and I personally like one without a bit more but I'm not a designer!

[marceloams]

@wbazant, are you referring to the shadow on the ‘Add location’ button or the ‘Sign In' button? Just to clarify, there's no shadow on the ‘Sign In’ button.

[wbazant]

@marceloams the Add Location button has this property: box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); . If you take a screenshot and zoom in, you'll see a shade around the button. It made sense when it was a white button on a white background - it creates the effect of the button coming out of the page - but if we're using orange styling for the Add Location button, I think we don't need it.

[marceloams]

@wbazant Thanks for the clarification! I agree, it definitely looks better without the shadow. I've removed it now. Let me know if there's anything else you'd like adjusted, or if this looks good to you.

[wbazant]

Thanks for your patience! I think this is ready to go in now.