Skip to content

Commit

Permalink
fx:(invitations) Fix designs on invitations page layout #473 (#468)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mpanoathos
mpanoathos authored Sep 13, 2024
1 parent c65e379 commit b81f2a8
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 25 deletions.
6 changes: 3 additions & 3 deletions src/components/InvitationCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,20 @@ interface InvitationCardType {
// Define the InvitationCard component using a function declaration
function InvitationCard({ icon, status, time, staticNumber, percentage }: InvitationCardType) {
return (
<div className='bg-blue-100 w-40 md:w-40 lg:w-52 grid h-40 text-black shadow-lg rounded-lg '>
<div className='bg-blue-100 lg:dark:bg-blue-100 sm:dark:bg-[#0A1729] xm:dark:bg-[#0A1729] w-full grid h-36 text-black shadow-lg rounded-lg m-auto'>

<div className='flex flex-row mt-4 gap-3 sm:gap-1'>
<div className='flex w-8 h-10 ml-2'>
{icon}
</div>
<h3 className='text-md md:text-md lg:text-xl font-Inter font-bold text-[12px]'>{status}</h3>
<h3 className='text-md md:text-md lg:text-xl font-Inter font-bold text-[12px] sm:dark:text-white xm:dark:text-white lg:dark:text-black'>{status}</h3>
</div>
<div>
<p className='-mt-10 ml-12 text-[12px] font-inter text-gray-500 font-inter sm:-[8px]'>{time}</p>
</div>

<div className='flex justify-center items-center -mt-10 '>
<div className='font-bold -mt-4 ml-0 sm:ml-5 text-[30px] md:text-[40px]'>{staticNumber}
<div className='font-bold -mt-4 ml-0 sm:ml-5 text-[30px] md:text-[40px] sm:dark:text-white xm:dark:text-white lg:dark:text-black'>{staticNumber}
</div>
<div className='text-base text-[#7258ce] ml-3 mb-4'>
<AiOutlineRise className="text-xl" data-testid="ai-outline-user"/>
Expand Down
45 changes: 23 additions & 22 deletions src/pages/invitation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,37 +199,38 @@ function Invitation() {
const handleCloseModal = () => setIsModalOpen(false);

return (
<div className="sm:w-screen bg-red lg:w-full">
<div className="w-full">
{/* Header and Invite Button */}
<div className="flex flex-row md:flex-row md:justify-between items-center gap-36 md:gap-4 mb-8 ">
<h1 className="font-bold text-xl md:text-xl">Invitation Stats</h1>
<div className="flex flex-row sm:flex-rowmd:flex-row md:justify-between items-center md:gap-4 mb-8 ">
<div className='flex w-full items-center justify-between'>
<h1 className='font-bold lg:text-xl sm:text-lg xm:text-lg w-full'>Invitation Stats</h1>
<div className="flex items-center rounded-md shadow-sm bg-white dark:bg-[#020917] border-2 border-black dark:border-white h-8 w-[40%] md:hidden ml-5">
<FaFilter className="text-[#9e85f5] ml-1" />
{/* Select Dropdown for Small Screens */}
<select className="bg-transparent dark:bg-[#020917] text-gray-700 dark:text-white outline-none text-sm py-1">
<option value="Select range">Select range</option>
<option value="Last 7 days">Last 7 days</option>
<option value="Last 30 days">Last 30 days</option>
<option value="Last 90 days">Last 90 days</option>
<option value="Custom range">Custom range</option>
</select>
</div>
<button
type="button"
onClick={handleOpenModal}
className="bg-[#9e85f5] text-white text-lg md:text-lg rounded-md h-10 flex items-center justify-center w-[15%]"
className="lg:bg-[#9e85f5] bg-none lg:text-white text-[#9e85f5] text-lg lg:text-lg rounded-md h-10 flex items-center justify-center w-[15%]"
>
<IoIosAddCircleOutline className="w-6 h-6 md:w-8 md:h-8 md:mr-2" />
<span className="hidden md:block">Invite User</span>
<IoIosAddCircleOutline className="w-6 h-6 md:w-8 md:h-8 md:mr-2 xm:w-8 xm:h-8 sm:w-10 sm:h-10" />
<span className="hidden lg:block">Invite User</span>
</button>
</div>
</div>

<InvitationModal isOpen={isModalOpen} onClose={handleCloseModal} />
{/* Container for Select and Cards */}
<div className="flex flex-col border-blue-500 md:flex-row gap-4 md:gap-5 mb-10">
{/* Select Dropdown for Small Screens */}
<div className="flex items-center rounded-md shadow-sm px-3 py-2 bg-white border-2 border-black space-x-2 h-8 mb-4 md:hidden w-[90%] ">
<FaFilter className="text-[#9e85f5]" />
<select className="bg-transparent text-gray-700 outline-none ">
<option value="Select range">Select range</option>
<option value="Last 7 days">Last 7 days</option>
<option value="Last 30 days">Last 30 days</option>
<option value="Last 90 days">Last 90 days</option>
<option value="Custom range">Custom range</option>
</select>
</div>

{/* Invitation Cards */}
<div className="flex flex-wrap gap-4 md:gap-16 mb-4 md:mb-0 w-full">
<div className="grid grid-row-2 gap-4 sm:gap-4 mb-4 w-full lg:flex sm:grid grid-cols-2">
<InvitationCard
icon={
<FaCheck className="text-[#9e85f5] w-8 h-8 md:w-12 md:h-12 " />
Expand Down Expand Up @@ -267,9 +268,9 @@ function Invitation() {
</div>

{/* Select Dropdown for Desktop */}
<div className=".flex items-center rounded-md shadow-sm px-3 py-2 bg-white border-2 border-black space-x-2 h-8 hidden md:flex md:ml-8 ">
<div className=".flex items-center rounded-md shadow-sm px-3 py-2 bg-white dark:bg-[#020917] border-2 border-black dark:border-white space-x-2 h-8 hidden md:flex md:ml-8 ">
<FaFilter className="text-[#9e85f5]" />
<select className="bg-transparent text-gray-700 outline-none ">
<select className="bg-transparent dark:bg-[#020917] text-gray-700 dark:text-white outline-none ">
<option value="Select range">Select range</option>
<option value="Last 7 days">Last 7 days</option>
<option value="Last 30 days">Last 30 days</option>
Expand Down Expand Up @@ -311,7 +312,7 @@ function Invitation() {
<button
type="button"
onClick={handleSearch}
className="bg-[#9e85f5] text-white text-lg md:text-xl rounded-md h-10 flex items-center justify-center md:w-[10%]"
className="bg-[#9e85f5] text-white text-lg md:text-xl rounded-md h-10 flex items-center justify-center md:w-[10%] p-0 sm:p-5 xm:p-5"
>
Search
</button>
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ module.exports = {
theme: {
extend: {
screens: {
xm:'360px',
sm: '375px',
md: '768px',
lg: '976px',
Expand Down

0 comments on commit b81f2a8

Please sign in to comment.