feat(www): polish the contact view UI

[sbruens]

Screenshots:

[codecov]

Codecov Report

All modified lines are covered by tests ✅

see 40 files with indirect coverage changes

📢 Thoughts on this report? Let us know!.

[daniellacosse]

Do you mind posting a screenshot of the form pages in the description? Since the app is currently static for the most part let's not worry about responsiveness so much at the moment (probably would require a lot more changes anyway)

[daniellacosse]

Okay, design nits:

1. Does selected the radio button turn green when the control is focused? It should probably be green always, to ensure contrast is high enough
2. Can we fill in the dropdown with white so it sticks out more? I'm not sure about the copy Outline issue too, I'd prefer something a bit more specific/action oriented like What are you having trouble with? or Select issue category - Maybe @hilary-ops can weigh in here.
3. I'd say the spacing above the card is a little too tight, my gut tells me it should at least be as wide as the gutter between the card and the edge of the screen.

[sbruens]

Okay, design nits:

1. Does selected the radio button turn green when the control is focused? It should probably be green always, to ensure contrast is high enough

Yes, but the buttons are disabled once you pick them. I am actually going to undo that, since you can already step back and they get re-enabled so it's kind of pointless right now.

2. Can we fill in the dropdown with white so it sticks out more? I'm not sure about the copy Outline issue too, I'd prefer something a bit more specific/action oriented like What are you having trouble with? or Select issue category - Maybe @hilary-ops can weigh in here.

The white background on an outlined select would be against spec. The point is that outlined fields have less emphasis to simplify the layout. I made the change, but it does look kind of odd to be honest.

I agree re: copy, though we're trying to stick to the same copy as https://support.getoutline.org/s/contactsupport, which uses the generic "Outline issue".

3. I'd say the spacing above the card is a little too tight, my gut tells me it should at least be as wide as the gutter between the card and the edge of the screen.

Set the same gutter. I'll update the screenshots.

[daniellacosse]

Okay, design nits:

1. Does selected the radio button turn green when the control is focused? It should probably be green always, to ensure contrast is high enough

Yes, but the buttons are disabled once you pick them. I am actually going to undo that, since you can already step back and they get re-enabled so it's kind of pointless right now.

2. Can we fill in the dropdown with white so it sticks out more? I'm not sure about the copy Outline issue too, I'd prefer something a bit more specific/action oriented like What are you having trouble with? or Select issue category - Maybe @hilary-ops can weigh in here.

The white background on an outlined select would be against spec. The point is that outlined fields have less emphasis to simplify the layout. I made the change, but it does look kind of odd to be honest.

I agree re: copy, though we're trying to stick to the same copy as https://support.getoutline.org/s/contactsupport, which uses the generic "Outline issue".

3. I'd say the spacing above the card is a little too tight, my gut tells me it should at least be as wide as the gutter between the card and the edge of the screen.

Set the same gutter. I'll update the screenshots.

Yeah it looks weird - okay, what if we put the radio button and the dropdown in it's own card/white box? That way it's consistent with the other pages. Maybe that's what was bothering me.

[sbruens]

Okay, design nits:

1. Does selected the radio button turn green when the control is focused? It should probably be green always, to ensure contrast is high enough

Yes, but the buttons are disabled once you pick them. I am actually going to undo that, since you can already step back and they get re-enabled so it's kind of pointless right now.

2. Can we fill in the dropdown with white so it sticks out more? I'm not sure about the copy Outline issue too, I'd prefer something a bit more specific/action oriented like What are you having trouble with? or Select issue category - Maybe @hilary-ops can weigh in here.

The white background on an outlined select would be against spec. The point is that outlined fields have less emphasis to simplify the layout. I made the change, but it does look kind of odd to be honest.
I agree re: copy, though we're trying to stick to the same copy as https://support.getoutline.org/s/contactsupport, which uses the generic "Outline issue".

3. I'd say the spacing above the card is a little too tight, my gut tells me it should at least be as wide as the gutter between the card and the edge of the screen.

Set the same gutter. I'll update the screenshots.

Yeah it looks weird - okay, what if we put the radio button and the dropdown in it's own card/white box? That way it's consistent with the other pages. Maybe that's what was bothering me.

Done.

[daniellacosse]

The space above "Do you have an open ticket [..] ?" is a bit big, but otherwise looks great.

[daniellacosse]

lol i meant to approve

[fortuna]

This seems to break consistency with other text fields across our apps. Let's discuss. See the "Outline Design" email thread.