Support for gaming theme

[jonasbarsten]

According to your docs you support both "gaming light" and "gaming dark".

Could you provide a quick guide on how to implement that?

[jaapbakker88]

Hi @jonasbarsten right now we don't have these themes developed yet, that is an error in our docs I'm very sorry. I'll remove it and close this issue for now, but subscribe to updates on the repo to stay up to date with our releases.

[jonasbarsten]

I see, thanks for answering.

I've used the Sketch-template and created the design in HTML and CSS, any guidelines for how to start to implement it with the library?

.js

  return (
    <div className="ChatWrapper">
      <div className="Chat">
        <div className="Legend">
          <span className="legendItem">Username</span>
          <div className="legendInput">
            <input
              placeholder="Username ..."
              type="text" 
            />
          </div>
        </div>
        <div className="MessagesPanel">
          {messages.map((message, messageIndex) => {
            return (
              <div className="ConversationMessageView" key={messageIndex}>
                <img src="/img/test-user-picture.jpg" className="UserPicture" />
                <div className="content">
                  <span className="date">14:04</span>
                  <span className="userName">{message.payload.username}: </span>
                  <span className="text">{message.payload.message}</span>
                </div>
              </div>
            );
          })};
        </div>
        <div className="MessageInput">
          <div className="Composer">
            <input
              type="text"
              placeholder="Write here ..."
            />
          </div>
          <div className="AddEmoji">
            <Smile />
          </div>
          <div className="ChannelStatus">
            <span className="online">235 online</span>
            <span className="typing">Brandon is typing...</span>
          </div>
        </div>
      </div>
    </div>
  );

.css

.Chat {
  width: 360px;
  height: 928px;
  box-shadow: 0 10px 31px rgba(0, 0, 0, 0.5);
  background-color: rgba(19, 20, 23, 0.97);
  position: relative;
}

.Legend {
  color: white;
  width: 360px;
  height: 35px;
  background-color: rgba(51, 246, 245, 0.08);
  padding-left: 20px;
}

.Legend .legendItem {
  color: #ffffff;
  font-family: "Helvetica Neue";
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
  margin-top: 11px;
}

.legendInput {
  display: inline-block;
  margin-left: 6px;
  border-radius: 8px;
  border: 1px solid white;
}

.legendInput input {
  background: transparent;
  border: none;
  color: white;
  margin-left: 5px;
}

.legendInput input::placeholder {
  opacity: 0.6;
  font-family: "Helvetica Neue";
  font-size: 14px;
}

.MessageInput {
  width: 360px;
  height: 82px;
  background-color: rgba(29, 29, 29, 0.93);
  position: absolute;
  bottom: 0;
}

.Composer {
  width: 324px;
  height: 36px;
  position: absolute;
  top: 14px;
  left: 18px;
  border-radius: 8px;
  border: 1px solid white;
}

.Composer input {
  height: 100%;
  width: 294px;
  background: transparent;
  border: none;
  margin-left: 5px;
  color: white;
}

.Composer input::placeholder {
  opacity: 0.6;
  font-family: "Helvetica Neue";
  font-size: 14px;
}

.ChannelStatus {
  width: 324px;
  height: 14px;
  position: absolute;
  bottom: 9px;
  left: 17px;
}

.ChannelStatus .online {
  float: left;
  color: #10e014;
  font-family: "Helvetica Neue";
  font-size: 11px;
}

.ChannelStatus .typing {
  color: #0076ff;
  font-family: "Helvetica Neue";
  font-size: 11px;
  float: right;
}

.AddEmoji {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 25px;
  right: 25px;
}

.AddEmoji svg {
  height: 100%;
  width: 100%;
  position: absolute;
  color: white;
}

.MessagesPanel {
  margin-top: 11px;
  margin-left: 18px;
  height: auto;
  overflow: auto;
}

.ConversationMessageView {
  width: 323px;
  margin-bottom: 5px;
}

.UserPicture {
  width: 25px;
  height: 25px;
  border-radius: 2px;
  margin-top: 6px;
  margin-right: 8px;
}

.ConversationMessageView .content {
  width: 290px;
  display: -webkit-inline-box;
}

.ConversationMessageView .date {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  margin-right: 4px;
}

.ConversationMessageView .userName {
  color: #d0021b;
  font-family: "Helvetica Neue";
  font-weight: 700;
  margin-right: 4px;
  font-size: 14px;
}

.ConversationMessageView .text {
  color: #ffffff;
  font-family: "Helvetica Neue";
  font-size: 13px;
  line-height: 18px;
}

[jaapbakker88]

@jonasbarsten the theme prop adds certain classes to your root component we use to overwrite certain styles. So what you want to do is replace our styles with your own and adjust the classes.