refactor(create-page): styling
This commit is contained in:
parent
6641cf2ee7
commit
c2199b79bd
@ -6,7 +6,6 @@ import {
|
|||||||
IconButton,
|
IconButton,
|
||||||
InputLabel,
|
InputLabel,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
Paper,
|
|
||||||
Select,
|
Select,
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
@ -705,26 +704,16 @@ export const CreatePage = () => {
|
|||||||
<Container className={styles.container}>
|
<Container className={styles.container}>
|
||||||
<StickySideColumns
|
<StickySideColumns
|
||||||
left={
|
left={
|
||||||
<>
|
<div className={styles.flexWrap}>
|
||||||
<TextField
|
<TextField
|
||||||
label="Title"
|
label="Title"
|
||||||
value={title}
|
value={title}
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
/>
|
/>
|
||||||
|
<ul className={styles.paperGroup}>
|
||||||
<Box>
|
{selectedFiles.length > 0 &&
|
||||||
<MuiFileInput
|
selectedFiles.map((file, index) => (
|
||||||
fullWidth
|
|
||||||
multiple
|
|
||||||
placeholder="Choose Files"
|
|
||||||
value={selectedFiles}
|
|
||||||
onChange={(value) => handleSelectFiles(value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{selectedFiles.length > 0 && (
|
|
||||||
<ul>
|
|
||||||
{selectedFiles.map((file, index) => (
|
|
||||||
<li key={index}>
|
<li key={index}>
|
||||||
<Typography component="label">{file.name}</Typography>
|
<Typography component="label">{file.name}</Typography>
|
||||||
<IconButton onClick={() => handleRemoveFile(file)}>
|
<IconButton onClick={() => handleRemoveFile(file)}>
|
||||||
@ -733,17 +722,21 @@ export const CreatePage = () => {
|
|||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
<MuiFileInput
|
||||||
</Box>
|
fullWidth
|
||||||
</>
|
multiple
|
||||||
|
placeholder="Choose Files"
|
||||||
|
value={selectedFiles}
|
||||||
|
onChange={(value) => handleSelectFiles(value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
right={
|
right={
|
||||||
<>
|
<div className={styles.flexWrap}>
|
||||||
<Typography component="label" variant="h6">
|
<Typography component="label" variant="h6">
|
||||||
Add Counterparts
|
Add Counterparts
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box className={styles.inputBlock}>
|
<Box className={styles.paperGroup}>
|
||||||
<Box className={styles.inputBlock}>
|
|
||||||
<TextField
|
<TextField
|
||||||
label="nip05 / npub"
|
label="nip05 / npub"
|
||||||
value={userInput}
|
value={userInput}
|
||||||
@ -769,9 +762,6 @@ export const CreatePage = () => {
|
|||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}
|
|
||||||
>
|
|
||||||
<Button
|
<Button
|
||||||
disabled={!userInput}
|
disabled={!userInput}
|
||||||
onClick={handleAddUser}
|
onClick={handleAddUser}
|
||||||
@ -780,9 +770,8 @@ export const CreatePage = () => {
|
|||||||
Add
|
Add
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
|
<div className={styles.paperGroup}>
|
||||||
<DisplayUser
|
<DisplayUser
|
||||||
metadata={metadata}
|
metadata={metadata}
|
||||||
users={users}
|
users={users}
|
||||||
@ -790,14 +779,12 @@ export const CreatePage = () => {
|
|||||||
handleRemoveUser={handleRemoveUser}
|
handleRemoveUser={handleRemoveUser}
|
||||||
moveSigner={moveSigner}
|
moveSigner={moveSigner}
|
||||||
/>
|
/>
|
||||||
<Box
|
|
||||||
sx={{ mt: 1, mb: 5, display: 'flex', justifyContent: 'center' }}
|
|
||||||
>
|
|
||||||
<Button onClick={handleCreate} variant="contained">
|
<Button onClick={handleCreate} variant="contained">
|
||||||
Create
|
Create
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</div>
|
||||||
</>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<DrawPDFFields
|
<DrawPDFFields
|
||||||
@ -828,7 +815,7 @@ const DisplayUser = ({
|
|||||||
moveSigner
|
moveSigner
|
||||||
}: DisplayUsersProps) => {
|
}: DisplayUsersProps) => {
|
||||||
return (
|
return (
|
||||||
<TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}>
|
<TableContainer>
|
||||||
<Table>
|
<Table>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
|
@ -1,11 +1,18 @@
|
|||||||
@import '../../styles/colors.scss';
|
@import '../../styles/colors.scss';
|
||||||
|
|
||||||
.container {
|
.flexWrap {
|
||||||
.inputBlock {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 25px;
|
gap: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.paperGroup {
|
||||||
|
border-radius: 4px;
|
||||||
|
background: white;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subHeader {
|
.subHeader {
|
||||||
|
Loading…
Reference in New Issue
Block a user