feat(pr: issue-339): create ui component for sessions of web smalltalk app

src/WebApps/smalltalk/src/App.jsx

@@ -2,6 +2,7 @@ import axios from "axios";
 import React, { useState, useEffect, useRef } from "react";
 import ReactDOM from "react-dom";
 import MessageItem from "./components/MessageItem";
+import SessionItem from "./components/SessionItem";
 import "./index.scss";
 import * as signalR from '@microsoft/signalr';
 import iconBookmarks from './assets/bookmarks_black_24dp.svg';
@@ -120,7 +121,7 @@ function App() {
           </div>
         </div>
       </div>
-      <div className="w-60 h-screen bg-gray-100 border-b-2 border-gray-500">
+      <div className="w-74 h-screen bg-gray-100 border-b-2 border-gray-500">
         <div className="text-xl p-3">
           Chats
         </div>
@@ -133,15 +134,14 @@ function App() {
         </div>
 
         <div className="flex">
-          <div className="p-2">
+          <div className="pl-2 pr-2 lt-2">
             <img className="w-8 h-8 rounded-full" src={iconDenisAvatar} alt="Denis" />
             <div className="w-4 h-4 relative left-5 bottom-3 bg-gray-100 rounded-full"></div>
             <div className="w-2 h-2 relative left-6 bottom-6 bg-green-500 rounded-full"></div>
-
-            <div className="text-gray-500 text-xm pt-1">Denis</div>
+            {/* <div className="text-gray-500 text-xm pt-1">Denis</div> */}
           </div>
 
-          <div className="p-2">
+          {/* <div className="p-2">
             <img className="w-8 h-8 rounded-full" src={iconAvatar} alt="Denis" />
             <div className="text-gray-500 text-xm pt-3">Denis</div>
           </div>
@@ -158,7 +158,19 @@ function App() {
           <div className="p-2">
             <img className="w-8 h-8 rounded-full" src={iconAvatar} alt="Denis" />
             <div className="text-gray-500 text-xm pt-3">Denis</div>
-          </div>
+          </div> */}
+        </div>
+
+        <div className="flex overflow-y-auto flex-col-reverse p-2" style={{
+
+          minHeight: '10%',
+          maxHeight: '82vh',
+        }}>
+
+          <SessionItem/>
+          <SessionItem />
+          <SessionItem />
+
         </div>
 
       </div>
@@ -178,7 +190,7 @@ function App() {
 
             </div>
           </div>
-          
+
 
         </div>
         <div className="w-full flex-grow" >

src/WebApps/smalltalk/src/components/MessageItem.jsx

@@ -17,14 +17,14 @@ const MessageItem = (props) => {
         <div>
             {owner ?
                 <div className="flex justify-start">
-
-                    <div className="p-2">
-                        <img className="w-8 h-8 rounded-full" src={iconDenisAvatar} alt="Denis" />
-                        <div className="w-4 h-4 relative left-5 bottom-3 bg-white rounded-full"></div>
-                        <div className="w-2 h-2 relative left-6 bottom-6 bg-red-500 rounded-full"></div>
+                    <div className="flex items-end">
+                        <div className="pl-2 pr-2">
+                            <img className="w-8 h-8 rounded-full" src={iconDenisAvatar} alt="Denis" />
+                            <div className="w-4 h-4 relative left-5 bottom-3 bg-white rounded-full"></div>
+                            <div className="w-2 h-2 relative left-6 bottom-6 bg-red-500 rounded-full"></div>
+                        </div>
                     </div>
-
-                    <div className="m-2 bg-gray-100 p-3 items-start flex-colq rounded-tl-lg rounded-tr-lg rounded-br-lg">
+                    <div className="m-2 bg-gray-100 p-3  flex-colq rounded-tl-lg rounded-tr-lg rounded-br-lg">
                         {/* < p > sender: { props.message.senderId }</p >
                 <p>recipient: {props.message.recipientId}</p> */}
                         <p className='text-sm'>Denis Prokharchyk (<strong>{props.message.recipientId}</strong>)</p>
@@ -38,19 +38,18 @@ const MessageItem = (props) => {
                 :
                 <div className="flex justify-end m-8">
                     <div className="bg-blue-500 p-3 items-end flex-col rounded-tl-lg rounded-tr-lg rounded-bl-lg ">
-                        {/* < p > sender: {props.message.senderId}</p >
-                    <p>recipient: {props.message.recipientId}</p> */}
                         <p className='text-sm text-white'>me (<strong>{props.message.recipientId}</strong>)</p>
                         <p className='text-xs text-gray-100'>
                             {props.message.message}
                         </p>
                         <p className='text-xs text-gray-400'>8 min ago</p>
                     </div >
-                    <div className="p-2">
-                        <img className="w-8 h-8 rounded-full" src={iconAvatar} alt="Denis" />
-                        <div className="w-4 h-4 relative left-5 bottom-3 bg-white rounded-full"></div>
-                        <div className="w-2 h-2 relative left-6 bottom-6 bg-green-500 rounded-full"></div>
-
+                    <div className="flex items-end">
+                        <div className="pl-2 pr-2">
+                            <img className="w-8 h-8 rounded-full" src={iconAvatar} alt="Denis" />
+                            <div className="w-4 h-4 relative left-5 bottom-3 bg-white rounded-full"></div>
+                            <div className="w-2 h-2 relative left-6 bottom-6 bg-green-500 rounded-full"></div>
+                        </div>
                     </div>
                 </div>
             }

src/WebApps/smalltalk/src/components/SessionItem.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import iconDenisAvatar from '.././assets/Denis_prox.jpg';
+
+const SessionItem = (props) => { 
+  return (
+      <div className="flex m-3 bg-white rounded-lg pl-2 pt-2 pb-2">
+          <div>
+              <img className="w-12 h-12 rounded-full" src={iconDenisAvatar} alt="Denis" />
+          </div>
+          <div className="flex-grow p-3">
+              <div className="flex text-xs justify-between">
+                  <div>Denis P..</div>
+                  <div className="text-gray-400">12:00 PM</div>
+              </div>
+              <div className="text-xs text-gray-500">
+                  This is reall dope...
+              </div>
+
+          </div>
+          <div className="flex">
+              <div className="relative bottom-4 left-2">
+                  <div className="w-5 h-5 bg-blue-500 rounded-full">
+                      <div className="text-white relative left-1 top-1 text-xs">21</div>
+                  </div>
+              </div>
+          </div>
+
+      </div>
+  )
+}
+
+export default SessionItem