iMessage styling

[bruffridge]

Really like the default styling and how similar it is to iMessage. I made a few more style tweaks to make it even more like iMessage. Thought I'd share just in case you wanted to make these the defaults for deep-chat.

• changed fonts to use system fonts if available.
• message bubbles 75% width instead of 60%.
• One line messages are pill shaped (ends of bubble are semi circles)
• darker outline around text input and removed shadow.
• submit button changed from paper airplane to blue circle with white up arrow.
• added border around attachmentContainer that connects to text input

textInput={{
  styles: {
    container: {
      boxShadow: "none",
      borderRadius: "1em",
      border: "1px solid rgba(0,0,0,0.2)"
    },
    text: {
      padding: "0.4em 0.8em",
      paddingRight: "2.5em"
    }
  }
}}

chatStyle={{
  backgroundColor: "white",
  fontSize: "16px",
  fontFamily: 'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
}}

messageStyles={{
  default: {
    shared: {
      bubble: {
        maxWidth: "75%",
        borderRadius: "1em",
        padding: ".42em .7em"
      }
    }
  },
  loading: {
    shared: {
      bubble: {
        padding: "0.6em 0.75em 0.6em 1.3em"
      }
    }
  }
}}

submitButtonStyles={{
  submit: {
    container: {
      default: {
        width: "1em",
        height: "1em",
        right: "calc(10% + 0.3em)",
        bottom: ".85em",
        borderRadius: "100vmax",
        padding: "0.3em",
        backgroundColor: "rgb(0, 132, 255)"
      }
    },
    svg: {
      content: '<svg viewBox="1 1 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3C12.2652 3 12.5196 3.10536 12.7071 3.29289L19.7071 10.2929C20.0976 10.6834 20.0976 11.3166 19.7071 11.7071C19.3166 12.0976 18.6834 12.0976 18.2929 11.7071L13 6.41421V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V6.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L11.2929 3.29289C11.4804 3.10536 11.7348 3 12 3Z" fill="#ffffff" stroke="white" stroke-width="1"/></svg>'
    }
  }
}}

mixedFiles={{
  button: {
    styles: {
      container: {
        default: {
          width: "1em",
          height: "1em",
          right: "calc(10% + 0.4em)",
          bottom: ".7em",
          borderRadius: "100vmax",
          padding: "0.5em",
          backgroundColor: "rgba(0, 0, 0, 0.1)"
        }
      },
      svg: {
        styles: {
          default: {
            bottom: "0.3em",
            left: "0.4em"
          }
        }
      }
    },
    position: "outside-left"
  }
}}
attachmentContainerStyle={{
  backgroundColor: "rgba(255, 255, 255, 0.6)",
  borderRadius: "5px 5px 0 0",
  border: "1px solid rgba(0,0,0,0.2)",
  top: "-2.6em",
  height: "4em"
}}

[OvidijusParsiunas]

This looks awesome @bruffridge! You are becoming a true master of Deep Chat!

At the moment I am trying to keep the default styling as plain as possible so that devs can tailor it to their preferences. However, would you mind if add this to our design examples?

[bruffridge]

Sure! I edited my first comment with some more code I added yesterday to style the attachmentContainer and attachment button. Thanks for providing so many styling 'hooks' for frontend devs! Gives us a lot of customizability.

[OvidijusParsiunas]

I have tailored your example to the iMessage SMS example to standout in the design examples, like this:

However, when doing this I noticed a small bug in the code where upon using a custom svg for the dropup button stops the user from able to open it up. I have made the fix for it, and it will be going out along with the next release. With that release, I will also include the example.

The release is set to go out sometime this week. :)

[linqingfan]

Great design! May I know if it is possible for all inline styling to be able to be specified in a css file?

[OvidijusParsiunas]

Sorry I don't think I understand your question. If you are asking if it is possible to add the styling using a css file, the answer would be no as deep chat is a shadow element meaning that the parent css will not affect its internals. However, you can overwrite the parent-most styling e.g:

deep-chat {
  background-color: yellow !important;
}

I'm not sure if this was your question, a little bit more context would help. Thanks!

[linqingfan]

Yes, I mean if it is possible chatStyle, submitButtonStyles, textInput style etc can be specified in a css file instead of inline. I even tried the main deep chat styling

#chat-element {
  border-radius: 10px;
  position: fixed;
  bottom: 5%;
  right: 5%;
  z-index: 1;
  width: 30vw;
  height: 30vh;
  background-color: #fafafa;
}

But it didnt work. Seems like what you say is not possible.

[OvidijusParsiunas]

Unfortunately not. Apologies.

[OvidijusParsiunas]

The iMessage example how now been included in the Design Page.