Merge pull request #841 from AI4Bharat/org-ui

fix
AI4Bharat · Dec 4, 2024 · 952746b · 952746b
2 parents 93ecf9c + 3e6de07
commit 952746b
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 34 deletions.
diff --git a/src/containers/Organization/MyOrganization.jsx b/src/containers/Organization/MyOrganization.jsx
@@ -71,7 +71,7 @@ const MyOrganization = () => {
   const [orgOwnerId, setOrgOwnerId] = useState("");
   const [openUploadBulkVideoDialog, setOpenUploadBulkVideoDialog] =
     useState(false);
-    const [isUserOrgOwner, setIsUserOrgOwner] = useState(false);
+  const [isUserOrgOwner, setIsUserOrgOwner] = useState(false);
 
   const organizationDetails = useSelector(
     (state) => state.getOrganizationDetails.data
@@ -138,11 +138,11 @@ const MyOrganization = () => {
       const {
         organization: { organization_owners },
       } = userData;
-  
+
       if (organization_owners && organization_owners?.length > 0) {
-        const ownerIds = organization_owners.map(owner => owner.id);
+        const ownerIds = organization_owners.map((owner) => owner.id);
         setOrgOwnerId(ownerIds);
-  
+
         if (ownerIds.includes(userData.id)) {
           setIsUserOrgOwner(true);
         } else {
@@ -169,7 +169,16 @@ const MyOrganization = () => {
     }
 
     return (
-      <Typography variant="h2" gutterBottom component="div">
+      <Typography
+        variant="h2"
+        gutterBottom
+        component="div"
+        style={{
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+        }}
+      >
         {organizationDetails?.title}
       </Typography>
     );
@@ -188,31 +197,81 @@ const MyOrganization = () => {
   };
 
   return (
-    <Grid container direction="row" justifyContent="center" alignItems="center">
+    <Grid container direction="row">
       <Card className={classes.workspaceCard}>
         {renderOrgDetails()}
 
         <Box>
           <Tabs
+            style={{ marginLeft: "1.5rem" }}
             value={value}
             onChange={(_event, newValue) => setValue(newValue)}
+            variant="fullWidth"
             aria-label="basic tabs example"
+            TabIndicatorProps={{
+              style: { display: "none" },
+            }}
           >
-            <Tab label={"Projects"} sx={{ fontSize: 16, fontWeight: "700" }} />
-
-            { roles.filter((role) => role.value === userData?.role)[0]
+            <Tab
+              label={"Projects"}
+              sx={{
+                fontSize: 16,
+                fontWeight: "700",
+                bgcolor: value === 0 ? "#d3d3d3" : "#F5F5F5",
+                color: value === 0 ? "black" : "text.primary",
+                borderRadius: 1,
+                "&:hover": {
+                  bgcolor: "#e0e0e0",
+                },
+              }}
+            />
+
+            {roles.filter((role) => role.value === userData?.role)[0]
               ?.canAddMembers && (
-              <Tab label={"Members"} sx={{ fontSize: 16, fontWeight: "700" }} />
+              <Tab
+                label={"Members"}
+                sx={{
+                  fontSize: 16,
+                  fontWeight: "700",
+                  bgcolor: value === 1 ? "#d3d3d3" : "#F5F5F5",
+                  color: value === 1 ? "black" : "text.primary",
+                  borderRadius: 1,
+                  "&:hover": {
+                    bgcolor: "#e0e0e0",
+                  },
+                }}
+              />
             )}
 
-            {(isUserOrgOwner|| userData?.role==="ADMIN") &&(
-              <Tab label={"Reports"} sx={{ fontSize: 16, fontWeight: "700" }} />
+            {(isUserOrgOwner || userData?.role === "ADMIN") && (
+              <Tab
+                label={"Reports"}
+                sx={{
+                  fontSize: 16,
+                  fontWeight: "700",
+                  bgcolor: value === 2 ? "#d3d3d3" : "#F5F5F5",
+                  color: value === 2 ? "black" : "text.primary",
+                  borderRadius: 1,
+                  "&:hover": {
+                    bgcolor: "#e0e0e0",
+                  },
+                }}
+              />
             )}
 
-            {(isUserOrgOwner || userData?.role==="ADMIN")&&(
+            {(isUserOrgOwner || userData?.role === "ADMIN") && (
               <Tab
                 label={"Settings"}
-                sx={{ fontSize: 16, fontWeight: "700" }}
+                sx={{
+                  fontSize: 16,
+                  fontWeight: "700",
+                  bgcolor: value === 3 ? "#d3d3d3" : "#F5F5F5",
+                  color: value === 3 ? "black" : "text.primary",
+                  borderRadius: 1,
+                  "&:hover": {
+                    bgcolor: "#e0e0e0",
+                  },
+                }}
               />
             )}
           </Tabs>
@@ -230,7 +289,9 @@ const MyOrganization = () => {
             alignItems="center"
           >
             <Box display={"flex"} width={"100%"}>
-              {(isUserOrgOwner|| userData?.role==="ADMIN" || userData?.role==="PROJECT_MANAGER") && (
+              {(isUserOrgOwner ||
+                userData?.role === "ADMIN" ||
+                userData?.role === "PROJECT_MANAGER") && (
                 <Fragment>
                   <Button
                     style={{ marginRight: "10px" }}
@@ -302,7 +363,7 @@ const MyOrganization = () => {
             justifyContent="center"
             alignItems="center"
           >
-            {(isUserOrgOwner|| userData?.role==="ADMIN") && (
+            {(isUserOrgOwner || userData?.role === "ADMIN") && (
               <Button
                 className={classes.projectButton}
                 onClick={() => setAddUserDialog(true)}

diff --git a/src/styles/datasetStyle.js b/src/styles/datasetStyle.js
@@ -29,8 +29,6 @@ const DatasetStyle = makeStyles({
     width: "100%",
     minHeight: "500px",
     padding: "40px",
-    justifyContent: "center",
-    justifyItems: "center",
   },
   projectsettingGrid: {
     margin: "20px 0px 10px 0px",
@@ -45,7 +43,7 @@ const DatasetStyle = makeStyles({
     alignItems: "center",
     columnGap: "10px",
   },
- 
+
   filterContainer: {
     borderBottom: "1px solid #00000029",
     paddingLeft: "18.5px",
@@ -65,7 +63,7 @@ const DatasetStyle = makeStyles({
     // display : 'contents',
     alignItems: "center",
   },
- 
+
   applyBtn: {
     float: "right",
     borderRadius: "20px",
@@ -218,7 +216,7 @@ const DatasetStyle = makeStyles({
     marginRight: 2,
     textDecoration: "none",
   },
-  
+
   search: {
     //position: "relative",
     borderRadius: "24px",
@@ -264,38 +262,37 @@ const DatasetStyle = makeStyles({
     padding: "4px",
     verticalAlign: "sub",
     "& .MuiSvgIcon-root": {
-      fontSize: "1.3rem"
-    }
+      fontSize: "1.3rem",
+    },
   },
-  searchStyle:{
+  searchStyle: {
     position: "absolute",
     //  right: "107px",
     bottom: "2px",
     width: "85%",
     justifyContent: "flex-end",
   },
-  TaskListsearch:{
+  TaskListsearch: {
     position: "absolute",
-     right: "175px",
-      bottom: "2px"
-
+    right: "175px",
+    bottom: "2px",
   },
   clearAllBtn: {
     // float: "right",
-     margin: "10px 10px 10px 0px",
+    margin: "10px 10px 10px 0px",
     padding: "14px",
     // height: "15px",
   },
 
   taskQueueStatusTabs: {
-    fontSize: 16, 
-    fontWeight: "700"
+    fontSize: 16,
+    fontWeight: "700",
   },
 
   bulkProjectContainer: {
     flexDirection: "row",
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
   },
 
   newProjectWrapper: {
@@ -306,8 +303,8 @@ const DatasetStyle = makeStyles({
   },
 
   bulkProjectButton: {
-    borderRadius: "8px", 
-    margin: "0px 10px 0px 0px"
+    borderRadius: "8px",
+    margin: "0px 10px 0px 0px",
   },
 });