Lightmode/Darkmode merge including many fixes since 2.0.2
This commit is contained in:
Frikky
@@ -1,5 +1,6 @@
|
||||
import React, { memo, useContext, useEffect, useState } from 'react';
|
||||
import theme from "../theme.jsx";
|
||||
import {getTheme} from "../theme.jsx";
|
||||
import { Context } from '../context/ContextApi.jsx';
|
||||
import {
|
||||
FormControl,
|
||||
Card,
|
||||
@@ -63,6 +64,8 @@ const TenantsTab = memo((props) => {
|
||||
const [suborglistOpen, setSuborglistOpen] = React.useState(false);
|
||||
const [allTenantsOpen, setAllTenantsOpen] = React.useState(false);
|
||||
const itemColor = "black";
|
||||
const { themeMode, supportEmail, brandColor } = useContext(Context);
|
||||
const theme = getTheme(themeMode, brandColor);
|
||||
|
||||
useEffect(() => {
|
||||
if(parentOrg !== null && parentOrgFlag === null) {
|
||||
@@ -84,6 +87,9 @@ const TenantsTab = memo((props) => {
|
||||
} else if (regiontag === "ca") {
|
||||
regiontag = "CA";
|
||||
regionCode = "ca";
|
||||
}else if (regiontag === "au") {
|
||||
regiontag = "AUS";
|
||||
regionCode = "au"
|
||||
}
|
||||
}
|
||||
setParentOrgFlag(regionCode);
|
||||
@@ -168,6 +174,9 @@ const TenantsTab = memo((props) => {
|
||||
} else if (regiontag === "ca") {
|
||||
regiontag = "CA";
|
||||
regionCode = "ca";
|
||||
}else if (regiontag === "au") {
|
||||
regiontag = "AUS";
|
||||
regionCode = "au"
|
||||
}
|
||||
}
|
||||
setParentOrgFlag(regionCode);
|
||||
@@ -613,7 +622,7 @@ const TenantsTab = memo((props) => {
|
||||
}}
|
||||
>
|
||||
<DialogTitle>
|
||||
<span style={{ color: "white" }}>Add Sub-Organization</span>
|
||||
<Typography variant='h5' color="textPrimary">Add Sub-Organization</Typography>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<div>
|
||||
@@ -625,7 +634,7 @@ const TenantsTab = memo((props) => {
|
||||
InputProps={{
|
||||
style: {
|
||||
height: "50px",
|
||||
color: "white",
|
||||
color: theme.palette.textFieldStyle.color,
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
@@ -644,15 +653,14 @@ const TenantsTab = memo((props) => {
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: "#ff8544" }}
|
||||
style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: theme.palette.primary.main }}
|
||||
onClick={() => setModalOpen(false)}
|
||||
color="primary"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", backgroundColor: "#ff8544", color: "#1a1a1a"}}
|
||||
style={{ borderRadius: "2px", fontSize: 16, textTransform: "none",}}
|
||||
onClick={() => {
|
||||
createSubOrg(selectedOrganization.id, orgName);
|
||||
}}
|
||||
@@ -739,7 +747,7 @@ const TenantsTab = memo((props) => {
|
||||
}
|
||||
style={{ marginLeft: 15, height: 50, borderRadius: "2px", color: "#1a1a1a", backgroundColor: (!selectedOrganization.cloud_sync &&
|
||||
cloudSyncApikey.length === 0) ||
|
||||
loading ? "rgba(200, 200, 200, 0.5)" : "#ff8544", fontSize: 16, textTransform: "none" }}
|
||||
loading ? "rgba(200, 200, 200, 0.5)" : theme.palette.primary.main, fontSize: 16, textTransform: "none" }}
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
enableCloudSync(
|
||||
@@ -784,31 +792,31 @@ const TenantsTab = memo((props) => {
|
||||
const textColor = "#9E9E9E !important";
|
||||
|
||||
return (
|
||||
<div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121',borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949",}}>
|
||||
<div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: theme.palette.platformColor, borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: theme.palette.defaultBorder,}}>
|
||||
{modalView}
|
||||
{cloudSyncModal}
|
||||
<div style={{height: "100%", maxHeight: 1700, overflowY: "auto",overflowX: 'hidden', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
|
||||
<div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin' }}>
|
||||
<div style={{height: "100%", maxHeight: 1700, overflowY: "auto",overflowX: 'hidden', scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
|
||||
<div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin' }}>
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<h2 style={{ marginBottom: 8, marginTop: 0, color: "#ffffff" }}>Tenants</h2>
|
||||
<span style={{ color: textColor }}>
|
||||
<Typography variant='h5' color="textPrimary" style={{ marginBottom: 8, marginTop: 0 }}>Tenants</Typography>
|
||||
<Typography variant='body2' color="textSecondary">
|
||||
Create, manage and change to sub-organizations (tenants)! {" "}
|
||||
{isCloud
|
||||
? "You can only make a sub organization if you are a customer of shuffle or running a POC of the platform. Please contact support@shuffler.io to try it out."
|
||||
? `You can only make a sub organization if you are a customer of shuffle or running a POC of the platform. Please contact ${supportEmail} to try it out.`
|
||||
: ''}
|
||||
<a
|
||||
href="/docs/organizations"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ color: "#FF8444" }}
|
||||
style={{ color: theme.palette.linkColor }}
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
style={{ backgroundColor: '#ff8544', textTransform: 'none', fontSize: 16, color: "#1a1a1a", borderRadius: 4, width: 212, height: 40 }}
|
||||
style={{ textTransform: 'none', fontSize: 16, borderRadius: 4, width: 212, height: 40 }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
disabled={userdata.admin !== 'true'}
|
||||
@@ -835,17 +843,15 @@ const TenantsTab = memo((props) => {
|
||||
marginTop: 20,
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
<Typography
|
||||
variant='h6'
|
||||
color="textPrimary"
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '1.2rem',
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: '1px',
|
||||
color: "#ffffff"
|
||||
}}
|
||||
>
|
||||
Your Parent Organization
|
||||
</h3>
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -859,7 +865,7 @@ const TenantsTab = memo((props) => {
|
||||
/> */}
|
||||
|
||||
|
||||
<div style={{ borderRadius: 4, marginTop: 24, border: "1px solid #494949", width: "100%", overflowX: "auto", paddingBottom: 0 }}>
|
||||
<div style={{ borderRadius: 4, marginTop: 24, border: theme.palette.defaultBorder, width: "100%", overflowX: "auto", paddingBottom: 0 }}>
|
||||
<List
|
||||
style={{
|
||||
width: "100%",
|
||||
@@ -890,7 +896,7 @@ const TenantsTab = memo((props) => {
|
||||
display: "table-cell",
|
||||
padding: "0px 8px 8px 8px",
|
||||
textAlign: "center",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
/>
|
||||
@@ -903,7 +909,7 @@ const TenantsTab = memo((props) => {
|
||||
padding: "0px 8px 8px 8px",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
textAlign: "center",
|
||||
}}
|
||||
@@ -915,7 +921,7 @@ const TenantsTab = memo((props) => {
|
||||
minWidth: 100,
|
||||
maxWidth: 100,
|
||||
display: "table-cell",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
padding: "0px 8px 8px 8px",
|
||||
}}
|
||||
/>
|
||||
@@ -929,7 +935,7 @@ const TenantsTab = memo((props) => {
|
||||
padding: "0px 8px 8px 8px",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
/>
|
||||
@@ -942,7 +948,7 @@ const TenantsTab = memo((props) => {
|
||||
padding: "0px 8px 8px 8px",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
/>
|
||||
@@ -954,7 +960,7 @@ const TenantsTab = memo((props) => {
|
||||
key={rowIndex}
|
||||
style={{
|
||||
display: "flex",
|
||||
backgroundColor: "#212121",
|
||||
backgroundColor: theme.palette.platformColor,
|
||||
height: 30,
|
||||
}}
|
||||
>
|
||||
@@ -976,7 +982,7 @@ const TenantsTab = memo((props) => {
|
||||
variant="text"
|
||||
animation="wave"
|
||||
sx={{
|
||||
backgroundColor: "#1a1a1a",
|
||||
backgroundColor: theme.palette.loaderColor,
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
@@ -987,7 +993,7 @@ const TenantsTab = memo((props) => {
|
||||
) : parentOrg?.id?.length > 0 ? (
|
||||
<ListItem
|
||||
style={{
|
||||
backgroundColor: "#1A1A1A",
|
||||
backgroundColor: theme.palette.platformColor,
|
||||
display: "table-row",
|
||||
padding: 8,
|
||||
verticalAlign: "middle",
|
||||
@@ -1095,7 +1101,7 @@ const TenantsTab = memo((props) => {
|
||||
padding: "10px",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
primary={index === 1 ? "Parent Organization not found or May be you are not part of parent org. Please contact support@shuffler.io." : null}
|
||||
primary={index === 1 ? `Parent Organization not found or May be you are not part of parent org. Please contact ${supportEmail}` : null}
|
||||
colSpan={index === 0 ? 5 : undefined}
|
||||
/>
|
||||
))}
|
||||
@@ -1123,17 +1129,15 @@ const TenantsTab = memo((props) => {
|
||||
marginTop: 20,
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
<Typography
|
||||
variant='h6'
|
||||
color="textPrimary"
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '1.2rem',
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: '1px',
|
||||
color: "#ffffff"
|
||||
}}
|
||||
>
|
||||
Sub Organizations of the Current Organization ({subOrgs.length})
|
||||
</h3>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{/* <Divider
|
||||
@@ -1144,7 +1148,7 @@ const TenantsTab = memo((props) => {
|
||||
}}
|
||||
/> */}
|
||||
|
||||
<div style={{borderRadius: 4, marginTop: 24, border: "1px solid #494949", width: "100%", overflowX: "auto", paddingBottom: 0 }}>
|
||||
<div style={{borderRadius: 4, marginTop: 24, border: theme.palette.defaultBorder, width: "100%", overflowX: "auto", paddingBottom: 0 }}>
|
||||
<List
|
||||
style={{
|
||||
width: '100%',
|
||||
@@ -1188,7 +1192,7 @@ const TenantsTab = memo((props) => {
|
||||
display: "table-cell",
|
||||
padding: "0px 8px 8px 8px",
|
||||
textAlign: "center",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
/>
|
||||
@@ -1214,7 +1218,7 @@ const TenantsTab = memo((props) => {
|
||||
display: "table-cell",
|
||||
padding: "0px 8px 8px 8px",
|
||||
textAlign: "center",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}} />
|
||||
<ListItemText
|
||||
@@ -1226,7 +1230,7 @@ const TenantsTab = memo((props) => {
|
||||
padding: "0px 8px 8px 8px",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
textAlign: "center",
|
||||
}} />
|
||||
@@ -1237,7 +1241,7 @@ const TenantsTab = memo((props) => {
|
||||
minWidth: 100,
|
||||
maxWidth: 100,
|
||||
display: "table-cell",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
padding: "0px 8px 8px 8px",
|
||||
}}
|
||||
/>
|
||||
@@ -1251,7 +1255,7 @@ const TenantsTab = memo((props) => {
|
||||
padding: "0px 8px 8px 8px",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
/>
|
||||
@@ -1264,7 +1268,7 @@ const TenantsTab = memo((props) => {
|
||||
padding: "0px 8px 8px 8px",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
/>
|
||||
@@ -1290,9 +1294,13 @@ const TenantsTab = memo((props) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
|
||||
if (index % 2 === 0) {
|
||||
bgColor = themeMode === "dark" ? "#1A1A1A" : "#EAEAEA";
|
||||
}
|
||||
|
||||
return (
|
||||
<ListItem key={index} style={{ backgroundColor: index % 2 === 0 ? '#1A1A1A' : '#212121', width: "100%", borderBottomLeftRadius: 8, display:'table-row', borderBottomRightRadius: 8 }}>
|
||||
<ListItem key={index} style={{ backgroundColor: bgColor, width: "100%", borderBottomLeftRadius: 8, display:'table-row', borderBottomRightRadius: 8 }}>
|
||||
<ListItemText primary={<img alt={data?.name} src={data.image || theme.palette.defaultImage} style={imageStyle} />} style={{ width: 100,
|
||||
minWidth: 100,
|
||||
maxWidth: 100,
|
||||
@@ -1374,17 +1382,15 @@ const TenantsTab = memo((props) => {
|
||||
/>
|
||||
|
||||
<div style={{ textAlign: 'left', width: '100%', padding: '10px', marginTop: 20 }}>
|
||||
<h3
|
||||
<Typography
|
||||
variant='h6'
|
||||
color="textPrimary"
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '1.2rem',
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: '1px',
|
||||
color: "#ffffff"
|
||||
}}
|
||||
>
|
||||
All Tenants
|
||||
</h3>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{/* <Divider
|
||||
@@ -1398,7 +1404,7 @@ const TenantsTab = memo((props) => {
|
||||
style={{
|
||||
borderRadius: 4,
|
||||
marginTop: 24,
|
||||
border: "1px solid #494949",
|
||||
border: theme.palette.defaultBorder,
|
||||
width: "100%",
|
||||
overflowX: "auto",
|
||||
paddingBottom: 0,
|
||||
@@ -1448,7 +1454,7 @@ const TenantsTab = memo((props) => {
|
||||
display: "table-cell",
|
||||
padding: "0px 8px 8px 8px",
|
||||
textAlign: "center",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
/>
|
||||
@@ -1475,7 +1481,7 @@ const TenantsTab = memo((props) => {
|
||||
display: "table-cell",
|
||||
padding: "0px 8px 8px 8px",
|
||||
textAlign: "center",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
/>
|
||||
@@ -1488,7 +1494,7 @@ const TenantsTab = memo((props) => {
|
||||
padding: "0px 8px 8px 8px",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
textAlign: "center",
|
||||
}}
|
||||
@@ -1500,7 +1506,7 @@ const TenantsTab = memo((props) => {
|
||||
minWidth: 100,
|
||||
maxWidth: 100,
|
||||
display: "table-cell",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
padding: "0px 8px 8px 8px",
|
||||
}}
|
||||
/>
|
||||
@@ -1514,7 +1520,7 @@ const TenantsTab = memo((props) => {
|
||||
padding: "0px 8px 8px 8px",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
/>
|
||||
@@ -1527,7 +1533,7 @@ const TenantsTab = memo((props) => {
|
||||
padding: "0px 8px 8px 8px",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
borderBottom: "1px solid #494949",
|
||||
borderBottom: theme.palette.defaultBorder,
|
||||
verticalAlign: "middle",
|
||||
}}
|
||||
/>
|
||||
@@ -1590,6 +1596,11 @@ const TenantsTab = memo((props) => {
|
||||
}
|
||||
}
|
||||
|
||||
var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
|
||||
if (index % 2 === 0) {
|
||||
bgColor = themeMode === "dark" ? "#1A1A1A" : "#EAEAEA";
|
||||
}
|
||||
|
||||
return (
|
||||
<ListItem
|
||||
key={index}
|
||||
@@ -1597,7 +1608,7 @@ const TenantsTab = memo((props) => {
|
||||
display: "table-row",
|
||||
verticalAlign: "middle",
|
||||
padding: 8,
|
||||
backgroundColor: index % 2 === 0 ? "#1A1A1A" : "#212121",
|
||||
backgroundColor: bgColor,
|
||||
borderBottomLeftRadius:
|
||||
userdata?.orgs?.length - 1 === index ? 8 : 0,
|
||||
borderBottomRightRadius:
|
||||
|
||||
Reference in New Issue
Block a user