Hierarchy view styling

[alyblenkin]

Problem:
The hierarchy view styling differs from the form entry experience, so they don't look connected and can create a confusing user experience.

Solution:
Unify the hierarchy view by matching the styling from the form entry

• Padding
• Font size and weight for question and answer
• Indent the answer in the hierarchy view
• Adding a folder icon to match the table of contents

Figma

Considerations for design pairing:
The form entry uses a bold font for the question, which works well for short questions. However, long bold questions are challenging to read. If we have time, I think we should explore using a medium weight for hierarchy and form entry questions to see how that changes readability.

[alyblenkin]

@seadowg I was thinking about your feedback about the group name, and I explored adding a folder icon to better distinguish between the group and questions. Curious to know what you all think @lognaturel

[lognaturel]

I like it in the table of contents because it matches the group listing! I'm not loving it within form entry, though because it adds a whole new concept.

[alyblenkin]

I like it in the table of contents because it matches the group listing! I'm not loving it within form entry, though because it adds a whole new concept.

I was trying to make it consistent, but it would be introducing something new, and it could be distracting within the form entry.

[seadowg]

I like it in the table of contents because it matches the group listing! I'm not loving it within form entry, though because it adds a whole new concept.

Yeah totally agreed. It's definitely nice that it's consistent, but I think it's probably safer to avoid it in form entry given how much can be on screen already.