Normalize Input Styling across the app

This has always driven me nuts, but we should fix it with the new composer here.

We have 4 different styles going:

Topic title uses, inset:

image

Topic body uses, nothing, and no rounded corners:

image

Topic category uses nothing and rounded corners:

image

Topic tags uses, border and square corners

image

We got to do something about this.

image

27 Likes

I agree with this, but I think it’s a good opportunity to make all inputs consistent across Discourse; otherwise I’m just adding overrides at the composer level.

I don’t think it would be very difficult. I’d suggest removing shadows and rounded corners, and adding a border and background color everywhere. That would ensure all inputs are always visible because of either the border or the background color, and then shadows and rounded corners are theme-level additions.

5 Likes

Agree, this makes sense, minimizing the amount of styling going on the default theme makes it way easier to theme Discourse.

Perhaps have a look at this once you are done with the composer.

4 Likes

This is the advanced search with the new consistent style:

This is how it used to look:

Not sure why, but I don’t like the new look - perhaps it’s the darker border lines.

Side note @joffreyjaffeux, the datepicker is not aligned.

6 Likes

I think the new consistency looks great, personally!

4 Likes

I think the darker outlines make it more obvious that the layout of other fields could be made more pleasing. For instance, it’s more clear now that the category dropdown sticks out on the right.

Maybe there is an opportunity here to improve this page at some point?

5 Likes

@awesomerobot @joffreyjaffeux just noticed a 1px diff here: (reply is one px shorter than reply controls on mobile)

Its not enough to yell OH NO disasta pasta, but, you know, I have problems so I am just spreading my OCD around.

8 Likes

aghhh where is this 1px coming from

3 Likes

Noticed another inconsistency - editing a topic title, category, and tags.

Category chooser is shorter than title and tags field, category chooser is closer to tags than to the title, and tags has what looks to be two borders.

Edit: wait a sec…looks like tags is still using select2 not the new select-kit. Is that intentional @joffreyjaffeux?

Edit 2: Nevermind then @awesomerobot - I’ll check this again once Joffrey is finished.

3 Likes

yes it’s not done yet, I’m working on {{tag-chooser}} but it’s quite a challenging one, the tag/group chooser are the last before I can remove select2.

7 Likes

This regressed due to the new styles

4 Likes

This was bothering me so I didn’t wait for the tag input update; just pushed an update that should make the layout for editing titles match the new composer

Also pushed a fix for the horizontal scrollbar on the category modal

8 Likes