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