apply custom elixforms styling

react/common/src/App.css

@@ -1,62 +1,24 @@
 @import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap");
 @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css");
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.18.2/dist/css/bootstrap-italia.min.css");
-@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js");
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.18.2/dist/js/bootstrap-italia.bundle.min.js");
 
-:root {
+/* elixForms styles customizations */
-  --font-family-sans-serif: "Titillium Web", "Segoe UI", Arial, sans-serif;
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/util.css");
-}
+@import url("https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css");
 
-body {
+/* These are here for future imports...
-  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+@import url("https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css");
-}
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css");
-
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_overrides.css");
-.it-brand-wrapper .icon {
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/console_user.css");
-  width: 120px;
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/designitalia_adaptation.css");
-  height: auto;
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/fonts.css");
-}
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/isipcss_overrides.css");
-
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/iulib.css");
-.page-shell-card {
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/print.css");
-  border: 1px solid #e6e6e6;
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css");
-  border-radius: 0.75rem;
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style-bs.css");
-  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style.css");
-}
+@import url("https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css");
-
+@import url("https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css");
-/* Submit button styling (elixForms main submit) */
+*/
-.mainview .container .submit {
-  width: auto;
-  text-align: right;
-}
-
-.mainview .container form input[type="submit"] {
-  background-color: #0066cc;
-  color: #ffffff;
-  border: none;
-  border-radius: 6px;
-  padding: 10px 20px;
-  font-weight: 700;
-  font-size: 15px;
-  cursor: pointer;
-  box-shadow: none;
-  transition:
-    transform 120ms ease,
-    opacity 120ms ease;
-  display: inline-block;
-}
-
-.mainview .container form input[type="submit"]:hover {
-  background-color: #0053a6;
-}
-
-.mainview .container form input[type="submit"]:active {
-  opacity: 0.5;
-}
-
-@media (max-width: 480px) {
-  .mainview .container form input[type="submit"] {
-    width: 100%;
-    padding-left: 18px;
-    padding-right: 18px;
-  }
-}

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">
+                  <div className="custom-alert custom-alert-warning" role="status">
-                    {alertInfoTitle && <p className="h6 mb-1">{alertInfoTitle}</p>}
+                    {alertInfoTitle && <div><b>{alertInfoTitle}</b></div>}
-                    {alertInfoMessage &&<p className="text-secondary mb-0">{alertInfoMessage}</p>}
+                    {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">
+                      <div className="custom-alert custom-alert-info" role="status">
-                        {instructionsTitle && <p className="h6 mb-1">{instructionsTitle}</p>}
+                        {instructionsTitle && <div><b>{instructionsTitle}</b></div>}
-                        {instructionsMessage && <p className="text-secondary mb-0">{instructionsMessage}</p>}
+                        {instructionsMessage && <div className='small'>{instructionsMessage}</div>}
                       </div>
                     }
                       <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1" className="mt-3">

react/common/src/ElixFormsElement.tsx

@@ -19,7 +19,7 @@ export class ElixFormsElement {
         return (
             <div className="row mb-3 align-items-start">
                 <div className="col-12 col-md-4">
-                    <div className="text-md-end pe-md-3">
+                    <div className="text-md-end pe-md-3 mt-2">
                         {this.label}{this.separator}
                     </div>
                 </div>

react/recupero-proposta-cct-da-contratti/src/RecuperoPropostaCctDaContrattiComponent.tsx

@@ -260,7 +260,7 @@ export default class RecuperoPropostaCctDaContrattiComponent extends ElixFormsCo
           )}
 
           {errorMessage && (
-            <div className="alert alert-danger mt-2">{errorMessage}</div>
+            <div className="custom-alert custom-alert-danger mt-2">{errorMessage}</div>
           )}
         </div>