Support for gaming theme about stream-chat-react HOT 3 CLOSED

  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>
  );

.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;
}