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

refactor: update add counterparty design

Browse Source
This commit is contained in:
enes 2024-09-04 17:35:54 +02:00
parent fa7f0e2fc0
commit 5caa7f2282
2 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/create/index.tsx
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'
}, },
'& .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'
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} />

21
src/pages/create/style.module.scss
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 {