quickblox-react-ui-kit 0.5.0-beta.1 → 0.5.0-beta.2

package/src/Presentation/Views/EditDialog/EditDialog.scss

@@ -4,13 +4,9 @@ $create-dialog-container-width: 332px;
 $create-dialog-container-height: 180px;
 
 .edit-container {
-  //border: 1px solid blue;
   min-height: $container-height;
   max-height: $container-height;
   height: $container-height;
-  //min-width: $container-width;
-  //max-width: $container-width;
-  //width: $container-width;
   width: 100%;
 
   display: flex;
@@ -21,13 +17,9 @@ $create-dialog-container-height: 180px;
 }
 
 .edit-btn-container {
-  //border: 3px solid black;
   min-height: 34px;
   max-height: 34px;
   height: 34px;
-  //min-width: $container-width;
-  //max-width: $container-width;
-  //width: $container-width;
   width: 100%;
 
   display: flex;
@@ -41,13 +33,8 @@ $create-dialog-container-height: 180px;
   min-height: $create-dialog-container-height;
   max-height: $create-dialog-container-height;
   height: $create-dialog-container-height;
-  //min-width: $create-dialog-container-width;
-  //max-width: $create-dialog-container-width;
-  //width: $create-dialog-container-width;
   width: 100%;
 
-  //border: 3px solid green;
-
   margin-bottom: 24px;
 
   &--disable {
@@ -69,21 +56,14 @@ $create-dialog-container-height: 180px;
     justify-content: flex-start;
     align-items: flex-start;
 
-    //border: 1px solid blue;
-
     &__inf {
       min-height: 20px;
-
-      font-family: 'Roboto';
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 20px;
       letter-spacing: 0.25px;
       color: var(--main-text);
-      // color: var(--color-background);
-
-      //border: 1px solid orange;
     }
 
     &__icon-container {
@@ -100,8 +80,6 @@ $create-dialog-container-height: 180px;
         max-height: 56px;
         height: 56px;
         min-width: 56px;
-        max-width: 56px;
-        height: 56px;
         margin-top: 8px;
 
         background-color: var(--disabled-elements);
@@ -111,12 +89,6 @@ $create-dialog-container-height: 180px;
         display: flex;
         justify-content: center;
         align-items: center;
-
-        //border: 1px solid red;
-
-        &__content {
-          // margin: 10px;
-        }
       }
 
       &__upload {
@@ -128,23 +100,17 @@ $create-dialog-container-height: 180px;
         padding-left: 16px;
         padding-top: 20px;
 
-        font-family: 'Roboto';
         font-style: normal;
         font-weight: 700;
         font-size: 14px;
         line-height: 16px;
         letter-spacing: 0.4px;
         color: var(--color-icon);
-        //cursor: pointer;
-
-        // border: 1px solid green;
       }
     }
 
     &__upload-error {
       min-height: 20px;
-
-      font-family: 'Roboto';
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
@@ -156,16 +122,13 @@ $create-dialog-container-height: 180px;
 
     &__dialog-name-inf {
       min-height: 20px;
-
-      font-family: 'Roboto';
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 20px;
       letter-spacing: 0.25px;
       margin-top: 24px;
-
-      //border: 1px solid orange;
+      color: var(--main-text);
     }
 
     &__text-field {

package/src/Presentation/Views/Flow/CreateDialog/CreateDialog.scss

@@ -2,46 +2,13 @@ $create-dialog-container-width: 380px;
 $create-dialog-container-height: 312px;
 
 .create-dialog-container {
-  min-height: $create-dialog-container-height;
-  max-height: $create-dialog-container-height;
-  height: $create-dialog-container-height;
-  //border: 1px solid green;
-  //&--btn-wrapper{
-  //  height: 64px;
-  //  // width: 280px;
-  //  display: flex;
-  //  flex-direction: row;
-  //  flex-wrap: nowrap;
-  //  justify-content: flex-start;
-  //  align-items: center;
-  //  gap: 16px;
-  //  cursor: pointer;
-  //  border-radius: 4px;
-  //
-  //  border: 1px solid var(--tertiary-elements);
-  //
-  //  &__text{
-  //    min-height: 24px;
-  //    // margin: 16px 16px 16px 16px;
-  //    font-family: 'Roboto';
-  //    font-style: normal;
-  //    font-weight: 400;
-  //    font-size: 16px;
-  //    line-height: 24px;
-  //    letter-spacing: 0.15px;
-  //    flex: 2 2 268px;
-  //    letter-spacing: 0.15px;
-  //
-  //    //border: 1px solid orange;
-  //  }
-  //  &__icon{
-  //    min-height: 24px;
-  //    margin-left: 10px;
-  //    flex: 1 1 24px;
-  //
-  //   // border: 1px solid red;
-  //  }
-  //}
+  //min-height: $create-dialog-container-height;
+  //max-height: $create-dialog-container-height;
+  //height: $create-dialog-container-height;
+
+  .column-container {
+    width: 330px;
+  }
 }
 
 
@@ -52,7 +19,7 @@ $create-dialog-container-height: 312px;
 .item-type-dialog {
   border-radius: 4px;
   border-style: solid;
-  border-color: var(--light-theme-tertiaryelements, #636d78);
+  border-color: var(--tertiary-elements, #636d78);
   border-width: 1px;
   padding: 16px;
   display: flex;
@@ -78,7 +45,7 @@ $create-dialog-container-height: 312px;
   position: relative;
 }
 .item-type-dialog-name {
-  color: var(--light-theme-maintext, #0b1b0f);
+  color: var(--main-text, #0b1b0f);
   text-align: left;
   font-family: var(
                   --body-body-medium-font-family,
@@ -91,3 +58,11 @@ $create-dialog-container-height: 312px;
   position: relative;
   flex: 1;
 }
+
+@media only screen and (max-width: 980px) {
+  .create-dialog-container {
+    .column-container {
+      width: unset;
+    }
+  }
+}

package/src/Presentation/Views/Flow/CreateDialog/CreateDialog.tsx

@@ -25,44 +25,47 @@ const CreateDialog = ({
   createPublicDialogOnTouch,
 }:CreateDialogProps) => {
   return (
-    <ColumnContainer gapBetweenItem="8px">
-      <ActiveButton
-        content={
-          <div className="item-type-dialog">
-            <div className="item-type-dialog-icon">
-              <Chat width="24" height="24" applyZoom />
+    <div className="create-dialog-container">
+      <ColumnContainer gapBetweenItem="8px">
+        <ActiveButton
+          content={
+            <div className="item-type-dialog">
+              <div className="item-type-dialog-icon">
+                <Chat width="24" height="24" applyZoom />
+              </div>
+              <div className="item-type-dialog-name">Private</div>
             </div>
-            <div className="item-type-dialog-name">Private</div>
-          </div>
-        }
-        clickAction={createPrivateDialogOnClick}
-        touchAction={createPrivateDialogOnTouch}
-      />
-      <ActiveButton
-        content={
-          <div className="item-type-dialog">
-            <div className="item-type-dialog-icon">
-              <GroupChat width="32" height="32" applyZoom />
+          }
+          clickAction={createPrivateDialogOnClick}
+          touchAction={createPrivateDialogOnTouch}
+        />
+        <ActiveButton
+          content={
+            <div className="item-type-dialog">
+              <div className="item-type-dialog-icon">
+                <GroupChat width="32" height="32" applyZoom />
+              </div>
+              <div className="item-type-dialog-name">Group</div>
             </div>
-            <div className="item-type-dialog-name">Group</div>
-          </div>
-        }
-        clickAction={createGroupDialogOnClick}
-        touchAction={createGroupDialogOnTouch}
-      />
-      <ActiveButton
-        content={
-          <div className="item-type-dialog">
-            <div className="item-type-dialog-icon">
-              <PublicChannel width="32" height="32" applyZoom />
+          }
+          clickAction={createGroupDialogOnClick}
+          touchAction={createGroupDialogOnTouch}
+        />
+        <ActiveButton
+          content={
+            <div className="item-type-dialog">
+              <div className="item-type-dialog-icon">
+                <PublicChannel width="32" height="32" applyZoom />
+              </div>
+              <div className="item-type-dialog-name">Public</div>
             </div>
-            <div className="item-type-dialog-name">Public</div>
-          </div>
-        }
-        clickAction={createPublicDialogOnClick}
-        touchAction={createPublicDialogOnTouch}
-      />
-    </ColumnContainer>
+          }
+          clickAction={createPublicDialogOnClick}
+          touchAction={createPublicDialogOnTouch}
+        />
+      </ColumnContainer>
+    </div>
+
   );
 };
 

package/src/Presentation/Views/Flow/CreateDialogFlow/CreateNewDialogFlow.tsx

@@ -124,7 +124,7 @@ const CreateNewDialogFlow = ({
   };
 
   return (
-    <div>
+    <>
       <div
         style={{
           position: 'absolute',
@@ -185,7 +185,7 @@ const CreateNewDialogFlow = ({
           idOwnerDialog={remoteDataSourceMock.authInformation!.userId.toString()}
         />
       )}
-    </div>
+    </>
   );
 };
 

package/src/Presentation/Views/InviteMembers/InviteMembers.scss

@@ -15,6 +15,10 @@ $create-dialog-container-height: 412px;
   justify-content: flex-start;
   align-items: flex-start;
 
+  .disabled {
+    color: var(--secondary-text);
+  }
+
   &--add-members-container {
     min-height: $container-height;
     max-height: $container-height;
@@ -37,7 +41,6 @@ $create-dialog-container-height: 412px;
 
       &__inf {
         min-height: 20px;
-        font-family: 'Roboto';
         font-style: normal;
         font-weight: 500;
         font-size: 14px;
@@ -70,7 +73,6 @@ $create-dialog-container-height: 412px;
           padding: 0px;
           gap: 16px;
 
-          //width: 332px;
           width: 100%;
           height: 100px;
         }
@@ -93,7 +95,6 @@ $create-dialog-container-height: 412px;
         text-align: center;
         padding: 8px;
         width: 268px;
-        // width: 100%;
         height: 44px;
 
         border: 1px solid #90979f;
@@ -108,7 +109,6 @@ $create-dialog-container-height: 412px;
           margin-left: 6px;
           margin-right: 6px;
 
-          font-family: 'Roboto';
           font-style: normal;
           font-weight: 400;
           font-size: 16px;
@@ -136,12 +136,8 @@ $create-dialog-container-height: 412px;
   }
 
   &--btn-container {
-    min-height: 32px;
     max-height: 32px;
     height: 32px;
-    //min-width: $container-width;
-    //max-width: $container-width;
-    //width: $container-width;
     width: 100%;
     min-height: 34px;
     margin-top: 24px;
@@ -152,8 +148,6 @@ $create-dialog-container-height: 412px;
     flex-wrap: nowrap;
     justify-content: flex-end;
     align-items: flex-end;
-
-    //border: 2px solid blue;
   }
 
   &-loader {
@@ -162,32 +156,9 @@ $create-dialog-container-height: 412px;
 }
 .filtered-text-field{
   width: 100%;
-  //margin: 16px;
-  //padding: 8px;
-
   background-color: var(--main-background);
   color: var(--secondary-text);
 
-  //input {
-  //  color: var(--secondary-text);
-  //  background-color: var(--main-background);
-  //  margin-left: 6px;
-  //  margin-right: 6px;
-  //
-  //  font-family: 'Roboto';
-  //  font-style: normal;
-  //  font-weight: 400;
-  //  font-size: 16px;
-  //  line-height: 24px;
-  //
-  //  display: flex;
-  //  align-items: center;
-  //  letter-spacing: 0.15px;
-  //
-  //  border: none;
-  //  outline: none;
-  //}
-
   &__icon {
     width: 24px;
     height: 24px;

package/src/Presentation/Views/InviteMembers/InviteMembers.tsx

@@ -18,6 +18,7 @@ import { OpenDialogArcheType, TypeOpenDialog } from '../EditDialog/EditDialog';
 import { Loader, UserListItem } from '../../ui-components';
 import { SearchSvg } from '../../icons';
 import TextField from '../../ui-components/TextField/TextField';
+import cn from 'classnames';
 
 type SelectedItemInfo = { isChecked: boolean; userid: number };
 
@@ -64,6 +65,10 @@ const InviteMembers = ({
     userViewModel.getUsers(new Pagination(0, userPerPage));
   }, []);
 
+  useEffect( () => {
+    setCountSelected(getUsersForIncludeInDialog().length);
+  }, [Object.entries(selectedItems).length])
+
   const fetchMoreData = () => {
     if (userViewModel.pagination.hasNextPage()) {
       const newPagination = userViewModel.pagination;
@@ -133,13 +138,16 @@ const InviteMembers = ({
 
   const handleUserListItemChange = (userId: number, value: boolean) => {
     setSelectedItems((prevState) => {
-      return {
-        ...prevState,
-        [userId]: { isChecked: value, userid: userId },
-      };
-    });
+      const updatedState = { ...prevState, [userId]: { isChecked: value, userid: userId } };
 
-    setCountSelected(getUsersForIncludeInDialog().length);
+      Object.keys(updatedState).forEach((key) => {
+        if (!updatedState[Number(key)].isChecked) {
+          delete updatedState[Number(key)];
+        }
+      });
+
+      return updatedState;
+    });
   };
 
   const [userNameForFilter, setUserNameForFilter] = useState<string>('');
@@ -187,7 +195,9 @@ const InviteMembers = ({
                 setUserNameForFilter(value);
               }}
             />
-            <div className="container-invite-members--add-members-container--wrapper__inf">
+            <div className= {cn("container-invite-members--add-members-container--wrapper__inf", {
+              "disabled" : countSelectedItems < 1
+            })}>
               {countSelectedItems} selected
             </div>
             <div className="container-invite-members--add-members-container--wrapper__members">

package/src/Presentation/components/UI/Buttons/MainButton/MainButton.css

@@ -13,15 +13,13 @@
   flex: none;
   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;
 
-  color: var(--main-background);
+  color: var(--system);
 
   border: none;
   outline: none;
@@ -41,9 +39,8 @@
   flex: none;
   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;
@@ -69,9 +66,8 @@
   order: 0;
   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;
@@ -90,9 +86,8 @@
   flex: none;
   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;

package/src/Presentation/components/UI/Placeholders/ErrorComponent/ErrorComponent.scss

@@ -4,8 +4,6 @@ $error-container-error-action-color: var(--main-elements);
 $error-container-divider: var(--divider);
 
 .error-container-wrapper {
-  // padding-top: 9px;
-  // padding-bottom: 12px;
   border: 1px solid $error-container-divider;
 }
 
@@ -17,7 +15,6 @@ $error-container-divider: var(--divider);
   margin: 0 auto;
   justify-content: center;
   align-items: center;
-  // border: 1px solid green;
   gap: 16px;
   background-color: $error-container-background-color;
   &__error-icon {
@@ -35,7 +32,6 @@ $error-container-divider: var(--divider);
   }
   &__error-message {
     min-height: 24px;
-    font-family: 'Roboto';
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
@@ -63,7 +59,6 @@ $error-container-divider: var(--divider);
     }
     &__refresh-text {
       color: $error-container-error-action-color;
-      font-family: 'Roboto';
       font-style: normal;
       font-weight: 700;
       font-size: 14px;

package/src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.scss

@@ -2,8 +2,6 @@ $default-background-color: var(--main-elements);
 $default-width-icon: 44;
 $default-height-icon: 44;
 
-// #Loader{fill: $default-background-color};
-
 .loader {
   animation: spin 2s linear infinite;
   svg path {fill: $default-background-color};

package/src/Presentation/components/containers/ColumnContainer/ColumnContainer.scss

@@ -1,16 +1,7 @@
 // $column-container-width: 320px;
 $column-container-width: var(--max-width-dialog-list);
 .column-container{
-  width: $column-container-width; // artan changed 12.01.2024
-  // width: 100%;
+  width: $column-container-width;
   display: flex;
   flex-flow: column nowrap;
 }
-// artan changed 12.01.2024
-//@media only screen and (max-width: var(--min-width-screen-desktop)) {
-//  .column-container{
-//    width: 100%;
-//    display: flex;
-//    flex-flow: column nowrap;
-//  }
-//}

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

@@ -9,7 +9,7 @@ $qb-dark-color-divider: #FFFFFF;
 $qb-dark-color-font: #3978FC;
 
 $background-overlay-light: rgba(19, 29, 40, .80);
-$background-overlay-dark: rgba(144, 151, 159, .80);
+$background-overlay-dark: rgba(19, 29, 40, .80);
 $primary-50: #E7EFFF;
 $primary-100: #C4D7FE;
 $primary-200: #9CBCFE;

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

@@ -4,7 +4,7 @@
 html[data-theme='dark'] {
   --primary: #{$primary-500};
   --color-background: #{$secondary-900};
-  --color-background-modal: #{$secondary-800};
+  --color-background-modal: #{$background-overlay-dark};
   --color-background-overlay: #{$secondary-900};
   --color-divider: #{$secondary-400};
   --color-font: #{$primary-a-100};
@@ -15,11 +15,11 @@ html[data-theme='dark'] {
 
   --color-background-info: #{$primary-500};
   --color-border-active: #{$secondary-200};
-  --tertiary-elements: #{$background-overlay-dark};
+  --tertiary-elements: #{$secondary-300};
   --main-elements: #{$primary-300};
   --secondary-elements: #{$primary-a-100};
   --input-elements: #{$secondary-200};
-  --disabled-elements: #{$secondary-300};
+  --disabled-elements: #{$secondary-100};
   --field-border: #{$secondary-200};
   --main-text: #{$primary-a-100};
   --secondary-text: #{$secondary-200};
@@ -34,4 +34,5 @@ html[data-theme='dark'] {
   --error: #{$error-300};
   --error-secondary: #{$error-100};
   --hightlight: #{$highlight};
+  --system: #{$primary-a-100};
 }

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

@@ -3,7 +3,7 @@
 :root {
   --primary: #{$primary-500};
   --color-background: #{$primary-a-100};
-  --color-background-modal: #{$primary-100};
+  --color-background-modal: #{$background-overlay-light};
   --color-background-overlay: #{$secondary-900};
   --color-divider: #{$primary-50};
   --color-font: #{$secondary-900};
@@ -35,4 +35,5 @@
   --error: #{$error-500};
   --error-secondary: #{$error-200};
   --hightlight: #{$highlight};
+  --system: #{$primary-a-100};
 }

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

@@ -14,10 +14,9 @@
   @include applyBorderBox;
 
   svg {
-    height: 100%;
-    width: 100%;
-    fill: var(--secondary-text);
-    padding: 10px;
+    height: 26px;
+    width: 26px;
+    fill: var(--tertiary-elements);
   }
 
   &__image {
@@ -44,6 +43,11 @@
   &--lg {
     width: 56px;
     height: 56px;
+
+    svg {
+      height: 33px;
+      width: 33px;
+    }
   }
 
   &--xl {

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

@@ -4,8 +4,6 @@ import cn from 'classnames';
 import { UserSvg } from '../../icons';
 import './Avatar.scss';
 
-console.log('UserSvg:', UserSvg); // <-- Добавляем отладку
-
 export interface AvatarProps {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   icon?: ReactElement;

package/src/Presentation/ui-components/Avatar/avatar.stories.tsx

@@ -74,7 +74,7 @@ export const AvatarIcon: StoryDefault = {
 
 export const AvatarImage: StoryDefault = {
   args: {
-    // src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
-    src: 'https://cdn-ikpjoif.nitrocdn.com/WZsqFPiehrtwFaaeJNQAQZrkRMgaTuyL/assets/images/optimized/rev-83f47e6/quickblox.com/wp-content/themes/QuickbloxTheme2021/img/custom-white-label-solution.jpg',
+    src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
+    // src: 'https://cdn-ikpjoif.nitrocdn.com/WZsqFPiehrtwFaaeJNQAQZrkRMgaTuyL/assets/images/optimized/rev-83f47e6/quickblox.com/wp-content/themes/QuickbloxTheme2021/img/custom-white-label-solution.jpg',
   },
 };