From 016e5ac89a040895dd9aabd4020b4876e8fe4b11 Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Fri, 23 May 2025 19:40:28 +0200
Subject: [PATCH 1/2] ILEX-113 update ui design of organizations

---
 src/components/common/OrganizationsList.jsx | 59 ++++++++-------------
 src/components/organizations/index.jsx      |  6 +--
 2 files changed, 25 insertions(+), 40 deletions(-)

diff --git a/src/components/common/OrganizationsList.jsx b/src/components/common/OrganizationsList.jsx
index 5e961f34..f84b91fa 100644
--- a/src/components/common/OrganizationsList.jsx
+++ b/src/components/common/OrganizationsList.jsx
@@ -1,30 +1,32 @@
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import PersonAddOutlinedIcon from '@mui/icons-material/PersonAddOutlined';
-import {Box, Typography, Button, Link, List, ListItem, ListItemText} from "@mui/material";
+import {Box, Typography, Button, List, ListItem, ListItemText} from "@mui/material";
 
 import { vars } from "../../theme/variables";
-const { gray700, gray500, gray200, brand600 } = vars;
+const { gray50, gray700, gray200, brand600 } = vars;
 
 const OrganizationsList = ({organizations, viewJoinButton = true}) => {
   const navigate = useNavigate();
-  console.log("organizations: ", organizations)
+
   return (
     <List sx={{
       width: '100%',
       padding: 0,
       '& .MuiListItem-root': {
         display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'flex-start',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: '0.75rem',
         padding: '1.5rem',
-        gap: '1rem',
         borderBottom: `1px solid ${gray200}`,
         position: 'relative',
+        borderRadius: "0.5rem",
         '&:hover': {
           cursor: 'pointer',
+          backgroundColor: gray50,
           '& .join-button': {
-            display: 'inline-flex',
+            visibility: 'visible'
           },
           '& .MuiListItemText-root': {
             position: 'relative',
@@ -50,59 +52,42 @@ const OrganizationsList = ({organizations, viewJoinButton = true}) => {
       },
       '& .MuiListItemText-root': {
         margin: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '1rem',
-        width: '100%',
         '& .MuiListItemText-primary': {
           '& .MuiTypography-root': {
             color: gray700,
             fontSize: '1.25rem',
-            fontWeight: 500
-          },
-          '& .MuiLink-root': {
-            textDecoration: 'none',
-            color: gray500,
-            fontSize: '1.125rem',
             fontWeight: 500,
+            lineHeight: "1.875rem"
           }
-        },
-        '& .MuiListItemText-secondary': {
-          color: gray500,
-          fontSize: '0.875rem',
-          fontWeight: 400,
         }
       }
     }}>
       {organizations.length > 0 ? (
         organizations?.map((organization, index) => (
-          <ListItem key={index} onClick={() => navigate(`/organizations/${organization.name}`)}>
-            <Box display='flex' alignItems='center' justifyContent='space-between' width={1}>
-              <img src={organization.logo} alt={organization.name} />
+          <ListItem key={index} onClick={() => navigate(`/organizations/${organization}`)}>
+            <ListItemText 
+              primary={
+                <Box display='flex' alignItems='center' justifyContent='space-between'>
+                  <Typography component='span'>{organization}</Typography>
+                </Box>
+              } 
+            />
+            <Box display='flex' alignItems='center' justifyContent='space-between'>
               {
                 viewJoinButton && <Button
                   variant="outlined"
                   className="join-button"
-                  onClick={() => navigate(`/organizations/${organization.name}`)}
+                  onClick={() => navigate(`/organizations/${organization}`)}
                   startIcon={<PersonAddOutlinedIcon />}
                   sx={{
-                    display: 'none',
+                    visibility: 'hidden',
+                    width: 1
                   }}
                 >
                   Join organization
                 </Button>
               }
             </Box>
-            <ListItemText primary={
-              <Box display='flex' alignItems='center' justifyContent='space-between'>
-                <Typography component='span'>{organization.name}</Typography>
-                {organization.link && (
-                  <Link href={organization.link} display='flex'>
-                    {organization.link}
-                  </Link>
-                )}
-              </Box>
-            } secondary={organization.description} />
           </ListItem>
         ))
       ) : (
diff --git a/src/components/organizations/index.jsx b/src/components/organizations/index.jsx
index dd301bcd..a40aa1fe 100644
--- a/src/components/organizations/index.jsx
+++ b/src/components/organizations/index.jsx
@@ -7,7 +7,7 @@ import { GlobalDataContext } from "../../contexts/DataContext";
 import MessageDialog from "../common/MessageDialog";
 
 import { vars } from "../../theme/variables";
-const { gray700 } = vars;
+const { gray600 } = vars;
 
 
 const Organizations = () => {
@@ -41,10 +41,10 @@ const Organizations = () => {
   return (
     <Box p='2.25rem 5rem' flexGrow={1} overflow='auto'>
       <Stack direction="row" sx={{ justifyContent: "space-between" }}>
-        <Typography fontSize='1.5rem' color={gray700} fontWeight={600} mb='1.5rem'>
+        <Typography fontSize='1.5rem' color={gray600} fontWeight={600} mb='1.5rem'>
           {organizations?.length} Organizations
         </Typography>
-        {Object.keys(user).length !== 0 && <Button type="string" startIcon={<GroupAddOutlinedIcon />} onClick={handleCreateOrganization}>Create a new organization</Button>}
+        {user && <Button type="string" startIcon={<GroupAddOutlinedIcon />} onClick={handleCreateOrganization}>Create a new organization</Button>}
       </Stack>
       <OrganizationsList organizations={organizations} />
       {message && (

From 57b702a75933f0ef298b5b7c6707edf4a724a7bc Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Tue, 27 May 2025 11:39:34 +0200
Subject: [PATCH 2/2] ILEX-113 use user's groupname to show button

---
 src/components/organizations/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organizations/index.jsx b/src/components/organizations/index.jsx
index a40aa1fe..279cd9b2 100644
--- a/src/components/organizations/index.jsx
+++ b/src/components/organizations/index.jsx
@@ -44,7 +44,7 @@ const Organizations = () => {
         <Typography fontSize='1.5rem' color={gray600} fontWeight={600} mb='1.5rem'>
           {organizations?.length} Organizations
         </Typography>
-        {user && <Button type="string" startIcon={<GroupAddOutlinedIcon />} onClick={handleCreateOrganization}>Create a new organization</Button>}
+        {(user && user?.groupname) && <Button type="string" startIcon={<GroupAddOutlinedIcon />} onClick={handleCreateOrganization}>Create a new organization</Button>}
       </Stack>
       <OrganizationsList organizations={organizations} />
       {message && (