Skip to content

Minor bug fix: remove modal- click of close button #217

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
harshith-venkatesh wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Minor bug fix: remove modal- click of close button #217

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
db4b989
minor bug fix: remove modal- click of close button
harshith-venkatesh Oct 1, 2023
d15f9ad
update test case to resolve the bug
harshith-venkatesh Oct 1, 2023
9c33176
on click of background, user would close the modal
harshith-venkatesh Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 42 additions & 44 deletions app/components/common/drawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,53 +9,51 @@ interface DrawerProps {
toggleDrawer: () => void;
}

const Drawer: React.FC<DrawerProps> = ({ event, isDrawerVisible, toggleDrawer }) => {
return (
<div className={`w-full h-full fixed inset-0 ${isDrawerVisible ? '' : 'invisible'}`}>
<div
onClick={toggleDrawer}
data-testid="drawer-background"
className={`w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 ${
isDrawerVisible ? 'opacity-50' : 'opacity-0'
}`}
></div>
<div
onClick={toggleDrawer}
className={`pt-20 pb-12 px-12 min-w-[300px] sm:w-full md:w-1/2 lg:w-1/4 bg-white h-full absolute right-0 duration-300 ease-out transition-all flex flex-col justify-between overflow-scroll ${
isDrawerVisible ? '' : 'translate-x-full'
}`}
>
const Drawer: React.FC<DrawerProps> = ({ event, isDrawerVisible, toggleDrawer }) => (
<div className={`w-full h-full fixed inset-0 ${isDrawerVisible ? '' : 'invisible'}`}>
<div
data-testid="drawer-background"
className={`w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 ${
isDrawerVisible ? 'opacity-50' : 'opacity-0'
}`}
onClick={toggleDrawer}
Copy link
Contributor Author

@harshith-venkatesh harshith-venkatesh Oct 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have added the click action here, could you ensure you have taken the latest pull

Copy link
Contributor Author

@harshith-venkatesh harshith-venkatesh Oct 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iRohitGaur

Copy link
Contributor

@iRohitGaur iRohitGaur Oct 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @harshith-venkatesh my bad, it didnt take the latest pull. I got the latest pull but found another issue. See the rec:

Untitled.mov

Copy link
Contributor Author

@harshith-venkatesh harshith-venkatesh Oct 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wow, I shouldn't have committed this mistake, thanks for the great review. Let me do the required changes

></div>
<div
className={`pt-20 pb-12 px-12 min-w-[300px] sm:w-full md:w-1/2 lg:w-1/4 bg-white h-full absolute right-0 duration-300 ease-out transition-all flex flex-col justify-between overflow-scroll ${
isDrawerVisible ? '' : 'translate-x-full'
}`}
>
<div>
<div className="absolute cursor-pointer text-gray-600 top-0 w-8 h-8 flex items-center justify-center right-0 mt-5 mr-5">
<button className="w-78 h-33 left-1406 top-28 px-4 py-2 uppercase mr-8 bg-gray-100 rounded-lg " onClick={toggleDrawer}>
Close
</button>
</div>
<h1 className=" font-semibold text-3xl leading-10 capitalize">{event.title}</h1>
<EventVisibility visibility={event.visibility ?? ''} />
<p className="py-2 text-base font-normal leading-5 text-left">
{dayjs(event.start).format('MMMM DD, YYYY h A')} -{' '}
{dayjs(event.end).format('MMMM DD, YYYY h A')}
</p>
<p className="py-2 text-base font-normal leading-5 text-left">{event.location}</p>
<p className="py-4 font-normal text-base">{event.description}</p>
<h3 className="font-medium text-lg">People</h3>
<div>
<div className="absolute cursor-pointer text-gray-600 top-0 w-8 h-8 flex items-center justify-center right-0 mt-5 mr-5">
<button className="w-78 h-33 left-1406 top-28 px-4 py-2 uppercase mr-8 bg-gray-100 rounded-lg ">
Close
</button>
</div>
<h1 className=" font-semibold text-3xl leading-10 capitalize">{event.title}</h1>
<EventVisibility visibility={event.visibility ?? ''} />
<p className="py-2 text-base font-normal leading-5 text-left">
{dayjs(event.start).format('MMMM DD, YYYY h A')} - {dayjs(event.end).format('MMMM DD, YYYY h A')}
</p>
<p className="py-2 text-base font-normal leading-5 text-left">{event.location}</p>
<p className="py-4 font-normal text-base">{event.description}</p>
<h3 className="font-medium text-lg">People</h3>
<div>
{event.attendees?.map(({ attendee }) => (
<div className="flex items-center gap-4" key={attendee.email}>
<div className="w-6 h-6 bg-gray-300 rounded-full flex-shrink-0"></div>
<p className="py-2 font-normal text-base truncate overflow-hidden">
{attendee.email}
</p>
</div>
))}
</div>
{event.attendees?.map(({ attendee }) => (
<div className="flex items-center gap-4" key={attendee.email}>
<div className="w-6 h-6 bg-gray-300 rounded-full flex-shrink-0"></div>
<p className="py-2 font-normal text-base truncate overflow-hidden">
{attendee.email}
</p>
</div>
))}
</div>
<button className="bg-gray-200 rounded-lg hover:bg-gray-300 w-full p-3 font-normal text-lg leading-5 text-gray-700">
Join event
</button>
</div>
<button className="bg-gray-200 rounded-lg hover:bg-gray-300 w-full p-3 font-normal text-lg leading-5 text-gray-700">
Join event
</button>
</div>
);
};
</div>
);

export default Drawer;