quickblox-react-ui-kit 0.4.6-beta.2 → 0.4.6-beta.3

package/src/Presentation/themes/styles/_theme_light.scss

@@ -1,38 +1,38 @@
-@import 'theme_colors_scheme';
-
-:root {
-  --primary: #{$primary-500};
-  --color-background: #{$primary-a-100};
-  --color-background-modal: #{$primary-100};
-  --color-background-overlay: #{$secondary-900};
-  --color-divider: #{$primary-50};
-  --color-font: #{$secondary-900};
-  --color-icon: #{$primary-500};
-  --color-media-icon: #{$primary-a-100};
-  --color-default-hover: #{$primary-700};
-  --color-default-active: #{$primary-900};
-
-  --color-background-info: #{$primary-100};
-  --color-border-active: #{$primary-200};
-  --tertiary-elements: #{$secondary-300};
-  --main-elements: #{$primary-500};
-  --toast-color: #{$secondary-800};
-  --secondary-elements: #{$secondary-500};
-  --input-elements: #{$secondary-500};
-  --disabled-elements: #{$secondary-100};
-  --field-border: #{$secondary-200};
-  --main-text: #{$secondary-900};
-  --secondary-text: #{$secondary-300};
-  --caption: #{$secondary-200};
-  --main-background: #{$primary-a-100};
-  --secondary-background: #{$primary-a-100}; // #{$primary-50};
-  --secondary-background-modal: #{$background-overlay-light};
-  --incoming-background: #{$secondary-50};
-  --outgoing-background: #{$primary-50};
-  --dropdown-background: #{$primary-a-100};
-  --chat-input: #{$primary-a-200};
-  --divider: #{$primary-50};
-  --error: #{$error-500};
-  --error-secondary: #{$error-200};
-  --hightlight: #{$highlight};
-}
+@import 'theme_colors_scheme';
+
+:root {
+  --primary: #{$primary-500};
+  --color-background: #{$primary-a-100};
+  --color-background-modal: #{$primary-100};
+  --color-background-overlay: #{$secondary-900};
+  --color-divider: #{$primary-50};
+  --color-font: #{$secondary-900};
+  --color-icon: #{$primary-500};
+  --color-media-icon: #{$primary-a-100};
+  --color-default-hover: #{$primary-700};
+  --color-default-active: #{$primary-900};
+
+  --color-background-info: #{$primary-100};
+  --color-border-active: #{$primary-200};
+  --tertiary-elements: #{$secondary-300};
+  --main-elements: #{$primary-500};
+  --toast-color: #{$secondary-800};
+  --secondary-elements: #{$secondary-500};
+  --input-elements: #{$secondary-500};
+  --disabled-elements: #{$secondary-100};
+  --field-border: #{$secondary-200};
+  --main-text: #{$secondary-900};
+  --secondary-text: #{$secondary-300};
+  --caption: #{$secondary-200};
+  --main-background: #{$primary-a-100};
+  --secondary-background: #{$primary-a-100}; // #{$primary-50};
+  --secondary-background-modal: #{$background-overlay-light};
+  --incoming-background: #{$secondary-50};
+  --outgoing-background: #{$primary-50};
+  --dropdown-background: #{$primary-a-100};
+  --chat-input: #{$primary-a-200};
+  --divider: #{$primary-50};
+  --error: #{$error-500};
+  --error-secondary: #{$error-200};
+  --hightlight: #{$highlight};
+}

package/src/Presentation/themes/styles/_variables.scss

