Build and Deploy a Full Stack Realtime Chat Messaging App with Authentication & SMS Notifications

App.css

:root {
    --primary-color: #005fff;
    --primary-color-alpha: #005fff1a;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  #root {
    height: 100%;
  }
  
  .auth__form-container {
    min-height: 100vh;
    display: flex;
    flex-direction: row;
  }
  
  .auth__form-container_fields {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
  
    padding: 2rem;
    background: #005fff;
  }
  
  .auth__form-container_image {
    flex: 3;
    display: flex;
    box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.05);
  }
  
  .auth__form-container_image img {
    width: 100%;
    height: 100%;
  }
  
  .auth__form-container_fields-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  
    padding: 2rem;
    box-shadow: 0px 1px 5px rgb(0 0 0 / 10%);
    border-radius: 5px;
    transition: 0.8s ease;
    background: #fff;
  }
  
  .auth__form-container_fields-content p {
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #05245a;
    font-weight: 900;
  }
  
  .auth__form-container_fields-content_input {
    display: flex;
    flex-direction: column;
    position: relative;
  
    margin: 1rem 0rem;
  }
  
  .auth__form-container_fields-content_input label {
    margin-bottom: 0.45rem;
    color: rgb(61, 79, 88);
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.7px;
    line-height: 1.3;
  }
  
  .auth__form-container_fields-content_input input {
    padding: 0.55rem 0.4rem;
    border: 1px solid rgb(184, 196, 194);
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: all 150ms ease-in-out 0s;
    width: 85%;
    background: #fff;
  }
  
  .auth__form-container_fields-content_input input::placeholder {
    color: #b1b1b1;
    width: 100%;
    font-weight: unset;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .auth__form-container_fields-content_input input:hover {
    border-color: #dcdddd;
  }
  
  .auth__form-container_fields-content_input input:focus,
  .auth__form-container_fields-content_input input:active {
    box-shadow: 0px 0px 0px 1.5px #005fff;
    border-color: #005fff;
  }
  
  .auth__form-container_fields-content_input-password {
    position: absolute;
    right: 13%;
    top: 50%;
    cursor: pointer;
  }
  
  .auth__form-container_fields-content_button {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-start;
  }
  
  .auth__form-container_fields-content_button button {
    border-radius: 4px;
    background: #005fff;
    border: 1px solid #005fff;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    padding: 0.7rem 1.2rem;
    outline: none;
    cursor: pointer;
    transition: 0.3s ease;
  }
  
  .auth__form-container_fields-content_button button:hover {
    background: #0066ff;
  }
  
  .auth__form-container_fields-account {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  
    margin-top: 0.2rem;
  }
  
  .auth__form-container_fields-account p {
    font-size: 14px;
    color: #000;
    font-weight: 500;
  }
  
  .auth__form-container_fields-account span {
    color: #05245a;
    cursor: pointer;
    font-weight: 700;
  }
  
  @media screen and (max-width: 800px) {
    .auth__form-container {
      flex-direction: column-reverse;
    }
  
    .auth__form-container_fields {
      justify-content: flex-start;
    }
  
    .auth__form-container_image {
      height: 100px;
      flex: none;
      box-shadow: none;
    }
  
    .auth__form-container_image img {
      object-fit: cover;
    }
  }
  
  @media screen and (max-width: 375px) {
    .auth__form-container_fields {
      padding: 2rem 0.5rem;
    }
  
    .auth__form-container_fields-content_input input {
      width: 95%;
    }
  
    .auth__form-container_fields-content_input-password {
      right: 3%;
    }
  }
  
  .app__wrapper {
    display: flex;
    flex: 1;
    /* height: 800px; */
    height: 100%;
    /* border-radius: 16px; */
    box-shadow: rgba(0, 0, 0, 0.33) 0px 1px 4px 0px;
  }
  
  .str-chat-channel-list {
    height: fit-content;
    margin-bottom: 8px;
  }
  
  .str-chat-channel {
    height: 100%;
  }
  
  .str-chat__load-more-button {
    display: none;
  }
  
  .str-chat__input-footer {
    display: none;
  }
  
  .str-chat__date-separator {
    margin: 16px 24px;
  }
  
  .str-chat__message-notification {
    background: var(--primary-color);
    cursor: pointer;
  }
  
  @media screen and (max-width: 960px) {
    .str-chat-channel-list.team.light {
      position: unset;
      left: unset;
      top: unset;
      z-index: unset;
      min-height: unset;
      overflow-y: unset;
      box-shadow: unset;
      transition: unset;
    }
  }
  
  .channel-empty__container {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 20px;
  }
  
  .channel-empty__avatars {
    display: flex;
  }
  
  .channel-empty__avatars div:first-child {
    z-index: 3;
  }
  
  .channel-empty__avatars div:nth-child(2) {
    position: relative;
    right: 32px;
    z-index: 2;
  }
  
  .channel-empty__avatars div:nth-child(3) {
    position: relative;
    right: 64px;
    z-index: 1;
  }
  
  .channel-empty__avatars .str-chat__avatar {
    margin-right: 0;
  }
  
  .channel-empty__first {
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 120%;
    color: #2c2c30;
    margin-bottom: 10px;
  }
  
  .channel-empty__first .channel-empty__user-name {
    color: var(--primary-color);
  }
  
  .channel-empty__second {
    font-family: Helvetica Neue, sans-serif;
    font-size: 14px;
    line-height: 120%;
    margin: 0;
    color: #858688;
  }
  
  .channel__container {
    height: 100%;
    width: 100%;
  }
  
  .str-chat__thread {
    z-index: 1;
  }
  
  .str-chat__thread-list .str-chat__message-team {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .str-chat__thread-list .str-chat__message-actions-list button:first-child {
    display: none;
  }
  
  .str-chat__list .str-chat__reverse-infinite-scroll {
    padding-top: 0px;
  }
  
  .str-chat__thread-list .channel-empty__container {
    display: none;
  }
  
  .str-chat__date-separator {
    padding: 20px 40px;
  }
  
  .custom-thread-header {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
  }
  
  .custom-thread-header__left {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }
  
  .custom-thread-header__left-title {
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #2c2c30;
    margin-right: 10px;
  }
  
  .custom-thread-header__left-count {
    font-family: Helvetica Neue, sans-serif;
    font-size: 14px;
    color: #858688;
  }
  
  .close-thread-icon {
    cursor: pointer;
    margin-right: 10px;
  }
  
  .str-chat__list--thread
    .str-chat__message-simple__actions__action--options
    .str-chat__message-actions-box {
    left: initial;
    right: 100%;
    border-radius: var(--border-radius-md);
  }
  
  .channel-list__container {
    display: flex;
    /* height: 800px; */
    height: 100%;
    box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.1);
  }
  
  .channel-list__sidebar {
    width: 72px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      var(--primary-color);
    box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.25);
    /* border-top-left-radius: 16px; */
    /* border-bottom-left-radius: 16px; */
  }
  
  .channel-list__sidebar__icon1 {
    width: 44px;
    height: 44px;
    margin: 14px;
    background: linear-gradient(
        150.64deg,
        rgba(0, 0, 0, 0.1) 12.73%,
        rgba(0, 0, 0, 0) 89.32%
      ),
      #ffffff;
    border-radius: 9999px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.33);
  }
  
  .channel-list__list__wrapper {
    display: flex;
    flex-direction: column;
    background: var(--primary-color);
    width: 240px;
  }
  
  .icon1__inner {
    font-family: Helvetica Neue, sans-serif;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .channel-list__sidebar__icon2 {
    width: 44px;
    height: 44px;
    margin: 14px;
    background: linear-gradient(
        150.64deg,
        rgba(0, 0, 0, 0.1) 12.73%,
        rgba(0, 0, 0, 0) 89.32%
      ),
      #ffffff;
    border-radius: 9999px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.33);
    cursor: pointer;
  }
  
  .icon2__inner {
    font-family: Helvetica Neue, sans-serif;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .channel-list__header {
    padding-left: 16px;
    height: 62px;
  }
  
  .channel-list__header__text {
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
  }
  
  .channel-search__container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #00000033;
  }
  
  .channel-search__input__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid transparent;
    width: 95%;
  }
  
  .channel-search__input__wrapper:focus-within {
    border: 1px solid #fff;
  }
  
  .channel-search__input__icon {
    width: 32px;
    display: flex;
    justify-content: center;
  }
  
  .channel-search__input__text {
    background: none;
    border: none;
    color: #fff;
    font-family: Helvetica Neue, sans-serif;
    font-size: 16px;
    outline: none;
  }
  
  ::placeholder {
    color: rgba(255, 255, 255, 0.66);
    white-space: nowrap;
    width: 150px;
  }
  
  .channel-search__results {
    position: absolute;
    height: fit-content;
    width: 300px;
    background: #fff;
    border: 1px solid #e9e9ea;
    box-sizing: border-box;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    z-index: 10;
    left: 230px;
    top: 16px;
  }
  
  .channel-search__results-header {
    width: fit-content;
    display: flex;
    align-items: center;
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    color: #858688;
    margin-left: 12px;
  }
  
  .channel-search__results-header i {
    font-weight: normal;
    margin-left: 12px;
  }
  
  .channel-search__result-container {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
  }
  
  .channel-search__result-container__focused {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    background: var(--primary-color-alpha);
  }
  
  .channel-search__result-container:hover {
    background: var(--primary-color-alpha);
    cursor: pointer;
  }
  
  .channel-search__result-user {
    display: flex;
    align-items: center;
    margin-left: 12px;
  }
  
  .result-hashtag {
    height: 24px;
    width: 28px;
    background: var(--primary-color);
    border-radius: 24px;
    margin: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    font-size: 14px;
    line-height: 120%;
    color: #ffffff;
  }
  
  .channel-search__result-text {
    width: 100%;
    font-family: Helvetica Neue, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    color: #2c2c30;
  }
  
  .create-channel__container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .create-channel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
    padding-right: 20px;
  }
  
  .create-channel__header p {
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #2c2c30;
    margin-left: 20px;
  }
  
  .create-channel__header svg {
    cursor: pointer;
  }
  
  .channel-name-input__wrapper {
    display: flex;
    flex-direction: column;
    height: 169px;
    padding-left: 20px;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
  }
  
  .channel-name-input__wrapper p {
    font-family: Helvetica Neue, sans-serif;
    font-size: 16px;
    line-height: 120%;
    color: #2c2c30;
    margin-top: 30px;
  }
  
  .channel-name-input__wrapper input {
    font-family: Helvetica Neue, sans-serif;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.5);
    height: 50px;
    width: 540px;
    background: #f7f6f8;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    padding-left: 16px;
  }
  
  .channel-name-input__wrapper input:focus {
    border: 1px solid var(--primary-color);
    outline: none;
  }
  
  .channel-name-input__wrapper input::placeholder {
    font-weight: 300;
    color: rgba(0, 0, 0, 0.5);
  }
  
  .create-channel__button-wrapper {
    height: 82px;
    background: #f7f6f8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom-right-radius: 16px;
  
    padding: 0px 10px;
  }
  
  .create-channel__button-wrapper p {
    background: var(--primary-color);
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 20px;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
  }
  
  .user-list__container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .user-list__header {
    display: flex;
    align-items: center;
    margin: 0px 20px;
    justify-content: space-between;
  }
  
  .user-list__header p {
    font-family: Helvetica Neue, sans-serif;
    font-size: 14px;
    line-height: 17px;
    color: #858688;
    margin-top: 16px;
  }
  
  .user-list__header p:first-child {
    flex: 2;
  }
  
  .user-list__header p:nth-child(2) {
    flex: 0.5;
    text-align: right;
    margin: 0px 20px;
  }
  
  .user-list__message {
    font-family: Helvetica Neue, sans-serif;
    font-size: 16px;
    color: #2c2c30;
    margin: 20px;
  }
  
  .user-item__wrapper {
    display: flex;
    align-items: center;
    margin: 0px 20px;
    justify-content: space-between;
  }
  
  .user-item__wrapper:hover {
    background: #f7f6f8;
    cursor: pointer;
  }
  
  .user-item__name-wrapper {
    display: flex;
    align-items: center;
    flex: 2;
    text-align: left;
  }
  
  .user-item__wrapper p {
    font-family: Helvetica Neue, sans-serif;
    font-size: 14px;
    line-height: 17px;
    color: #2c2c30;
    word-break: break-all;
  }
  
  .user-item__name {
    font-weight: 500;
  }
  
  .user-item__last-active {
    font-weight: 400;
    width: 30%;
    flex: 0.5;
    text-align: right;
  
    margin: 0px 20px;
  }
  
  .user-item__invite-empty {
    height: 28px;
    width: 28px;
    background: #f7f6f8;
    border: 1px solid #dedddf;
    border-radius: 14px;
    box-sizing: border-box;
    margin-left: 2px;
  }
  
  .edit-channel__container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .edit-channel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
    padding-right: 20px;
  }
  
  .edit-channel__header p {
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #2c2c30;
    margin-left: 20px;
  }
  
  .edit-channel__header svg {
    cursor: pointer;
  }
  
  .channel-name-input__wrapper {
    display: flex;
    flex-direction: column;
    height: 169px;
    padding-left: 20px;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
  }
  
  .channel-name-input__wrapper p {
    font-family: Helvetica Neue, sans-serif;
    font-size: 16px;
    line-height: 120%;
    color: #2c2c30;
    margin-top: 30px;
  }
  
  .channel-name-input__wrapper input {
    font-family: Helvetica Neue, sans-serif;
    font-size: 18px;
    color: rgba(0, 0, 0);
    height: 50px;
    width: 90%;
    background: #f7f6f8;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    padding-left: 16px;
  }
  
  .channel-name-input__wrapper input:focus {
    border: 1px solid var(--primary-color);
    outline: none;
  }
  
  .channel-name-input__wrapper input::placeholder {
    font-weight: 300;
    color: rgba(0, 0, 0, 0.5);
  }
  
  .edit-channel__button-wrapper {
    height: 82px;
    background: #f7f6f8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom-right-radius: 16px;
  }
  
  .edit-channel__button-wrapper p {
    background: var(--primary-color);
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 20px;
    color: #ffffff;
    margin-right: 30px;
    border-radius: 8px;
    cursor: pointer;
  }
  
  .team-channel-header__container {
    position: relative;
    height: 62px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: #ffffff;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 16px;
    z-index: 1;
  }
  
  .team-channel-header__channel-wrapper {
    display: flex;
    align-items: center;
  }
  
  .team-channel-header__channel-wrapper svg {
    cursor: pointer;
  }
  
  .team-channel-header__name {
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: #2c2c30;
    margin-right: 8px;
  }
  
  .team-channel-header__name-wrapper {
    flex: 3;
    display: flex;
    align-items: center;
    overflow-x: auto;
    max-width: 500px;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  @media screen and (min-width: 1070px) {
    .team-channel-header__name-wrapper {
      max-width: 700px;
    }
  }
  
  .team-channel-header__name-wrapper::-webkit-scrollbar {
    display: none;
  }
  
  .team-channel-header__name-multi {
    display: flex;
    align-items: center;
    margin-right: 8px;
  }
  
  .team-channel-header__name-multi:nth-child(3) {
    margin-right: 0px;
  }
  
  .team-channel-header__name-wrapper .str-chat__avatar {
    margin-right: 8px;
  }
  
  .team-channel-header__name.user {
    font-weight: 500;
    font-size: 14px;
  }
  
  .team-channel-header__right {
    flex: 0.55;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }
  
  .team-channel-header__right-pin-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .team-channel-header__right svg {
    margin-left: 16px;
    margin-right: 4px;
  }
  
  .team-channel-header__right-text {
    font-family: Helvetica Neue, sans-serif;
    font-size: 14px;
    color: #858688;
  }
  
  .team-channel-list {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .team-channel-list__message {
    color: #ffffff;
    padding: 0 16px;
  }
  
  .team-channel-list__message.loading {
    height: 115px;
  }
  
  .team-channel-list__header {
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .team-channel-list__header svg {
    cursor: pointer;
  }
  
  .team-channel-list__header__title {
    font-family: Helvetica Neue, sans-serif;
    font-size: 13px;
    line-height: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.66);
    margin-bottom: 10px;
  }
  
  .channel-preview__wrapper {
    height: 37px;
    display: flex;
    align-items: center;
  }
  
  .channel-preview__wrapper__selected {
    height: auto;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    font-weight: bold;
    margin-right: 16px;
    cursor: pointer;
    z-index: 2;
  }
  
  .channel-preview__wrapper:hover {
    background: rgba(0, 0, 0, 0.2);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    font-weight: bold;
    margin-right: 16px;
    cursor: pointer;
  }
  
  .channel-preview__item {
    display: flex;
    align-items: center;
    font-family: Helvetica Neue, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 0px 20px;
    height: 100%;
    width: 100%;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  
  .channel-preview__item.multi {
    max-width: 220px;
  }
  
  .channel-preview__item.single .str-chat__avatar {
    margin-right: 12px;
  }
  
  .channel-preview__item.multi .str-chat__avatar {
    margin-right: 0;
  }
  
  .channel-preview__item.multi span:first-child {
    position: relative;
    z-index: 2;
    bottom: 6px;
  }
  
  .channel-preview__item.multi div:nth-child(2) {
    position: relative;
    right: 10px;
    z-index: 1;
    margin-bottom: 0px;
  }
  
  .channel-preview__item.multi p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .str-chat__message-team:hover {
    background: #e9e9ea;
  }
  
  .str-chat__message-team-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .str-chat__message-team-content p {
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 120%;
    color: #000000;
    margin: 0;
    background: none;
  }
  
  .str-chat__message-team:hover .str-chat__message-team-content {
    background: none;
  }
  
  .str-chat__message-team-meta {
    justify-content: flex-start;
    align-items: center;
  }
  
  .str-chat__message-team--bottom time {
    display: none;
  }
  
  .str-chat__message-team--middle time {
    display: none;
  }
  
  .str-chat__message-team-meta time {
    visibility: visible;
    z-index: 2;
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    color: #858688;
    margin-top: 4px;
  }
  
  .str-chat__message-team-author strong {
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 120%;
    color: #858688;
    margin: 0;
    margin-right: 8px;
  }
  
  .str-chat__message-team-content--text {
    border-left: none;
  }
  
  .str-chat__message-team--received {
    padding-left: 20px;
  }
  
  .str-chat__message-replies-count-button {
    z-index: 2;
    display: flex;
    /* justify-content: flex-end; */
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: var(--primary-color);
  }
  
  .str-chat__message-replies-count-button:focus {
    outline: none;
  }
  
  .str-chat__message-team-actions {
    right: -3px;
  }
  
  .str-chat__date-separator-date {
    color: #858688;
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: normal;
  }
  
  .str-chat__avatar-image img.str-chat__avatar-image--loaded {
    display: none;
  }
  
  .str-chat__message-attachment {
    margin-bottom: 0;
  }
  
  .str-chat__message-attachment--image {
    max-width: 375px;
  }
  
  .str-chat__message-attachment-card--title {
    color: var(--primary-color);
  }
  
  .str-chat__message-team .str-chat__message-attachment-card {
    border-radius: 16px;
  }
  
  .str-chat__message-team .str-chat__message-attachment-card--content {
    background: #fff;
  }
  
  ul.str-chat__simple-reactions-list {
    display: flex;
    align-items: center;
    width: fit-content;
    background: #ffffff;
    border: 1px solid #e9e9ea;
    box-sizing: border-box;
    border-radius: 50vw;
    padding: 6px 6px 4px 6px;
    z-index: 3;
  }
  
  ul.str-chat__simple-reactions-list:hover {
    border: 1px solid var(--primary-color);
  }
  
  .str-chat__simple-reactions-list-item span {
    display: flex;
    align-items: center;
  }
  
  .str-chat__message-team-content ul {
    margin-top: 4px;
  }
  
  .emoji-mart-emoji-custom span {
    height: 15px !important;
    width: 15px !important;
  }
  
  .str-chat__simple-reactions-list-item--last-number {
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    color: #2c2c30;
  }
  
  .str-chat__message-attachment-actions-form {
    margin: 0px;
    padding: 10px 0;
    border-top: none;
    border-radius: 16px;
  }
  
  .str-chat__message-attachment-actions-button--primary {
    background: var(--primary-color);
    cursor: pointer;
  }
  
  .str-chat__message-attachment-actions-button--default {
    background: #fff;
    cursor: pointer;
  }
  
  .str-chat__message-attachment-actions-button:focus {
    box-shadow: none;
    border: 2px solid rgba(0, 0, 0, 0.08);
  }
  
  .str-chat__message-attachment-actions-button:hover {
    font-weight: 700;
    border: 1px solid var(--primary-color);
  }
  
  .str-chat__message-team-status {
    display: none;
  }
  
  .str-chat__message-actions-list button:hover {
    color: var(--primary-color);
  }
  
  .emoji-mart-anchor-selected {
    color: var(--primary-color) !important;
  }
  
  .emoji-mart-anchor-bar {
    background: var(--primary-color) !important;
  }
  
  .str-chat__message-team--editing {
    background: #e9e9ea;
    box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.06),
      inset 0 1px 0 0 var(--primary-color), inset 0 -1px 0 0 var(--primary-color);
    padding: 15px 20px;
  }
  
  .str-chat__message-team--editing .str-chat__message-team-form-footer {
    padding: 10px 0 0;
  }
  
  .str-chat__edit-message-form
    .str-chat__message-team-form-footer
    button[type="submit"] {
    color: var(--primary-color);
  }
  
  .str-chat__edit-message-form .str-chat__message-team-form-footer button {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.33);
    font-family: Helvetica Neue, sans-serif;
    font-size: 14px;
  }
  
  .str-chat__edit-message-form .str-chat__message-team-form-footer button:focus {
    outline: none;
  }
  
  .str-chat__edit-message-form textarea {
    box-shadow: 0 0 0 1px var(--primary-color);
  }
  
  .str-chat__edit-message-form textarea:focus {
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
  }
  
  .str-chat__edit-message-form svg {
    display: none;
  }
  
  .str-chat__message-team-content p a {
    color: var(--primary-color);
  }
  
  .pinned-message {
    background: #e6efff;
  }
  
  .unpinned-message {
    background: #fff;
  }
  
  .str-chat__message-team-pin-indicator {
    display: flex;
    align-items: center;
    margin-left: 40px;
    height: 18px;
  }
  
  .str-chat__message-team-pin-indicator div svg {
    fill: #858688;
    font-size: 10px !important;
  }
  
  .str-chat__message-team-pin-indicator div div {
    font-family: Helvetica Neue, sans-serif;
    font-size: 10px !important;
    line-height: 120%;
    color: #858688;
    margin-left: 4px;
  }
  
  .str-chat__reaction-selector {
    background: #ffffff;
    border: 1px solid #e9e9ea;
    box-sizing: border-box;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    border-radius: 99999px;
  }
  
  .str-chat__reaction-selector li {
    font-size: 24px;
  }
  
  .str-chat__reaction-selector li span span {
    height: 24px !important;
    width: 24px !important;
  }
  
  .str-chat__message-team-content--single:not(.str-chat__message-team-content--image)::before {
    display: none;
  }
  
  .team-message-input__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #f7f6f8;
    padding: 15px 20px 28px;
    width: 100%;
  }
  
  .team-message-input__wrapper.thread-open {
    border-bottom-right-radius: 0px;
  }
  
  .team-message-input__input {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
  }
  
  .team-message-input__input:focus-within {
    border-color: var(--primary-color);
  }
  
  .team-message-input__top {
    min-height: 43px;
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  
  .team-message-input__wrapper .giphy-icon__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 24px;
    width: 63px;
    background: var(--primary-color);
    border-radius: 12px;
    margin-left: 8px;
  }
  
  .team-message-input__wrapper .giphy-icon__text {
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    line-height: 8px;
    color: #ffffff;
  }
  
  .team-message-input__bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.05);
  }
  
  .team-message-input__button {
    position: relative;
    width: 0;
    right: 32px;
    cursor: pointer;
  }
  
  .team-message-input__input:focus-within .team-message-input__button path {
    fill: var(--primary-color);
    fill-opacity: 1;
  }
  
  .team-message-input__wrapper .str-chat__textarea textarea {
    display: flex;
    background: #fff;
    border: none;
    outline: none;
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  
  .team-message-input__wrapper .str-chat__textarea textarea:focus {
    border: none;
    outline: none;
    box-shadow: none;
    background: #fff;
  }
  
  .team-message-input__wrapper .str-chat__textarea textarea::placeholder {
    color: rgba(0, 0, 0, 0.2);
  }
  
  .team-message-input__icons {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .team-message-input__icons div:first-child {
    margin: 0 5px;
  }
  
  .team-message-input__icons div:nth-child(3) {
    margin-left: 5px;
  }
  
  .team-message-input__icons svg {
    width: 36px;
  }
  
  .team-message-input__icons svg:hover path {
    fill: var(--primary-color);
    fill-opacity: 1;
  }
  
  .team-message-input__icons svg:hover {
    cursor: pointer;
  }
  
  .icon-divider {
    width: 1px;
    height: 40px;
    background: rgba(204, 204, 204, 0.5);
  }
  
  .team-message-input__wrapper .str-chat__input--emojipicker {
    z-index: 3;
    position: absolute;
    bottom: 112px;
    left: 20px;
    width: 338px;
  }
  
  .emoji-mart .emoji-mart-emoji:focus {
    outline: none;
  }
  
  div.rfu-dropzone:focus {
    outline: none;
  }
  
  .rfu-image-previewer {
    flex: none;
    margin-left: 12px;
  }
  
  .rfu-image-previewer__image {
    margin-bottom: 0;
  }
  
  div.rta__autocomplete.str-chat__emojisearch {
    z-index: 10;
    position: relative;
    width: 100%;
    background: #fff;
    margin: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  
  .rta__entity--selected {
    background: var(--primary-color);
  }
  
  .str-chat__slash-command:hover {
    background: var(--primary-color);
    cursor: pointer;
  }
  
  .rta__list-header {
    font-family: Helvetica Neue, sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #2c2c30;
    mix-blend-mode: normal;
    opacity: 0.9;
  }
  
  .str-chat__thread {
    background: #fff;
    box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  }
  
  .str-chat__thread-header {
    height: 62px !important;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  }
  
  .str-chat__thread-header-details {
    display: flex;
    height: 62px !important;
    align-items: center;
  }
  
  .str-chat__thread-header-details strong {
    font-family: Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #2c2c30;
    margin-right: 10px;
  }
  
  .str-chat__thread-header-details small {
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 17px;
    color: #858688;
  }
  
  .str-chat__thread .str-chat__square-button {
    border-radius: 20px;
    height: 35px;
    width: 35px;
  }
  
  .str-chat__square-button svg {
    fill: var(--primary-color);
  }
  
  .str-chat__square-button:hover {
    border: 1px solid var(--primary-color);
    cursor: pointer;
  }
  
  .str-chat__square-button:focus {
    outline: none;
  }
  
  .str-chat__thread-start {
    padding: 0;
    margin: 20px 0 0 0;
    font-size: 0;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .str-chat .str-chat__list--thread {
    padding: 0px;
  }
  
  .str-chat .str-chat__list--thread .str-chat__reverse-infinite-scroll {
    padding-top: 0px;
  }
  
  .str-chat__thread-list {
    top: 62px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    height: auto;
  }
  
  .str-chat__thread-list .str-chat__message-team {
    padding: 10px;
  }
  
  .thread-message-input__wrapper {
    display: flex;
    align-items: center;
    padding: 15px 20px 28px;
    width: 100%;
  }
  
  .thread-message-input__wrapper .giphy-icon__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 24px;
    width: 63px;
    background: var(--primary-color);
    border-radius: 12px;
    margin-left: 8px;
  }
  
  .thread-message-input__wrapper .giphy-icon__text {
    font-family: Helvetica Neue, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    line-height: 8px;
    color: #ffffff;
  }
  
  .thread-message-input__input {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  .thread-message-input__input:focus-within {
    border-color: var(--primary-color);
  }
  
  .thread-message-input__button {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    height: 44px;
    width: 41px;
  }
  
  .thread-message-input__input:focus-within .thread-message-input__button path {
    fill: var(--primary-color);
    fill-opacity: 1;
  }
  
  .thread-message-input__wrapper .str-chat__textarea textarea {
    display: flex;
    align-items: center;
    background: #fff;
    border: none;
    outline: none;
    font-family: Helvetica Neue, sans-serif;
    font-size: 15px;
    line-height: 10px;
  }
  
  .thread-message-input__wrapper .str-chat__textarea textarea:focus {
    border: none;
    outline: none;
    box-shadow: none;
    background: #fff;
  }
  
  .thread-message-input__wrapper .str-chat__textarea textarea::placeholder {
    color: rgba(0, 0, 0, 0.2);
  }
  
  .thread-message-input__icons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 30px;
    padding-right: 6px;
  }
  
  .thread-message-input__icons svg:hover path {
    fill: var(--primary-color);
    fill-opacity: 1;
  }
  
  .thread-message-input__icons svg:hover {
    cursor: pointer;
  }
  
  .thread-message-input__wrapper .str-chat__input--emojipicker {
    z-index: 3;
    top: 183px;
    right: 299px;
    width: 338px;
  }
  
  .emoji-mart .emoji-mart-emoji:focus {
    outline: none;
  }
  
  .team-channerl-header_menu-icon {
    display: none;
  }
  
  .channerl-list__container-toggle {
    display: none;
    height: 50px;
    width: 50px;
    background: #005fff;
    position: absolute;
    right: -2%;
    top: 50%;
    border-radius: 50%;
    z-index: 2;
  }
  
  .channel-list__container-responsive {
    display: none;
    height: 100%;
    box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.1);
    position: absolute;
    width: 90%;
    top: 0%;
    z-index: 5;
    transition: 0.8s ease;
  }
  
  .str-chat__input-flat {
    width: 100%;
    padding: 10px;
  }
  
  @media screen and (max-width: 960px) {
    .channel-list__container {
      display: none;
    }
  
    .team-channerl-header_menu-icon {
      display: flex;
    }
  
    .team-channel-header__container {
      height: 70px;
    }
  
    .team-channel-header__name-wrapper {
      height: 100%;
      max-width: unset;
    }
  
    .team-channel-header__name-multi {
      margin-right: 8px;
      align-items: center;
      flex-direction: column;
    }
  
    .team-channel-header__name.user {
      font-size: 10px;
      margin: 5px;
      text-align: center;
    }
  
    .team-channel-header__right {
      display: flex;
      padding-left: 10px;
    }
  
    .channel-list__container-responsive {
      display: flex;
    }
  
    .channel-list__list__wrapper {
      width: 100%;
    }
  
    .channerl-list__container-toggle {
      display: flex;
    }
  
    .channel-search__input__wrapper {
      width: 90%;
      padding-left: 10px;
      justify-content: flex-start;
    }
  
    .channel-search__input__text {
      width: inherit;
    }
  
    .channel-preview__item.multi {
      width: 80%;
    }
  
    .channel-search__results {
      top: 100%;
      left: 5%;
    }
  }
  
  @media screen and (max-width: 650px) {
    .channerl-list__container-toggle {
      right: -3%;
    }
  }
  
  @media screen and (max-width: 400px) {
    .channel-preview__item.multi {
      width: 150px;
    }
  
    .channerl-list__container-toggle {
      right: -5%;
    }
  }
  
  @media screen and (max-width: 320px) {
    .channel-list__sidebar {
      display: none;
    }
  }
  

ChannelInner.jsx

import React, { useState } from 'react';
import { MessageList, MessageInput, Thread, Window, useChannelActionContext, Avatar, useChannelStateContext, useChatContext } from 'stream-chat-react';

import { ChannelInfo } from '../assets';

export const GiphyContext = React.createContext({});

const ChannelInner = ({ setIsEditing }) => {
  const [giphyState, setGiphyState] = useState(false);
  const { sendMessage } = useChannelActionContext();
  
  const overrideSubmitHandler = (message) => {
    let updatedMessage = {
      attachments: message.attachments,
      mentioned_users: message.mentioned_users,
      parent_id: message.parent?.id,
      parent: message.parent,
      text: message.text,
    };
    
    if (giphyState) {
      updatedMessage = { ...updatedMessage, text: `/giphy ${message.text}` };
    }
    
    if (sendMessage) {
      sendMessage(updatedMessage);
      setGiphyState(false);
    }
  };

  return (
    <GiphyContext.Provider value={{ giphyState, setGiphyState }}>
      <div style={{ display: 'flex', width: '100%' }}>
        <Window>
          <TeamChannelHeader setIsEditing={setIsEditing} />
          <MessageList />
          <MessageInput overrideSubmitHandler={overrideSubmitHandler} />
        </Window>
        <Thread />
      </div>
    </GiphyContext.Provider>
  );
};

const TeamChannelHeader = ({ setIsEditing }) => {
    const { channel, watcher_count } = useChannelStateContext();
    const { client } = useChatContext();
  
    const MessagingHeader = () => {
      const members = Object.values(channel.state.members).filter(({ user }) => user.id !== client.userID);
      const additionalMembers = members.length - 3;
  
      if(channel.type === 'messaging') {
        return (
          <div className='team-channel-header__name-wrapper'>
            {members.map(({ user }, i) => (
              <div key={i} className='team-channel-header__name-multi'>
                <Avatar image={user.image} name={user.fullName || user.id} size={32} />
                <p className='team-channel-header__name user'>{user.fullName || user.id}</p>
              </div>
            ))}
  
            {additionalMembers > 0 && <p className='team-channel-header__name user'>and {additionalMembers} more</p>}
          </div>
        );
      }
  
      return (
        <div className='team-channel-header__channel-wrapper'>
          <p className='team-channel-header__name'># {channel.data.name}</p>
          <span style={{ display: 'flex' }} onClick={() => setIsEditing(true)}>
            <ChannelInfo />
          </span>
        </div>
      );
    };
  
    const getWatcherText = (watchers) => {
      if (!watchers) return 'No users online';
      if (watchers === 1) return '1 user online';
      return `${watchers} users online`;
    };
  
    return (
      <div className='team-channel-header__container'>
        <MessagingHeader />
        <div className='team-channel-header__right'>
          <p className='team-channel-header__right-text'>{getWatcherText(watcher_count)}</p>
        </div>
      </div>
    );
  };

  export default ChannelInner;

ResultsDropdown.jsx

import React from 'react';
import { Avatar, useChatContext } from 'stream-chat-react';

const channelByUser = async ({ client, setActiveChannel, channel, setChannel }) => {
  const filters = {
    type: 'messaging',
    member_count: 2,
    members: { $eq: [client.user.id, client.userID] },
  };

  const [existingChannel] = await client.queryChannels(filters);

  if (existingChannel) return setActiveChannel(existingChannel);

  const newChannel = client.channel('messaging', { members: [channel.id, client.userID] });
  
  setChannel(newChannel)

  return setActiveChannel(newChannel);
};

const SearchResult = ({ channel, focusedId, type, setChannel, setToggleContainer }) => {
  const { client, setActiveChannel } = useChatContext();

  if (type === 'channel') {
    return (
      <div
        onClick={() => {
          setChannel(channel)
          if(setToggleContainer) {
            setToggleContainer((prevState) => !prevState)   
          }
        }}
        className={focusedId === channel.id ? 'channel-search__result-container__focused' : 'channel-search__result-container' }
      >
        <div className='result-hashtag'>#</div>
        <p className='channel-search__result-text'>{channel.data.name}</p>
      </div>
    );
  }

  return (
    <div
      onClick={async () => {
        channelByUser({ client, setActiveChannel, channel, setChannel })
        if(setToggleContainer) {
            setToggleContainer((prevState) => !prevState)   
        }
      }}
      className={focusedId === channel.id ? 'channel-search__result-container__focused' : 'channel-search__result-container' }
    >
      <div className='channel-search__result-user'>
        <Avatar image={channel.image || undefined} name={channel.name} size={24} />
        <p className='channel-search__result-text'>{channel.name}</p>
      </div>
    </div>
  );
};

const ResultsDropdown = ({ teamChannels, directChannels, focusedId, loading, setChannel, setToggleContainer }) => {

  return (
    <div className='channel-search__results'>
      <p className='channel-search__results-header'>Channels</p>
      {loading && !teamChannels.length && (
        <p className='channel-search__results-header'>
          <i>Loading...</i>
        </p>
      )}
      {!loading && !teamChannels.length ? (
        <p className='channel-search__results-header'>
          <i>No channels found</i>
        </p>
      ) : (
        teamChannels?.map((channel, i) => (
          <SearchResult
            channel={channel}
            focusedId={focusedId}
            key={i}
            setChannel={setChannel}
            type='channel'
            setToggleContainer={setToggleContainer}
          />
        ))
      )}
      <p className='channel-search__results-header'>Users</p>
      {loading && !directChannels.length && (
        <p className='channel-search__results-header'>
          <i>Loading...</i>
        </p>
      )}
      {!loading && !directChannels.length ? (
        <p className='channel-search__res ults-header'>
          <i>No direct messages found</i>
        </p>
      ) : (
        directChannels?.map((channel, i) => (
          <SearchResult
            channel={channel}
            focusedId={focusedId}
            key={i}
            setChannel={setChannel}
            type='user'
            setToggleContainer={setToggleContainer}
          />
        ))
      )}
    </div>
  );
};

export default ResultsDropdown;

Wow, Thanks Adrian, This is Absolutely Amazing

### what we do this error means ?

Hey Mdodolng!
Look at your link and change "500" to "5000", because 500 isn't an available port that you can use for your project.
Fix it and let me know if it works well.
Take care

thschmitz I think you can add this code in your file from server/controllers/auth.js:

// TODO: IMPORTANT TO CALL THIS YOUR SERVER
require('dotenv').config();

Hey Mdodolng!
Look at your link and change "500" to "5000", because 500 isn't an available port that you can use for your project.
Fix it and let me know if it works well.
Take care

i tried it it's not a probelm

thschmitz I think you can add this code in your file from server/controllers/auth.js:

// TODO: IMPORTANT TO CALL THIS YOUR SERVER require('dotenv').config();

it's not problem i think
becouse it have in code

thschmitz I think you can add this code in your file from server/controllers/auth.js:
// TODO: IMPORTANT TO CALL THIS YOUR SERVER require('dotenv').config();

it's not problem i think becouse it have in code

I just had the same issue!!!

I fix this issue after the change in client/component/Auth
const URL = 'https://localhost:5000/auth'; to
const URL = 'http://localhost:5000/auth';
check for your back was runing in the same https or http (in case in front httpS but back runing in http - you will have this issue )

hi there! I am unable to fix this, I am guessing this is caused by using team light somewhere wrong. Please let me know where I might be wrong

Please what can i use to replace the MessageTeam

You can use MessageSimple component in place of MessageTeam I think. Since by default message ui uses this component. Hope it helps!

Please help me to remove this issue . Thanks

hi there! I am unable to fix this, I am guessing this is caused by using team light somewhere wrong. Please let me know where I might be wrong

hello, i know this is late but i figured out how to tweak this on my own just today (started this project recently). in the CSS, look for ".team-channel-list" and add a background color of your choice, and add height: 100%; in it and for the message, u can change the color in ".channel-preview__item". if you also want to change the background color for the channel list, u can type in ".channel-list__list__wrapper". hope this helps

note: if someone's also having trouble with this specific problem and find this message but dont know how to search for the code, hold crtl + f then type the name of the code

The errors mentioned are originating from the ChannelInner component