Restyle Frontend - Events Page Widget

[minhngo3818]

The old ui for events page uses purely css. However, we are going to use Tailwind css as our main styling framework. In this issue, event widget need replacing old css classes with tailwind css, and style it with the new design . Orange is #ff9617. Hover effect and animation are up to programmers.

This task can be assigned by many contributors in order to select the best design.

Any ideas for better design are welcomed. Here is the design to rely on

[mfonPeeter]

Please, can this be assigned to me?

Also, I think the new design above is okay for the event page considering the fact that it aligns with the primary color of the website.

[minhngo3818]

Sure, I assigned you for this task. Just to let you know, I have modified directory and reorganize codes. All components for event widget are moved to directory client/components/events/.

Please create your branch from this branch minhngo-events-optimize-cleanup, then name it as
<github_name or issue_number>-restyle-event-widget before you start.

Let me know if you engage some issues or confusions

[mfonPeeter]

Thanks for assigning this to me. I will get to work as soon as possible.

But please, can you explain further when you say I should create my branch from minhngo-events-optimize-cleanup, then name it as <github_name or issue_number>-restyle-event-widget before I start.

Like how do I create my own branch from minhngo-events-optimize-cleanup. I'm used to creating from the main branch and not from other branches. Please help, so I can start implementing the designs.

Also, just to be clear, are you saying I should name my branch by the github name or the issue number of this issue?

[minhngo3818]

Sorry for not stating clear branch name. I will make announcement for naming branch. Your branch will be <your_name>-restyle-event-widget.

To create a branch from a different branch, in terminal use git checkout -b <your-branch> minhngo-events-optimize-cleanup. Or, if you use vscode, go to git icon ->click three dot -> create a branch from -> name your branch -> select the branch to want to create from. Make sure you fetch the repo first.

[mfonPeeter]

Oh, okay, Thanks a lot and I will try it out. If I encounter any issues, I will let you know.

[mfonPeeter]

@minhngo3818, I noticed that the website has horizontal scrolling which looks unappealing. After some debugging, I noticed that it is coming from the styles in the body element. Currently, these are the styles in the body element:

html,
body {
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	background-color: #21262d;
	background-size: cover;
}

I noticed changing the width from 100vw to 100% fixes the issue. Please can I implement this even though it is not part of the issue I'm focused on? I'm asking because any design I have to make has to put the horizontal scrolling into consideration and removing it will be very convenient and also make the website more appealing.

But if I'm to implement this, it will be with custom CSS since I'm not changing the body styles from custom CSS to Tailwind CSS

[mfonPeeter]

Also, am I allowed to remove some styles that don't have any effect on the website? Some styles, like overflow: auto for example don't have any effect in some places. Or should I implement them with Tailwind CSS?

I'm asking to know if you implemented some of these styles for future purposes or if there were for testing so I will know if to get rid of them or not.

[mfonPeeter]

I'm considering restyling the Events Header from this:

to this:

The second looks more appealing to me. If you still want to go with the original one, it is still okay with me.