Message Bubbles

Message Bubbles are populated with messages sent between pros and customers.

Usage of Message Bubbles

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.

Types of Message Bubbles

1. Sent Messages (m-message-sent)

2. Received Messages (m-message-received)

Sent Messages (m-message-sent)

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 (m-message-received)

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