add custom styling to common component

react/common/src/App.css

@@ -0,0 +1,50 @@
+@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');
+@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");
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/console_user.css");
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/designitalia_adaptation.css");
+@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");
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/print.css");
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css");
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style-bs.css");
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style.css");
+@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/util.css");
+@import url("https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css");
+@import url("https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css");
+@import url("https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css");
+
+/* Submit button styling (elixForms main submit) */
+.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

@@ -1,3 +1,4 @@
+import './App.css'
 import * as FluentUI from '@fluentui/react';
 import type { IElixFormsComponentFormState } from './IElixFormsComponentFormState';
 import type { IElixFormsComponentProperties } from './IElixFormsComponentProperties';
@@ -132,6 +133,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
       headerTitle,
       pageTitle,
       pageDescription,
+      submitDescription,
       heroImageSrc
     } = this.props;
 
@@ -173,7 +175,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                     </div>
                   </div>
                 )}
-                <div className="receipt">
+                <div className="mainview">
                   <div className="container">
                     {pageTitle && <h1>{pageTitle}</h1>}
                     {heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image" />}
@@ -194,7 +196,8 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                           {this.createMandatoryFormFields(queryParams)}
                           {this.createAdditionalFormFields()}
                           {this.renderCustomFormFields()}
-                          <input type="submit" value="Submit" />
+                          <br/>
+                          <input type="submit" value={submitDescription ?? 'Submit'} />
                         </form>
 
                         {this.renderExtraContentPost()}

react/common/src/IElixFormsComponentProperties.ts

@@ -1,6 +1,3 @@
-import type { JSX } from "react";
-import type { IElixFormsComponentCustomFormFieldFactory } from "./IElixFormsComponentCustomFormFieldFactory";
-
 export interface IElixFormsComponentProperties {
   description: string;
   isDarkTheme: boolean;
@@ -13,6 +10,7 @@ export interface IElixFormsComponentProperties {
   headerTitle?: string;
   pageTitle?: string;
   pageDescription?: string;
+  submitDescription?: string;
   heroImageSrc?: string;
 }
 

react/common/src/global.d.ts

@@ -0,0 +1,3 @@
+declare module "*.css";
+declare module "*.svg";
+declare module "*.png";