@@ -1,54 +1,54 @@
-@import "theme_light";
-@import "theme_dark";
-
-$qb-min-width-screen-desktop: 980px;
-
-$qb-max-width-screen: 980px;
-
-$qb-max-width-message-view-container-desktop: 680px;
-$qb-max-width-message-view-container-mobile: 345px;
-
-$qb-max-width-message-bubble-desktop: 480px;
-$qb-max-width-message-bubble-mobile: 170px;
-
-$qb-max-width-image-message-desktop: 240px;
-$qb-max-width-image-message-mobile: 150px;
-
-$qb-max-width-audio-message-desktop: 300px;
-$qb-max-width-audio-message-mobile: 150px;
-
-$qb-max-width-dialog-list-desktop: 320px;
-$qb-max-width-dialog-list-mobile: 100%;
-
-$create-dialog-container-width: 380px;
-
-
-
-/* Fonts */
-:root{
-  --title-title-large: 500 20px/24px "Roboto", sans-serif;
-  --title-title-medium: 500 16px/24px "Roboto", sans-serif;
-  --title-title-small: 500 14px/20px "Roboto", sans-serif;
-  --label-label-large: 500 14px/20px "Roboto", sans-serif;
-  --label-label-medium: 500 12px/16px "Roboto", sans-serif;
-  --label-label-small: 500 11px/16px "Roboto", sans-serif;
-  --body-body-large: 400 16px/24px "Roboto", sans-serif;
-  --body-body-medium: 400 14px/20px "Roboto", sans-serif;
-  --body-body-small: 400 12px/16px "Roboto", sans-serif;
-  --button-fab: 500 14px/16px "Roboto", sans-serif;
-  --button-default: 700 14px/16px "Roboto", sans-serif;
-  --ui-kit-header: 500 48px "Roboto Mono", sans-serif;
-  --ui-kit-title: 500 32px "Roboto Mono", sans-serif;
-  --ui-kit-body: 400 17px "Roboto Mono", sans-serif;
-
-/* Width */
-  --max-width-message-bubble: #{$qb-max-width-message-bubble-desktop};
-  --max-width-message-view-container: #{$qb-max-width-message-view-container-desktop};
-  --max-width-image-message: #{$qb-max-width-image-message-desktop};
-  --max-width-audio-message: #{$qb-max-width-audio-message-desktop};
-  --max-width-dialog-list: #{$qb-max-width-dialog-list-desktop};
-  --min-width-screen-desktop: #{$qb-min-width-screen-desktop};
-}
-
-
-
+@import "theme_light";
+@import "theme_dark";
+
+$qb-min-width-screen-desktop: 980px;
+
+$qb-max-width-screen: 980px;
+
+$qb-max-width-message-view-container-desktop: 680px;
+$qb-max-width-message-view-container-mobile: 345px;
+
+$qb-max-width-message-bubble-desktop: 480px;
+$qb-max-width-message-bubble-mobile: 170px;
+
+$qb-max-width-image-message-desktop: 240px;
+$qb-max-width-image-message-mobile: 150px;
+
+$qb-max-width-audio-message-desktop: 300px;
+$qb-max-width-audio-message-mobile: 150px;
+
+$qb-max-width-dialog-list-desktop: 320px;
+$qb-max-width-dialog-list-mobile: 100%;
+
+$create-dialog-container-width: 380px;
+
+
+
+/* Fonts */
+:root{
+  --title-title-large: 500 20px/24px "Roboto", sans-serif;
+  --title-title-medium: 500 16px/24px "Roboto", sans-serif;
+  --title-title-small: 500 14px/20px "Roboto", sans-serif;
+  --label-label-large: 500 14px/20px "Roboto", sans-serif;
+  --label-label-medium: 500 12px/16px "Roboto", sans-serif;
+  --label-label-small: 500 11px/16px "Roboto", sans-serif;
+  --body-body-large: 400 16px/24px "Roboto", sans-serif;
+  --body-body-medium: 400 14px/20px "Roboto", sans-serif;
+  --body-body-small: 400 12px/16px "Roboto", sans-serif;
+  --button-fab: 500 14px/16px "Roboto", sans-serif;
+  --button-default: 700 14px/16px "Roboto", sans-serif;
+  --ui-kit-header: 500 48px "Roboto Mono", sans-serif;
+  --ui-kit-title: 500 32px "Roboto Mono", sans-serif;
+  --ui-kit-body: 400 17px "Roboto Mono", sans-serif;
+
+/* Width */
+  --max-width-message-bubble: #{$qb-max-width-message-bubble-desktop};
+  --max-width-message-view-container: #{$qb-max-width-message-view-container-desktop};
+  --max-width-image-message: #{$qb-max-width-image-message-desktop};
+  --max-width-audio-message: #{$qb-max-width-audio-message-desktop};
+  --max-width-dialog-list: #{$qb-max-width-dialog-list-desktop};
+  --min-width-screen-desktop: #{$qb-min-width-screen-desktop};
+}
+
+
+

