react chat ui kit demo is updated: SDK v2.19.2, react kit v0.4.5

Author: Artem-K-Koltunov

samples/react-chat-ui-kit-demo-app/package-lock.json

@@ -5,19 +5,16 @@
   "dependencies": {
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.3",
-    "@mui/styled-engine-sc": "^5.12.0",
     "@types/node": "^16.18.28",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
-    "node-sass": "^8.0.0",
-    "quickblox": "2.19.1",
-    "quickblox-react-ui-kit": "0.4.0",
+    "quickblox": "2.19.2",
+    "quickblox-react-ui-kit": "^0.4.5",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "sass": "^1.84.0",
     "styled-components": "^5.3.11",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

samples/react-chat-ui-kit-demo-app/package.json

@@ -5,8 +5,14 @@
   margin: 10px;
   padding-left: 10px;
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: row wrap;
   gap: 10px;
+
+  button {
+    width: 200px;
+    height: 20px;
+    max-width: 200px;
+  }
 }
 
 body{
@@ -19,3 +25,16 @@ body{
   overflow: hidden !important;
   scrollbar-width: none !important;
 }
+
+@media (max-width: 768px) {
+  .main-buttons-wrapper {
+    button {
+      width: 100px;
+      height: 20px;
+      max-width: 100px;
+
+      padding: 0;
+      margin: 0;
+    }
+  }
+}

samples/react-chat-ui-kit-demo-app/src/App.scss

@@ -197,7 +197,6 @@ function App() {
           qbConfig={{...QBConfig}}
       >
           <div>
-
               <Routes>
                   <Route
                       path="/" element={
@@ -208,23 +207,20 @@ function App() {
                                       <MainButton
                                           typeButton={TypeButton.outlined}
                                           title="Light Theme"
-                                          styleBox={{width: "200px", height: "20px"}}
                                           clickHandler = {() => {
                                               document.documentElement.setAttribute('data-theme', 'light');
                                           }}
                                       />
                                       <MainButton
                                           typeButton={TypeButton.defaultDisabled}
                                           title="Dark Theme"
-                                          styleBox={{width: "200px", height: "20px"}}
                                           clickHandler = {() => {
                                               document.documentElement.setAttribute('data-theme', 'dark');
                                           }}
                                       />
                                       <MainButton
                                           typeButton={TypeButton.danger}
                                           title="Log Out"
-                                          styleBox={{width: "200px", height: "20px"}}
                                           clickHandler = { logoutUIKitHandler }
                                       />
                                   </div>

samples/react-chat-ui-kit-demo-app/src/App.tsx

@@ -128,7 +128,8 @@ export const QBConfig: QBUIKitConfig = {
         debug: true,
         enableForwarding: true,
         enableReplying: true,
-        regexUserName: '^(?=[a-zA-Z])[-a-zA-Z_ ]{3,49}(?<! )$',
+        // regexUserName: '^(?=[a-zA-Z])[-a-zA-Z_ ]{3,49}(?<! )$',
+        regexUserName: '',
         endpoints: {
             api: 'api.quickblox.com',
             chat: 'chat.quickblox.com',

samples/react-chat-ui-kit-demo-app/src/QBconfig.ts

@@ -1,9 +1,75 @@
-.main-container{
-  width:100%;
+.container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  min-width: 300px;
+  width: 300px;
+}
+.login-form {
+  width: 100%;
+  border: 1px solid #D9E3F7;
+  border-radius: 10px;
+  text-align: center;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+}
+.login-form-title {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.login-form-content {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-right: 20px;
+  padding-bottom: 20px;
+
+  .text-field {
+    box-sizing: border-box;
+    width: 250px;
+  }
+
+  .error {
+    max-width: 250px;
+    color: red;
+    font-size: x-small;
+    margin: 0;
+  }
+}
+.theme-switch {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 10px;
+  gap: 5px;
 }
 
-.form-col{
-  border: 10px solid #0275d8;
-  border-radius: .5rem;
-  padding:3%;
+.login-form-btn {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+.login-form h2 {
+  margin-bottom: 10px;
+  font-size: 22px;
+}
+.login-form h3 {
+  margin-bottom: 10px;
+  color: #3978FC;
+}
+.login-form p {
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+.login-form a {
+  color: #3978FC;
+  text-decoration: none;
+}
+.login-form button:hover {
+  background: #255ec7;
 }