fix(review): remove inline styles
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 35s

This commit is contained in:
enes 2024-09-05 13:24:34 +02:00
parent 479cca2180
commit b8811d730a
2 changed files with 54 additions and 59 deletions

View File

@ -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>
</> </>

View File

@ -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;
}