package/src/Presentation/ui-components/Avatar/Avatar.scss

@@ -1,58 +1,58 @@
-@import '../../themes/styles/mixins';
-
-.avatar {
-  @include applyBorderBox;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-
-  overflow: hidden;
-  border-radius: 50%;
-  background-color: var(--disabled-elements);
-  color: var(--secondary-text);
-
-  svg {
-    height: 100%;
-    width: 100%;
-    
-    fill: var(--secondary-text);
-    padding: 10px;
-  }
-
-  &__image {
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-  }
-
-  &--xs {
-    width: 32px;
-    height: 32px;
-  }
-
-  &--sm {
-    width: 36px;
-    height: 36px;
-  }
-
-  &--md {
-    width: 40px;
-    height: 40px;
-  }
-
-  &--lg {
-    width: 56px;
-    height: 56px;
-  }
-
-  &--xl {
-    width: 64px;
-    height: 64px;
-  }
-
-  &--xxl {
-    width: 80px;
-    height: 80px;
-  }
-}
+@import '../../themes/styles/mixins';
+
+.avatar {
+  @include applyBorderBox;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  overflow: hidden;
+  border-radius: 50%;
+  background-color: var(--disabled-elements);
+  color: var(--secondary-text);
+
+  svg {
+    height: 100%;
+    width: 100%;
+    
+    fill: var(--secondary-text);
+    padding: 10px;
+  }
+
+  &__image {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  &--xs {
+    width: 32px;
+    height: 32px;
+  }
+
+  &--sm {
+    width: 36px;
+    height: 36px;
+  }
+
+  &--md {
+    width: 40px;
+    height: 40px;
+  }
+
+  &--lg {
+    width: 56px;
+    height: 56px;
+  }
+
+  &--xl {
+    width: 64px;
+    height: 64px;
+  }
+
+  &--xxl {
+    width: 80px;
+    height: 80px;
+  }
+}

package/src/Presentation/ui-components/Badge/Badge.scss

@@ -1,23 +1,23 @@
-.badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  height: 20px;
-  border-radius: 30px;
-  padding: 2px 6px;
-
-  font-family: 'Roboto';
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0.5px;
-
-  background-color: var(--main-elements);
-  color: var(--secondary-background);
-
-  &--mute {
-    background-color: var(--disabled-elements);
-    color: var(--secondary-background);
-  }
-}
+.badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 20px;
+  border-radius: 30px;
+  padding: 2px 6px;
+
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.5px;
+
+  background-color: var(--main-elements);
+  color: var(--secondary-background);
+
+  &--mute {
+    background-color: var(--disabled-elements);
+    color: var(--secondary-background);
+  }
+}

package/src/Presentation/ui-components/Button/Button.scss

