@webinex/chatify 1.0.2-rc3 → 2.0.0-alpha1

package/src/styles/index.scss

@@ -1,20 +1,19 @@
-@import './variables.scss';
+@use './variables.scss' as vars;
 @import './mixins.scss';
 @import './keyframes.scss';
 @import './aside.scss';
-@import './settings.scss';
 @import './chat.scss';
+@import './input.scss';
+@import './members.scss';
 
 .wxchtf-chatify {
-  border: $border;
   display: flex;
   flex-flow: column nowrap;
-  background: $background;
-  border-radius: $radius;
+  background: vars.$background;
+  border-radius: vars.$radius;
 
   .wxchtf-header {
     min-height: 2rem;
-    border-bottom: $border;
   }
 
   .wxchtf-body {
@@ -25,7 +24,26 @@
 
   .wxchtf-footer {
     min-height: 2rem;
-    border-top: $border;
+  }
+
+  .wxchtf-add-btn-wrapper {
+    width: 100%;
+    text-align: right;
+    padding-inline: 0.5rem;
+    margin-bottom: 1rem;
+
+    .wxchtf-add-btn {
+      border: none;
+      background-color: #e4f7f7;
+      height: 50px;
+      padding: 0;
+      line-height: 50px;
+      min-width: 150px;
+      border-radius: 50px;
+      font-weight: 600;
+      opacity: 0.9;
+      box-shadow: none;
+    }
   }
 }
 
@@ -33,13 +51,25 @@
   flex: auto;
   display: flex;
   flex-flow: column nowrap;
+  border-top-right-radius: vars.$radius;
+  border-bottom-right-radius: vars.$radius;
+  box-shadow: 0px 6px 30px 0px #0cd9e214, 0px 1px 12px 0px #006e720f;
+  z-index: 2;
+  min-width: 0;
 
-  .wxchtf-create-chat {
+  .wxchtf-create-chat-panel {
     display: flex;
     flex-flow: column nowrap;
     justify-content: center;
     align-items: center;
     height: 100%;
+    position: relative;
+
+    .wxchtf-create-chat-panel-close {
+      position: absolute;
+      right: 25px;
+      top: 25px;
+    }
 
     form {
       padding: 2rem;
@@ -49,6 +79,7 @@
       .wxchtf-create-chat-member-input-list {
         max-height: 15rem;
         overflow-y: auto;
+        @include scrollbar();
 
         .ant-list-item {
           padding-inline: 0.5rem;

package/src/styles/input.scss

@@ -0,0 +1,74 @@
+@use './variables.scss' as vars;
+
+.wxchtf-input-form {
+  flex: none;
+  max-height: 300px;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 12px 20px 20px 20px;
+
+  .wxchtf-input-box {
+    flex: none;
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 8px;
+    max-width: vars.$messageBoxWidth;
+    width: 100%;
+    margin: auto;
+    background: rgba(245, 245, 245, 1);
+    border-radius: 40px;
+
+    @mixin iconBtn {
+      flex: none;
+      display: flex;
+      padding: 0 1rem;
+      align-items: flex-end;
+
+      .ant-btn.ant-btn-icon-only .anticon {
+        font-size: 1.5rem;
+      }
+    }
+
+    .wxchtf-add-files-box,
+    .wxchtf-submit-btn-box {
+      align-items: center;
+
+      button {
+        width: unset;
+      }
+
+      svg {
+        font-size: 18px;
+        color: rgba(14, 15, 23, 0.25);
+      }
+    }
+
+    .wxchtf-add-files-box {
+      @include iconBtn();
+    }
+
+    .wxchtf-text-input-box {
+      flex: auto;
+      margin-left: 16px;
+      margin-right: 16px;
+
+      textarea {
+        resize: none;
+        border: none;
+        outline: none;
+        box-shadow: none;
+        background: transparent;
+        padding-inline: 0;
+        font-size: 13px;
+        line-height: 26px;
+
+        @include scrollbar();
+      }
+    }
+
+    .wxchtf-submit-btn-box {
+      @include iconBtn();
+      margin-left: 1rem;
+    }
+  }
+}

package/src/styles/members.scss

@@ -0,0 +1,13 @@
+.wxchtf-chatify {
+  .wxchtf-chat-members-panel {
+    min-width: 300px;
+    box-shadow: -4px 0px 20px -5px #0cd9e214, -2px 1px 12px #006e720f;
+
+    .wxchtf-chat-members-list {
+      .wxchtf-chat-members-list-item {
+        padding-inline: 1rem;
+        border-block-end: none;
+      }
+    }
+  }
+}

package/src/styles/variables.scss

@@ -1,10 +1,10 @@
 $borderColor: #ddd;
 $border: 1px solid #ddd;
 $background: white;
-$radius: 4px;
-$chatBodyBackground: #f5f5f5;
-$messageBackground: #e1f5fe;
-$myMessageBackground: #b9f6ca;
+$radius: 24px;
+$messageBackground: #f5f5f5;
+$myMessageBackground: #e4f7f7;
 $unreadCountBackground: #ffa726;
 $avatarSize: 40px;
 $messageBorderRadius: 10px;
+$messageBoxWidth: 1110px;

package/src/types/core/api/accountApi.d.ts

@@ -0,0 +1,5 @@
+import { BaseApiEndpointBuilder } from './baseApi';
+import { Account } from '../types';
+export declare function accountEndpoints(builder: BaseApiEndpointBuilder): {
+    getAccountList: import("@reduxjs/toolkit/query").QueryDefinition<void, import("@reduxjs/toolkit/query").BaseQueryFn, "chat" | "account" | "message" | "thread" | "thread-message", Account[], "chatify">;
+};