diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx index 44a870f4a8..25260e6a7a 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx @@ -1,29 +1,32 @@ import Input from 'component/common/Input/Input'; -import { styled } from '@mui/material'; -import { MilestoneList } from './MilestoneList/MilestoneList'; +import { styled, useTheme } from '@mui/material'; import type { IReleasePlanMilestonePayload, IReleasePlanMilestoneStrategy, } from 'interfaces/releasePlans'; import FormTemplate from 'component/common/FormTemplate/FormTemplate'; -import { SidebarModal } from 'component/common/SidebarModal/SidebarModal'; import { useState } from 'react'; -import { ReleasePlanTemplateAddStrategyForm } from './MilestoneStrategy/ReleasePlanTemplateAddStrategyForm'; import { TemplateFormDescription } from './TemplateFormDescription'; - -const StyledInputDescription = styled('p')(({ theme }) => ({ - marginBottom: theme.spacing(1), -})); +import { MilestoneList } from './MilestoneList/MilestoneList'; +import { SidebarModal } from 'component/common/SidebarModal/SidebarModal'; +import { ReleasePlanTemplateAddStrategyForm } from './MilestoneStrategy/ReleasePlanTemplateAddStrategyForm'; const StyledInput = styled(Input)(({ theme }) => ({ width: '100%', + maxWidth: theme.spacing(50), + fieldset: { border: 'none' }, + 'label::first-letter': { + textTransform: 'uppercase', + }, marginBottom: theme.spacing(2), + padding: theme.spacing(0), })); -const StyledForm = styled('form')(() => ({ +const StyledForm = styled('form')(({ theme }) => ({ display: 'flex', flexDirection: 'column', height: '100%', + paddingTop: theme.spacing(5), })); interface ITemplateFormProps { @@ -72,6 +75,8 @@ export const TemplateForm: React.FC = ({ title: '', id: 'temp', }); + + const theme = useTheme(); const openAddUpdateStrategyForm = ( milestoneId: string, strategy: Omit, @@ -158,28 +163,42 @@ export const TemplateForm: React.FC = ({ formatApiCode={formatApiCode} > - - What would you like to call your template? - setName(e.target.value)} error={Boolean(errors.name)} errorText={errors.name} - onFocus={() => clearErrors()} + onFocus={() => { + delete errors.name; + }} autoFocus + InputProps={{ + style: { fontSize: theme.typography.h1.fontSize }, + }} + InputLabelProps={{ + style: { fontSize: theme.typography.h1.fontSize }, + }} + size='medium' /> - - What's the purpose of this template? - setDescription(e.target.value)} - error={Boolean(errors.description)} - errorText={errors.description} - onFocus={() => clearErrors()} + InputProps={{ + style: { + fontSize: theme.typography.h2.fontSize, + padding: 0, + }, + }} + InputLabelProps={{ + style: { + fontSize: theme.typography.h2.fontSize, + padding: 0, + }, + }} + size='medium' />