Closed andycwilliams closed 1 year ago
I think as a port of the page into MUI, this is a good PR.
As far as what the UI should look like, we're styling this like an inbox for email. However, I don't think we can realistically implement all the features that an inbox provides. We probably don't need to implement much beyond 1-to-1 conversations and notifications. I imagine if we set this feature up a bit more like an instant messenger or texting app, we'll have a much easier time designing and implementing it.
Although I agree, could get annoying if we don't implement some sort of search function. Finding a specific "text" is always frustrating in a long text convo thread.
In my opinion, without any design team input or looking at the figma board, there are a few things to clean it up:
New Message
, Inbox
, and Outbox
. And switched to be MESSAGES
with some sort of reload icon on the left to match the New Message
button.Reply To
button be above the main line of each message (name, subject, date.) This would require another conditional render of it based on the showContent
state. I could be completely wrong, but I feel it would look better/make more sense - but won't know until I see it 😆Was thinking we could also have a header row for Sender, Title, Date
A bit of a light update since there are a lot of possible choices. Adjusted padding, added a very basic header, tested character limitations in some text fields.
I haven't tried moving the button yet since that would involve changing several components and I want to make sure we're agreed on a direction first.Reply
e: Refresh
button, I mean, not Reply
A bit of a light update since there are a lot of possible choices. Adjusted padding, added a very basic header, tested character limitations in some text fields.
Personally, I don't like the header - I think it doesn't really look connected honestly.
I thought about it being in the containers, but think it would look too crowded.
I'm still a fan of just bolding those three things and cutting the header, BUT not important to me at all. Doesn't really matter.
I haven't really looked at how this is done elsewhere, but just opened my email and it's pretty much just bolded as well:
I think the rest of the updates look great.
Personally, I think having "Sender: ", "Subject: ", and "Date: " just looks nicer, but it is a bit more verbose than necessary. I have no strong feelings in any direction. Any of these work for me, including the header.
Personally, I think having "Sender: ", "Subject: ", and "Date: " just looks nicer, but it is a bit more verbose than necessary. I have no strong feelings in any direction. Any of these work for me, including the header.
that bottom photo is awesome! That’s my vote!
Think I might prefer it with the actual sender, subject, and dates bold where the titles of those are not (just so each message quickly stands out as identifiably different), but that’s a nitpick and again not sure until I see it honestly.
The way it is is great though!
Here is what you suggested @xscottxbrownx. How does it look? I think I like it better.
Here is what you suggested @xscottxbrownx. How does it look? I think I like it better.
I think it looks better, and is a better UX technically. Quickly see what they are actually searching for.
There's definitely more work to do, once we have a clearer idea of the final design. But I'm satisfied with having a foundation in place for now.
CONCISE description of PR (PR Title)
Updating the main message page with MUI styling. Will begin as a draft until more decisions are made about what is needed to resolve issue #216.
This PR:
1. Applies basic MUI styling to the
MessagePreview.jsx
component 2. Provides minor edits toindex.html
andNewMessageModal.jsx
The files this PR affects:
Components
MessagePreview.jsx
NewMessageModal.jsx
Other Files
index.html
Screenshots (if applicable):
Additional Context (optional):
This is a bare-bones application of MUI, focused simply on converting existing styling while maintaining functionality. More discussion about the optimal layout is needed. There are numerous directions to potentially take this.
Issues needing discussion/feedback (optional):
1. Resolve the issue of messages being clickable while the "Reply To" version of the message modal is open (this error does not occur with the "New Message" version). 2. The actions above also cause the modal to resize. That is, the "Reply To" version is thinner than the "New Message" one. This is a result of line 161. 3. Discuss improvements to the design, such as button placement and grid layout.
Closes #216