Chore/organization people UI changes

.github/workflows/pull-request.yml

@@ -43,7 +43,7 @@ jobs:
       - name: Get changed TypeScript files
         id: changed-files
         uses: tj-actions/changed-files@v40
-
+        
       - name: Check formatting
         if: steps.changed-files.outputs.only_changed != 'true'
         run: npm run format:check

src/components/LeftDrawer/LeftDrawer.module.css

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   padding: 1rem 1rem 0 1rem;
-  background-color: var(--bs-white);
+  background-color: #f6f8fc;
   transition: 0.5s;
   font-family: var(--bs-leftDrawer-font-family);
 }

src/components/LeftDrawerOrg/LeftDrawerOrg.module.css

@@ -8,7 +8,7 @@
   display: flex;
   flex-direction: column;
   padding: 0.8rem 0rem 0 1rem;
-  background-color: var(--bs-white);
+  background-color: #f6f8fc;
   transition: 0.5s;
   font-family: var(--bs-leftDrawer-font-family);
 }
@@ -105,7 +105,7 @@
 }
 
 .leftDrawer .organizationContainer .profileContainer {
-  background-color: #31bb6b33;
+  background-color: #e0e9ff;
   padding-right: 10px;
 }
 
@@ -155,7 +155,7 @@
 .leftDrawer .profileContainer .profileText .secondaryText {
   font-size: 0.8rem;
   font-weight: 400;
-  color: var(--bs-secondary);
+  /* color: var(--bs-secondary); */
   display: block;
   text-transform: capitalize;
 }

src/components/LeftDrawerOrg/LeftDrawerOrg.tsx

