Skip to content

refactor: replace export options mui components with shadcn components, lessen padding/whitespace #70

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

Merged
condyl merged 2 commits into from
Jan 10, 2026
Merged

refactor: replace export options mui components with shadcn components, lessen padding/whitespace #70

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
413c25f
refactor: replace export options mui components with shadcn component…
condyl Jan 10, 2026
3f61369
style: adjust padding in CollapsibleTrigger for improved layout in Ex…
condyl Jan 10, 2026
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
192 changes: 73 additions & 119 deletions src/components/generator/Forms/Settings/ExportOptions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,89 @@
import React, { useState } from "react";
import Box from "@mui/material/Box";
import BorderBox from "../../UI/BorderBox";
import ExportCalendarButton from "../../Export/ExportCalendarButton";
import { ListItemButton } from "@mui/material";
import Collapse from "@mui/material/Collapse";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import Typography from "@mui/material/Typography";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import { useTheme } from "@mui/material/styles";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import { Info, ChevronDown, ChevronUp } from "lucide-react";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Separator } from "@/components/ui/separator";

export default function ExportOptions() {
const [showHelp, setShowHelp] = useState(false);
const theme = useTheme();

return (
<BorderBox title="Export Options">
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
<div className="flex flex-col gap-2">
{/* Main export section */}
<Box
sx={{
display: "flex",
justifyContent: "center",
p: 1,
}}
>
<div className="flex justify-center">
<ExportCalendarButton />
</Box>
</div>

{/* Help section */}
<Box
sx={{
borderTop: `1px solid ${theme.palette.divider}`,
pt: 2,
}}
>
<ListItemButton
onClick={() => setShowHelp(!showHelp)}
sx={{
borderRadius: 1,
mb: showHelp ? 1 : 0,
"&:hover": {
backgroundColor: theme.palette.action.hover,
},
}}
>
<InfoOutlinedIcon
sx={{
mr: 1,
color: theme.palette.text.secondary,
}}
/>
<ListItemText
primary="How to use the .ics file"
primaryTypographyProps={{
color: "text.secondary",
variant: "body2",
}}
/>
{showHelp ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={showHelp} timeout="auto" unmountOnExit>
<Box
sx={{
pl: 4,
pr: 2,
pb: 2,
"& .MuiListItem-root": {
py: 0.5,
},
}}
>
<List sx={{ listStyle: "decimal", pl: 2 }}>
<ListItem sx={{ display: "list-item" }}>
<ListItemText
primary="Open your calendar app"
secondary={
<>
Google Calendar: Go to calendar.google.com
<br />
Apple Calendar: Open the Calendar app
<br />
Outlook: Go to outlook.com/calendar
</>
}
primaryTypographyProps={{ variant: "body2" }}
secondaryTypographyProps={{ variant: "body2" }}
/>
</ListItem>
<ListItem sx={{ display: "list-item" }}>
<ListItemText
primary="Find the import option"
secondary={
<>
Google Calendar: Click the gear icon (Settings) → Import
& Export
<br />
Apple Calendar: File → Import
<br />
Outlook: Click the gear icon → View all Outlook settings
→ Calendar → Import calendar
</>
}
primaryTypographyProps={{ variant: "body2" }}
secondaryTypographyProps={{ variant: "body2" }}
/>
</ListItem>
<ListItem sx={{ display: "list-item" }}>
<ListItemText
primary="Select the downloaded .ics file"
secondary="Choose the .ics file you downloaded from this app"
primaryTypographyProps={{ variant: "body2" }}
secondaryTypographyProps={{ variant: "body2" }}
/>
</ListItem>
<ListItem sx={{ display: "list-item" }}>
<ListItemText
primary="Confirm the import"
secondary="Your courses will be added to your calendar. You can choose which calendar to add them to (e.g., 'Work', 'Personal', etc.)"
primaryTypographyProps={{ variant: "body2" }}
secondaryTypographyProps={{ variant: "body2" }}
/>
</ListItem>
</List>
</Box>
</Collapse>
</Box>
</Box>
<div>
<Separator className="mb-2" />
<Collapsible open={showHelp} onOpenChange={setShowHelp}>
<CollapsibleTrigger className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
<Info className="h-4 w-4" />
<span className="flex-1 text-left">How to use the .ics file</span>
{showHelp ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
</CollapsibleTrigger>
<CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
<ol className="ml-6 mt-2 list-decimal space-y-2 pr-2 pb-2 text-sm text-muted-foreground">
<li className="pl-2">
<div className="font-medium text-foreground">
Open your calendar app
</div>
<div className="mt-1 text-xs">
Google Calendar: Go to calendar.google.com
<br />
Apple Calendar: Open the Calendar app
<br />
Outlook: Go to outlook.com/calendar
</div>
</li>
<li className="pl-2">
<div className="font-medium text-foreground">
Find the import option
</div>
<div className="mt-1 text-xs">
Google Calendar: Click the gear icon (Settings) → Import &
Export
<br />
Apple Calendar: File → Import
<br />
Outlook: Click the gear icon → View all Outlook settings →
Calendar → Import calendar
</div>
</li>
<li className="pl-2">
<div className="font-medium text-foreground">
Select the downloaded .ics file
</div>
<div className="mt-1 text-xs">
Choose the .ics file you downloaded from this app
</div>
</li>
<li className="pl-2">
<div className="font-medium text-foreground">
Confirm the import
</div>
<div className="mt-1 text-xs">
Your courses will be added to your calendar. You can choose
which calendar to add them to (e.g., 'Work', 'Personal',
etc.)
</div>
</li>
</ol>
</CollapsibleContent>
</Collapsible>
</div>
</div>
</BorderBox>
);
}