apply custom elixforms styling

react/common/src/ElixFormsComponentAbstract.tsx

@@ -218,9 +218,9 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                 {cardDescription && <p className="lead text-secondary">{cardDescription}</p>}
 
                 {(alertInfoTitle || alertInfoMessage) &&
-                  <div className="alert alert-warning" role="status">
-                    {alertInfoTitle && <p className="h6 mb-1">{alertInfoTitle}</p>}
-                    {alertInfoMessage &&<p className="text-secondary mb-0">{alertInfoMessage}</p>}
+                  <div className="custom-alert custom-alert-warning" role="status">
+                    {alertInfoTitle && <div><b>{alertInfoTitle}</b></div>}
+                    {alertInfoMessage && <div className='small'>{alertInfoMessage}</div>}
                   </div>}
 
                 {hasAuthenticationError ? (
@@ -230,9 +230,9 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                     {this.renderExtraContentPre()}
 
                     {(instructionsTitle || instructionsMessage) &&
-                      <div className="alert alert-info" role="status">
-                        {instructionsTitle && <p className="h6 mb-1">{instructionsTitle}</p>}
-                        {instructionsMessage && <p className="text-secondary mb-0">{instructionsMessage}</p>}
+                      <div className="custom-alert custom-alert-info" role="status">
+                        {instructionsTitle && <div><b>{instructionsTitle}</b></div>}
+                        {instructionsMessage && <div className='small'>{instructionsMessage}</div>}
                       </div>
                     }
                       <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1" className="mt-3">