or
Adám
feature-request
This is a proposal for the general design — not for the particular colour schemes. There is [a separate request for a dark scheme](https://topanswers.xyz/meta?q=745).

* Model the right hand pane (chat) after the left (posts):
  * Move the bottom "room bar" <header>) to the very top to align with and visually extend the top bar (<header>).
  * Give the icon on the left a drop-down room selector (just like the site selector).
  * Give it a search field (which as opposed to the main search, only searches when you press Enter, and then takes you to a transcript search).
  * Move the starred and transcript links into the chat top bar.
  * Move the room title down below the input field
  * Put the active chat users after the room title

* Actives' bar:
  * Move #active-users to the bottom below the chat input field.
  * Extend #active-rooms to the full height.  

* Top bar:
  * Make the search field take up all available space.
  * Move profile button to bottom right corner, where chat users and active rooms meet.

* Everywhere:
  * Remove unnecessary borders.
  * Remove background contrasts.
  * Increase text-to-background contrast

* Breathe!

---

## Comparison
Click on an image to enlarge it, then use the `<` and `>` buttons to switch images and compare!

The first image is the current situation:  
![Screenshot_2020-02-24 The Nineteenth Byte - TopAnswers(4).png](/image?hash=8dd1cb2379db57e412461ffa66eaac514c94c6360b096290418f69412dada237)

This is the current layout, but with light backgrounds, as mocked up by Jack:  
![Screenshot_2020-02-24 The Nineteenth Byte - TopAnswers(2).png](/image?hash=b1daf2bd7dfad2de860c7911156723c9bb903074009537057a5ee1832bd868b0)

Finally, my proposal:  
![Screenshot_2020-02-24 The Nineteenth Byte - TopAnswers.png](/image?hash=08eded104d84bd9f4b4d48ec2d24694d8209ad89554bbd587f48684ad54f8a71)
Top Answer
Jack Douglas
# Adám's Proposal:

![Screenshot 2020-02-24 at 12.31.58.png](/image?hash=08eded104d84bd9f4b4d48ec2d24694d8209ad89554bbd587f48684ad54f8a71)
Answer #2
Jack Douglas
# Current Layout:

![Screenshot 2020-02-24 at 12.31.58.png](/image?hash=8dd1cb2379db57e412461ffa66eaac514c94c6360b096290418f69412dada237)
Answer #3
Jack Douglas
# Light Backgrounds And Fewer Lines:

![Screenshot 2020-02-24 at 12.31.58.png](/image?hash=01ef06d9fd596c080b63994052720db15336d21025c862debc6b0c10eb871d70)
Answer #4
Jack Douglas
# Light Backgrounds:

![Screenshot 2020-02-24 at 12.31.58.png](/image?hash=b1daf2bd7dfad2de860c7911156723c9bb903074009537057a5ee1832bd868b0)
Design proposal
Pax
![Screen Shot 2020-02-24 at 1.46.48 PM.png](/image?hash=9193741850a208f1e2aeddaa7fc8aa8e01a4d42ddef67658786d06fbb917d2ab)
Pax replying to Adám
![Screen Shot 2020-02-24 at 1.38.24 PM.png](/image?hash=a47a530b1a021be491e9ceb5d025f5af20ff193c49c0c754ffa198fd1704303e)
samcarter replying to Adám
... and instead of the full width box, which essentially splits the chat pane into two, make the box for new messages the same width as the messages above. This additional white space would make it integrate better into the already posted messages.
Hosch250
Oneboxing seems broken in the notifications chat box.
Adám replying to samcarter
In essence, you're saying "hide the preview pane when chat input is empty"?
samcarter
![Screen Shot 2020-02-24 at 17.46.31.png](/image?hash=170fbc43f678bb1f475ef214750dd607ced18fbc636b17e3418d4e1a5a4e9844)
samcarter replying to Adám
How about adding a box with the dimensions of the chat messages above? In case the user starts to write something, the box would be divided to show the preview in the top part. The list of users in the room could then either be below the box  in the yellow area or stay at the side like now
Adám replying to Pax
The only area I'm not so happy with is the bottom right preview/input/recent-chatters which still is quite linesy. Any ideas for that?
Pax
+1 to more whitespace and less solid lines 👏🏽
Adám replying to Jack Douglas
Of course. That's why I didn't mention anything else in my proposal. ;-)
Jack Douglas replying to Adám
yes but we will aim to get the home page right first and then make other pages consistent I think
Adám replying to samcarter
Yes, that could work. In any case, all buttons should be styled together. As of now, the About and Ask are this material flat thing, while Submit is a default browser button, and the page selector is a different flat style.
samcarter
![Screen Shot 2020-02-24 at 13.49.16.png](/image?hash=b6d201c3758dfec0e9d7dc289d75e79c731c033476431ccf32088e5e2388205a)
samcarter
Maybe one could even remove the Ask/about boxes by making the background in a solid colour
Adám
:-)
samcarter replying to Adám
Literally outside the 1px boxes
Adám replying to samcarter
Thanks. Anything in particular you have in mind, or do you mean literally outside the boxes' 1px solid borders?
samcarter
@Adám I like how you think outside the box :)
Jack Douglas replying to Adám
not so noticeable elsewhere but very on CG
Adám
Yeah, I noticed, no shading of #messages
Jack Douglas replying to Adám
I did tweak slightly again before posting these
Jack Douglas
![Screenshot 2020-02-24 at 12.33.33.png](/image?hash=4d9f1c6142a666abe80bc35dab18229764892e399696342201cbcc205bca8e3a)
Adám
Actually, I think I managed to make it too.
Jack Douglas
![Screenshot 2020-02-24 at 12.32.38.png](/image?hash=8605fccb60eac3b22353ce154ee373e54903e74e13baca714712533cc55c4d4c)
Jack Douglas
![Screenshot 2020-02-24 at 12.32.24.png](/image?hash=d1ae8223e473fe5dbeed89a1f4dc4ef479fa9e1e6246048e72ac4ee381ccf1c3)
Jack Douglas
![Screenshot 2020-02-24 at 12.32.11.png](/image?hash=0878bff6ec2fa57ddb9f8ffbb1fe0eeeca5fcff88e813c39702ec8deaeed5a63)
Jack Douglas
![Screenshot 2020-02-24 at 12.31.58.png](/image?hash=e08f4e34b71f71348338f1cf3ecddb778dad11237c061061cc7ec37cab66fb7b)
Jack Douglas replying to Adám
sure — I'll post one screenshot for each current community:
Adám replying to Jack Douglas
Could you make one for code golf so the colours are comparable? I'll include it in my post for comparison. (Or give me the added CSS to produce it — then I can make one of the same dimensions.)
Adám replying to Jack Douglas
Thanks, yes, I think this shows clearly how "busy" it all is right now.
Jack Douglas
for comparison — I think it's easier to compare to @Adám's mockup
Jack Douglas
^^^ this is as now but switching to a light background around the posts
Jack Douglas
![Screenshot 2020-02-24 at 12.05.24.png](/image?hash=222be87c59ed734394f8bb7a81c9d7684006e8d21fccacedda5f2d64283f84d3)
David
@Adám Gotta say, for me that's quite appealing. I had some similar thoughts about design possibilities, as it happens—pretty convergent with this, in fact! I haven't delved into details, but this looks promising.