marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix - light theme ui break due to theme

Browse Source
This commit is contained in:
lalitdeore12@gmail.com
2025-05-20 01:02:16 +05:30
parent dc166a3d53
commit e92c2817b2
8 changed files with 542 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/go-app/main.go
+1
View File
@@ -1069,6 +1069,7 @@ func handleInfo(resp http.ResponseWriter, request *http.Request) {
activatedAppIds = append(activatedAppIds, app.ID)
}
userInfo.ActiveOrg.Branding = org.Branding
returnValue := shuffle.HandleInfo{
Success: true,
frontend/src/App.jsx
+22 -13
View File
@@ -92,8 +92,8 @@ const App = (message, props) => {
const [dataset, setDataset] = useState(false)
const [isLoaded, setIsLoaded] = useState(false)
const [curpath, setCurpath] = useState(typeof window === "undefined" || window.location === undefined ? "" : window.location.pathname)
const { themeMode, handleThemeChange } = useContext(Context);
const currentTheme = getTheme(themeMode);
const { themeMode, handleThemeChange, setBrandColor, brandColor} = useContext(Context);
const currentTheme = getTheme(themeMode, brandColor);
const mainColor = currentTheme?.palette?.backgroundColor
const [isPreviousThemeLight, setIsPreviousThemeLight] = useState(false)
@@ -106,18 +106,27 @@ const App = (message, props) => {
}, []);
useEffect(() => {
const isDarkPath = curpath === "/" || curpath === "/pricing" || curpath === "/partners" || curpath === "/faq" || curpath === "/professional-services" || curpath === "/contact" || curpath === "/training";
if (curpath && isDarkPath) {
if (themeMode === "light") {
setIsPreviousThemeLight(true)
const isDarkPath = curpath === "/" || curpath === "/pricing" || curpath === "/partners" || curpath === "/faq" || curpath === "/professional-services" || curpath === "/contact" || curpath === "/training";
if (curpath && isDarkPath) {
if (themeMode === "light") {
setIsPreviousThemeLight(true)
}
handleThemeChange("dark")
}else if ( !isDarkPath && isPreviousThemeLight && userdata?.active_org?.branding?.theme === "light") {
handleThemeChange("light")
setIsPreviousThemeLight(false)
}
handleThemeChange("dark")
}else if ( !isDarkPath && isPreviousThemeLight && userdata?.active_org?.branding?.theme === "light") {
handleThemeChange("light")
setIsPreviousThemeLight(false)
}
}, [themeMode, curpath, userdata])
if (isDarkPath && userdata && userdata?.active_org?.branding?.brand_color !== "#ff8544") {
setBrandColor("#ff8544")
}else if(!isDarkPath && userdata && userdata?.active_org?.branding?.brand_color !== "#ff8544" && userdata?.active_org?.branding?.brand_color?.length > 0) {
const brandColor = localStorage.getItem("brandColor")
if (brandColor !== null && brandColor !== undefined && brandColor.length > 0) {
setBrandColor(brandColor)
}
}
}, [themeMode, curpath, userdata])
if (
isLoaded &&
@@ -936,7 +945,7 @@ const App = (message, props) => {
pauseOnFocusLoss
draggable
pauseOnHover
theme="dark"
theme={themeMode}
/>
</CookiesProvider>
</ThemeProvider>
frontend/src/components/Branding.jsx
+444 -23
View File
@@ -1,8 +1,7 @@
import React, { useState, useEffect, useContext } from "react";
import ReactGA from 'react-ga4';
import theme from "../theme.jsx";
import {getTheme} from "../theme.jsx";
import { ToastContainer, toast } from "react-toastify"
import {
CheckCircle as CheckCircleIcon,
} from "@mui/icons-material";
@@ -13,8 +12,11 @@ import {
Divider,
Button,
Tooltip,
Grid,
Card,
ToggleButtonGroup,
ToggleButton,
useMediaQuery,
TextField,
Box,
} from "@mui/material";
import {
@@ -27,18 +29,98 @@ import { Context } from "../context/ContextApi.jsx";
const Branding = (props) => {
const { globalUrl, userdata, serverside, billingInfo,clickedFromOrgTab, stripeKey, selectedOrganization, handleGetOrg, } = props;
const { themeMode, handleThemeChange, supportEmail, setSupportEmail, logoutUrl, setLogoutUrl, brandColor, setBrandColor, setBrandName } = useContext(Context)
//const alert = useAlert();
const [publishingInfo, setPublishingInfo] = useState("");
const [publishRequirements, setPublishRequirements] = useState([])
const [currentSelectedTheme, setCurrentSelectedTheme] = useState("dark");
const [integrationPartner, setIntegrationPartner] = useState(false);
const [changingTheme, setChangingTheme] = useState(false);
const theme = getTheme(themeMode, brandColor)
const [selectedBrandColor, setSelectedBrandColor] = useState(theme?.palette?.main || "#FF8544")
const [selectedBrandName, setSelectedBrandName] = useState(selectedOrganization?.branding?.brand_name || "")
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
const [isLoading,setIsLoading] = useState(false);
const { leftSideBarOpenByClick } = useContext(Context)
const handleEditOrg = (joinStatus) => {
const handleEditOrg = (joinStatus) => {
setIsLoading(true)
const data = {
"org_id": selectedOrganization.id,
"creator_config": joinStatus,
};
if (joinStatus === "join" || joinStatus === "leave") {
data["creator_config"] = joinStatus
}
if (joinStatus === "light" || joinStatus === "dark" || joinStatus === "system") {
data["branding"] = {
"theme": joinStatus,
"enable_chat": selectedOrganization?.branding?.enable_chat || false,
"home_url": selectedOrganization?.branding?.home_url || "",
"brand_color": selectedOrganization?.branding?.brand_color || theme.palette.primary.main,
"brand_name": selectedOrganization?.branding?.brand_name || "",
"logout_url": selectedOrganization?.branding?.logout_url || "",
"support_email": selectedOrganization?.branding?.support_email || "",
}
data["editing_branding"] = true;
}
if (joinStatus === "brand_color") {
data["branding"] = {
"theme": selectedOrganization?.branding?.theme || "dark",
"enable_chat": selectedOrganization?.branding?.enable_chat || false,
"home_url": selectedOrganization?.branding?.home_url || "",
"brand_color": selectedBrandColor,
"brand_name": selectedOrganization?.branding?.brand_name || "",
"logout_url": selectedOrganization?.branding?.logout_url || "",
"support_email": selectedOrganization?.branding?.support_email || "",
}
data["editing_branding"] = true;
}
if (joinStatus === "brand_name") {
data["branding"] = {
"theme": selectedOrganization?.branding?.theme || "dark",
"enable_chat": selectedOrganization?.branding?.enable_chat || false,
"home_url": selectedOrganization?.branding?.home_url || "",
"brand_color": selectedOrganization?.branding?.brand_color || theme.palette.primary.main,
"brand_name": selectedBrandName,
"logout_url": selectedOrganization?.branding?.logout_url || "",
"support_email": selectedOrganization?.branding?.support_email || "",
}
toast.info("Updating brand name to " + selectedBrandName + ". Please wait a moment.")
data["editing_branding"] = true;
}
if (joinStatus === "support_email") {
data["branding"] = {
"theme": selectedOrganization?.branding?.theme || "dark",
"enable_chat": selectedOrganization?.branding?.enable_chat || false,
"home_url": selectedOrganization?.branding?.home_url || "",
"brand_color": selectedOrganization?.branding?.brand_color || theme.palette.primary.main,
"brand_name": selectedOrganization?.branding?.brand_name || "",
"support_email": supportEmail,
"logout_url": selectedOrganization?.branding?.logout_url || "",
}
data["editing_branding"] = true;
}
if (joinStatus === "logout_url") {
data["branding"] = {
"theme": selectedOrganization?.branding?.theme || "dark",
"enable_chat": selectedOrganization?.branding?.enable_chat || false,
"home_url": selectedOrganization?.branding?.home_url || "",
"brand_color": selectedOrganization?.branding?.brand_color || theme.palette.primary.main,
"brand_name": selectedOrganization?.branding?.brand_name || "",
"support_email": selectedOrganization?.branding?.support_email || "",
"logout_url": logoutUrl,
}
data["editing_branding"] = true;
}
const url = globalUrl + `/api/v1/orgs/${selectedOrganization.id}`;
fetch(url, {
mode: "cors",
@@ -56,18 +138,56 @@ const Branding = (props) => {
if (responseJson["success"] === false) {
toast("Failed updating org: ", responseJson.reason);
} else {
if (joinStatus == "join") {
setPublishingInfo("Your organization is now part of the Partner Program. You can now create, publish and manage content for your organization's public page.")
} else {
setPublishingInfo("Your organization is no longer part of the Creator Incentive Program. You can still create a creator account to manage your organization's content.")
if (joinStatus === "join" || joinStatus === "leave") {
if (joinStatus === "join") {
setPublishingInfo("Your organization is now part of the Partner Program. You can now create, publish and manage content for your organization's public page.")
} else {
setPublishingInfo("Your organization is no longer part of the Creator Incentive Program. You can still create a creator account to manage your organization's content.")
}
}
if (joinStatus === "light" || joinStatus === "dark" || joinStatus === "system") {
handleThemeChange(joinStatus)
setChangingTheme(false)
setCurrentSelectedTheme(joinStatus)
}
if (joinStatus === "support_email") {
toast.info("Support email updated successfully.")
if (supportEmail?.length > 0) {
setSupportEmail(supportEmail)
}else {
setSupportEmail("support@shuffler.io")
}
}
if (joinStatus === "logout_url") {
toast.info("Logout URL updated successfully.")
setLogoutUrl(logoutUrl)
}
if (joinStatus === "brand_color") {
toast.info("Brand color updated successfully.")
setBrandColor(selectedBrandColor)
localStorage.setItem("brandColor", selectedBrandColor)
}
if (joinStatus === "brand_name") {
toast.info("Brand name updated successfully.")
setBrandName(selectedBrandName)
localStorage.setItem("brandName", selectedBrandName)
}
handleGetOrg(selectedOrganization.id);
}
setIsLoading(false)
}
})
)
.catch((error) => {
toast("Err: " + error.toString());
});
setIsLoading(false)
})
};
// Should enable / disable org branding
@@ -117,16 +237,60 @@ const Branding = (props) => {
const leadinfo = selectedOrganization.lead_info === undefined || selectedOrganization.lead_info === null || selectedOrganization.lead_info === "" ? "" : JSON.stringify(selectedOrganization.lead_info)
const isPartner = leadinfo.includes("partner")
useEffect(() => {
if (selectedOrganization?.branding?.theme && selectedOrganization?.creator_org?.length === 0) {
setCurrentSelectedTheme(selectedOrganization.branding.theme);
}
if (selectedOrganization?.creator_org?.length > 0 && userdata?.active_org?.branding.theme) {
setCurrentSelectedTheme(userdata?.active_org?.branding.theme);
}
if (userdata.support) {
setCurrentSelectedTheme(localStorage.getItem("theme") || "dark");
}
if (
selectedOrganization &&
selectedOrganization?.branding?.brand_color &&
selectedOrganization?.branding?.brand_color !== selectedBrandColor
) {
setSelectedBrandColor(selectedOrganization.branding.brand_color);
}
if (selectedOrganization?.branding?.brand_name && selectedOrganization?.branding?.brand_name !== selectedBrandName) {
setSelectedBrandName(selectedOrganization.branding.brand_name);
}
}, [selectedOrganization, userdata]);
useEffect(() => {
if ((userdata && userdata?.org_status?.includes("integration_partner") && !integrationPartner && !userdata?.org_status?.includes("sub_org")) || userdata?.support) {
setIntegrationPartner(true)
}
},[userdata, integrationPartner]);
const handleColorChange = (e) => {
setSelectedBrandColor(e.target.value);
};
const saveColorChanges = () => {
toast.info("Updating brand color to " + selectedBrandColor + ". Please wait a moment.")
handleEditOrg("brand_color");
};
return (
<div style={{ width: clickedFromOrgTab? "100%": "auto", height: "100%", minHeight: 1100, boxSizing: 'border-box', transition: "width 0.3s ease", padding: "27px 10px 19px 27px", height: "auto", backgroundColor: '#212121', borderRadius: '16px', }}>
<div style={{height: 843, overflowY: "auto",}}>
<div style={{ width: clickedFromOrgTab? "100%": "auto", height: "100%", minHeight: 1100, boxSizing: 'border-box', transition: "width 0.3s ease", padding: "27px 10px 19px 27px", backgroundColor: theme.palette.platformColor, borderRadius: '16px', scrollbarWidth: "thin", scrollbarColor: theme.palette.scrollbarColorTransparent, }}>
<div style={{ overflowY: "auto",}}>
<div style={{width: "100%", overflowX: 'hidden', }}>
<Typography style={{fontSize: 24, fontWeight: "bold", marginTop: clickedFromOrgTab ?0:null,}}>
Partner Status & Branding
</Typography>
<Typography variant="body1" color="textSecondary" style={{ marginTop: 10, marginBottom: 10, fontSize: 16 }}>
You can customize your organization's branding by uploading a logo, changing the color scheme and a lot more.
Please note that same theme settings are applied to all sub organizations for partners.
</Typography>
<Typography variant="body1" color="textSecondary" style={{display: 'flex', marginTop: 20, marginBottom: 10 }}>
@@ -150,7 +314,8 @@ const Branding = (props) => {
style={{ textDecoration: "none" }} // Optional: remove underline
>
<Button
variant="contained"
variant="contained"
color="primary"
style={{
marginTop: 20,
marginBottom: 10,
@@ -176,15 +341,15 @@ const Branding = (props) => {
</Button>
)}
<Divider style={{marginTop: 50, marginBottom: 50, }} />
<Divider style={{marginTop: 50, marginBottom: 50, color: theme.palette.defaultBorder}} />
<Typography style={{fontSize: 24, fontWeight: "bold"}}>
Partner Program
Public Partner Program
</Typography>
<div style={{ display: "flex", width: 900, marginTop: 10}}>
<div>
<span>
<Typography variant="body1" color="textSecondary" style={{fontSize: 16}}>
By changing publishing settings, you agree to our <a href="/docs/terms_of_service" target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}}>Terms of Service</a>, and acknowledge that your organization's non-sensitive data will be added as a <a target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}} href="https://shuffler.io/creators">creator account</a>. None of your existing workflows, apps, or other stored data will be published. Any admin in your organization can manage the creator configuration. Becoming a creator organization IS reversible.<div/>Support: <a href="mailto:support@shuffler.io"target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}}>support@shuffler.io</a>
<Typography variant="body2" color="textSecondary">
By changing publishing settings, you agree to our <a href="/docs/terms_of_service" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor}}>Terms of Service</a>, and acknowledge that your organization's non-sensitive data will be added as a <a target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor}} href="https://shuffler.io/creators">creator account</a>. None of your existing workflows, apps, or other stored data will be published. Any admin in your organization can manage the creator configuration. Becoming a creator organization IS reversible.<div/>Support: <a href={`mailto:${supportEmail}`} target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor}}>{supportEmail}</a>
</Typography>
{selectedOrganization.creator_id == "" ?
<Typography variant="h6" color="textSecondary" style={{ marginTop: 20, marginBottom: 10, color: "grey", }}>
@@ -195,7 +360,9 @@ const Branding = (props) => {
}
<Button
style={{ height: 40, marginTop: 10, width: 300, textTransform: 'none', fontSize: 18, backgroundColor: "#ff8544", color: "#1a1a1a" }}
variant="contained"
color="primary"
style={{ height: 40, marginTop: 10, width: 300, textTransform: 'none', fontSize: 18, }}
variant={selectedOrganization.creator_id == "" ? "contained" : "outlined"}
color={selectedOrganization.creator_id == "" ? "primary" : "secondary"}
disabled={!isOrganizationReady()}
@@ -222,6 +389,260 @@ const Branding = (props) => {
</div>
</div>
</div>
{ integrationPartner ? (
<>
<Divider style={{marginTop: 50, marginBottom: 50, color: theme.palette.defaultBorder}} />
<Typography style={{fontSize: 24, fontWeight: "bold"}}>
Parent & Sub Organization Branding
</Typography>
<Typography variant="body1" color="textSecondary" style={{ marginTop: 10, marginBottom: 10, fontSize: 16 }}>
Sub organizations are not allowed to change their branding. The branding is inherited from the parent organization.
</Typography>
<ToggleButtonGroup
value={currentSelectedTheme}
exclusive
disabled={isLoading}
onChange={(event, newTheme) => {
if (newTheme === null) {
return;
}
if (newTheme === currentSelectedTheme) {
return;
}
if (changingTheme === true) {
return
}
toast.info("Changing theme to " + newTheme + ". Please wait a moment.")
setChangingTheme(true)
handleEditOrg(newTheme);
}}
aria-label="theme"
style={{ justifyContent: "flex-start", marginBottom: 10, marginTop: 20 }}
>
<ToggleButton value="light" aria-label="light theme" style={{ backgroundColor: currentSelectedTheme === "light" ? theme.palette.hoverColor : theme.palette.backgroundColor }}>
Light
</ToggleButton>
<ToggleButton value="dark" aria-label="dark theme" style={{ backgroundColor: currentSelectedTheme === "dark" ? theme.palette.hoverColor : theme.palette.backgroundColor }}>
Dark
</ToggleButton>
<ToggleButton value="system" aria-label="system theme" style={{ backgroundColor: currentSelectedTheme === "system" ? theme.palette.hoverColor : theme.palette.backgroundColor }}>
System
</ToggleButton>
</ToggleButtonGroup>
</>
): null}
{integrationPartner ? <>
<Divider style={{marginTop: 50, marginBottom: 50, color: theme.palette.defaultBorder}} />
<Typography variant="text" style={{color: theme.palette.text.primary, fontFamily: theme.typography.fontFamily,}}>Brand Name</Typography>
<div style={{ display: "flex", alignItems: 'center', justifyContent: 'flex-start', marginBottom: 10, gap: 15, maxWidth: 434 }}>
<TextField
type="text"
id="brandName"
value={selectedBrandName}
onChange={(e) => {
const value = e.target.value;
setSelectedBrandName(value);
}}
size="small"
PaperProps={{ style: { backgroundColor: theme.palette.backgroundColor, borderRadius: 4, border: `1px solid ${theme.palette.defaultBorder}` } }}
style={{
height: 36,
borderRadius: 4,
border: `1px solid ${theme.palette.defaultBorder}`,
width: 300
}}
/>
<Button
onClick={()=>{
if (selectedBrandName !== selectedOrganization.branding.brandName) {
handleEditOrg("brand_name");
}
}}
disabled={isLoading}
variant="contained"
color="primary"
style={{ fontSize: 16, textTransform: 'capitalize', boxShadow: "none", borderRadius: 4, width: 110, height: 35 }}
>
Update
</Button>
</div>
</>: null}
{integrationPartner ? <>
<Typography variant="text" style={{color: theme.palette.text.primary, fontFamily: theme.typography.fontFamily}}>Brand Color</Typography>
<div style={{ display: "flex", alignItems: 'center', justifyContent: 'flex-start', marginBottom: 10, gap: 15, maxWidth: 434 }}>
<input
type="color"
id="color"
name="color"
value={selectedBrandColor}
onChange={handleColorChange}
style={{
width: 50,
height: 50,
minWidth: 50,
minHeight: 50,
cursor: "pointer",
borderRadius: 5,
border: "none"
}}
/>
<TextField
type="text"
id="colorCode"
value={selectedBrandColor}
size="small"
fullWidth={true}
PaperProps={{ style: { backgroundColor: theme.palette.backgroundColor, borderRadius: 4, border: `1px solid ${theme.palette.defaultBorder}` } }}
style={{
height: 36,
padding: "0 10px",
borderRadius: 4,
border: `1px solid ${theme.palette.defaultBorder}`,
width: 260
}}
/>
<Button
onClick={()=>{saveColorChanges();}}
disabled={isLoading}
variant="contained"
color="primary"
style={{ fontSize: 16, textTransform: 'capitalize', boxShadow: "none", borderRadius: 4, width: 110, height: 35 }}
>
Update
</Button>
</div>
</>: null}
{integrationPartner ? (
<div style={{ width: "100%", maxWidth: 434, marginRight: 10, marginTop: 20 }}>
<Typography variant="text" style={{color: theme.palette.text.primary, fontFamily: theme.typography.fontFamily}}>Support Email</Typography>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<TextField
required
style={{
flex: "1",
display: "flex",
height: 35,
width: "100%",
maxWidth: 434,
fontFamily: theme.typography.fontFamily,
marginTop: "5px",
marginRight: "15px",
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
}}
fullWidth={true}
placeholder="Support Email"
type="email"
id="standard-required"
margin="normal"
variant="outlined"
value={supportEmail}
onChange={(e) => {
setSupportEmail(e.target.value)
}}
color="primary"
InputProps={{
style: {
color: theme.palette.textFieldStyle.color,
height: "35px",
fontSize: "1em",
borderRadius: 4,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
},
}}
/>
<Button
style={{ fontSize: 16, textTransform: 'capitalize', boxShadow: "none", borderRadius: 4, width: 110, height: 35 }}
variant="contained"
color="primary"
disabled={isLoading}
onClick={() => {
toast.info("Updating support email..")
handleEditOrg("support_email")
}}
>
Update
</Button>
</Box>
</div>
) : null}
{integrationPartner ? (
<div style={{ width: "100%", maxWidth: 434, marginRight: 10, marginTop: 20 }}>
<Typography variant="text" style={{color: theme.palette.text.primary, fontFamily: theme.typography.fontFamily}}>Logout URL</Typography>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<TextField
required
style={{
flex: "1",
display: "flex",
height: 35,
width: "100%",
maxWidth: 434,
fontFamily: theme.typography.fontFamily,
marginTop: "5px",
marginRight: "15px",
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
}}
fullWidth={true}
placeholder="Logout URL"
type="text"
id="standard-required"
margin="normal"
variant="outlined"
value={logoutUrl}
onChange={(e) => {
setLogoutUrl(e.target.value)
}}
color="primary"
InputProps={{
style: {
color: theme.palette.textFieldStyle.color,
height: "35px",
fontSize: "1em",
borderRadius: 4,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
},
}}
/>
<Button
style={{ fontSize: 16, textTransform: 'capitalize', boxShadow: "none", borderRadius: 4, width: 110, height: 35 }}
variant="contained"
color="primary"
disabled={isLoading}
onClick={() => {
toast.info("Updating logout url..")
handleEditOrg("logout_url")
}}
>
Update
</Button>
</Box>
</div>
) : null}
</div>
</div>
)
frontend/src/components/CacheView.jsx
+3 -3
View File
@@ -680,7 +680,7 @@ const CacheView = memo((props) => {
labelId="input-namespace-select-label"
id="input-namespace-select-id"
style={{
color: "white",
color: theme.palette.textFieldStyle.color,
minWidth: 122,
maxWidth: 122,
height: 35,
@@ -719,7 +719,7 @@ const CacheView = memo((props) => {
<MenuItem
key={index}
value={data}
style={{ color: "white" }}
style={{ color: theme.palette.textFieldStyle.color, }}
>
{data.replaceAll("_", " ")}
</MenuItem>
@@ -826,7 +826,7 @@ const CacheView = memo((props) => {
}}
InputProps={{
style: {
color: "white",
color: theme.palette.textFieldStyle.color,
height: 35,
fontSize: 16,
borderRadius: 4,
frontend/src/components/CloudSyncTab.jsx
+3 -2
View File
@@ -644,14 +644,15 @@ const CloudSyncTab = (props) => {
<TextField
color="primary"
style={{
backgroundColor: "#1a1a1a",
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
marginRight: 10,
height: 35,
}}
InputProps={{
style: {
height: "35px",
color: "white",
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
fontSize: "1em",
},
}}
frontend/src/components/LeftSideBar.jsx
+53 -5
View File
@@ -401,6 +401,56 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
}
}, [usersWorkFlows]);
const handleChangeTheme = (newTheme) => {
toast.info("Changing theme to " + newTheme + " - please wait!");
const data = {
"org_id": userdata?.active_org?.id,
};
data["branding"] = {
"theme": newTheme,
"enable_chat": userdata?.active_org?.branding?.enable_chat || false,
"home_url": userdata.active_org?.branding?.home_url || "",
"brand_color": userdata?.active_org?.branding?.brand_color || theme.palette.primary.main,
"brand_name": userdata?.active_org?.branding?.brand_name || "",
"logout_url": userdata?.active_org?.branding?.logout_url || "",
"support_email": userdata?.active_org?.branding?.support_email || "",
}
data["editing_branding"] = true;
const url = globalUrl + `/api/v1/orgs/${userdata?.active_org?.id}`;
fetch(url, {
mode: "cors",
method: "POST",
body: JSON.stringify(data),
credentials: "include",
crossDomain: true,
withCredentials: true,
headers: {
"Content-Type": "application/json; charset=utf-8",
},
})
.then((response) =>
response.json().then((responseJson) => {
if (responseJson["success"] === false) {
toast("Failed updating org: ", responseJson.reason);
} else {
handleThemeChange(newTheme)
setCurrentSelectedTheme(newTheme);
}
})
)
.catch((error) => {
console.log("Error changing theme: ", error);
});
};
const removeCookie = (name, path = "/") => {
document.cookie = `${name}=; path=${path}; expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
};
@@ -505,9 +555,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
if (newTheme === currentSelectedTheme) {
return;
}
console.log("Selected theme:", newTheme);
setCurrentSelectedTheme(newTheme)
handleThemeChange(newTheme)
handleChangeTheme(newTheme);
}}
aria-label="theme"
style={{display: 'flex', justifyContent: "center", marginBottom: 10, }}
@@ -587,7 +635,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
<Divider style={{ marginBottom: 10, }} />
<Typography color="textSecondary" align="center" style={{ marginTop: 5, marginBottom: 5, fontSize: 18 }}>
Version: 2.1.0-beta
Version: 2.0.2
</Typography>
</Menu>
</span>
@@ -2022,4 +2070,4 @@ const ModalView = memo(({searchBarModalOpen, setSearchBarModalOpen, globalUrl, s
</Dialog>
)
)
});
});
frontend/src/components/OrgHeaderexpandedNew.jsx
+10 -9
View File
@@ -448,7 +448,7 @@ const OrgHeaderexpandedNew = (props) => {
<Grid item xs={12} style={{}}>
<span>
<div style={{}}>
<div style={{ flex: "3", color: "white" }}>
<div style={{ flex: "3", color: theme.palette.text.primary }}>
<div style={{ marginTop: 8, display: "flex" }} />
<div style={{ display: "flex" }}>
<div style={{ width: "100%", maxWidth: 434, marginRight: 10 }}>
@@ -931,7 +931,7 @@ const OrgHeaderexpandedNew = (props) => {
marginTop: "8px",
marginRight: "16px",
height: 35,
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
}}
fullWidth={true}
type="name"
@@ -948,7 +948,8 @@ const OrgHeaderexpandedNew = (props) => {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
fontWeight: 400,
fontSize: 16,
@@ -970,7 +971,7 @@ const OrgHeaderexpandedNew = (props) => {
flex: "1",
marginTop: "8px",
marginRight: "15px",
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
height: 35,
}}
fullWidth={true}
@@ -988,7 +989,7 @@ const OrgHeaderexpandedNew = (props) => {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.textFieldStyle.color,
fontWeight: 400,
fontSize: 16,
@@ -1010,7 +1011,7 @@ const OrgHeaderexpandedNew = (props) => {
flex: "1",
marginTop: "5px",
marginRight: "15px",
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
height: 35,
}}
fullWidth={true}
@@ -1028,7 +1029,7 @@ const OrgHeaderexpandedNew = (props) => {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.textFieldStyle.color,
fontWeight: 400,
fontSize: 16,
@@ -1050,7 +1051,7 @@ const OrgHeaderexpandedNew = (props) => {
flex: "1",
marginTop: "5px",
marginRight: "15px",
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
height: 35,
}}
fullWidth={true}
@@ -1068,7 +1069,7 @@ const OrgHeaderexpandedNew = (props) => {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.textFieldStyle.color,
fontWeight: 400,
fontSize: 16,
frontend/src/components/UserManagmentTab.jsx
+6 -6
View File
@@ -657,7 +657,7 @@ const UserManagmentTab = memo((props) => {
InputProps={{
style: {
height: "50px",
color: "white",
color: theme.palette.textFieldStyle.color,
fontSize: "1em",
},
}}
@@ -772,7 +772,7 @@ const UserManagmentTab = memo((props) => {
InputProps={{
style: {
height: 50,
color: "white",
color: theme.palette.textFieldStyle.color,
},
}}
color="primary"
@@ -815,7 +815,7 @@ const UserManagmentTab = memo((props) => {
InputProps={{
style: {
height: 50,
color: "white",
color: theme.palette.textFieldStyle.color,
},
}}
color="primary"
@@ -956,7 +956,7 @@ const UserManagmentTab = memo((props) => {
InputProps={{
style: {
height: 50,
color: "white",
color: theme.palette.textFieldStyle.color,
},
}}
color="primary"
@@ -1027,7 +1027,7 @@ const UserManagmentTab = memo((props) => {
InputProps={{
style: {
height: 50,
color: "white",
color: theme.palette.textFieldStyle.color,
fontSize: "1em",
},
maxLength: 6,
@@ -1135,7 +1135,7 @@ const UserManagmentTab = memo((props) => {
}}
>
<DialogTitle>
<span style={{ color: "white" }}>User Logs</span>
<span style={{ color: theme.palette.text.primary }}>User Logs</span>
</DialogTitle>
<DialogContent>
{/* ask user for which IP they want to see logs for by iterating of user.login_info */}