Adds MUI accordian. Disables back button when project creation is pen…

…ding.
digidem · Dec 12, 2024 · c1e4a3c · c1e4a3c
1 parent 159ff26
commit c1e4a3c
Showing 1 changed file with 49 additions and 48 deletions.
diff --git a/src/renderer/src/routes/Onboarding/CreateProjectScreen.tsx b/src/renderer/src/routes/Onboarding/CreateProjectScreen.tsx
@@ -1,5 +1,11 @@
 import { useState, type ChangeEvent } from 'react'
-import { TextField } from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import {
+	Accordion,
+	AccordionDetails,
+	AccordionSummary,
+	TextField,
+} from '@mui/material'
 import { styled } from '@mui/material/styles'
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { defineMessages, useIntl } from 'react-intl'
@@ -15,8 +21,6 @@ import {
 import { Text } from '../../components/Text'
 import { PROJECT_NAME_MAX_LENGTH_GRAPHEMES } from '../../constants'
 import ProjectImage from '../../images/add_square.png'
-import ChevronUp from '../../images/chevrondown-expanded.svg'
-import ChevronDown from '../../images/chevrondown.svg'
 import { useCreateProject } from '../../queries/projects'
 
 export const m = defineMessages({
@@ -146,13 +150,12 @@ function CreateProjectScreenComponent() {
 		setConfigFileName('myProjectConfig.comapeocat')
 	}
 
+	const backPressHandler = setProjectNameMutation.isPending
+		? undefined
+		: () => navigate({ to: '/Onboarding/CreateJoinProjectScreen' })
+
 	const topMenu = (
-		<OnboardingTopMenu
-			currentStep={3}
-			onBackPress={() =>
-				navigate({ to: '/Onboarding/CreateJoinProjectScreen' })
-			}
-		/>
+		<OnboardingTopMenu currentStep={3} onBackPress={backPressHandler} />
 	)
 
 	return (
@@ -211,48 +214,46 @@ function CreateProjectScreenComponent() {
 						textAlign: 'center',
 					}}
 				>
-					<div
-						style={{
-							display: 'flex',
-							justifyContent: 'space-between',
-							alignItems: 'center',
-							gap: 12,
-							padding: '12px 0',
-							cursor: 'pointer',
-						}}
-						onClick={() => setAdvancedSettingOpen(!advancedSettingOpen)}
-					>
-						<Text bold style={{ fontSize: '1.125rem' }}>
-							{formatMessage(m.advancedProjectSettings)}
-						</Text>
-						{advancedSettingOpen ? <ChevronDown /> : <ChevronUp />}
-					</div>
-					<div
-						style={{
-							display: advancedSettingOpen ? 'flex' : 'none',
-							flexDirection: 'column',
-							gap: 12,
-							alignItems: 'center',
-							padding: advancedSettingOpen ? 12 : 0,
+					<Accordion
+						expanded={advancedSettingOpen}
+						onChange={(_, expanded) => setAdvancedSettingOpen(expanded)}
+						sx={{
+							boxShadow: 'none',
+							background: 'transparent',
+							textAlign: 'left',
 						}}
 					>
-						<Button
-							variant="outlined"
-							style={{
-								backgroundColor: WHITE,
-								color: BLACK,
-								width: '100%',
-								maxWidth: 350,
-								padding: '12px 20px',
-							}}
-							onClick={importConfigFile}
+						<AccordionSummary
+							expandIcon={<ExpandMoreIcon />}
+							aria-controls="advanced-settings-content"
+							id="advanced-settings-header"
+							sx={{ padding: '0', margin: '0', minHeight: 'inherit' }}
 						>
-							{formatMessage(m.importConfig)}
-						</Button>
-						{configFileName && (
-							<Text style={{ textAlign: 'center' }}>{configFileName}</Text>
-						)}
-					</div>
+							<Text bold style={{ fontSize: '1.125rem' }}>
+								{formatMessage(m.advancedProjectSettings)}
+							</Text>
+						</AccordionSummary>
+						<AccordionDetails>
+							<Button
+								variant="outlined"
+								style={{
+									backgroundColor: WHITE,
+									color: BLACK,
+									width: '100%',
+									maxWidth: 350,
+									padding: '12px 20px',
+								}}
+								onClick={importConfigFile}
+							>
+								{formatMessage(m.importConfig)}
+							</Button>
+							{configFileName && (
+								<Text style={{ textAlign: 'center', marginTop: 12 }}>
+									{configFileName}
+								</Text>
+							)}
+						</AccordionDetails>
+					</Accordion>
 				</div>
 			</div>
 			<div