sticky header and add image to message

client/src/components/AppHeader.tsx

@@ -34,16 +34,14 @@ const AppHeader = () => {
   };
 
   return (
-    <header>
+    <header className="sticky top-0">
       <div className="min-h-80 flex items-center justify-between bg-grey-dark p-2">
         <div className="app-header__logo">
-          <img src={logo} alt="logo" className='h-14'/>
+          <img src={logo} alt="logo" className="h-14" />
         </div>
         <div className="right">
           <div className="flex items-center space-x-6">
-            <div className="rounded-full w-24 overflow-hidden">
-              {meInfo.data && <Avatar user={meInfo.data} />}
-            </div>
+            {meInfo.data && <Avatar user={meInfo.data} />}
             <div className="app-header__user__name">
               <span className="text-white">
                 {meInfo.isLoading ? '' : meInfo.data ? meInfo.data.firstName + ' ' + meInfo.data.lastName : ''}

client/src/components/Message.tsx

@@ -1,8 +1,7 @@
 import { FaEllipsisH } from 'react-icons/fa';
 import Avatar from '@components/Avatar';
 
-const Message = ({ text, user, date }: any) => {
-
+const Message = ({ text, user, date, image = '' }: any) => {
   return (
     <>
       <div className="flex bg-grey-dark rounded-xl max-w-3xl p-5 gap-5">
@@ -12,11 +11,18 @@ const Message = ({ text, user, date }: any) => {
             <div className="text-red-light text-xl username">
               {user.firstName} {user.lastName}
             </div>
-            <div className="text-grey-light popup-btn text-2xl">
-              <FaEllipsisH />
+            <div className="text-grey popup-btn text-2xl">
+              <FaEllipsisH className="fill-grey-light" />
             </div>
           </div>
           <div className="text-white message">{text}</div>
+          {image === '' ? (
+            ''
+          ) : (
+            <div className="flex justify-center">
+              <img src={image} alt="image" className="w-full" />
+            </div>
+          )}
           <div className="text-grey-light date">{date}</div>
         </div>
       </div>

client/src/routes/home.tsx

@@ -1,26 +1,37 @@
-import AppHeader from "@components/AppHeader";
-import Message from "@components/Message";
+import AppHeader from '@components/AppHeader';
+import Message from '@components/Message';
 
 const Home = () => {
   const user = {
-    firstName: "Guillaume",
-    lastName: "Dorce",
-    email: "guillaume.dorce@bm-services.com",
+    firstName: 'Guillaume',
+    lastName: 'Dorce',
+    email: 'guillaume.dorce@bm-services.com',
   };
 
   return (
     <div className="min-h-full bg-grey">
       <AppHeader />
-      <main className="flex flex-col items-center p-4">
-        <Message user={user} text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget
+      <main className="flex flex-col items-center p-4 gap-4">
+        <Message
+          user={user}
+          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget
         aliquam tincidunt, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet
         mauris. Donec auctor, nisl eget aliquam tincidunt, nisl nisl aliquet nisl, eget
         aliquam nisl nisl sit amet mauris. Donec auctor, nisl eget aliquam tincidunt,
-        nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet mauris." date="14 août 2022 19:00"/>
-        
+        nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet mauris."
+          date="14 août 2022 19:00"
+        />
+        <Message
+          user={user}
+          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget
+        aliquam tincidunt, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet
+        mauris."
+          date="14 août 2022 19:00"
+          image="https://picsum.photos/800/600"
+        />
       </main>
     </div>
   );
-}
+};
 
 export default Home;

client/tailwind.config.cjs

@@ -9,7 +9,7 @@ module.exports = {
         red: '#fd2d01',
         'red-light': '#ffd7d7',
         'grey': '#4E5166',
-        'grey-light': '#8F8F8F',
+        'grey-light': '#717695',
         'grey-dark': '#2E3144',
       },
     },