search

ShakirFarhan / Realtime-Chat

A Real time Messaging App which allows users to create accounts and chat with each other in real-time. The website is developed using MERN stack, which includes MongoDB, Express, React, and Node.js. Socket.IO is used for real-time communication between the users. Redux Toolkit is used for state management, and Tailwind CSS is used for UI
https://talk-time.netlify.app
MIT License
138 stars 51 forks source link

Enhance Website Layout to Resemble WhatsApp Web #3

Open ShakirFarhan opened 1 year ago

ShakirFarhan commented 1 year ago

Overview:

Currently, our website lacks the layout aesthetics seen in WhatsApp Web. To provide a more user-friendly and visually appealing experience, we propose enhancing the website's layout to resemble the design of WhatsApp Web. This involves creating gaps on the four sides of the content area and implementing a colored header section.

Expected Behavior:

Upon implementing this enhancement, users should notice a more modern and familiar layout similar to WhatsApp Web. The content area should be surrounded by empty space on all sides, and the top section should feature a distinct color, just like the header in WhatsApp Web.

Actual Behavior:

At present, our website has a consistent layout throughout its pages, without the distinct design elements seen in WhatsApp Web.

Steps to Reproduce:

  1. Open our website in a web browser.
  2. Complete Authentication
  3. Observe the lack of gaps around the content area and the absence of a colored header.

Screenshot:

image

Impact:

The current layout might appear outdated compared to the more contemporary design seen on platforms like WhatsApp Web. Implementing this enhancement could result in increased user satisfaction and a more visually appealing website.

Possible Solutions:

  1. Introduce CSS modifications to create gaps around the content area.
  2. Implement a header section with a distinct color scheme.
  3. Ensure responsive design to maintain the layout on various screen sizes.
aakashsharma7 commented 3 months ago

@ShakirFarhan can i try to enhance this?