Change classNames "compose-form__warning" to use only Tailwind

This commit is contained in:
danidfra 2024-11-05 15:18:49 -03:00
parent 7763135428
commit 05745be0fa
2 changed files with 18 additions and 1 deletions

View File

@ -11,7 +11,7 @@ interface IWarning {
const Warning: React.FC<IWarning> = ({ message }) => ( const Warning: React.FC<IWarning> = ({ message }) => (
<Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}> <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
{({ opacity, scaleX, scaleY }) => ( {({ opacity, scaleX, scaleY }) => (
<div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}> <div className='compose-form-warning mb-2.5 rounded bg-accent-300 px-2.5 py-2 text-xs text-white shadow-md' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
{message} {message}
</div> </div>
)} )}

View File

@ -3,6 +3,23 @@
@tailwind utilities; @tailwind utilities;
@layer utilities { @layer utilities {
.compose-form-warning {
strong {
@apply font-medium;
}
a {
font-weight: 500;
text-decoration: underline;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
}
.autosuggest-emoji > img{ .autosuggest-emoji > img{
display: block; display: block;
margin-right: 8px; margin-right: 8px;