quickblox-react-ui-kit 0.4.6-beta.4 → 0.4.7

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

@@ -15,9 +15,8 @@
   order: 1;
   flex-grow: 0;
 
-  font-family: 'Roboto';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 500;
   font-size: 14px;
   line-height: 16px;
   letter-spacing: 0.4px;
@@ -28,7 +27,7 @@
   @include applyBorderBox;
 
   &--default {
-    color: var(--secondary-background);
+    color: var(--system);
     background-color: var(--main-elements);
 
     &:hover {
@@ -53,8 +52,8 @@
 
   &--outlined {
     background-color: inherit;
-    border: 1px solid var(--main-elements);
-    color: var(--main-elements);
+    border: 1px solid var(--main-text);
+    color: var(--main-text);
 
     &:hover {
       background-color: var(--outgoing-background);
@@ -78,7 +77,7 @@
 
   &--danger {
     background-color: var(--error);
-    color: var(--secondary-background);
+    color: var(--system);
 
     &:focus {
       outline: 2px solid var(--error-secondary);

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

@@ -1,4 +1,9 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps, ReactElement } from 'react';
+import React, {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  ReactElement,
+} from 'react';
+
 import cn from 'classnames';
 
 import Loader from '../Loader/Loader';
@@ -39,7 +44,7 @@ export default function Button({
     >
       {loading && !disabled ? (
         <Loader
-          className={cn('button__loader', `button__loader--${variant}`)}
+          className={cn('qb-button__loader', `qb-button__loader--${variant}`)}
         />
       ) : (
         children

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

@@ -5,6 +5,29 @@
   border-radius: 4px;
   padding: 4px;
   justify-content: center;
+}
+
+.checkbox-field > input {
+  z-index: -1;
+  opacity: 0;
+}
+
+.checkbox-field .icon-checkmark {
+  width: 18px;
+  height: 18px;
+  fill: var(--main-elements);
+
+}
+
+.checkbox-field .icon-check {
   width: 18px;
   height: 18px;
+  fill: var(--secondary-elements);
+}
+
+.checkbox-field.disabled .icon-check{
+  fill: var(--disabled-elements);
+  cursor: not-allowed;
 }
+
+

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

@@ -1,4 +1,7 @@
+import React from 'react';
 import './CheckBox.scss';
+import cn from 'classnames';
+import { CheckOffSvg, CheckOnSvg } from '../../icons';
 
 interface CheckBoxProps {
   disabled: boolean;
@@ -12,12 +15,21 @@ export default function CheckBox({
   onChange,
 }: CheckBoxProps) {
   return (
-    <input
-      className="qb-checkbox"
-      type="checkbox"
-      checked={checked}
-      disabled={disabled}
-      onChange={() => onChange?.(!checked)}
-    />
+    <label
+      className={cn('checkbox-field', {
+        disabled,
+      })}
+    >
+      {checked ? (
+        <CheckOnSvg className="icon-checkmark" />
+      ) : (
+        <CheckOffSvg className="icon-check" />
+      )}
+      <input
+        type="checkbox"
+        onChange={() => onChange?.(!checked)}
+        disabled={disabled}
+      />
+    </label>
   );
 }

package/src/Presentation/ui-components/DialogBanner/DialogBanner.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ReactComponent as DownSvg } from '../../icons/navigation/down.svg';
 import './DialogBanner.scss';
 

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

@@ -27,7 +27,7 @@
       justify-content: space-between;
 
       &-title {
-        font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
+        font: var(--label-label-medium);
         color: var(--main-text, #0b1b0f);
         overflow: hidden;
         white-space: nowrap;
@@ -36,7 +36,7 @@
 
       &-date {
         color: var(--tertiary-elements, #636d78);
-        font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+        font: var(--label-label-small);
       }
     }
 
@@ -49,7 +49,7 @@
       &-message {
         color: var(--secondary-text, #636d78);
         text-align: left;
-        font: var(--body-body-small, 400 12px/16px "Roboto", sans-serif);
+        font: var(--body-body-small);
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 2;

package/src/Presentation/ui-components/DialogItemPreview/DialogItemPreview.tsx

@@ -1,11 +1,11 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import cn from 'classnames';
 import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import './DialogItemPreview.scss';
 
 export type DialogItemPreviewProps = {
-  avatar: ReactElement;
-  title: string;
+  avatar?: ReactElement;
+  title?: string;
   active?: boolean;
   date?: string;
   lastMessage?: ReactElement | string;

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

@@ -9,7 +9,7 @@
   height: 100%;
   z-index: 100;
   position: fixed;
-  background-color: rgba(19, 29, 40, 0.8);
+  background-color: var(--color-background-modal);
 
   &--disable {
     position: absolute;
@@ -34,7 +34,7 @@
     border-radius: 4px;
     background-color: var(--main-background);
     box-shadow: 0 9px 15px 0 rgba(0, 0, 0, 0.04),
-      0 9px 46px 0 rgba(0, 0, 0, 0.08);
+    0 9px 46px 0 rgba(0, 0, 0, 0.08);
 
     @media (max-width: 767px) {
       width: 300px;
@@ -44,13 +44,16 @@
   &__header {
     margin-bottom: 28px;
     padding: 0px !important;
+
+    svg {
+      fill: var(--main-text);
+    }
   }
 
   &__close {
     width: 24px;
     height: 24px;
-
-    fill: var(--secondary-elements);
+    fill: var(--main-text);
     cursor: pointer;
   }
 }

package/src/Presentation/ui-components/DialogWindow/DialogWindow.tsx

@@ -31,7 +31,7 @@ export default function DialogWindow({
       <div className="dialog-window__content">
         <Header
           className="dialog-window__header"
-          onGoBack={onClose}
+          // onGoBack={onClose}
           title={title}
         >
           <CloseSvg onClick={onClose} className="dialog-window__close" />

package/src/Presentation/ui-components/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   ReactElement,
   useEffect,
   useRef,

package/src/Presentation/ui-components/Dropdown/DropdownOption.tsx

@@ -1,4 +1,5 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
+
 import cn from 'classnames';
 
 export interface Option {

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

@@ -14,10 +14,17 @@
     width: 24px;
     height: 24px;
     flex-shrink: 0;
+
+    svg {
+      width: 24px;
+      height: 24px;
+      fill: var(--main-elements);
+    }
   }
 
   &__back {
-    color: var(--main-elements);
+    color: var(--main-text);
+    fill: var(--main-text);
   }
 
   &__body {
@@ -47,7 +54,7 @@
   &__title {
     color: var(--main-text, #0b1b0f);
     text-align: left;
-    font: var(--title-title-medium);
+    font: var(--title-title-large);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

package/src/Presentation/ui-components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { Children, ReactElement } from 'react';
+import React, { Children, ReactElement } from 'react';
 import cn from 'classnames';
 import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import { BackSvg } from '../../icons';

package/src/Presentation/ui-components/Loader/Loader.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import cn from 'classnames';
 
 import { LoaderSvg } from '../../icons';

package/src/Presentation/ui-components/Message/Bubble/AudioBubble/AudioBubble.scss

@@ -39,6 +39,7 @@
   align-items: flex-end;
   justify-content: flex-start;
   position: relative;
+  height: 12px;
 
   &__rectangle {
     background: var(--main-elements, #636d78);

package/src/Presentation/ui-components/Message/Bubble/FileBubble/FileBubble.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import './FileBubble.scss';
 import FileUrl from '../../FileUrl/FileUrl';
 

package/src/Presentation/ui-components/Message/Bubble/ImageBubble/ImageBubble.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import './ImageBubble.scss';
 
 interface ImageBubbleProps {

package/src/Presentation/ui-components/Message/Bubble/TextBubble/TextBubble.scss

@@ -1,18 +1,26 @@
 .bubble-content-text {
   overflow-wrap: break-word;
   max-width: calc(var(--max-width-message-bubble) - 20px);
+  padding: 0 12px 0 12px;
 
-  color: var(--main-tex, #0b1b0f);
+  color: var(--main-text, #0b1b0f);
   text-align: left;
   font: var(--body-body-medium, 400 14px/20px "Roboto-Regular", sans-serif);
 }
 
+.reply-forward-message {
+  .bubble-content-text {
+    color: var(--secondary-text);
+  }
+}
+
 .text-bubble-background {
 
   &__incoming {
     background: var(--incoming-background, #e4e6e8);
-    border-radius: 22px 22px 22px 0px;
-    padding: 8px 12px 8px 12px;
+    color: var(--main-text);
+    border-radius: 22px 22px 22px 0;
+    padding: 8px 0 8px 0;
     display: flex;
     flex-direction: row;
     gap: 10px;
@@ -25,6 +33,7 @@
 
   &__outgoing {
     background: var(--outgoing-background, #E7EFFF);
+    color: var(--main-text);
     border-radius: 22px 22px 0px 22px;
     padding: 8px 12px 8px 12px;
     display: flex;
@@ -34,6 +43,7 @@
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
+    width: 100%;
   }
 
 }

package/src/Presentation/ui-components/Message/Bubble/TextBubble/TextBubble.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import {
   HighLightLink,

package/src/Presentation/ui-components/Message/Bubble/VideoBubble/VideoBubble.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import './VideoBubble.scss';
 
 interface VideoBubbleProps {

package/src/Presentation/ui-components/Message/FileUrl/FileUrl.scss

@@ -33,9 +33,6 @@
         justify-content: center;
         width: 24px;
         height: 24px;
-        position: absolute;
-        left: 4px;
-        top: 4px;
       }
     }
   }

package/src/Presentation/ui-components/Message/FileUrl/FileUrl.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ReactComponent as FileSvg } from '../../../icons/media/file.svg';
 import './FileUrl.scss';
 

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

@@ -48,7 +48,6 @@
   }
 
   &__outgoing {
-    background: var(--main-background, #ffffff);
     padding: 0px 8px 8px 16px;
     display: flex;
     flex-direction: row;
@@ -79,6 +78,11 @@
         justify-content: flex-start;
         flex-shrink: 0;
         position: relative;
+        width: 100%;
+      }
+      .reply-forward-message {
+        color: var(--secondary-text);
+        width: 100%;
       }
     }
   }

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

@@ -2,6 +2,10 @@ $message-view-container-header-min-height: 64px;
 $message-view-container-chat-input-min-height: 54px;
 .chat-container{
   width: 100%;
+  &__send-icon {
+    display: flex;
+    align-items: center;
+  }
   &__icon{
     width: 24px;
     height: 24px;
@@ -120,7 +124,7 @@ $message-view-container-chat-input-min-height: 54px;
   justify-content: flex-start;
 }
 .type-message textarea{
-  color: var(--input-elements);
+  color: var(--main-text);
   font: var(--body-body-large);
   border: none;
   outline: none;

package/src/Presentation/ui-components/MessageInput/MessageInput.tsx

@@ -124,7 +124,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
           />
         )}
         {!isVoiceMessage && !loading && (
-          <div>
+          <div className="chat-container__send-icon">
             <SendSvg
               className={cn('chat-container__icon__send', {
                 'chat-container__icon--mute': loading,

package/src/Presentation/ui-components/MessageInput/VoiceRecordingProgress/VoiceRecordingProgress.tsx

@@ -49,7 +49,7 @@ const VoiceRecordingProgress: React.FC<VoiceRecordingProgressProps> = ({
       stopTimer();
     }, longRec * 1000);
 
-    if (timerId === undefined) {
+    if (!timerId) {
       timerId = setInterval(() => {
         setCurrentTime(Date.now());
       }, 1000);

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

@@ -5,26 +5,26 @@
 
   background: var(--incoming-background);
   border-radius: 30px;
-  padding: 2px 8px 2px 8px;
+  padding: 2px 8px;
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: center;
   color: var(--secondary-text);
   text-align: center;
-  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  font: var(--label-label-small);
+
 }
 
 .system-message-chat-banner {
-    padding: 2px 8px 2px 8px;
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    color: var(--secondary-text);
-    text-align: center;
-    font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  padding: 2px 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--secondary-text);
+  text-align: center;
+  font: var(--label-label-small);
 }
-

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

@@ -24,6 +24,11 @@
     margin-bottom: 16px;
 
     fill: var(--caption);
+
+    svg {
+      width: 52px;
+      height: 52px;
+    }
   }
 
   &__retry {

package/src/Presentation/ui-components/Placeholder/Placeholder.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import cn from 'classnames';
 
 import { RefreshSvg } from '../../icons';

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

@@ -11,11 +11,14 @@
     background: var(--incoming-background, #e4e6e8);
     border-radius: 8px;
     flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
   }
 
   &__icon {
     fill: var(--caption);
-    padding: 6px;
+    width: 16px;
+    height: 16px;
   }
 
   &__name {

package/src/Presentation/ui-components/PreviewFileMessage/PreviewFileMessage.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import cn from 'classnames';
 import { TextDocumentSvg, AudioFileSvg, PlaySvg } from '../../icons';
 import './PreviewFileMessage.scss';

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

@@ -2,7 +2,6 @@
 
 .settings-item {
   @include applyBorderBox;
-  background-color: var(--color-background);
 
   &__body {
     display: flex;
@@ -65,5 +64,10 @@
   &__icon {
     width: 24px;
     height: 24px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   }
 }

package/src/Presentation/ui-components/SettingsItem/SettingsItem.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import cn from 'classnames';
 
 import { DownSvg } from '../../icons';

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

@@ -4,7 +4,6 @@
   @include applyBorderBox;
 
   &__label {
-    font-family: 'Roboto';
     font-weight: 400;
     font-size: 14px;
     line-height: 20px;
@@ -12,7 +11,6 @@
   }
 
   &__wrapper {
-    background-color: var(----color-background);
 
     display: flex;
     align-items: center;
@@ -29,6 +27,9 @@
 
   &__icon {
     margin-right: 6px;
+    padding: 0;
+    display: flex;
+    align-items: center;
   }
 
   &__input {
@@ -36,11 +37,12 @@
     border: none;
     outline: none;
 
-    font-family: 'Roboto';
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0.15px;
+    background: var(--main-background);
+    color: var(--color-font);
 
     &:disabled {
       background-color: transparent;

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

@@ -1,4 +1,4 @@
-.container {
+.qb-container {
   width: 25%;
 }
 
@@ -7,7 +7,7 @@
   padding: 4px 12px;
   opacity: 60% !important;
   border-radius: 4px;
-  background-color: var(--toast-color);
+  background-color: var(--caption);
 
   &__body {
     padding: 0;
@@ -16,7 +16,7 @@
     font-size: 12px;
     line-height: 16px;
     letter-spacing: 0.5px;
-    color: var(--main-background);
+    color: var(--secondary-elements);
     text-align: center;
   }
 }

package/src/Presentation/ui-components/Toast/ToastProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, createContext } from 'react';
+import React, { ReactNode, createContext } from 'react';
 import { ToastContainer } from 'react-toastify';
 
 import 'react-toastify/dist/ReactToastify.css';
@@ -14,7 +14,7 @@ export default function ToastProvider({ children }: ToastProps) {
   return (
     <ToastContext.Provider value={undefined}>
       <ToastContainer
-        className="container"
+        className="qb-container"
         position="top-center"
         autoClose={3000}
         bodyClassName="qb-toast__body"

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

@@ -6,7 +6,8 @@
   height: 56px;
   padding: 8px 19px 8px 16px;
   gap: 16px;
-  background-color: var(--color-background);
+  border-bottom: 1px solid var(--divider);
+
 
   &--disabled {
     cursor: not-allowed;
@@ -22,12 +23,19 @@
 
   &__name {
     margin-left: 16px;
-
-    font-family: 'Roboto';
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0.15px;
     color: var(--main-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 180px;
+
+
+    @media only screen and (max-width: 980px) {
+      width: 130px;
+    }
   }
 }

package/src/Presentation/ui-components/UserListItem/UserListItem.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import cn from 'classnames';
 
 import Avatar from '../Avatar/Avatar';