sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

refactor(create-page): styling

Browse Source
This commit is contained in:
enes 2024-08-16 11:08:03 +02:00
parent 6641cf2ee7
commit c2199b79bd
2 changed files with 78 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
src/pages/create/index.tsx
View File

@ -6,7 +6,6 @@ import {
IconButton, IconButton,
InputLabel, InputLabel,
MenuItem, MenuItem,
Paper,
Select, Select,
Table, Table,
TableBody, TableBody,
@ -705,99 +704,87 @@ 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 <li key={index}>
multiple <Typography component="label">{file.name}</Typography>
placeholder="Choose Files" <IconButton onClick={() => handleRemoveFile(file)}>
value={selectedFiles} <Clear style={{ color: 'red' }} />{' '}
onChange={(value) => handleSelectFiles(value)} </IconButton>
/> </li>
))}
{selectedFiles.length > 0 && ( </ul>
<ul> <MuiFileInput
{selectedFiles.map((file, index) => ( fullWidth
<li key={index}> multiple
<Typography component="label">{file.name}</Typography> placeholder="Choose Files"
<IconButton onClick={() => handleRemoveFile(file)}> value={selectedFiles}
<Clear style={{ color: 'red' }} />{' '} onChange={(value) => handleSelectFiles(value)}
</IconButton> />
</li> </div>
))}
</ul>
)}
</Box>
</>
} }
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} onChange={(e) => setUserInput(e.target.value)}
onChange={(e) => setUserInput(e.target.value)} helperText={error}
helperText={error} error={!!error}
error={!!error} />
/> <FormControl fullWidth>
<FormControl fullWidth> <InputLabel id="select-role-label">Role</InputLabel>
<InputLabel id="select-role-label">Role</InputLabel> <Select
<Select labelId="select-role-label"
labelId="select-role-label" id="demo-simple-select"
id="demo-simple-select" value={userRole}
value={userRole} label="Role"
label="Role" onChange={(e) => setUserRole(e.target.value as UserRole)}
onChange={(e) => setUserRole(e.target.value as UserRole)}
>
<MenuItem value={UserRole.signer}>
{UserRole.signer}
</MenuItem>
<MenuItem value={UserRole.viewer}>
{UserRole.viewer}
</MenuItem>
</Select>
</FormControl>
<Box
sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}
> >
<Button <MenuItem value={UserRole.signer}>
disabled={!userInput} {UserRole.signer}
onClick={handleAddUser} </MenuItem>
variant="contained" <MenuItem value={UserRole.viewer}>
> {UserRole.viewer}
Add </MenuItem>
</Button> </Select>
</Box> </FormControl>
</Box>
<Button
disabled={!userInput}
onClick={handleAddUser}
variant="contained"
>
Add
</Button>
</Box> </Box>
<DisplayUser <div className={styles.paperGroup}>
metadata={metadata} <DisplayUser
users={users} metadata={metadata}
handleUserRoleChange={handleUserRoleChange} users={users}
handleRemoveUser={handleRemoveUser} handleUserRoleChange={handleUserRoleChange}
moveSigner={moveSigner} handleRemoveUser={handleRemoveUser}
/> 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>

19
src/pages/create/style.module.scss
View File

@ -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: 15px;
gap: 25px; }
}
.paperGroup {
border-radius: 4px;
background: white;
padding: 15px;
display: flex;
flex-direction: column;
gap: 15px;
} }
.subHeader { .subHeader {