From 05745be0fa842d8c19009bf08f9058308bef3728 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 15:18:49 -0300
Subject: [PATCH] Change classNames "compose-form__warning" to use only
 Tailwind

---
 src/features/compose/components/warning.tsx |  2 +-
 src/styles/tailwind.css                     | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/features/compose/components/warning.tsx b/src/features/compose/components/warning.tsx
index 28f7edf64..7cf310933 100644
--- a/src/features/compose/components/warning.tsx
+++ b/src/features/compose/components/warning.tsx
@@ -11,7 +11,7 @@ interface IWarning {
 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 }) }}>
     {({ 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}
       </div>
     )}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 4abf3a09f..9034e1ab0 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,23 @@
 @tailwind 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{
     display: block;
     margin-right: 8px;