diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index 19a58ae..f0bd6b9 100644
--- a/src/pages/create/index.tsx
+++ b/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 = () => {
setTitle(e.target.value)}
- sx={{
- width: '100%',
- fontSize: '16px',
- '& .MuiInputBase-input': {
- padding: '7px 14px'
- },
- '& .MuiOutlinedInput-notchedOutline': {
- display: 'none'
- }
- }}
/>
@@ -899,9 +890,6 @@ export const CreatePage = () => {
aria-label={`delete ${file.name}`}
variant="text"
onClick={(event) => handleRemoveFile(event, file)}
- sx={{
- minWidth: '44px'
- }}
>
@@ -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'
- }
- }}
/>
@@ -1005,11 +978,7 @@ export const CreatePage = () => {
{drawTool.active ? (
) : (
-
+
Coming soon
)}
@@ -1057,7 +1026,7 @@ const DisplayUser = ({
}: DisplayUsersProps) => {
return (
<>
-
+
{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"
>
@@ -1256,17 +1217,10 @@ const Counterpart = ({
>
diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss
index 4652a64..a7dd7f2 100644
--- a/src/pages/create/style.module.scss
+++ b/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;
+}