stream-chat-angular 2.20.2 → 3.0.0-beta.10

package/src/assets/styles/scss/_base.scss

@@ -0,0 +1,206 @@
+.str-chat {
+  box-sizing: border-box;
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: inherit;
+    font-family: var(--second-font);
+  }
+}
+
+.clearfix {
+  clear: both;
+}
+
+.messenger-chat {
+  &.str-chat {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-family: var(--second-font);
+    height: 100vh;
+    margin: 0;
+    flex: 1 0 100%;
+
+    .str-chat {
+      &__container {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+      }
+
+      &__main-panel {
+        width: 100%;
+        min-width: 250px;
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: var(--sm-p) var(--sm-p) 0 var(--xs-p);
+      }
+    }
+  }
+}
+
+.str-chat {
+  height: 100vh;
+  font-family: var(--second-font);
+  color: var(--black);
+
+  &.messaging,
+  &.commerce {
+    background-color: var(--grey-gainsboro);
+
+    &.dark {
+      background-color: var(--dark-grey);
+    }
+  }
+
+  &.team {
+    &.dark {
+      background: var(--dark-grey);
+    }
+  }
+
+  &.livestream {
+    &.dark {
+      background: var(--dark-grey);
+    }
+  }
+}
+
+/* declare a font faces for our Emoji Replacement font, based on the default font used by Stream Chat React */
+
+$emoji-flag-unicode-range: U+1F1E6-1F1FF;
+
+/* png based woff for most browsers */
+@font-face {
+  font-family: ReplaceFlagEmojiPNG;
+  src: url('#{$assetsPath}/NotoColorEmoji-flags.woff2') format('woff2');
+  /* using the unicode-range attribute to limit the reach of the Flag Emoji web font to only flags */
+  unicode-range: $emoji-flag-unicode-range;
+}
+
+/* svg based for firefox */
+@font-face {
+  font-family: ReplaceFlagEmojiSVG;
+  src: url('#{$assetsPath}/EmojiOneColor.woff2') format('woff2');
+  unicode-range: $emoji-flag-unicode-range;
+}
+
+.str-chat--windows-flags {
+  .str-chat__textarea__textarea,
+  .str-chat__message-text-inner *,
+  .str-chat__emoji-item--entity,
+  .emoji-mart-emoji-native * {
+    font-family: ReplaceFlagEmojiPNG, var(--second-font), sans-serif;
+    font-display: swap;
+  }
+}
+
+@-moz-document url-prefix('') {
+  .str-chat--windows-flags {
+    .str-chat__textarea__textarea,
+    .str-chat__message-text-inner *,
+    .str-chat__emoji-item--entity,
+    .emoji-mart-emoji-native * {
+      font-family: ReplaceFlagEmojiSVG, var(--second-font), sans-serif;
+      font-display: swap;
+    }
+  }
+}
+
+.str-chat-channel-list {
+  float: left;
+}
+
+.str-chat-channel {
+  max-height: 100vh;
+
+  .str-chat__container {
+    height: 100%;
+    display: flex;
+
+    .str-chat__main-panel,
+    .str-chat-angular__main-panel-inner {
+      height: 100%;
+      width: 100%;
+      min-width: 250px;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+
+      &--hideOnThread {
+        display: none;
+      }
+    }
+
+    .rfu-dropzone {
+      width: 100%;
+    }
+  }
+
+  &.messaging {
+    .str-chat__main-panel {
+      padding: var(--sm-p) var(--xs-p) 0 0;
+    }
+
+    @media screen and (max-width: 960px) {
+      .str-chat__main-panel {
+        padding: var(--xxs-p) var(--xxs-p) 0;
+      }
+    }
+  }
+
+  &.team {
+    .str-chat {
+      &__container {
+        display: flex;
+      }
+    }
+  }
+
+  &.commerce {
+    .str-chat {
+      &__main-panel {
+        width: 100%;
+      }
+
+      &__container {
+        background: var(--white95);
+      }
+    }
+
+    &.dark {
+      .str-chat__container {
+        background: var(--dark-grey);
+        box-shadow: 0 10px 31px 0 var(--black50);
+      }
+    }
+  }
+}
+
+.str-chat.dark {
+  .emoji-mart {
+    background: var(--dark-grey);
+    border: var(--dark-grey);
+  }
+
+  .emoji-mart-category-label span {
+    background: var(--dark-grey);
+    color: var(--white);
+  }
+
+  .emoji-mart-search {
+    input {
+      background: var(--dark-grey);
+      color: var(--white);
+    }
+
+    button svg {
+      fill: var(--white);
+    }
+  }
+}