@@ -151,16 +151,19 @@ const leftDrawerOrg = ({
                   <Button
                     key={name}
                     variant={isActive === true ? 'success' : ''}
+                    style={{
+                      backgroundColor: isActive === true ? '#EAEBEF' : '',
+                    }}
                     className={`${
-                      isActive === true ? 'text-white' : 'text-secondary'
+                      isActive === true ? 'text-black' : 'text-secondary'
                     }`}
                   >
                     <div className={styles.iconWrapper}>
                       <IconComponent
                         name={name == 'Membership Requests' ? 'Requests' : name}
                         fill={
                           isActive === true
-                            ? 'var(--bs-white)'
+                            ? 'var(--bs-black)'
                             : 'var(--bs-secondary)'
                         }
                       />

src/screens/OrganizationPeople/AddMember.tsx

@@ -1,5 +1,5 @@
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
-import { Search } from '@mui/icons-material';
+import { Check, Close, Search } from '@mui/icons-material';
 import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
 import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';
@@ -33,10 +33,10 @@ import type {
 import styles from './OrganizationPeople.module.css';
 import Avatar from 'components/Avatar/Avatar';
 
-const StyledTableCell = styled(TableCell)(({ theme }) => ({
+const StyledTableCell = styled(TableCell)(() => ({
   [`&.${tableCellClasses.head}`]: {
-    backgroundColor: ['#31bb6b', '!important'],
-    color: theme.palette.common.white,
+    backgroundColor: ['#EAEBEF', '!important'],
+    color: '#555555',
   },
   [`&.${tableCellClasses.body}`]: {
     fontSize: 14,
@@ -357,8 +357,13 @@ function AddMember(): JSX.Element {
                     type="submit"
                     data-testid="submitBtn"
                     className={`position-absolute z-10 bottom-10 end-0  d-flex justify-content-center align-items-center `}
+                    style={{
+                      marginBottom: '10px',
+                      backgroundColor: '#A8C7FA',
+                      border: '1px #555555 solid',
+                    }}
                   >
-                    <Search />
+                    <Search style={{ color: '#555555' }} />
                   </Button>
                 </Form>
               </div>
@@ -413,7 +418,7 @@ function AddMember(): JSX.Element {
                             </StyledTableCell>
                             <StyledTableCell align="center">
                               <Link
-                                className={styles.membername}
+                                className={`${styles.membername} ${styles.subtleBlueGrey}`}
                                 to={{
                                   pathname: `/member/${currentUrl}`,
                                 }}
@@ -431,6 +436,10 @@ function AddMember(): JSX.Element {
                                   createMember(userDetails.user._id);
                                 }}
                                 data-testid="addBtn"
+                                style={{
+                                  backgroundColor: '#A8C7FA',
+                                  border: '#555555 solid 1px',
+                                }}
                               >
                                 Add
                               </Button>
@@ -559,15 +568,38 @@ function AddMember(): JSX.Element {
               variant="danger"
               onClick={closeCreateNewUserModal}
               data-testid="closeBtn"
+              style={{
+                backgroundColor: '#F8D6DC',
+                color: '#555555',
+              }}
             >
+              <Close
+                style={{
+                  color: '#FF4D4F',
+                  marginRight: '5px',
+                }}
+              />
+
               {translateOrgPeople('cancel')}
             </Button>
             <Button
               className={`${styles.colorPrimary} ${styles.borderNone}`}
               variant="success"
               onClick={handleCreateUser}
               data-testid="createBtn"
+              style={{
+                backgroundColor: '#A8C7FA',
+                border: '#555555 solid 1px',
+                marginLeft: '10px',
+                color: '#555555',
+              }}
             >
+              <Check
+                style={{
+                  color: '#555555', // Green color for the tick icon
+                  marginRight: '5px',
+                }}
+              />
               {translateOrgPeople('create')}
             </Button>
           </div>

src/screens/OrganizationPeople/OrganizationPeople.module.css

@@ -7,15 +7,57 @@
   width: 670px;
   max-width: 680px;
 }
+
+.subtleBlueGrey {
+  color: #7c9beb;
+  text-decoration: none;
+}
+
+.subtleBlueGrey:hover {
+  color: #5f7e91;
+  text-decoration: underline;
+}
 .dropdown {
   background-color: white;
-  border: 1px solid #31bb6b;
+  border: 1px solid #555555;
   position: relative;
   display: inline-block;
   margin-top: 10px;
   margin-bottom: 10px;
-  color: #31bb6b;
+  color: #555555;
+}
+
+.dropdown:hover,
+.dropdown:focus,
+.dropdown:active .dropdown:focus-visible .dropdown.show {
+  background-color: transparent !important;
+  border: 1px solid #555555;
+  color: #555555 !important;
+}
+.dropdown:focus,
+.dropdown:focus-visible,
+.dropdown:active .dropdown.show {
+  background-color: white !important;
+  color: black !important;
+  outline: none !important;
 }
+
+.dropdownItem {
+  background-color: white !important;
+  color: #555555 !important;
+  border: none !important;
+}
+
+/* Override Bootstrap's hover, focus, and active styles for dropdown items */
+.dropdownItem:hover,
+.dropdownItem:focus,
+.dropdownItem:active {
+  background-color: white !important; /* Keep the background white */
+  color: #555555 !important; /* Keep the text color as default */
+  outline: none !important;
+  box-shadow: none !important; /* Remove any shadow */
+}
+
 .input {
   flex: 1;
   position: relative;
@@ -42,10 +84,6 @@
   position: relative;
 }
 
-/* input {
-  outline: 1px solid var(--bs-gray-400);
-} */
-
 .btnsContainer .input button {
   width: 52px;
 }
@@ -54,25 +92,25 @@
   margin-top: 10px;
   margin-bottom: 10px;
   background-color: white;
-  box-shadow: 0 1px 1px #31bb6b;
+  box-shadow: 0 1px 1px #dddddd;
 }
 .inputFieldModal {
   margin-bottom: 10px;
   background-color: white;
-  box-shadow: 0 1px 1px #31bb6b;
+  box-shadow: 0 1px 1px #dddddd;
 }
 .inputField > button {
   padding-top: 10px;
   padding-bottom: 10px;
 }
 .TableImage {
   object-fit: cover;
+  margin-top: 15px !important;
   width: 50px !important;
   height: 50px !important;
   border-radius: 100% !important;
 }
 .tableHead {
-  background-color: #31bb6b !important;
   color: white;
   border-radius: 20px !important;
   padding: 20px;
@@ -95,7 +133,7 @@
 }
 .tableHeader {
   background-color: var(--bs-primary);
-  color: var(--bs-white);
+  color: var(--bs-greyish-black);
   font-size: 16px;
 }