Comment on page
Message Bubbles
Message Bubbles are populated with messages sent between pros and customers.
Message bubbles include the message from the user and the time it was sent. Depending on the context and length of the messages, the style of message bubble changes.
When a user is sending the message to another message, that message will be populated in the chat detail view. Depending on the length of the message, the UI's max width will change.
1. Container
background: blue-medium-light
border-radius: 5px
m-message-sent-long:
max-width: 66.667% (excluding margins)
m-message-sent-medium:
max-width: 50% (excluding margins)
m-message-sent-short:
max-width: 33.333% (excluding margins)
2. Message Text (a-text-paragraph)
font-weight: book
font-size: 16px
font-color: text-black
padding-top: 16px
padding-left: 12px
padding-right: 12px
padding-bottom: 8px
3. Time Stamp (a-text-label)
After 24 hours, the message time stamp will reflect the date (mm/dd) and time (XX:XX) it was sent.
font-weight: book
font-size: 10px
font-color: slate-dark
padding-top: 8px
padding-bottom: 16px
Received messages will adopt most of the stylings of sent messages.
1. Container
background: dark-white
border-radius: 5px
m-message-sent-long:
max-width: 66.667% (excluding margins)
m-message-sent-medium:
max-width: 50% (excluding margins)
m-message-sent-short:
max-width: 33.333% (excluding margins)
2. Message Text (a-text-paragraph)
font-weight: book
font-size: 16px
font-color: text-black
padding-top: 16px
padding-left: 12px
padding-right: 12px
padding-bottom: 8px
3. Time Stamp (a-text-label)
After 24 hours, the message time stamp will reflect the date (mm/dd) and time (XX:XX) it was sent.
font-weight: book
font-size: 10px
font-color: slate-dark
padding-top: 8px
padding-bottom: 16px
Last modified 3yr ago