package/src/assets/styles/scss/_variables.scss

@@ -0,0 +1,158 @@
+/* fonts */
+/* https://systemfontstack.com/ */
+$system-stack-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
+  Cantarell, 'Helvetica Neue', sans-serif;
+$main-font: #{$system-stack-font};
+$second-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+$base-font-weight: 400;
+$heavy-font-weight: 700;
+
+/* colors */
+$primary-color: #ff00ff;
+$secondary-color: #006cff;
+
+$dt-bg-team: #1d1f22;
+
+$border-color: #00000014;
+
+$black: #000000;
+$white: #ffffff;
+$grey: #7a7a7a;
+$darken-grey: #343434;
+$lighten-black: #808080;
+$lighten-grey: #858585;
+
+/* miscellaneous */
+$assetsPath: '../assets';
+$border-radius: 16px;
+
+:root {
+  /* fonts */
+  --main-font: #{$main-font};
+  --second-font: #{$second-font};
+
+  /* font size */
+
+  --xs-font: 10px;
+  --sm-font: 12px;
+  --md-font: 14px;
+  --lg-font: 16px;
+  --xl-font: 22px;
+  --xxl-font: 26px;
+  --xxxl-font: 32px;
+
+  /* fonts weight */
+  --font-weight-regular: #{$base-font-weight}; //400
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: #{$heavy-font-weight}; //700
+
+  /* colors */
+  --primary-color: #{$secondary-color}; // this reassignment is to maintain backwards compatibility with the old scss variables
+  --primary-color-faded: #006cff5c;
+
+  --magenta: #{$primary-color};
+  --red: #ff0000;
+  --faded-red: #d0021b1a;
+  --blue: #026afa;
+  --faded-blue: #cfe3ff;
+
+  --dt-bg-team: #{$dt-bg-team};
+
+  --border-color: #{$border-color};
+
+  --lighten-black: #{$lighten-black};
+
+  --lighten-grey: #{$lighten-grey};
+
+  --light-grey: #ebebeb;
+  --grey: #{$grey};
+  --dark-grey: #{$darken-grey};
+
+  --green: #28ca42;
+  --faded-green: #02d0021a;
+
+  //-------------------------------White
+  --white: #{$white};
+  --white5: #ffffff0d;
+  --white10: #ffffff1a;
+  --white20: #ffffff33;
+  --white30: #ffffff4d;
+  --white40: #ffffff66;
+  --white50: #ffffff80;
+  --white60: #ffffff99;
+  --white70: #ffffffb3;
+  --white80: #ffffffcc;
+  --white90: #ffffffe6;
+  --white95: #fffffff2;
+
+  //-------------------------------Black
+  --black: #{$black};
+  --black5: #0000000d;
+  --black10: #0000001a;
+  --black20: #00000033;
+  --black30: #0000004d;
+  --black40: #00000066;
+  --black50: #00000080;
+  --black60: #00000099;
+  --black70: #000000b3;
+  --black80: #000000cc;
+  --black90: #000000e6;
+  --black95: #000000f2;
+
+  /* border-radius */
+  --border-radius: #{$border-radius};
+  --border-radius-sm: calc(var(--border-radius) / 4);
+  --border-radius-md: calc(var(--border-radius) / 2);
+  --border-radius-round: 999px;
+
+  --spacing-unit: 8px; // .5rem
+
+  /* padding */
+  --xxs-p: calc(var(--spacing-unit) / 2); // 4px
+  --xs-p: var(--spacing-unit); // 8px
+  --sm-p: calc(var(--spacing-unit) * 2); // 16px Base
+  --md-p: calc(var(--spacing-unit) * 3); // 24px
+  --lg-p: calc(var(--spacing-unit) * 4); // 32px
+  --xl-p: calc(var(--spacing-unit) * 5); // 40px
+  --xxl-p: calc(var(--spacing-unit) * 8); // 64px
+
+  /* margin */
+  --xxs-m: calc(var(--spacing-unit) / 2); // 4px
+  --xs-m: var(--spacing-unit); // 8px
+  --sm-m: calc(var(--spacing-unit) * 2); // 16px Base
+  --md-m: calc(var(--spacing-unit) * 3); // 24px
+  --lg-m: calc(var(--spacing-unit) * 4); // 32px
+  --xl-m: calc(var(--spacing-unit) * 5); // 40px
+  --xxl-m: calc(var(--spacing-unit) * 8); // 64px
+
+  /* miscellaneous */
+  --assetsPath: '../assets';
+
+  /* accent colors */
+  --accent_blue: #005fff;
+  --accent_green: #20e070;
+  --accent_red: #ff3742;
+
+  /* base colors */
+
+  --bg-gradient-end: #f7f7f7;
+  --bg-gradient-start: #fcfcfc;
+  --blue-alice: #e9f2ff;
+  --border: #00000014; // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
+  --button-background: #ffffff;
+  --button-text: #005fff;
+  --grey-gainsboro: #dbdbdb;
+  --grey-whisper: #ecebeb;
+  --highlight: #fbf4dd;
+  --modal-shadow: #00000099; // 99 = 60% opacity; x=0, y= 1, radius=4
+  --overlay: #00000033; // 33 = 20% opacity
+  --overlay-dark: #00000099; // 99 = 60% opacity
+  --shadow-icon: #00000040; // 40 = 25% opacity; x=0, y=0, radius=4
+  --targetedMessageBackground: #fbf4dd; // dark mode = #302D22
+  --transparent: transparent;
+  --white-smoke: #f2f2f2;
+  --white-snow: #fcfcfc;
+
+  --modal-overlay-color: rgba(0, 0, 0, 0.89);
+}

