fix(review): remove inline styles
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 35s
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 35s
This commit is contained in:
parent
479cca2180
commit
b8811d730a
@ -1,11 +1,12 @@
|
|||||||
|
import styles from './style.module.scss'
|
||||||
import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
|
import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
|
||||||
import type { Identifier, XYCoord } from 'dnd-core'
|
import type { Identifier, XYCoord } from 'dnd-core'
|
||||||
import saveAs from 'file-saver'
|
import saveAs from 'file-saver'
|
||||||
import JSZip from 'jszip'
|
import JSZip from 'jszip'
|
||||||
import { Event, kinds } from 'nostr-tools'
|
import { Event, kinds } from 'nostr-tools'
|
||||||
import { useEffect, useRef, useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
import { useDrag, useDrop } from 'react-dnd'
|
import { DndProvider, useDrag, useDrop } from 'react-dnd'
|
||||||
import { DndProvider } from 'react-dnd-multi-backend'
|
import { MultiBackend } from 'react-dnd-multi-backend'
|
||||||
import { HTML5toTouch } from 'rdndmb-html5-to-touch'
|
import { HTML5toTouch } from 'rdndmb-html5-to-touch'
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
import { useLocation, useNavigate } from 'react-router-dom'
|
import { useLocation, useNavigate } from 'react-router-dom'
|
||||||
@ -41,7 +42,6 @@ import {
|
|||||||
uploadToFileStorage
|
uploadToFileStorage
|
||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
import styles from './style.module.scss'
|
|
||||||
import fileListStyles from '../../components/FileList/style.module.scss'
|
import fileListStyles from '../../components/FileList/style.module.scss'
|
||||||
import { DrawTool, MarkType } from '../../types/drawing'
|
import { DrawTool, MarkType } from '../../types/drawing'
|
||||||
import { DrawPDFFields } from '../../components/DrawPDFFields'
|
import { DrawPDFFields } from '../../components/DrawPDFFields'
|
||||||
@ -866,21 +866,12 @@ export const CreatePage = () => {
|
|||||||
<div className={styles.flexWrap}>
|
<div className={styles.flexWrap}>
|
||||||
<div className={styles.inputWrapper}>
|
<div className={styles.inputWrapper}>
|
||||||
<TextField
|
<TextField
|
||||||
|
fullWidth
|
||||||
placeholder="Title"
|
placeholder="Title"
|
||||||
size="small"
|
size="small"
|
||||||
type="text"
|
type="text"
|
||||||
value={title}
|
value={title}
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
sx={{
|
|
||||||
width: '100%',
|
|
||||||
fontSize: '16px',
|
|
||||||
'& .MuiInputBase-input': {
|
|
||||||
padding: '7px 14px'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
|
<ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
|
||||||
@ -899,9 +890,6 @@ export const CreatePage = () => {
|
|||||||
aria-label={`delete ${file.name}`}
|
aria-label={`delete ${file.name}`}
|
||||||
variant="text"
|
variant="text"
|
||||||
onClick={(event) => handleRemoveFile(event, file)}
|
onClick={(event) => handleRemoveFile(event, file)}
|
||||||
sx={{
|
|
||||||
minWidth: '44px'
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faTrash} />
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
</Button>
|
</Button>
|
||||||
@ -942,15 +930,6 @@ export const CreatePage = () => {
|
|||||||
onChange={(e) => setUserInput(e.target.value)}
|
onChange={(e) => setUserInput(e.target.value)}
|
||||||
onKeyDown={handleInputKeyDown}
|
onKeyDown={handleInputKeyDown}
|
||||||
error={!!error}
|
error={!!error}
|
||||||
sx={{
|
|
||||||
fontSize: '16px',
|
|
||||||
'& .MuiInputBase-input': {
|
|
||||||
padding: '7px 14px'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
@ -963,10 +942,7 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
aria-label="Toggle User Role"
|
aria-label="Toggle User Role"
|
||||||
sx={{
|
className={styles.counterpartToggleButton}
|
||||||
minWidth: '44px',
|
|
||||||
padding: '11px 12px'
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={userRole === UserRole.signer ? faPen : faEye}
|
icon={userRole === UserRole.signer ? faPen : faEye}
|
||||||
@ -977,10 +953,7 @@ export const CreatePage = () => {
|
|||||||
onClick={handleAddUser}
|
onClick={handleAddUser}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
aria-label="Add"
|
aria-label="Add"
|
||||||
sx={{
|
className={styles.counterpartToggleButton}
|
||||||
minWidth: '44px',
|
|
||||||
padding: '11px 12px'
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faPlus} />
|
<FontAwesomeIcon icon={faPlus} />
|
||||||
</Button>
|
</Button>
|
||||||
@ -1005,11 +978,7 @@ export const CreatePage = () => {
|
|||||||
{drawTool.active ? (
|
{drawTool.active ? (
|
||||||
<FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
|
<FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
|
||||||
) : (
|
) : (
|
||||||
<span
|
<span className={styles.comingSoonPlaceholder}>
|
||||||
style={{
|
|
||||||
fontSize: '10px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Coming soon
|
Coming soon
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
@ -1057,7 +1026,7 @@ const DisplayUser = ({
|
|||||||
}: DisplayUsersProps) => {
|
}: DisplayUsersProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DndProvider options={HTML5toTouch}>
|
<DndProvider backend={MultiBackend} options={HTML5toTouch}>
|
||||||
{users
|
{users
|
||||||
.filter((user) => user.role === UserRole.signer)
|
.filter((user) => user.role === UserRole.signer)
|
||||||
.map((user, index) => (
|
.map((user, index) => (
|
||||||
@ -1237,18 +1206,10 @@ const Counterpart = ({
|
|||||||
user.pubkey
|
user.pubkey
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
sx={{
|
className={styles.counterpartRowToggleButton}
|
||||||
minWidth: '34px',
|
data-variant="primary"
|
||||||
height: '34px',
|
|
||||||
padding: 0,
|
|
||||||
color: 'var(--primary-main)',
|
|
||||||
'&:hover': {
|
|
||||||
color: 'white'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
fontSize={'14px'}
|
|
||||||
icon={user.role === UserRole.signer ? faPen : faEye}
|
icon={user.role === UserRole.signer ? faPen : faEye}
|
||||||
/>
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
@ -1256,17 +1217,10 @@ const Counterpart = ({
|
|||||||
<Tooltip title="Remove User" arrow disableInteractive>
|
<Tooltip title="Remove User" arrow disableInteractive>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => handleRemoveUser(user.pubkey)}
|
onClick={() => handleRemoveUser(user.pubkey)}
|
||||||
sx={{
|
className={styles.counterpartRowToggleButton}
|
||||||
minWidth: '34px',
|
data-variant="secondary"
|
||||||
height: '34px',
|
|
||||||
padding: 0,
|
|
||||||
color: 'rgba(0, 0, 0, 0.35)',
|
|
||||||
'&:hover': {
|
|
||||||
color: 'white'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
</Button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</>
|
</>
|
||||||
|
@ -42,6 +42,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
min-width: 44px;
|
||||||
color: $primary-main;
|
color: $primary-main;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -89,6 +90,16 @@
|
|||||||
&:focus-within {
|
&:focus-within {
|
||||||
outline-color: $primary-main;
|
outline-color: $primary-main;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Override default MUI input styles only inside inputWrapepr
|
||||||
|
:global {
|
||||||
|
.MuiInputBase-input {
|
||||||
|
padding: 7px 14px;
|
||||||
|
}
|
||||||
|
.MuiOutlinedInput-notchedOutline {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.addCounterpart {
|
.addCounterpart {
|
||||||
@ -101,11 +112,21 @@
|
|||||||
> .inputWrapper {
|
> .inputWrapper {
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-width: 44px;
|
||||||
|
padding: 11px 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.users {
|
.users {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
max-height: 33vh;
|
max-height: 33vh;
|
||||||
|
|
||||||
|
.counterpartToggleButton {
|
||||||
|
min-width: 44px;
|
||||||
|
padding: 11px 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.user {
|
.user {
|
||||||
@ -120,6 +141,22 @@
|
|||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: none;
|
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 {
|
.avatar {
|
||||||
@ -199,3 +236,7 @@
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comingSoonPlaceholder {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user