refactor(create-page): users design update

src/components/FileList/style.module.scss

@@ -27,7 +27,6 @@ li {
   padding: 0; /* Removes any default padding */
 }
 
-
 .wrap {
   display: flex;
   flex-direction: column;
@@ -50,7 +49,7 @@ li {
 }
 
 .files::-webkit-scrollbar-track {
-  background-color: rgba(0,0,0,0.15);
+  background-color: rgba(0, 0, 0, 0.15);
 }
 
 .files::-webkit-scrollbar-thumb {
@@ -70,12 +69,12 @@ li {
   background: #ffffff;
   padding: 5px 10px;
   align-items: center;
-  color: rgba(0,0,0,0.5);
+  color: rgba(0, 0, 0, 0.5);
   cursor: pointer;
   flex-grow: 1;
   font-size: 16px;
   font-weight: 500;
-
+  min-height: 45px;
 
   &.active {
     background: #4c82a3;
@@ -100,6 +99,7 @@ li {
   -webkit-box-orient: vertical;
   overflow: hidden;
   -webkit-line-clamp: 1;
+  line-clamp: 1;
 }
 
 .fileNumber {

src/components/UserAvatar/styles.module.scss

@@ -10,4 +10,8 @@
   font-weight: 500;
   font-size: 14px;
   color: var(--text-color);
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }

src/pages/create/index.tsx

@@ -1,8 +1,6 @@
-import { DragHandle } from '@mui/icons-material'
 import {
   Button,
-  IconButton,
+  FormHelperText,
-  ListItem,
   ListItemIcon,
   ListItemText,
   MenuItem,
@@ -60,6 +58,7 @@ import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   faEye,
+  faGripLines,
   faPen,
   faPlus,
   faTrash,
@@ -89,6 +88,12 @@ export const CreatePage = () => {
   }
 
   const [userInput, setUserInput] = useState('')
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      event.preventDefault()
+      handleAddUser()
+    }
+  }
   const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
   const [error, setError] = useState<string>()
 
@@ -783,7 +788,7 @@ export const CreatePage = () => {
                   placeholder="User (nip05 / npub)"
                   value={userInput}
                   onChange={(e) => setUserInput(e.target.value)}
-                  helperText={error}
+                  onKeyDown={handleInputKeyDown}
                   error={!!error}
                   fullWidth
                   sx={{
@@ -804,6 +809,7 @@ export const CreatePage = () => {
                   IconComponent={() => null}
                   renderValue={(value) => (
                     <FontAwesomeIcon
+                      color="var(--primary-main)"
                       icon={value === UserRole.signer ? faPen : faEye}
                     />
                   )}
@@ -818,20 +824,16 @@ export const CreatePage = () => {
                   }}
                 >
                   <MenuItem value={UserRole.signer}>
-                    <ListItem>
                     <ListItemIcon>
                       <FontAwesomeIcon icon={faPen} />
                     </ListItemIcon>
                     <ListItemText>{UserRole.signer}</ListItemText>
-                    </ListItem>
                   </MenuItem>
-                  <MenuItem value={UserRole.viewer}>
+                  <MenuItem value={UserRole.viewer} sx={{}}>
-                    <ListItem>
                     <ListItemIcon>
                       <FontAwesomeIcon icon={faEye} />
                     </ListItemIcon>
                     <ListItemText>{UserRole.viewer}</ListItemText>
-                    </ListItem>
                   </MenuItem>
                 </Select>
                 <Button
@@ -863,6 +865,10 @@ export const CreatePage = () => {
               <Button onClick={handleCreate} variant="contained">
                 Publish
               </Button>
+
+              {!!error && (
+                <FormHelperText error={!!error}>{error}</FormHelperText>
+              )}
             </div>
           }
         >
@@ -934,6 +940,8 @@ const DisplayUser = ({
                 IconComponent={() => null}
                 renderValue={(value) => (
                   <FontAwesomeIcon
+                    fontSize={'14px'}
+                    color="var(--primary-main)"
                     icon={value === UserRole.signer ? faPen : faEye}
                   />
                 )}
@@ -942,9 +950,12 @@ const DisplayUser = ({
                 }
                 sx={{
                   fontSize: '16px',
-                  minWidth: '44px',
+                  minWidth: '34px',
+                  maxWidth: '34px',
+                  minHeight: '34px',
+                  maxHeight: '34px',
                   '& .MuiInputBase-input': {
-                    padding: '7px 14px!important',
+                    padding: '10px !important',
                     textOverflow: 'unset!important'
                   },
                   '& .MuiOutlinedInput-notchedOutline': {
@@ -956,9 +967,20 @@ const DisplayUser = ({
                 <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
               </Select>
               <Tooltip title="Remove User" arrow>
-                <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
+                <Button
-                  <FontAwesomeIcon icon={faTrash} />
+                  onClick={() => handleRemoveUser(user.pubkey)}
-                </IconButton>
+                  sx={{
+                    minWidth: '34px',
+                    height: '34px',
+                    padding: 0,
+                    color: 'rgba(0, 0, 0, 0.35)',
+                    '&:hover': {
+                      color: 'white'
+                    }
+                  }}
+                >
+                  <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
+                </Button>
               </Tooltip>
             </div>
           )
@@ -1073,7 +1095,7 @@ const SignerRow = ({
       data-handler-id={handlerId}
       ref={ref}
     >
-      <DragHandle />
+      <FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
       <div className={styles.avatar}>
         <UserAvatar
           pubkey={user.pubkey}
@@ -1091,16 +1113,23 @@ const SignerRow = ({
         variant="outlined"
         IconComponent={() => null}
         renderValue={(value) => (
-          <FontAwesomeIcon icon={value === UserRole.signer ? faPen : faEye} />
+          <FontAwesomeIcon
+            fontSize={'14px'}
+            color="var(--primary-main)"
+            icon={value === UserRole.signer ? faPen : faEye}
+          />
         )}
         onChange={(e) =>
           handleUserRoleChange(e.target.value as UserRole, user.pubkey)
         }
         sx={{
           fontSize: '16px',
-          minWidth: '44px',
+          minWidth: '34px',
+          maxWidth: '34px',
+          minHeight: '34px',
+          maxHeight: '34px',
           '& .MuiInputBase-input': {
-            padding: '7px 14px!important',
+            padding: '10px !important',
             textOverflow: 'unset!important'
           },
           '& .MuiOutlinedInput-notchedOutline': {
@@ -1112,9 +1141,20 @@ const SignerRow = ({
         <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
       </Select>
       <Tooltip title="Remove User" arrow>
-        <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
+        <Button
-          <FontAwesomeIcon icon={faTrash} />
+          onClick={() => handleRemoveUser(user.pubkey)}
-        </IconButton>
+          sx={{
+            minWidth: '34px',
+            height: '34px',
+            padding: 0,
+            color: 'rgba(0, 0, 0, 0.35)',
+            '&:hover': {
+              color: 'white'
+            }
+          }}
+        >
+          <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
+        </Button>
       </Tooltip>
     </div>
   )

src/pages/create/style.module.scss

@@ -104,9 +104,16 @@
 
 .avatar {
   flex-grow: 1;
+  min-width: 0;
 
   &:first-child {
-    margin-left: 34px;
+    margin-left: 24px;
+  }
+
+  img {
+    // Override the default avatar size
+    width: 30px;
+    height: 30px;
   }
 }