From 5caa7f22823e7cdbdee262a88fd7fb4bf9f9da8a Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Wed, 4 Sep 2024 17:35:54 +0200
Subject: [PATCH] refactor: update add counterparty design

---
 src/pages/create/index.tsx         | 44 ++++++++++++++----------------
 src/pages/create/style.module.scss | 21 +++++++++++++-
 2 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index d3ed57a..0a15f2c 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -932,24 +932,25 @@ export const CreatePage = () => {
                   moveSigner={moveSigner}
                 />
               </div>
-              <div className={styles.inputWrapper}>
-                <TextField
-                  placeholder="Add counterpart"
-                  value={userInput}
-                  onChange={(e) => setUserInput(e.target.value)}
-                  onKeyDown={handleInputKeyDown}
-                  error={!!error}
-                  fullWidth
-                  sx={{
-                    fontSize: '16px',
-                    '& .MuiInputBase-input': {
-                      padding: '7px 14px'
-                    },
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      display: 'none'
-                    }
-                  }}
-                />
+              <div className={styles.addCounterpart}>
+                <div className={styles.inputWrapper}>
+                  <TextField
+                    placeholder="Add counterpart"
+                    value={userInput}
+                    onChange={(e) => setUserInput(e.target.value)}
+                    onKeyDown={handleInputKeyDown}
+                    error={!!error}
+                    sx={{
+                      fontSize: '16px',
+                      '& .MuiInputBase-input': {
+                        padding: '7px 14px'
+                      },
+                      '& .MuiOutlinedInput-notchedOutline': {
+                        display: 'none'
+                      }
+                    }}
+                  />
+                </div>
                 <Button
                   onClick={() =>
                     setUserRole(
@@ -962,8 +963,7 @@ export const CreatePage = () => {
                   aria-label="Toggle User Role"
                   sx={{
                     minWidth: '44px',
-                    padding: '11.5px 12px',
-                    borderRadius: 0
+                    padding: '11px 12px'
                   }}
                 >
                   <FontAwesomeIcon
@@ -977,9 +977,7 @@ export const CreatePage = () => {
                   aria-label="Add"
                   sx={{
                     minWidth: '44px',
-                    padding: '11.5px 12px',
-                    borderTopLeftRadius: 0,
-                    borderBottomLeftRadius: 0
+                    padding: '11px 12px'
                   }}
                 >
                   <FontAwesomeIcon icon={faPlus} />
diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss
index eddacfe..ca7da32 100644
--- a/src/pages/create/style.module.scss
+++ b/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 {