Counterparts section design update, touch dnd support, marks scrolling #182

Merged
enes merged 9 commits from 174-add-users-updates into staging 2024-09-06 10:22:56 +00:00
2 changed files with 41 additions and 24 deletions
Showing only changes of commit 5caa7f2282 - Show all commits

View File

@ -932,6 +932,7 @@ export const CreatePage = () => {
moveSigner={moveSigner} moveSigner={moveSigner}
/> />
</div> </div>
<div className={styles.addCounterpart}>
<div className={styles.inputWrapper}> <div className={styles.inputWrapper}>
<TextField <TextField
placeholder="Add counterpart" placeholder="Add counterpart"
@ -939,7 +940,6 @@ export const CreatePage = () => {
onChange={(e) => setUserInput(e.target.value)} onChange={(e) => setUserInput(e.target.value)}
onKeyDown={handleInputKeyDown} onKeyDown={handleInputKeyDown}
error={!!error} error={!!error}
fullWidth
sx={{ sx={{
fontSize: '16px', fontSize: '16px',
'& .MuiInputBase-input': { '& .MuiInputBase-input': {
@ -950,6 +950,7 @@ export const CreatePage = () => {
} }
}} }}
/> />
</div>
<Button <Button
onClick={() => onClick={() =>
setUserRole( setUserRole(
@ -962,8 +963,7 @@ export const CreatePage = () => {
aria-label="Toggle User Role" aria-label="Toggle User Role"
sx={{ sx={{
minWidth: '44px', minWidth: '44px',
padding: '11.5px 12px', padding: '11px 12px'
borderRadius: 0
}} }}
> >
<FontAwesomeIcon <FontAwesomeIcon
@ -977,9 +977,7 @@ export const CreatePage = () => {
aria-label="Add" aria-label="Add"
sx={{ sx={{
minWidth: '44px', minWidth: '44px',
padding: '11.5px 12px', padding: '11px 12px'
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
}} }}
> >
<FontAwesomeIcon icon={faPlus} /> <FontAwesomeIcon icon={faPlus} />

View File

@ -78,7 +78,7 @@
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
height: 34px; height: 36px;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
outline: solid 1px #dddddd; outline: solid 1px #dddddd;
@ -91,9 +91,28 @@
} }
} }
.addCounterpart {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: start;
gap: 10px;
background: white;
border-radius: 0 0 4px 4px;
padding: 15px;
> .inputWrapper {
flex-shrink: 1;
}
}
.users { .users {
flex-shrink: 0; flex-shrink: 0;
max-height: 33vh; max-height: 33vh;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: '-15px';
} }
.user { .user {