add custom styling to common component

.agents/skills/create-new-page/SKILL.md

@@ -169,7 +169,7 @@ function App() {
           {/* Header, contenuto e footer della pagina */}
           <div className="grid_12 console_main">
             <div className="inside">
-              <div className="receipt">
+              <div className="mainview">
                 <div className="container">
                   <h1>Titolo Pagina</h1>
                   {elixFormsReactRender}

.agents/skills/css-design-system/SKILL.md

@@ -76,7 +76,7 @@ Le pagine seguono un layout standard elixForms con classi CSS specifiche:
           <div class="fe-module-header-container">
             <h2>Titolo Modulo</h2>
           </div>
-          <div class="receipt">
+          <div class="mainview">
             <div class="container">
               <!-- Contenuto custom della pagina -->
             </div>
@@ -115,7 +115,7 @@ Le pagine seguono un layout standard elixForms con classi CSS specifiche:
 | `console_header` | Header della console |
 | `console_main` | Area contenuto principale |
 | `fe-module-header-container` | Header del modulo/form |
-| `receipt` | Container del contenuto del form |
+| `mainview` | Container del contenuto del form |
 
 ### Layout Campi Form (ElixFormsElement)
 | Classe | Scopo |

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";

react/recupero-proposta-cct-da-contratti/src/App.css

@@ -1,20 +1,3 @@
-@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');
-
 /* ===== Autocomplete Component Styles ===== */
 
 .autocomplete-wrapper {

react/recupero-proposta-cct-da-contratti/src/App.jsx

@@ -12,6 +12,7 @@ function App() {
       headerTitle="Modulo - Placeholder Titolo Modulo"
       pageTitle="Recupero Proposta CCT da Contratti"
       pageDescription=""
+      submitDescription='CONFERMA E PROSEGUI'
     />
   );
 }