@sendbird/uikit-react 3.3.5 → 3.5.0-rc.0

package/dist/index.css

@@ -58,6 +58,138 @@
 .sendbird-theme--dark .sendbird-openchannel-conversation-header__left__cover-image--icon {
   background-color: var(--sendbird-dark-background-300);
 }
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700&display=swap');
+
+.sb-message-template__action {
+  cursor: pointer;
+}
+.sb-message-template__parent {
+  font-family: 'Roboto';
+}
+.sendbird-theme--light
+.sb-message-template__box {
+  background-color: #eee;
+}
+.sendbird-theme--dark
+.sb-message-template__box {
+  background-color: #2c2c2c;
+}
+
+.sendbird-theme--light
+.sb-message-template__text {
+  color: rgba(0, 0, 0, 0.88);
+}
+.sendbird-theme--dark
+.sb-message-template__text {
+  color: rgba(255, 255, 255, 0.88);
+}
+.sb-message-template__text {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+  text-align: left;
+}
+
+.sendbird-theme--light
+.sb-message-template__text-button {
+  background-color: #e0e0e0;
+  color: #742ddd;
+}
+.sendbird-theme--dark
+.sb-message-template__text-button {
+  background-color: #393939;
+  color: #c2a9fa;
+}
+.sb-message-template__text-button {
+  height: 36px;
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+  text-align: center;
+  /* opacity: 0.8; */
+}
+
+.sb-message-template__text-button:hover {
+  opacity: 1;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+}
+
+.sb-message-template__text-button,
+.sb-message-template__image-button {
+  cursor: pointer;
+  border-style: none;
+}
+
+.sb-message-template__parent {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.sendbird-create-open-channel-ui {
+  position: relative;
+  display: inline-flex;
+}
+
+.sendbird-create-open-channel-ui__profile-input {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section {
+  position: relative;
+  margin-top: 16px;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+}
+.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+}
+.sendbird-theme--light .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
+  background-color: var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
+  background-color: var(--sendbird-dark-background-400);
+}
+.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__button {
+  position: relative;
+  margin-left: 18px;
+  display: inline-flex;
+}
+.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__name-section {
+  position: relative;
+  margin-top: 8px;
+  display: inline-flex;
+  flex-direction: row;
+}
 .sendbird-open-channel-list,
 .sendbird-open-channel-list-ui {
   position: relative;
@@ -150,60 +282,76 @@
 .sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
   background-color: var(--sendbird-dark-background-500);
 }
-.sendbird-create-open-channel-ui {
-  position: relative;
-  display: inline-flex;
+.sendbird-notification-channel__message-wrap {
+  padding-left: 48px;
+  margin-right: 16px;
+  box-sizing: border-box;
+  /**
+   * 1. Modify unknown message to be visually similar with other platforms
+   */
 }
-
-.sendbird-create-open-channel-ui__profile-input {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: flex-start;
+.sendbird-notification-channel__message-wrap .sendbird-unknown-message-item-body {
   width: 100%;
-  height: 100%;
-  box-sizing: border-box;
 }
-.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section {
+.sendbird-notification-channel__message-wrap .sendbird-unknown-message-item-body__description {
+  white-space: pre-line;
+}
+.sendbird-theme--light .sendbird-notification-channel__message-wrap .sendbird-unknown-message-item-body__description {
+  color: var(--sendbird-light-onlight-01);
+}
+.sendbird-theme--dark .sendbird-notification-channel__message-wrap .sendbird-unknown-message-item-body__description {
+  color: var(--sendbird-dark-ondark-01);
+}
+
+.sendbird-notification-channel__message-wrap-header {
   position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 4px;
   margin-top: 16px;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
 }
-.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
+
+.sendbird-notification-channel__message-caption {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 120px;
 }
-.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
+
+.sendbird-notification-channel__message-date-wrap {
   position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
 }
-.sendbird-theme--light .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
-  background-color: var(--sendbird-light-background-200);
+
+.sendbird-notification-channel__unread {
+  position: absolute;
+  left: -10px;
+  top: 8px;
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  background-color: #259C72;
 }
-.sendbird-theme--dark .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
-  background-color: var(--sendbird-dark-background-400);
+
+.sendbird-notification-channel__channel-icon-wrap {
+  position: absolute;
+  left: -32px;
+  top: 12px;
 }
-.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__button {
-  position: relative;
-  margin-left: 18px;
-  display: inline-flex;
+
+.sendbird-notification-channel__channel-icon {
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  padding-top: 4px;
+  padding-left: 6px;
+  background-color: #bdbdbd;
 }
-.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__name-section {
-  position: relative;
-  margin-top: 8px;
-  display: inline-flex;
-  flex-direction: row;
+
+.sendbird-theme--dark .sendbird-notification-channel__channel-icon-hash .icon-channels_svg__fill {
+  fill: rgba(0, 0, 0, 0.88);
 }
 .sendbird-open-channel-preview {
   position: relative;
@@ -324,6 +472,22 @@
   text-overflow: ellipsis;
   word-break: keep-all;
 }
+.sendbird-notification-channel {
+  height: 100%;
+}
+.sendbird-theme--light .sendbird-notification-channel {
+  background-color: var(--sendbird-light-background-50);
+  border: 1px solid var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-notification-channel {
+  background-color: var(--sendbird-dark-background-600);
+  border: 1px solid var(--sendbird-dark-ondark-04);
+}
+.sendbird-notification-channel__list {
+  height: 100%;
+  overflow-y: scroll;
+  width: 100%;
+}
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
 :root {
   --sendbird-light-primary-500: #491389;
@@ -1058,6 +1222,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 9999999;
 }
 
 .sendbird-modal__backdrop--clickoutside {
@@ -2515,7 +2680,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 780px;
+  max-width: calc(100vw - 600px);
 }
 .sendbird--mobile-mode .sendbird-chat-header .sendbird-chat-header__left__title {
   max-width: calc(100vw - 240px);
@@ -3696,10 +3861,12 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-theme--dark .sendbird-unknown-message-item-body.mouse-hover.incoming, .sendbird-theme--dark .sendbird-unknown-message-item-body:hover.incoming {
   background-color: var(--sendbird-dark-background-400);
 }
-.sendbird-unknown-message-item-body .sendbird-unknown-message-item-body__header {
+
+.sendbird-unknown-message-item-body__header {
   display: block;
 }
-.sendbird-unknown-message-item-body .sendbird-unknown-message-item-body__description {
+
+.sendbird-unknown-message-item-body__description {
   display: block;
 }
 .sendbird-quote-message {