From 413c25fde369ada11745c805fecb4832ca0ab102 Mon Sep 17 00:00:00 2001
From: condyl <Condyl678@gmail.com>
Date: Sat, 10 Jan 2026 17:12:40 -0500
Subject: [PATCH 1/2] refactor: replace export options mui components with
 shadcn components, lessen padding/whitespace

---
 .../Forms/Settings/ExportOptions.jsx          | 192 +++++++-----------
 1 file changed, 73 insertions(+), 119 deletions(-)

diff --git a/src/components/generator/Forms/Settings/ExportOptions.jsx b/src/components/generator/Forms/Settings/ExportOptions.jsx
index db033ea..70b2f44 100644
--- a/src/components/generator/Forms/Settings/ExportOptions.jsx
+++ b/src/components/generator/Forms/Settings/ExportOptions.jsx
@@ -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 pt-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>
   );
 }

From 3f613698272ab93ec3615f1be33c43b2b6c4a139 Mon Sep 17 00:00:00 2001
From: condyl <Condyl678@gmail.com>
Date: Sat, 10 Jan 2026 17:32:41 -0500
Subject: [PATCH 2/2] style: adjust padding in CollapsibleTrigger for improved
 layout in ExportOptions component

---
 src/components/generator/Forms/Settings/ExportOptions.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/generator/Forms/Settings/ExportOptions.jsx b/src/components/generator/Forms/Settings/ExportOptions.jsx
index 70b2f44..5d3adcc 100644
--- a/src/components/generator/Forms/Settings/ExportOptions.jsx
+++ b/src/components/generator/Forms/Settings/ExportOptions.jsx
@@ -24,7 +24,7 @@ export default function ExportOptions() {
         <div>
           <Separator className="mb-2" />
           <Collapsible open={showHelp} onOpenChange={setShowHelp}>
-            <CollapsibleTrigger className="flex w-full items-center gap-2 rounded-md px-2 pt-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+            <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 ? (