@@ -1,133 +1,133 @@
-@import '../../themes/styles/mixins';
-
-.button {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px;
-
-  height: 32px;
-
-  border-radius: 4px;
-
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 16px;
-  letter-spacing: 0.4px;
-
-  cursor: pointer;
-  border: none;
-  outline: none;
-  @include applyBorderBox;
-
-  &--default {
-    color: var(--secondary-background);
-    background-color: var(--main-elements);
-
-    &:hover {
-      background-color: var(--color-default-hover);
-    }
-
-    &:focus {
-      outline: 2px solid var(--color-background-info);
-    }
-
-    &:active {
-      background-color: var(--color-default-hover);
-      color: var(--color-background-info);
-    }
-
-    &.button--disabled {
-      cursor: not-allowed;
-      background-color: var(--disabled-elements);
-      color: var(--secondary-text);
-    }
-  }
-
-  &--outlined {
-    background-color: inherit;
-    border: 1px solid var(--main-elements);
-    color: var(--main-elements);
-
-    &:hover {
-      background-color: var(--outgoing-background);
-    }
-
-    &:focus {
-      border: 2px solid var(--color-background-info);
-    }
-
-    &:active {
-      border: 1px solid var(--main-elements);
-      color: var(--main-elements);
-    }
-
-    &.button--disabled {
-      cursor: not-allowed;
-      border: 1px solid var(--disabled-elements);
-      color: var(--disabled-elements);
-    }
-  }
-
-  &--danger {
-    background-color: var(--error);
-    color: var(--secondary-background);
-
-    &:focus {
-      outline: 2px solid var(--error-secondary);
-    }
-
-    &:active {
-      color: var(--error-secondary);
-    }
-
-    &.button--disabled {
-      cursor: not-allowed;
-      background-color: var(--disabled-elements);
-      color: var(--secondary-text);
-    }
-  }
-
-  &--text {
-    background-color: inherit;
-    color: var(--main-elements);
-
-    &:focus {
-      outline: 2px solid var(--color-background-info);
-    }
-
-    &:active {
-      color: var(--color-default-hover);
-    }
-
-    &.button--disabled {
-      cursor: not-allowed;
-      color: var(--disabled-elements);
-    }
-  }
-
-  &__loader {
-    &--default {
-      fill: var(--secondary-background);
-    }
-
-    &--outlined {
-      fill: var(--main-elements);
-    }
-
-    &--danger {
-      fill: var(--secondary-background);
-    }
-
-    &--text {
-      fill: var(--disabled-elements);
-    }
-  }
-}
+@import '../../themes/styles/mixins';
+
+.button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 16px;
+
+  height: 32px;
+
+  border-radius: 4px;
+
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+
+  cursor: pointer;
+  border: none;
+  outline: none;
+  @include applyBorderBox;
+
+  &--default {
+    color: var(--secondary-background);
+    background-color: var(--main-elements);
+
+    &:hover {
+      background-color: var(--color-default-hover);
+    }
+
+    &:focus {
+      outline: 2px solid var(--color-background-info);
+    }
+
+    &:active {
+      background-color: var(--color-default-hover);
+      color: var(--color-background-info);
+    }
+
+    &.button--disabled {
+      cursor: not-allowed;
+      background-color: var(--disabled-elements);
+      color: var(--secondary-text);
+    }
+  }
+
+  &--outlined {
+    background-color: inherit;
+    border: 1px solid var(--main-elements);
+    color: var(--main-elements);
+
+    &:hover {
+      background-color: var(--outgoing-background);
+    }
+
+    &:focus {
+      border: 2px solid var(--color-background-info);
+    }
+
+    &:active {
+      border: 1px solid var(--main-elements);
+      color: var(--main-elements);
+    }
+
+    &.button--disabled {
+      cursor: not-allowed;
+      border: 1px solid var(--disabled-elements);
+      color: var(--disabled-elements);
+    }
+  }
+
+  &--danger {
+    background-color: var(--error);
+    color: var(--secondary-background);
+
+    &:focus {
+      outline: 2px solid var(--error-secondary);
+    }
+
+    &:active {
+      color: var(--error-secondary);
+    }
+
+    &.button--disabled {
+      cursor: not-allowed;
+      background-color: var(--disabled-elements);
+      color: var(--secondary-text);
+    }
+  }
+
+  &--text {
+    background-color: inherit;
+    color: var(--main-elements);
+
+    &:focus {
+      outline: 2px solid var(--color-background-info);
+    }
+
+    &:active {
+      color: var(--color-default-hover);
+    }
+
+    &.button--disabled {
+      cursor: not-allowed;
+      color: var(--disabled-elements);
+    }
+  }
+
+  &__loader {
+    &--default {
+      fill: var(--secondary-background);
+    }
+
+    &--outlined {
+      fill: var(--main-elements);
+    }
+
+    &--danger {
+      fill: var(--secondary-background);
+    }
+
+    &--text {
+      fill: var(--disabled-elements);
+    }
+  }
+}

package/src/Presentation/ui-components/CheckBox/CheckBox.scss

@@ -1,10 +1,10 @@
-.checkbox {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  border-radius: 4px;
-  padding: 4px;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-}
+.checkbox {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 4px;
+  padding: 4px;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+}