Issue 216/message preview update

[andycwilliams]

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 to index.html and NewMessageModal.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

[xscottxbrownx]

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.

[xscottxbrownx]

If we stick with this (over the single text thread idea), I think this is a great base design for it.

---

In my opinion, without any design team input or looking at the figma board, there are a few things to clean it up:

• I think the refresh button is in a weird spot. I think it should be in the same line with 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.
• I think the main info of each message (the 3 pieces above the dividing line) should be bold, so it stands out more when things are expanded.
• I think there should be more padding for the message divs, especially the text below the divider.
• I also think the pagination should have more marginTop if there are the max messages shown (I think we set that at 5 for now.) Kind of goes along with the padding comment earlier. Everything just seems too squished/close together.
• Lastly, I would actually like to see the 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 😆

[leekahung]

Was thinking we could also have a header row for Sender, Title, Date

[andycwilliams]

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 Reply button yet since that would involve changing several components and I want to make sure we're agreed on a direction first.

e: Refresh button, I mean, not Reply

[xscottxbrownx]

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.

[andycwilliams]

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.

[xscottxbrownx]

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!

[andycwilliams]

Here is what you suggested @xscottxbrownx. How does it look? I think I like it better.

[xscottxbrownx]

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.

[andycwilliams]

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.