Lightmode/Darkmode merge including many fixes since 2.0.2

This commit is contained in:
Frikky
2025-05-19 00:04:37 +02:00
parent 7bc246c003
commit a4ebf3e558
59 changed files with 5931 additions and 2961 deletions
+112 -54
View File
@@ -1,5 +1,6 @@
import React, { useContext, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import {
AppBar,
Box,
@@ -36,6 +37,7 @@ import AddIcon from '@mui/icons-material/Add';
import Mousetrap from "mousetrap";
import LicencePopup from "../components/LicencePopup.jsx";
import { Context } from "../context/ContextApi.jsx";
import { getTheme } from "../theme.jsx";
const curpath = (typeof window !== "undefined" && window.location && typeof window.location.pathname === "string")
? window.location.pathname
@@ -118,18 +120,18 @@ const menuData = {
label: "training_click"
}
},
{
title: "Security Consultation",
description:
"Automate your infrastructure with expert guidance and tailored solutions.",
icon: "/images/SecurityConsultation.svg",
path: "/contact?category=security_consultation",
gaData: {
category: "navbar",
action: "services_click",
label: "security_consultation_click"
}
},
// {
// title: "Security Consultation",
// description:
// "Automate your infrastructure with expert guidance and tailored solutions.",
// icon: "/images/SecurityConsultation.svg",
// path: "/contact?category=security_consultation",
// gaData: {
// category: "navbar",
// action: "services_click",
// label: "security_consultation_click"
// }
// },
],
Resources: {
columns: [
@@ -751,7 +753,9 @@ const Navbar = (props) => {
const topbar_var = "topbar_closed10"
const theme = useTheme();
const {searchBarModalOpen, setSearchBarModalOpen, isDocSearchModalOpen} = useContext(Context)
const {themeMode} = useContext(Context);
const currentTheme = getTheme(themeMode);
const {searchBarModalOpen, setSearchBarModalOpen, isDocSearchModalOpen, setIsDocSearchModalOpen} = useContext(Context)
const [pricingModalOpen, setPricingModalOpen] = useState(false);
const isTabletOrMobile = useMediaQuery(theme.breakpoints.down("lg"));
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
@@ -772,7 +776,6 @@ const Navbar = (props) => {
window.location.host === "shuffler.io" ||
window.location.host === "localhost:5002";
const stripeKey = typeof window === 'undefined' || window.location === undefined ? "" : window.location.origin === "https://shuffler.io" ? "pk_live_51PXYYMEJjT17t98N20qEqItyt1fLQjrnn41lPeG2PjnSlZHTDNKHuisAbW00s4KAn86nGuqB9uSVU4ds8MutbnMU00DPXpZ8ZD" : "pk_test_51PXYYMEJjT17t98NbDkojZ3DRvsFUQBs35LGMx3i436BXwEBVFKB9nCvHt0Q3M4MG3dz4mHheuWvfoYvpaL3GmsG00k1Rb2ksO"
useEffect(() => {
@@ -853,51 +856,54 @@ const Navbar = (props) => {
setSearchBarModalOpen(false);
}}
PaperProps={{
style: {
sx: {
color: "white",
minWidth: 750,
height: 785,
borderRadius: 16,
minWidth: "750px",
height: "785px",
borderRadius: "16px",
border: "1px solid var(--Container-Stroke, #494949)",
background: "var(--Container, #000000)",
background: currentTheme.palette.DialogStyle.backgroundColor,
boxShadow: "0px 16px 24px 8px rgba(0, 0, 0, 0.25)",
},
'& .MuiDialogContent-root': {
backgroundColor: currentTheme?.palette?.DialogStyle?.backgroundColor,
},
'& .MuiDialogTitle-root': {
backgroundColor: currentTheme?.palette?.DialogStyle?.backgroundColor,
},
}}
sx={{
zIndex: 50005,
'& .MuiBackdrop-root': {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
},
}}
>
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", px: 2, pt: 2 }}>
<DialogTitle
sx={{
color: "var(--Paragraph-text, #C8C8C8)",
p: 0,
m: 0,
fontFamily: theme.typography.fontFamily,
}}
>
Search for Docs, Apps, Workflows and more
</DialogTitle>
<IconButton
onClick={() => setSearchBarModalOpen(false)}
sx={{
color: 'white',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.1)'
}
}}
>
<CloseIcon />
</IconButton>
</Box>
<DialogContent >
<Box sx={{ display: "flex", justifyContent: "space-between",backgroundColor: currentTheme?.palette?.DialogStyle?.backgroundColor, alignItems: "center", px: 2, pt: 2 }}>
<DialogTitle
sx={{
color: "var(--Paragraph-text, #C8C8C8)",
p: 0,
m: 0,
fontFamily: theme.typography.fontFamily,
}}
>
Search for Docs, Apps, Workflows and more
</DialogTitle>
<IconButton
onClick={() => setSearchBarModalOpen(false)}
sx={{
color: 'white',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.1)'
}
}}
>
<CloseIcon />
</IconButton>
</Box>
<DialogContent style={{backgroundColor: currentTheme?.palette?.DialogStyle?.backgroundColor}} >
<Box sx={{ pt: 3 }}>
<SearchBox globalUrl={globalUrl} serverside={serverside} userdata={userdata} />
</Box>
</DialogContent>
</DialogContent>
<Divider sx={{ backgroundColor: 'rgba(255, 255, 255, 0.1)' }}/>
</Dialog>
);
@@ -974,6 +980,10 @@ const Navbar = (props) => {
transform: "rotate(180deg)",
},
},
// Add this to hide the ripple effect's container
"& .MuiTouchRipple-root": {
display: "none",
},
};
// Render menu content based on type
@@ -1362,6 +1372,8 @@ const Navbar = (props) => {
</Box>
))}
<Button
component={Link}
to="/pricing"
sx={buttonStyles}
onClick={() => {
if(isCloud) {
@@ -1380,6 +1392,8 @@ const Navbar = (props) => {
Pricing
</Button>
<Button
component={Link}
to="/partners"
sx={buttonStyles}
onClick={() => {
if(isCloud) {
@@ -1451,10 +1465,12 @@ const Navbar = (props) => {
useEffect(() => {
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
setSearchBarModalOpen(true);
setIsDocSearchModalOpen(false);
return false; // Prevent the default action
});
Mousetrap.bind(['esc'], () => {
setSearchBarModalOpen(false);
setIsDocSearchModalOpen(false);
return false; // Prevent the default action
});
@@ -1537,9 +1553,10 @@ const Navbar = (props) => {
const topbar = !isCloud || !showTopbar ? null :
curpath === "/" || curpath.includes("/docs") || curpath === "/pricing" || curpath === "/contact" || curpath === "/search" || curpath === "/usecases" || curpath === "/training" || curpath === "/professional-services" ?
<span style={{ zIndex: 50001, marginTop: -4}}>
<div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
{/* uncommit this to show topbar for release */}
{/* <div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
<Typography style={{ paddingTop: 7, fontSize:16, margin: "auto", textAlign: "center", color: "white", }}>
{/* Shuffle 1.4.0 is out! Read more about&nbsp; */}
// Shuffle 1.4.0 is out! Read more about&nbsp;
Shuffle 2.0.0 is out now!&nbsp;
<u>
<span onClick={() => {
@@ -1564,7 +1581,37 @@ const Navbar = (props) => {
}}>
<CloseIcon />
</IconButton>
</div>
</div> */}
{/* commit below div if we need to show release stuff */}
<div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
<Typography style={{ paddingTop: 7, fontSize:16, margin: "auto", textAlign: "center", color: "white", }}>
{/* Shuffle 1.4.0 is out! Read more about&nbsp; */}
New&nbsp;
<u>
<span onClick={() => {
ReactGA.event({
category: "landingpage",
action: "click_header_training",
label: "",
})
navigate("/training")
}} style={{ cursor: "pointer", textDecoration: "none", fontWeight: 600, color: "rgba(255,255,255,0.9)" }}>
Public Training
</span>
</u>
&nbsp;Dates Released!
</Typography>
<IconButton color="secondary" style={{ position: "absolute", top: 0, right: 20, }} onClick={(event) => {
setShowTopbar(false)
// Set storage that it's clicked
localStorage.setItem(topbar_var, "true")
}}>
<CloseIcon />
</IconButton>
</div>
</span>
:
null
@@ -1784,7 +1831,10 @@ const Navbar = (props) => {
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<IconButton
sx={{ color: "white" }}
onClick={() => setSearchBarModalOpen(true)}
onClick={() => {
setSearchBarModalOpen(true);
setIsDocSearchModalOpen(false);
}}
>
<SearchIcon sx={{ fontSize: 22 }} />
</IconButton>
@@ -1866,6 +1916,7 @@ const Navbar = (props) => {
})
}
setSearchBarModalOpen(true);
setIsDocSearchModalOpen(false);
}}
>
<SearchIcon sx={{ fontSize: 24 }} />
@@ -1910,6 +1961,7 @@ const Navbar = (props) => {
padding: "8px 20px",
"&:hover": {
backgroundColor: "#494949",
color: "white",
border: "1px solid white",
},
}}
@@ -2263,6 +2315,7 @@ const Navbar = (props) => {
sx={{ width: 20, height: 20 }}
/>
<Typography sx={{
color: "inherit",
fontSize: '14px',
fontFamily: theme.typography.fontFamily
}}>
@@ -2304,6 +2357,7 @@ const Navbar = (props) => {
/>
<Typography sx={{
fontSize: '14px',
color: "inherit",
fontFamily: theme.typography.fontFamily
}}>
Settings
@@ -2344,6 +2398,7 @@ const Navbar = (props) => {
/>
<Typography sx={{
fontSize: '14px',
color: "inherit",
fontFamily: theme.typography.fontFamily
}}>
Notifications ({notifications === undefined || notifications === null ? 0 :
@@ -2388,6 +2443,7 @@ const Navbar = (props) => {
/>
<Typography sx={{
fontSize: '14px',
color: "inherit",
fontFamily: theme.typography.fontFamily
}}>
About
@@ -2427,6 +2483,7 @@ const Navbar = (props) => {
/>
<Typography sx={{
fontSize: '14px',
color: "inherit",
fontFamily: theme.typography.fontFamily
}}>
Logout
@@ -2457,7 +2514,7 @@ const Navbar = (props) => {
margin: 0
}}
>
Version 1.4.5
Version 2.0.2
</Typography>
</Box>
</Menu>
@@ -2503,6 +2560,7 @@ const Navbar = (props) => {
})
}
setSearchBarModalOpen(true);
setIsDocSearchModalOpen(false);
}}
>
<SearchIcon sx={{ fontSize: 24 }} />
@@ -2543,14 +2601,14 @@ const Navbar = (props) => {
{isCloud &&
<Button
variant="outlined"
variant="contained"
color="secondary"
sx={{
...sharedButtonStyles,
display: {
xs: "none",
lg: "block"
},
color: "white",
backgroundColor: "#2F2F2F",
border: "1px solid #2F2F2F",
borderRadius: "8px",