Skip to content

fixed theme inconsistency of editor at playground page #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
michael-020 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fixed theme inconsistency of editor at playground page #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e92447e
fixed theme inconsistency of editor at playground page
michael-020 Apr 5, 2025
11254f8
reverted the changes in next.config.js and package-lock.json
michael-020 Apr 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 56 additions & 74 deletions components/atg/components/SideBarContent/SideBarNormal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,31 +252,33 @@ export default function SideBarNormal({
} justify-between px-3 py-1 sticky top-0 z-10`}
>
<Typography
sx={{
color: "#1f2937",
fontWeight: "bold",
m: 0,
}}
className={`${
SideBartheme ? "text-secondary-300" : "text-white"
SideBartheme ? "text-secondary-300" : "text-gray-300"
} font-bold`}
>
Content
</Typography>
<button
className="text-gray-500 hover:text-gray-700"
className={` ${
SideBartheme ? "text-gray-500 hover:text-gray-700" : "text-gray-400 hover:text-gray-200"
}`}
onClick={RemoveSideContent}
>
<CloseIcon />
</button>
</div>
{stepsRecord.map((step, index) => (
<Accordion
expanded={expandedSteps.includes(index)}
key={step.label}
expanded={expandedSteps.includes(index)}
onChange={() => handleAccordionChange(index)}
className={` ${
SideBartheme
? "border border-b-1 bg-neutral-200 border-gray-200"
: "bg-[#171a1e] border-[#30363e]"
}`}
sx={{
backgroundColor: "#f5f5f5",
backgroundColor: "transparent",
boxShadow: "none",
"&:before": {
display: "none",
Expand All @@ -285,59 +287,42 @@ export default function SideBarNormal({
borderBottom: "none",
},
}}
className={`${
SideBartheme
? "border border-b-1 bg-neutral-200 border-gray-200"
: "bg-[#171a1e]"
}`}
disableGutters={true}
TransitionProps={{ timeout: { appear: 1, enter: 1, exit: 4 } }}
>
<AccordionSummary
expandIcon={
expandedSteps.includes(index) ? (
<ExpandMoreIcon className="text-gray-600" />
<ExpandMoreIcon className={SideBartheme ? "text-gray-600" : "text-gray-400"} />
) : index <= activeStep ? (
<ExpandMoreIcon className="text-gray-700" />
<ExpandMoreIcon className={SideBartheme ? "text-gray-700" : "text-gray-300"} />
) : (
<LockIcon
className={`${
SideBartheme ? "text-secondary-300" : "text-white"
}`}
/>
<LockIcon className={SideBartheme ? "text-secondary-300" : "text-gray-600"} />
)
}
aria-controls={`panel${index}-content`}
id={`panel${index}-header`}
sx={{
color: "#ffffff",
fontWeight: "bold",
m: 0,
}}
className={` ${
SideBartheme
? index <= activeStep
? "bg-white"
: "bg-gray-200"
: index <= activeStep
? "bg-[#30363e]"
: "bg-[#3f4651]"
} `}
: "bg-[#21252b]"
}`}
>
<Typography
className={`${
SideBartheme ? "text-secondary-300" : "text-gray-300"
SideBartheme ? "text-secondary-300" : "text-gray-300 "
} font-semibold`}
>
{step.label}
</Typography>
</AccordionSummary>
<AccordionDetails
<AccordionDetails
className={` ${SideBartheme ? "bg-white" : "bg-[#21252b]"}`}
sx={{
maxHeight: "400px",
overflowY: "auto",
m: 0,
paddingright: "15px",
scrollbarWidth: "none",
"&::-webkit-scrollbar": {
display: "none",
Expand All @@ -351,14 +336,7 @@ export default function SideBarNormal({
component="li"
key={subIndex}
sx={{ display: "flex", mb: 1 }}
className={`${
(activeStep === 0 && subStepIndex > subIndex) ||
(activeStep === 1 && dedupStepIndex > subIndex) ||
(activeStep === 2 && testSubStepIndex > subIndex) ||
index < activeStep
? "items-center"
: "items-center"
}`}
className="items-center"
>
<Box
sx={{
Expand All @@ -374,34 +352,33 @@ export default function SideBarNormal({
(activeStep === 2 && testSubStepIndex === subIndex)) &&
index === activeStep ? (
subStepCompleted ? (
<DoneIcon className="font-bold rounded-md p-1 text-accent-100" />
<DoneIcon className={`font-bold rounded-md p-1 ${SideBartheme ? "text-accent-100" : "text-green-500"}`} />
) : (
<CircularProgress size={14} />
<CircularProgress size={14} className={SideBartheme ? "text-secondary-300" : "text-blue-400"} />
)
) : (activeStep === 0 && subStepIndex > subIndex) ||
(activeStep === 1 && dedupStepIndex > subIndex) ||
(activeStep === 2 && testSubStepIndex > subIndex) ||
index < activeStep ? (
<DoneIcon className="font-bold rounded-md p-1 text-accent-100" />
<DoneIcon className={`font-bold rounded-md p-1 ${SideBartheme ? "text-accent-100" : "text-green-500"}`} />
) : (
<CircleIcon
className={`text-xs ${
SideBartheme
? "text-secondary-300"
: "text-gray-300"
: "text-gray-500"
} scale-90`}
/>
)}
</Box>
<Box className="flex flex-col">
<Box
component="span"
sx={{ fontSize: "0.875rem", fontWeight: "normal" }}
className={`${
sx={{ fontSize: "0.875rem" }}
className={`text-sm ${
((activeStep === 0 && subStepIndex === subIndex) ||
(activeStep === 1 && dedupStepIndex === subIndex) ||
(activeStep === 2 &&
testSubStepIndex === subIndex)) &&
(activeStep === 2 && testSubStepIndex === subIndex)) &&
index === activeStep
? subStepCompleted
? SideBartheme
Expand All @@ -412,18 +389,17 @@ export default function SideBarNormal({
: "text-gray-100"
: (activeStep === 0 && subStepIndex > subIndex) ||
(activeStep === 1 && dedupStepIndex > subIndex) ||
(activeStep === 2 &&
testSubStepIndex > subIndex) ||
(activeStep === 2 && testSubStepIndex > subIndex) ||
index < activeStep
? SideBartheme
? "text-secondary-300"
: "text-gray-300"
: SideBartheme
? "text-secondary-300"
: "text-gray-300"
: "text-gray-500"
}`}
>
{`${subStep.stepName}`}
{subStep.stepName}
</Box>
</Box>
</Box>
Expand All @@ -435,48 +411,54 @@ export default function SideBarNormal({
sx={{ mb: 2 }}
className="shadow-[0_0_20px_2px_rgba(0,0,0,0.1)]"
>
<div className="">
<button
onClick={handleNext}
className="mt-1 mr-1 w-full bg-primary-300 font-semibold text-secondary-300 px-4 py-2 rounded"
disabled={
activeStep === 0
? subStepIndex !== -1
: activeStep === 1
? dedupStepIndex !== -1
: testSubStepIndex !== -1
}
>
{step.stepName}
</button>
</div>
<button
onClick={handleNext}
className={`mt-1 mr-1 w-full font-semibold px-4 py-2 rounded ${
SideBartheme
? "bg-primary-300 text-secondary-300"
: "bg-blue-600 text-white hover:bg-blue-700"
}`}
disabled={
activeStep === 0
? subStepIndex !== -1
: activeStep === 1
? dedupStepIndex !== -1
: testSubStepIndex !== -1
}
>
{step.stepName}
</button>
</Box>
)}
</AccordionDetails>
</Accordion>
))}
{activeStep === stepsRecord.length && (
<Paper
<Paper
square
elevation={0}
sx={{ p: 2 }}
className={`${SideBartheme ? "bg-white" : "bg-neutral-800"}`}
className={` ${SideBartheme ? "bg-white" : "bg-neutral-800"}`}
>
<Typography
className={`text-base text-center font-semibold ${
SideBartheme ? "text-secondary-300" : "text-white"
SideBartheme ? "text-secondary-300" : "text-gray-300"
}`}
>
Would you like to reset?
</Typography>
<button
onClick={onReset}
className="mt-1 mr-1 w-full bg-primary-300 font-semibold scale-90 px-4 py-2 rounded"
className={`mt-1 mr-1 w-full font-semibold px-4 py-2 rounded ${
SideBartheme
? "bg-primary-300 text-secondary-300"
: "bg-blue-600 text-white hover:bg-blue-700"
}`}
>
Reset
</button>
</Paper>
)}
</Box>
);
}
}
8 changes: 6 additions & 2 deletions components/atg/components/TopHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,16 @@ const TopHeader = ({
enterSmallScreen:()=>void;
fullscreen:boolean;
}) => {
const [isDarkMode, setIsDarkMode] = useState(false);
// Initialize isDarkMode from localStorage to match Editor's theme
const [isDarkMode, setIsDarkMode] = useState(() => {
const savedTheme = localStorage.getItem('editor-theme');
return savedTheme ? savedTheme === 'dark' : false;
});

const toggleTheme = () => {
setIsDarkMode(!isDarkMode);
settingTheme();
document.body.classList.toggle("dark-mode", !isDarkMode); // Add a class to the body element
document.body.classList.toggle("dark-mode", !isDarkMode);
};

const toggleScreen = ()=>{
Expand Down
9 changes: 7 additions & 2 deletions components/atg/editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@ const Editor = ({ goFullScreen = false }: { goFullScreen?: boolean }) => {
const [rootDir, setRootDir] = useState<Directory>(dummyDir);
const [selectedFile, setSelectedFile] = useState<File | undefined>(undefined);
const [dataFetched, setDataFetched] = useState(true);
const [lighttheme, setTheme] = useState<boolean>(true);
const [lighttheme, setTheme] = useState<boolean>(() => {
const savedTheme = localStorage.getItem('editor-theme');
return savedTheme ? savedTheme === 'light' : true;
});
const [error, setError] = useState("");
const [files, setFiles] = useState<File[]>([]);
const [showTerminal, setShowTerminal] = useState<boolean>(false);
Expand Down Expand Up @@ -239,7 +242,9 @@ const Editor = ({ goFullScreen = false }: { goFullScreen?: boolean }) => {
};

const settingTheme = () => {
setTheme(!lighttheme);
const newTheme = !lighttheme;
setTheme(newTheme);
localStorage.setItem('editor-theme', newTheme ? 'light' : 'dark');
};

const settingTerminalStatus = (val: string) => {
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.