package/src/assets/styles/scss/index.scss

@@ -0,0 +1,50 @@
+// Setup
+@import './_variables.scss';
+@import './base.scss';
+
+// External dependencies (copied from libraries to rectify built file path discrepancies)
+@import './vendor/emoji-mart.scss'; // copy from '../../node_modules/emoji-mart/css/emoji-mart.css'
+@import './vendor/mml-react.scss'; // copy from '../../node_modules/mml-react/dist/styles/index.css'
+@import './vendor/react-file-utils.scss'; // copy from '../../node_modules/react-file-utils/dist/index.css'
+@import './vendor/react-image-gallery.scss'; // copy from '../../node_modules/react-image-gallery/styles/css/image-gallery.css'
+
+// Components
+@import './ActionsBox.scss';
+@import './AttachmentActions.scss';
+@import './Attachment.scss';
+@import './Avatar.scss';
+@import './Audio.scss';
+@import './Card.scss';
+@import './ChannelHeader.scss';
+@import './ChannelList.scss';
+@import './ChannelListMessenger.scss';
+@import './ChannelPreview.scss';
+@import './ChannelSearch.scss';
+@import './ChatDown.scss';
+@import './EventComponent.scss';
+@import './DateSeparator.scss';
+@import './EditMessageForm.scss';
+@import './Gallery.scss';
+@import './LoadingChannels.scss';
+@import './LoadingIndicator.scss';
+@import './LoadMoreButton.scss';
+@import './Message.scss';
+@import './MessageActions.scss';
+@import './MessageCommerce.scss';
+@import './MessageInput.scss';
+@import './MessageInputFlat.scss';
+@import './MessageNotification.scss';
+@import './MessageList.scss';
+@import './MessageTeam.scss';
+@import './MessageLivestream.scss';
+@import './MessageRepliesCountButton.scss';
+@import './Modal.scss';
+@import './ReactionList.scss';
+@import './ReactionSelector.scss';
+@import './SendButton.scss';
+@import './SimpleReactionsList.scss';
+@import './SmallMessageInput.scss';
+@import './Thread.scss';
+@import './TypingIndicator.scss';
+@import './Tooltip.scss';
+@import './VirtualMessage.scss';