From e59a6c535b68af2f37ae32268812bdaae171afa9 Mon Sep 17 00:00:00 2001
From: fetz <emmsel@on.sinch.com>
Date: Wed, 18 Jan 2023 14:19:57 +0100
Subject: [PATCH 1/5] with tailwind config

---
 package-lock.json  | 3 +++
 package.json       | 3 +++
 tailwind.config.js | 8 ++++++++
 3 files changed, 14 insertions(+)
 create mode 100644 tailwind.config.js

diff --git a/package-lock.json b/package-lock.json
index 7677e91..ade361d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,9 @@
         "typescript": "^4.9.4",
         "web-vitals": "^2.1.4",
         "zustand": "^4.1.5"
+      },
+      "devDependencies": {
+        "tailwindcss": "^3.2.4"
       }
     },
     "node_modules/@adobe/css-tools": {
diff --git a/package.json b/package.json
index b812058..a5db5f5 100644
--- a/package.json
+++ b/package.json
@@ -45,5 +45,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.2.4"
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..9b6645e
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

From 226263b81d96abcd4333c6a07df0ccb275c5a42b Mon Sep 17 00:00:00 2001
From: fetz <emmsel@on.sinch.com>
Date: Wed, 18 Jan 2023 14:20:33 +0100
Subject: [PATCH 2/5] refactor

---
 src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.tsx b/src/App.tsx
index dbbb153..de334dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { ChatLayout } from './layout/ChatLayout';
+import './index.css';
 
 function App() {
   return <ChatLayout />;

From 983627536d14cf4d5b60e03e0c27327cd89555d6 Mon Sep 17 00:00:00 2001
From: fetz <emmsel@on.sinch.com>
Date: Wed, 18 Jan 2023 14:20:50 +0100
Subject: [PATCH 3/5] init with tailwind

---
 src/index.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/index.css b/src/index.css
index ec2585e..651ed53 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

From b147f33567ce25cbd134d0460735ef24c42d88b7 Mon Sep 17 00:00:00 2001
From: fetz <emmsel@on.sinch.com>
Date: Wed, 18 Jan 2023 14:21:07 +0100
Subject: [PATCH 4/5] core components added

---
 src/components/core/Box/index.tsx   |  9 +++++++++
 src/components/core/Stack/index.tsx | 12 ++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 src/components/core/Box/index.tsx
 create mode 100644 src/components/core/Stack/index.tsx

diff --git a/src/components/core/Box/index.tsx b/src/components/core/Box/index.tsx
new file mode 100644
index 0000000..1462a4c
--- /dev/null
+++ b/src/components/core/Box/index.tsx
@@ -0,0 +1,9 @@
+const Box = ({
+  children,
+  className,
+}: {
+  children: any;
+  className?: string;
+}) => <div className={className}>{children}</div>;
+
+export { Box };
diff --git a/src/components/core/Stack/index.tsx b/src/components/core/Stack/index.tsx
new file mode 100644
index 0000000..dbc801a
--- /dev/null
+++ b/src/components/core/Stack/index.tsx
@@ -0,0 +1,12 @@
+const Stack = ({
+  children,
+  className,
+}: {
+  children: any;
+  className?: string;
+}) => {
+  const style = `flex-col ${className || ''}`;
+
+  return <div className={style}>{children}</div>;
+};
+export { Stack };

From 3341030c4e615c1ddd263fce25c8ca81500ea132 Mon Sep 17 00:00:00 2001
From: fetz <emmsel@on.sinch.com>
Date: Wed, 18 Jan 2023 14:21:38 +0100
Subject: [PATCH 5/5] refactor

---
 src/components/Timeline/ChatMessage/index.tsx | 44 +++++--------------
 src/components/Timeline/index.tsx             | 12 ++---
 2 files changed, 14 insertions(+), 42 deletions(-)

diff --git a/src/components/Timeline/ChatMessage/index.tsx b/src/components/Timeline/ChatMessage/index.tsx
index 776d573..7d75e0c 100644
--- a/src/components/Timeline/ChatMessage/index.tsx
+++ b/src/components/Timeline/ChatMessage/index.tsx
@@ -1,30 +1,15 @@
-import { Box, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
+import { Stack } from '../../../components/core/Stack';
+import { Box } from '../../../components/core/Box';
+
 import { Message } from '../../../api/types';
 import moment from 'moment';
 
 interface ChatMessageProps {
   message: Message;
   self: string;
-  isSmallScreen: boolean;
 }
 
-const otherChartMessageSX = (isSmallScreen: boolean) => ({
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  borderRadius: '10px',
-  border: '1px solid #eaeaea',
-  minWidth: '200px',
-  maxWidth: isSmallScreen ? '240px' : '80%',
-  padding: '16px',
-  marginTop: '16px',
-  backgroundColor: '#fefefe',
-});
-
-const selfChartMessageSX = {
-  backgroundColor: '#fff59d',
-};
-
 const labelSX = { color: '#aeaeae' };
 
 const getStringOrNumberBack = (text: unknown) => {
@@ -39,31 +24,24 @@ const getDateString = (timestamp: number) => {
   return moment(timestamp).format('DD MMM YYYY HH:mm');
 };
 
-const ChatMessage = ({ message, self, isSmallScreen }: ChatMessageProps) => {
+const ChatMessage = ({ message, self }: ChatMessageProps) => {
   const { author, message: _message, timestamp } = message;
 
   const isSelf = self === author;
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: isSelf ? 'flex-end' : 'flex-start',
-      }}
-    >
-      <Box
-        sx={
-          isSelf
-            ? { ...otherChartMessageSX(isSmallScreen), ...selfChartMessageSX }
-            : otherChartMessageSX(isSmallScreen)
-        }
+    <Box className={`flex ${isSelf ? 'justify-end' : 'justify-start'}`}>
+      <Stack
+        className={`${
+          isSelf ? 'bg-[#fff59d]' : ''
+        } ${'relative rounded border-solid boder-1 border-[#eaeaea] p-[16px] bg-neutral-50 mt-[16px] min-w-200 md:max-w-[80%] lg:max-w-[80%] sm:max-w-[240px]'}`}
       >
         {!isSelf && (
           <Typography sx={labelSX}>{getStringOrNumberBack(author)}</Typography>
         )}
         <Typography>{getStringOrNumberBack(_message)}</Typography>
         <Typography sx={labelSX}>{getDateString(timestamp)}</Typography>
-      </Box>
+      </Stack>
     </Box>
   );
 };
diff --git a/src/components/Timeline/index.tsx b/src/components/Timeline/index.tsx
index c29bc52..11d74aa 100644
--- a/src/components/Timeline/index.tsx
+++ b/src/components/Timeline/index.tsx
@@ -6,20 +6,14 @@ import { useChatTimeline } from '../../hooks/useChatTimeline';
 import { Error } from '../Error';
 
 const Timeline = () => {
-  const { smallDevice, data, author, hasMore, next, hasError } =
-    useChatTimeline();
+  const { data, author, hasMore, next, hasError } = useChatTimeline();
 
   const renderChatMessages = useMemo(
     () =>
       data.map((message: Message) => (
-        <ChatMessage
-          key={message._id}
-          isSmallScreen={smallDevice}
-          message={message}
-          self={author}
-        />
+        <ChatMessage key={message._id} message={message} self={author} />
       )),
-    [data, author, smallDevice]
+    [data, author]
   );
 
   if (hasError) {