src/pages/create/index.tsx

@@ -1,11 +1,12 @@
+import styles from './style.module.scss'
 import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
 import type { Identifier, XYCoord } from 'dnd-core'
 import saveAs from 'file-saver'
 import JSZip from 'jszip'
 import { Event, kinds } from 'nostr-tools'
 import { useEffect, useRef, useState } from 'react'
-import { useDrag, useDrop } from 'react-dnd'
-import { DndProvider } from 'react-dnd-multi-backend'
+import { DndProvider, useDrag, useDrop } from 'react-dnd'
+import { MultiBackend } from 'react-dnd-multi-backend'
 import { HTML5toTouch } from 'rdndmb-html5-to-touch'
 import { useSelector } from 'react-redux'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -41,7 +42,6 @@ import {
   uploadToFileStorage
 } from '../../utils'
 import { Container } from '../../components/Container'
-import styles from './style.module.scss'
 import fileListStyles from '../../components/FileList/style.module.scss'
 import { DrawTool, MarkType } from '../../types/drawing'
 import { DrawPDFFields } from '../../components/DrawPDFFields'
@@ -866,21 +866,12 @@ export const CreatePage = () => {
             <div className={styles.flexWrap}>
               <div className={styles.inputWrapper}>
                 <TextField
+                  fullWidth
                   placeholder="Title"
                   size="small"
                   type="text"
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
-                  sx={{
-                    width: '100%',
-                    fontSize: '16px',
-                    '& .MuiInputBase-input': {
-                      padding: '7px 14px'
-                    },
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      display: 'none'
-                    }
-                  }}
                 />
               </div>
               <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
@@ -899,9 +890,6 @@ export const CreatePage = () => {
                         aria-label={`delete ${file.name}`}
                         variant="text"
                         onClick={(event) => handleRemoveFile(event, file)}
-                        sx={{
-                          minWidth: '44px'
-                        }}
                       >
                         <FontAwesomeIcon icon={faTrash} />
                       </Button>
@@ -942,15 +930,6 @@ export const CreatePage = () => {
                     onChange={(e) => setUserInput(e.target.value)}
                     onKeyDown={handleInputKeyDown}
                     error={!!error}
-                    sx={{
-                      fontSize: '16px',
-                      '& .MuiInputBase-input': {
-                        padding: '7px 14px'
-                      },
-                      '& .MuiOutlinedInput-notchedOutline': {
-                        display: 'none'
-                      }
-                    }}
                   />
                 </div>
                 <Button
@@ -963,10 +942,7 @@ export const CreatePage = () => {
                   }
                   variant="contained"
                   aria-label="Toggle User Role"
-                  sx={{
-                    minWidth: '44px',
-                    padding: '11px 12px'
-                  }}
+                  className={styles.counterpartToggleButton}
                 >
                   <FontAwesomeIcon
                     icon={userRole === UserRole.signer ? faPen : faEye}
@@ -977,10 +953,7 @@ export const CreatePage = () => {
                   onClick={handleAddUser}
                   variant="contained"
                   aria-label="Add"
-                  sx={{
-                    minWidth: '44px',
-                    padding: '11px 12px'
-                  }}
+                  className={styles.counterpartToggleButton}
                 >
                   <FontAwesomeIcon icon={faPlus} />
                 </Button>
@@ -1005,11 +978,7 @@ export const CreatePage = () => {
                       {drawTool.active ? (
                         <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
                       ) : (
-                        <span
-                          style={{
-                            fontSize: '10px'
-                          }}
-                        >
+                        <span className={styles.comingSoonPlaceholder}>
                           Coming soon
                         </span>
                       )}
@@ -1057,7 +1026,7 @@ const DisplayUser = ({
 }: DisplayUsersProps) => {
   return (
     <>
-      <DndProvider options={HTML5toTouch}>
+      <DndProvider backend={MultiBackend} options={HTML5toTouch}>
         {users
           .filter((user) => user.role === UserRole.signer)
           .map((user, index) => (
@@ -1237,18 +1206,10 @@ const Counterpart = ({
               user.pubkey
             )
           }
-          sx={{
-            minWidth: '34px',
-            height: '34px',
-            padding: 0,
-            color: 'var(--primary-main)',
-            '&:hover': {
-              color: 'white'
-            }
-          }}
+          className={styles.counterpartRowToggleButton}
+          data-variant="primary"
         >
           <FontAwesomeIcon
-            fontSize={'14px'}
             icon={user.role === UserRole.signer ? faPen : faEye}
           />
         </Button>
@@ -1256,17 +1217,10 @@ const Counterpart = ({
       <Tooltip title="Remove User" arrow disableInteractive>
         <Button
           onClick={() => handleRemoveUser(user.pubkey)}
-          sx={{
-            minWidth: '34px',
-            height: '34px',
-            padding: 0,
-            color: 'rgba(0, 0, 0, 0.35)',
-            '&:hover': {
-              color: 'white'
-            }
-          }}
+          className={styles.counterpartRowToggleButton}
+          data-variant="secondary"
         >
-          <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
+          <FontAwesomeIcon icon={faTrash} />
         </Button>
       </Tooltip>
     </>

src/pages/create/style.module.scss

@@ -42,6 +42,7 @@
     }
 
     button {
+      min-width: 44px;
       color: $primary-main;
     }
 
@@ -89,6 +90,16 @@
   &:focus-within {
     outline-color: $primary-main;
   }
+
+  // Override default MUI input styles only inside inputWrapepr
+  :global {
+    .MuiInputBase-input {
+      padding: 7px 14px;
+    }
+    .MuiOutlinedInput-notchedOutline {
+      display: none;
+    }
+  }
 }
 
 .addCounterpart {
@@ -101,11 +112,21 @@
   > .inputWrapper {
     flex-shrink: 1;
   }
+
+  button {
+    min-width: 44px;
+    padding: 11px 12px;
+  }
 }
 
 .users {
   flex-shrink: 0;
   max-height: 33vh;
+
+  .counterpartToggleButton {
+    min-width: 44px;
+    padding: 11px 12px;
+  }
 }
 
 .user {
@@ -120,6 +141,22 @@
   a:hover {
     text-decoration: none;
   }
+
+  // Higher specificify to override default button styles
+  .counterpartRowToggleButton {
+    min-width: 34px;
+    height: 34px;
+    padding: 0;
+  }
+}
+
+.counterpartRowToggleButton {
+  &[data-variant='primary'] {
+    color: $primary-main;
+  }
+  &[data-variant='secondary'] {
+    color: rgba(0, 0, 0, 0.35);
+  }
 }
 
 .avatar {
@@ -199,3 +236,7 @@
     cursor: not-allowed;
   }
 }
+
+.comingSoonPlaceholder {
+  font-size: 10px;
+}