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,24 +932,25 @@ export const CreatePage = () => {
moveSigner={moveSigner} moveSigner={moveSigner}
/> />
</div> </div>
<div className={styles.inputWrapper}> <div className={styles.addCounterpart}>
<TextField <div className={styles.inputWrapper}>
placeholder="Add counterpart" <TextField
value={userInput} placeholder="Add counterpart"
onChange={(e) => setUserInput(e.target.value)} value={userInput}
onKeyDown={handleInputKeyDown} onChange={(e) => setUserInput(e.target.value)}
error={!!error} onKeyDown={handleInputKeyDown}
fullWidth error={!!error}
sx={{ sx={{
fontSize: '16px', fontSize: '16px',
'& .MuiInputBase-input': { '& .MuiInputBase-input': {
padding: '7px 14px' padding: '7px 14px'
Outdated
Review

This hardcoded inline style can be converted in to CSS class

This hardcoded inline style can be converted in to CSS class
}, },
'& .MuiOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-notchedOutline': {
display: 'none' display: 'none'
} }
}} }}
/> />
</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'
Outdated
Review

Convert this inline style to css class

Convert this inline style to css class
Outdated
Review

Updated, moved all inline styles to the module scss with some higher specificity to override default styles.

Updated, moved all inline styles to the module scss with some higher specificity to override default styles.
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 {