Fixed Organization Card Layout on Admin and User Portal. (PalisadoesF…

…oundation#1672) * Redesigned the organization card. * Fixed Organization Card Layout on Admin and User Portal.
kanhaiya04 · Mar 5, 2024 · 2b82ebf · 2b82ebf
1 parent 308a00c
commit 2b82ebf
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 45 deletions.
diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css
@@ -72,6 +72,7 @@
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical;
+  max-width: 20rem;
 }
 
 .orgadmin {
@@ -82,7 +83,21 @@
   font-size: 0.9rem;
 }
 
-@media (max-width: 450px) {
+.address {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  align-items: center;
+}
+
+.address h6 {
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+}
+
+@media (max-width: 580px) {
   .orgCard {
     height: unset;
     margin: 0.5rem 0;

diff --git a/src/components/OrgListCard/OrgListCard.test.tsx b/src/components/OrgListCard/OrgListCard.test.tsx
@@ -78,9 +78,11 @@ describe('Testing the Super Dash List', () => {
       </MockedProvider>,
     );
     expect(screen.getByAltText(/Dogs Care image/i)).toBeInTheDocument();
-    expect(screen.getByText('Admins:')).toBeInTheDocument();
-    expect(screen.getByText('Members:')).toBeInTheDocument();
+    expect(screen.getByText(/Admins:/i)).toBeInTheDocument();
+    expect(screen.getByText(/Members:/i)).toBeInTheDocument();
     expect(screen.getByText('Dogs Care')).toBeInTheDocument();
+    expect(screen.getByText(/Sample City/i)).toBeInTheDocument();
+    expect(screen.getByText(/123 Sample Street/i)).toBeInTheDocument();
     userEvent.click(screen.getByTestId(/manageBtn/i));
     removeItem('id');
   });

diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
@@ -21,7 +21,7 @@ export interface InterfaceOrgListCardProps {
 }
 
 function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
-  const { _id, admins, image, members, name } = props.data;
+  const { _id, admins, image, address, members, name } = props.data;
 
   const { data } = useQuery(IS_SAMPLE_ORGANIZATION_QUERY, {
     variables: {
@@ -73,10 +73,17 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
             <h6 className={`${styles.orgdesc} fw-semibold`}>
               <span>{userData?.organizations[0].description}</span>
             </h6>
+            {address && address.city && (
+              <div className={styles.address}>
+                <h6 className="text-secondary">
+                  <span className="address-line">{address.line1}, </span>
+                  <span className="address-line">{address.city}, </span>
+                  <span className="address-line">{address.countryCode}</span>
+                </h6>
+              </div>
+            )}
             <h6 className={styles.orgadmin}>
-              {t('admins')}: <span>{admins.length}</span>
-            </h6>
-            <h6 className={styles.orgmember}>
+              {t('admins')}: <span>{admins.length}</span> &nbsp; &nbsp; &nbsp;{' '}
               {t('members')}: <span>{members.length}</span>
             </h6>
           </div>

diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css b/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css
@@ -30,6 +30,7 @@
   flex: 1;
   margin-left: 1rem;
   width: 70%;
+  margin-top: 0.7rem;
 }
 
 .orgCard button {
@@ -42,35 +43,69 @@
 .joinBtn {
   display: flex;
   justify-content: space-around;
-  width: 120px;
+  width: 8rem;
   border-width: medium;
 }
 
 .joinedBtn {
   display: flex;
   justify-content: space-around;
-  width: 120px;
+  width: 8rem;
 }
 
 .withdrawBtn {
   display: flex;
   justify-content: space-around;
-  width: 120px;
+  width: 8rem;
 }
 
 .orgName {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  font-size: 1rem;
 }
 
-@media (max-width: 1170px) {
+.orgdesc {
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  max-width: 20rem;
+}
+
+.orgadmin {
+  font-size: 0.9rem;
+}
+
+.orgmember {
+  font-size: 0.9rem;
+}
+
+.address {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  align-items: center;
+}
+
+.address h6 {
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+}
+
+@media (max-width: 1420px) {
   .orgCard {
     width: 100%;
   }
 }
 
-@media (max-width: 450px) {
+@media (max-width: 550px) {
   .orgCard {
     width: 100%;
   }

diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
@@ -169,8 +169,9 @@ let props = {
   ],
   members: [],
   address: {
-    city: '',
-    countryCode: '',
+    city: 'Sample City',
+    countryCode: 'US',
+    line1: '123 Sample Street',
     postalCode: '',
     state: '',
   },

diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
@@ -3,7 +3,6 @@ import styles from './OrganizationCard.module.css';
 import { Button } from 'react-bootstrap';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
 import { toast } from 'react-toastify';
 import {
   CANCEL_MEMBERSHIP_REQUEST,
@@ -16,6 +15,7 @@ import {
   USER_ORGANIZATION_CONNECTION,
 } from 'GraphQl/Queries/OrganizationQueries';
 import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
 
 const { getItem } = useLocalStorage();
 
@@ -33,6 +33,7 @@ interface InterfaceOrganizationCardProps {
   address: {
     city: string;
     countryCode: string;
+    line1: string;
     postalCode: string;
     state: string;
   };
@@ -116,46 +117,37 @@ function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
       <div className={styles.orgCard}>
         <div className={styles.innerContainer}>
           <div className={styles.orgImgContainer}>
-            <img
-              src={
-                props.image
-                  ? props.image
-                  : `https://api.dicebear.com/5.x/initials/svg?seed=${props.name
-                      .split(/\s+/)
-                      .map((word) => word.charAt(0))
-                      .slice(0, 2)
-                      .join('')}`
-              }
-              alt={`${props.name} image`}
-              data-testid={props.image ? '' : 'emptyContainerForImage'}
-            />
+            {props.image ? (
+              <img src={props.image} alt={`${props.name} image`} />
+            ) : (
+              <Avatar
+                name={props.name}
+                alt={`${props.name} image`}
+                dataTestId="emptyContainerForImage"
+              />
+            )}
           </div>
           <div className={styles.content}>
             <Tooltip title={props.name} placement="top-end">
-              <h4 className={styles.orgName}>{props.name}</h4>
+              <h4 className={`${styles.orgName} fw-semibold`}>{props.name}</h4>
             </Tooltip>
+            <h6 className={`${styles.orgdesc} fw-semibold`}>
+              <span>{props.description}</span>
+            </h6>
             {props.address && props.address.city && (
-              <div>
+              <div className={styles.address}>
                 <h6 className="text-secondary">
-                  <LocationOnIcon fontSize="inherit" className="fs-5" />
+                  <span className="address-line">{props.address.line1}, </span>
                   <span className="address-line">{props.address.city}, </span>
-                  <span className="address-line">{props.address.state}</span>
-                  <br />
-                  <LocationOnIcon fontSize="inherit" className="fs-5" />
-                  <span className="address-line">
-                    {props.address.postalCode},{' '}
-                  </span>
                   <span className="address-line">
                     {props.address.countryCode}
                   </span>
                 </h6>
               </div>
             )}
-            <h6>
-              {t('admins')}: <span>{props.admins?.length}</span>
-            </h6>
-            <h6>
-              {t('members')}: <span>{props.members?.length}</span>
+            <h6 className={styles.orgadmin}>
+              {t('admins')}: <span>{props.admins?.length}</span> &nbsp; &nbsp;
+              &nbsp; {t('members')}: <span>{props.members?.length}</span>
             </h6>
           </div>
         </div>

diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.module.css b/src/components/UserPortal/UserSidebar/UserSidebar.module.css
@@ -9,7 +9,7 @@
   background-color: var(--bs-white);
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 850px) {
   .mainContainer {
     display: none;
   }

diff --git a/src/screens/OrgList/OrgList.module.css b/src/screens/OrgList/OrgList.module.css
@@ -138,7 +138,7 @@
   flex-direction: column;
 }
 
-@media (max-width: 1120px) {
+@media (max-width: 1440px) {
   .contract {
     padding-left: calc(250px + 2rem + 1.5rem);
   }

diff --git a/src/screens/OrgList/OrganizationModal.tsx b/src/screens/OrgList/OrganizationModal.tsx
@@ -193,6 +193,7 @@ const OrganizationModal: React.FC<InterfaceOrganizationModalProps> = ({
               <Form.Control
                 placeholder={t('line1')}
                 autoComplete="off"
+                required
                 value={formState.address.line1}
                 onChange={(e) => handleInputChange('line1', e.target.value)}
               />

diff --git a/src/screens/UserPortal/Organizations/Organizations.module.css b/src/screens/UserPortal/Organizations/Organizations.module.css
@@ -48,7 +48,7 @@
   outline: 1px solid var(--bs-gray-400);
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 850px) {
   .mainContainer {
     width: 100%;
   }

diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx
@@ -29,6 +29,7 @@ interface InterfaceOrganizationCardProps {
   address: {
     city: string;
     countryCode: string;
+    line1: string;
     postalCode: string;
     state: string;
   };