fix styling for error message

src/components/thread/CreateThread.jsx

@@ -54,7 +54,7 @@ export default function ListThreads(props) {
       const { data } = thisThread?.data;
       redirect(`/topic/${data?.topic_name}/${data?.id}/page/1`);
     } catch (error) {
-      setMessage('Thread title already exist in the selected topic');
+      setMessage("Thread's title already exist in the selected topic");
     }
     resetBody();
     resetTitle();
@@ -77,7 +77,7 @@ export default function ListThreads(props) {
           {message && (
             <div>
               <div className="alert alert-danger" role="alert">
-                {message}
+                <p>{message}</p>
               </div>
             </div>
           )}

src/components/thread/EditThread.jsx

@@ -81,7 +81,7 @@ export default function EditThread(props) {
       const { data } = thisThread?.data;
       redirect(`/topic/${data?.topic_name}/${data?.id}/page/1`);
     } catch (error) {
-      setMessage('Thread title already exist in the selected topic');
+      setMessage("Thread's title already exist in the selected topic");
     }
     resetBody();
     resetTitle();
@@ -104,7 +104,7 @@ export default function EditThread(props) {
           {message && (
             <div>
               <div className="alert alert-danger" role="alert">
-                {message}
+                <p>{message}</p>
               </div>
             </div>
           )}

src/styles/thread/Form.css

@@ -116,6 +116,11 @@ textarea:focus, input:focus, select:focus{
     outline: none;
 }
 
+.alert p {
+    font-family: "DM Sans";
+    margin: 0px;
+}
+
 @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     .formContainer {
         margin: 18px 36px;
@@ -177,6 +182,10 @@ textarea:focus, input:focus, select:focus{
         display: flex;
         justify-content: center;
     }
+
+    .alert p {
+        text-align: center;
+    }
 }
 
 @media only screen and (max-device-width : 320px) {