refactor: update add counterparty design

src/pages/create/index.tsx

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

src/pages/create/style.module.scss

@@ -78,7 +78,7 @@
   align-items: center;
   flex-shrink: 0;
 
-  height: 34px;
+  height: 36px;
   overflow: hidden;
   border-radius: 4px;
   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 {
   flex-shrink: 0;
   max-height: 33vh;
+
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: '-15px';
 }
 
 .user {