diff --git a/frontend/pages/model/[modelId]/access-request/schema.tsx b/frontend/pages/model/[modelId]/access-request/schema.tsx index 25390ab61..ca8d8bd8a 100644 --- a/frontend/pages/model/[modelId]/access-request/schema.tsx +++ b/frontend/pages/model/[modelId]/access-request/schema.tsx @@ -1,6 +1,18 @@ import { Schema } from '@mui/icons-material' import ArrowBack from '@mui/icons-material/ArrowBack' -import { Box, Button, Card, Container, Grid, Stack, Typography } from '@mui/material' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + Button, + Card, + Container, + Grid, + Stack, + Typography, +} from '@mui/material' import { useGetSchemas } from 'actions/schema' import _ from 'lodash-es' import { useRouter } from 'next/router' @@ -31,6 +43,13 @@ export default function AccessRequestSchema() { [modelId, router], ) + const accordionStyling = { + '&:before': { + display: 'none', + }, + width: '100%', + } as const + const activeSchemaButtons = useMemo( () => activeSchemas.length ? ( @@ -93,20 +112,32 @@ export default function AccessRequestSchema() { - - Active Schemas - - - - {modelId && activeSchemaButtons} - - - - Inactive Schemas - - - {modelId && inactiveSchemaButtons} - + + }> + + Active Schemas + + + + + + {modelId && activeSchemaButtons} + + + + + + }> + + Inactive Schemas + + + + + {modelId && inactiveSchemaButtons} + + + diff --git a/frontend/src/schemas/SchemaSelect.tsx b/frontend/src/schemas/SchemaSelect.tsx index 711da36a1..0c879cd1b 100644 --- a/frontend/src/schemas/SchemaSelect.tsx +++ b/frontend/src/schemas/SchemaSelect.tsx @@ -1,6 +1,17 @@ import { Schema } from '@mui/icons-material' import ArrowBack from '@mui/icons-material/ArrowBack' -import { Button, Card, Container, Grid, Stack, Typography } from '@mui/material' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' +import { + Accordion, + AccordionDetails, + AccordionSummary, + Button, + Card, + Container, + Grid, + Stack, + Typography, +} from '@mui/material' import { useGetModel } from 'actions/model' import { postFromSchema } from 'actions/modelCard' import { useGetSchemas } from 'actions/schema' @@ -56,6 +67,13 @@ export default function SchemaSelect({ entry }: SchemaSelectProps) { [currentUser, entry, mutateEntry, router], ) + const accordionStyling = { + '&:before': { + display: 'none', + }, + width: '100%', + } as const + const activeSchemaButtons = useMemo( () => activeSchemas.length ? ( @@ -120,18 +138,30 @@ export default function SchemaSelect({ entry }: SchemaSelectProps) { - - Active Schemas - - - {activeSchemaButtons} - - - Inactive Schemas - - - {inactiveSchemaButtons} - + + }> + + Active Schemas + + + + + {activeSchemaButtons} + + + + + }> + + Inactive Schemas + + + + + {inactiveSchemaButtons} + + +