Merge pull request #341 from credebl/fix-dark-mode-responsiveness

Fix dark mode responsiveness
credebl · Oct 12, 2023 · ad1f4cb · ad1f4cb
2 parents ea28c1e + 26b4849
commit ad1f4cb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 33 deletions.
diff --git a/src/components/Ecosystem/MemberList.tsx b/src/components/Ecosystem/MemberList.tsx
@@ -30,47 +30,49 @@ const MemberList = () => {
 		const { data } = response as AxiosResponse;
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
 			const totalPages = data?.data?.totalPages;
-			const sortedMemberList = data?.data?.members?.sort(
-				(
-					firstMember: { ecosystemRole: { name: number } },
-					secondMember: { ecosystemRole: { name: number } },
-				) =>
-				firstMember?.ecosystemRole?.name > secondMember?.ecosystemRole?.name
-						? 1
-						: secondMember?.ecosystemRole?.name > firstMember?.ecosystemRole?.name
-						? -1
-						: 0,
-			);
+
+			const compareMembers=(
+				firstMember: { ecosystemRole: { name: string; }; },
+				secondMember: { ecosystemRole: { name: string; }; }
+			)=> {
+				const firstName = firstMember?.ecosystemRole?.name;
+				const secondName = secondMember?.ecosystemRole?.name;
+
+				if (firstName > secondName) {
+					return 1;
+				} else if (secondName > firstName) {
+					return -1;
+				} else {
+					return 0;
+				}
+			}
+			const sortedMemberList = data?.data?.members?.sort(compareMembers)
 			const membersData = sortedMemberList?.map(
 				(member: {
-					ecosystemRole: { name: any };
-					orgName: any;
-					role: any;
+					ecosystemRole: { name: string };
+					orgName: string;
+					role: string;
 					createDateTime: any;
-					status: any;
+					status: string;
 				}) => {
 					return {
 						data: [
 							{
-								data: member.orgName ? member.orgName : 'Not avilable',
+								data: member.orgName || 'Not avilable',
 							},
 							{
-								data: member?.createDateTime ? (
-									<DateTooltip date={member?.createDateTime}>
-										{' '}
+								data: <DateTooltip date={member?.createDateTime}>
 										{dateConversion(member?.createDateTime)}{' '}
-									</DateTooltip>
-								) : (
-									'Not available'
-								),
+
+					</DateTooltip> ||	'Not available'
 							},
 							{
 								data: member.ecosystemRole.name ? (
 									<span
 										className={`${
 											member.ecosystemRole.name === 'Ecosystem Lead'
-												? 'bg-primary-100 text-primary-800 rounded dark:bg-primary-900 dark:text-primary-300  border-primary-100 dark:border-primary-500'
-												: 'bg-green-100 text-green-700 dark:bg-gray-700 dark:text-green-400 rounded border border-green-100 dark:border-green-500'
+												? 'bg-primary-100 text-primary-800 rounded dark:bg-gray-900 dark:text-primary-400 border border-primary-100 dark:border-primary-500'
+												: 'bg-green-100 text-green-800 rounded dark:bg-gray-700 dark:text-green-400 border border-green-100 dark:border-green-500'
 										}'text-sm font-medium mr-2 px-2.5 py-1 rounded-md'`}
 									>
 										{member.ecosystemRole.name}
@@ -84,9 +86,9 @@ const MemberList = () => {
 									<span
 										className={`${
 											member.status === 'SUSPENDED'
-												? 'bg-red-100 text-red-800 rounded dark:bg-red-900 dark:text-red-300  border-red-100 dark:border-red-500'
+												? 'bg-red-100 text-red-800 rounded dark:bg-gray-900 dark:text-red-300  border-red-100 dark:border-red-500 border'
 												: 'bg-green-100 text-green-700 dark:bg-gray-700 dark:text-green-400 rounded border border-green-100 dark:border-green-500'
-										}'text-sm font-medium mr-2 px-2.5 py-1 rounded-md'`}
+										}'text-sm font-medium mr-2 px-2.5 py-1 rounded'`}
 									>
 										{member.status}
 									</span>
@@ -124,6 +126,8 @@ const MemberList = () => {
 		setLoading(false);
 	};
 
+
+
 	const onPageChange = (page: number) => {
 		setCurrentPage({
 			...currentPage,

diff --git a/src/components/EcosystemInvite/SentInvitations.tsx b/src/components/EcosystemInvite/SentInvitations.tsx
@@ -186,13 +186,13 @@ const SentInvitations = () => {
 															key={invitation.id}
 															className={`${
 																invitation.status === 'pending'
-																	? 'bg-orange-100 text-orange-800 dark:bg-gray-700 dark:text-orange-300'
+																	? 'bg-orange-100 text-orange-800 border border-orange-100 dark:bg-gray-700 dark:border-orange-300 dark:text-orange-300'
 																	: invitation.status === 'accepted'
-																	? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
-																	: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
+																	? 'bg-green-100 text-green-700 dark:bg-gray-700 dark:text-green-400 rounded border border-green-100 dark:border-green-500'
+																	: 'bg-red-100 text-red-800 rounded dark:bg-gray-900 dark:text-red-300  border-red-100 dark:border-red-500 border'
 															} m-1 text-sm font-medium px-2.5 py-0.5 rounded`}
 														>
-															{invitation.status}
+															{invitation?.status?.charAt(0).toUpperCase() + invitation?.status?.slice(1)}
 														</span>
 													</div>
 													{invitation.status === 'pending' && (

diff --git a/src/components/organization/invitations/SendInvitationModal.tsx b/src/components/organization/invitations/SendInvitationModal.tsx
@@ -237,7 +237,7 @@ const SendInvitationModal = (props: {
 								{invitations.map((invitation) => (
 									<li key={invitation.email} className="p-2">
 										<div className="flex justify-between xl:block 2xl:flex align-center 2xl:space-x-4">
-											<div className="flex flex-wrap space-x-4 xl:mb-4 2xl:mb-0">
+											<div className="flex flex-wrap space-x-4 xl:mb-4 2xl:mb-0 dark:text-white">
 												<div>
 													<svg
 														xmlns="http://www.w3.org/2000/svg"
@@ -278,7 +278,7 @@ const SendInvitationModal = (props: {
 												onClick={() => removeInvitation(invitation.email)}
 											>
 												<svg
-													className="text-red-400 dark:text-gray-500 w-6 h-8  mb-3.5 mx-auto"
+													className="text-red-400 dark:text-red-500 w-6 h-8 mb-3.5 mx-auto"
 													aria-hidden="true"
 													fill="currentColor"
 													viewBox="0 0 20 20"