form styles, moving page content around

[jbibla]

similar to my previous PR. this is an attempt for more consistency and clearer relationships between informational elements. these are small changes but i think they can bring more clarity to how things are related. also, trying to distill some of our styles into conventions so there is more consistency across the board.

the main changes include removing the line between elements in the same form, making the font-size of the input labels smaller, and applying a max-width to the form container.

i would also like to bring the page title into the same section as the content. i think this provides context in a clearer way. this also addresses the problem where sometimes the page-title overflowed because it was restricted to one line.

you'll also notice minor language changes — also for consistency.

[nylira]

Hmm, I don't think I like having the page title in the same section as the content. It looks far too low on the page, and we're left with a large empty space above the title. My suggestion: Put the page title back where it was, but expand the page header height from 3rem to 5-6rem to give it more spacing and allow for multi-line titles.

I like what you did with removing the border between form fields -- it's clean. I don't like having the form label above the field though for desktop. It eats up more vertical space (which would end up requiring more scrolling on longer forms) and leaves a lot of wasted horizontal space. I think we should put the labels back horizontally next to the field.

[nylira]

Also, some sort of line or background color change to separate the main form from the form footer (submit button) would look nice. Right now the "Send Tokens" button is floating in space.

[jbibla]

It looks far too low on the page, and we're left with a large empty space above the title

i see what you're saying here. i think it would be nice if the page title lined up with the cosmos logo — which will now be a little bit lower because we removed the top bar.

Put the page title back where it was, but expand the page header height from 3rem to 5-6rem

i'm very open to the position of the page title — my main objection is the line. i don't think the title should be separated from the content by a line that goes 100% wide. and if we are going to have a utility bar at the top, let's just leave the space for utility icons.

I don't like having the form label above the field though for desktop.

interesting. i didn't do this actually — this is how the forms are already... balances is horizontal (but not technically a form) and send is vertical. ideally, these would all follow the same convention.

is there any reason to be concerned about vertical length of forms? what forms could end up being unreasonably long? scrolling is nothing to be afraid of!

lastly, stretching form elements wide (which is highly unconventional) is not a good way to solve the horizontal space issue. we can come up with better uses for the horizontal space (if we feel that we need to). one option here would be centring the content column as opposed to having it left aligned (not the actual text, but the main container).

line or background color change to separate the main form from the form footer (submit button) would look nice

i can try some variations!

[nylira]

i'm very open to the position of the page title — my main objection is the line. i don't think the title should be separated from the content by a line that goes 100% wide. and if we are going to have a utility bar at the top, let's just leave the space for utility icons.

I like having the line there - it's widely used in desktop apps because it's a clean separation between the header and the content. My way of thinking is that the titlebar is part of the contents of the page, but it appears the same on every page. I'm thinking of the bar as like the address bar in a web browser. Or for another example, Slack uses this line:

Right now it's not the case, but in the near future I want to make the page header fixed to the top of the app, so when you scroll the header stays there. Use cases for this:

• when scrolling through lots of transactions, you can easily start searching without scrolling back to top
• when scrolling through a long proposal, you are aware of the proposal's title
• when scrolling through a list of delegates (which shows the # of delegates you have selected in tht title area), the fixed header lets you start delegating your atoms where ever you are.

Those uses cases would be hampered if we moved the page title in the body area of the page.

interesting. i didn't do this actually — this is how the forms are already... balances is horizontal (but not technically a form) and send is vertical. ideally, these would all follow the same convention.

Whoops, I messed this up -- will fix in the PR #155

is there any reason to be concerned about vertical length of forms? what forms could end up being unreasonably long? scrolling is nothing to be afraid of!

Scrolling is nothing to be afraid of, but for shorter forms if we can remove the need for scrolling we save the user one action.

lastly, stretching form elements wide (which is highly unconventional) is not a good way to solve the horizontal space issue. we can come up with better uses for the horizontal space (if we feel that we need to). one option here would be centring the content column as opposed to having it left aligned (not the actual text, but the main container).

Agreed that we don't want to stretch too far horizontally!

[faboweb]

I don't like the added font-size for the form-input label too much. It feels more chaotic to me.

[jbibla]

@nylira — ok i think i understand your vision better and will make the changes accordingly. thank you for sharing! part of why i think it works in slack is because the sidebar and content area background are not the same colour. i have an idea for a middle ground!

@faboweb — thanks for the feedback. i can switch this back.

[jbibla]

@faboweb @nylira

[nylira]

Awesome - this is basically what I had in mind.

[jbibla]

closed #153