From 36c5ff8def7328c0eac70ba84b305bc147d7d379 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Wed, 17 Jun 2020 11:37:38 +0200
Subject: [PATCH 1/3] fix paddle

---
 .../wwwroot/assets/styles/base/paddle.less    | 103 +++++++-----------
 Thermo.Active/wwwroot/assets/styles/style.css |  54 ++++-----
 .../components/paddle/sidebar.ts              |  16 ++-
 .../components/paddle/sidebar.vue             |  91 ++++++++++++----
 .../components/paddle/switch-button.ts        |   8 ++
 .../components/paddle/switch-button.vue       |   2 +-
 .../wwwroot/src/store/paddle.store.ts         |  22 +++-
 7 files changed, 169 insertions(+), 127 deletions(-)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/paddle.less b/Thermo.Active/wwwroot/assets/styles/base/paddle.less
index ea0d52fc..165f684a 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/paddle.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/paddle.less
@@ -3,47 +3,26 @@
 @import "colors.less";
 @import "fonts.less";
 
-html {
-  height  : 100%;
-  overflow: hidden;
-}
-
-body {
-  border : 0;
-  margin : 0;
-  padding: 0;
-  height : 100%;
-}
-
-.hidden {
-  visibility: hidden;
-}
-
-.main-nav {
-  position: absolute;
-  top     : 50%;
-  right   : 0;
-  z-index : 1000;
-}
-
 .container {
 
   #app {
 
     nav {
-      position: absolute;
-      // top     : 50%;
-      right   : 0;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
+      position       : absolute;
+      right          : 0;
+      height         : 100%;
+      display        : flex;
+      flex-direction : column;
       justify-content: center;
 
-
       .active button {
         transform: translate(-761px, 0px);
       }
 
+      .active_second_card button {
+        transform: translate(-1522px, 0px);
+      }
+
       div {
 
         button {
@@ -87,8 +66,6 @@ body {
       }
     }
 
-
-
     .sidebar {
       width          : 100vw;
       height         : 100vh;
@@ -96,21 +73,15 @@ body {
       flex-direction : column;
       justify-content: center;
 
-      // .sidebar-backdrop {
-      //   width: 100vw;
-      //   height: 100vh;
-      //   // position: fixed;
-      //   // top: 0;
-      //   // left: 0;
-      //   cursor: pointer;
-      // }
+      .active {
+        transform: translate(-761px, 0px);
+      }
 
       .sidebar-panel {
-        overflow-y      : auto;
+        // overflow-y      : auto;
         background-color: #130f40;
-        position: fixed;
-        right: 0;
-        // top: 141px;
+        position        : fixed;
+        right           : 0;
         z-index         : 900;
         padding         : 3rem 20px 2rem 20px;
         width           : 721px;
@@ -119,19 +90,29 @@ body {
         box-shadow      : 2px 10px 15px 0 rgba(0, 0, 0, 0.5);
         background-color: #dddddd;
 
-        .text-head-sidebar {
-          margin        : 10px auto;
-          font-size     : 24px;
-          font-weight   : 500;
-          font-stretch  : normal;
-          font-style    : normal;
-          line-height   : normal;
-          letter-spacing: normal;
-          text-align    : center;
-          color         : #002680;
+        .head-sidebar {
+          margin: 10px 0px;
+          display: flex;
+          justify-content: center;
+          
+          label {
+            font-size     : 24px;
+            font-weight   : 500;
+            font-stretch  : normal;
+            font-style    : normal;
+            line-height   : normal;
+            letter-spacing: normal;
+            text-align    : center;
+            color         : #002680;
+          }
+
         }
 
-        .box-sidebar-panel {
+        aside {
+          height: 95%;
+        }
+
+        section {
           display              : grid;
           grid-template-columns: repeat(2, 1fr);
           align-items          : center;
@@ -145,11 +126,10 @@ body {
             background-color: #808e96;
             margin          : 10px 30px;
 
-            .text-box-paddle {
+            div {
               display       : flex;
               width         : 268px;
               height        : 78px;
-              font-family   : WorkSans;
               font-size     : 18px;
               font-weight   : 500;
               font-stretch  : normal;
@@ -166,19 +146,12 @@ body {
               }
 
               label {
-                width : 117px;
+                width : 100%;
                 margin: 10px;
               }
 
             }
 
-            .text-box-paddle.text-soft {
-              label {
-                width     : 100%;
-                align-self: center;
-              }
-            }
-
           }
 
         }
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index dc16d9de..c5e0ccf5 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4956,25 +4956,6 @@ article .box .body {
   width: 20px;
   height: 20px;
 }
-html {
-  height: 100%;
-  overflow: hidden;
-}
-body {
-  border: 0;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
-.hidden {
-  visibility: hidden;
-}
-.main-nav {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  z-index: 1000;
-}
 .container #app nav {
   position: absolute;
   right: 0;
@@ -4986,6 +4967,9 @@ body {
 .container #app nav .active button {
   transform: translate(-761px, 0px);
 }
+.container #app nav .active_second_card button {
+  transform: translate(-1522px, 0px);
+}
 .container #app nav div button {
   position: relative;
   height: 30px;
@@ -5024,8 +5008,10 @@ body {
   flex-direction: column;
   justify-content: center;
 }
+.container #app .sidebar .active {
+  transform: translate(-761px, 0px);
+}
 .container #app .sidebar .sidebar-panel {
-  overflow-y: auto;
   background-color: #130f40;
   position: fixed;
   right: 0;
@@ -5037,8 +5023,12 @@ body {
   box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5);
   background-color: #dddddd;
 }
-.container #app .sidebar .sidebar-panel .text-head-sidebar {
-  margin: 10px auto;
+.container #app .sidebar .sidebar-panel .head-sidebar {
+  margin: 10px 0px;
+  display: flex;
+  justify-content: center;
+}
+.container #app .sidebar .sidebar-panel .head-sidebar label {
   font-size: 24px;
   font-weight: 500;
   font-stretch: normal;
@@ -5048,13 +5038,16 @@ body {
   text-align: center;
   color: #002680;
 }
-.container #app .sidebar .sidebar-panel .box-sidebar-panel {
+.container #app .sidebar .sidebar-panel aside {
+  height: 95%;
+}
+.container #app .sidebar .sidebar-panel section {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   justify-items: center;
 }
-.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav {
+.container #app .sidebar .sidebar-panel section .sidebar-panel-nav {
   width: 286px;
   height: 100px;
   border-radius: 2px;
@@ -5062,11 +5055,10 @@ body {
   background-color: #808e96;
   margin: 10px 30px;
 }
-.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle {
+.container #app .sidebar .sidebar-panel section .sidebar-panel-nav div {
   display: flex;
   width: 268px;
   height: 78px;
-  font-family: WorkSans;
   font-size: 18px;
   font-weight: 500;
   font-stretch: normal;
@@ -5076,18 +5068,14 @@ body {
   color: #ffffff;
   margin: 10px;
 }
-.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle i {
+.container #app .sidebar .sidebar-panel section .sidebar-panel-nav div i {
   text-align: end;
   width: 50px;
   color: #bbbcbc;
 }
-.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle label {
-  width: 117px;
-  margin: 10px;
-}
-.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle.text-soft label {
+.container #app .sidebar .sidebar-panel section .sidebar-panel-nav div label {
   width: 100%;
-  align-self: center;
+  margin: 10px;
 }
 .arch {
   display: flex;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts
index 26203a53..8e6050fe 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts
@@ -5,14 +5,20 @@ import { paddleActions } from '@/store/paddle.store';
 @Component({ name: 'sidebar' })
 export default class Sidebar extends Vue {
 
-  azione1: boolean = false;
-  azione2: boolean = false;
-
   isPanelOpen() {
     return this.$store.state.paddle.isNavOpen;
   }
 
-  closeSidebarPanel() {
-    paddleActions.Toggle(this.$store);
+  get action1() {
+    return this.$store.state.paddle.action1;
   }
+
+  get action2() {
+    return this.$store.state.paddle.action2;
+  }
+
+  ConfigPressed(action: string) {
+      paddleActions.ToggleAction(this.$store,action);
+  }
+
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
index 0e100048..081ea69a 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
@@ -1,71 +1,122 @@
 <template>
   <div class="sidebar">
     <!-- <transition> -->
-    <div v-if="isPanelOpen()" class="sidebar-panel">
-      <div class="text-head-sidebar">
+    <div v-if="isPanelOpen()" class="sidebar-panel" :class="{ 'active' : action1||action2 }">
+      <div class="head-sidebar">
         <label>Pulsanti personalizzati</label>
       </div>
 
-      <div class="box-sidebar-panel">
+      <section @click="ConfigPressed('action1')">
         <div class="sidebar-panel-nav">
-          <div class="text-box-paddle">
+          <div>
             <img src="assets/icons/svg/paddle-riscaldo.svg" />
             <label>Estensione riscaldo 20 secondi</label>
-            <i class="fa fa-cog gear-box-paddle"></i>
+            <i class="fa fa-cog"></i>
           </div>
         </div>
-        <div class="sidebar-panel-nav">
-          <div class="text-box-paddle">
+        <div class="sidebar-panel-nav" @click="ConfigPressed('action2')">
+          <div>
             <img src="assets/icons/svg/paddle-altra-funzione.svg" />
             <label>Altra funzione tasto fisico della tastiera</label>
-            <i class="fa fa-cog gear-box-paddle"></i>
+            <i class="fa fa-cog"></i>
           </div>
         </div>
-      </div>
+      </section>
 
-      <div class="text-head-sidebar">
+      <div class="head-sidebar">
         <label>Soft keys</label>
       </div>
 
-      <div class="box-sidebar-panel">
+      <section>
         <div class="sidebar-panel-nav">
-          <div class="text-box-paddle text-soft">
+          <div>
             <label>Nome azione soft key</label>
           </div>
         </div>
         <div class="sidebar-panel-nav">
-          <div class="text-box-paddle text-soft">
+          <div>
             <label>Nome azione soft key</label>
           </div>
         </div>
         <div class="sidebar-panel-nav">
-          <div class="text-box-paddle text-soft">
+          <div>
             <label>Nome azione soft key</label>
           </div>
         </div>
         <div class="sidebar-panel-nav">
-          <div class="text-box-paddle text-soft">
+          <div>
             <label>Estensione riscaldo 20 secondi</label>
           </div>
         </div>
         <div class="sidebar-panel-nav">
-          <div class="text-box-paddle text-soft">
-            <toggle-button v-model="azione1"></toggle-button>
+          <div>
+            <toggle-button></toggle-button>
             <label>Nome azione soft key</label>
           </div>
         </div>
         <div class="sidebar-panel-nav">
-          <div class="text-box-paddle text-soft">
-            <toggle-button v-model="azione2"></toggle-button>
+          <div>
+            <toggle-button></toggle-button>
             <label>Nome azione soft key</label>
           </div>
         </div>
         <div class="sidebar-panel-nav">
-          <div class="text-box-paddle text-soft">
+          <div>
             <label>Nome azione soft key</label>
           </div>
         </div>
+      </section>
+    </div>
+
+    <div v-if="(action1||action2) && isPanelOpen()" class="sidebar-panel">
+      <div class="head-sidebar">
+        <button>Tutti</button>
+        <button>Gruppo 1</button>
+        <button>Gruppo 2</button>
+        <button>Gruppo 3</button>
       </div>
+
+      <aside class="scrollable auto">
+        <section>
+          <div class="sidebar-panel-nav">
+            <div>
+              <label>Nome azione soft key</label>
+            </div>
+          </div>
+          <div class="sidebar-panel-nav">
+            <div>
+              <label>Nome azione soft key</label>
+            </div>
+          </div>
+          <div class="sidebar-panel-nav">
+            <div>
+              <label>Nome azione soft key</label>
+            </div>
+          </div>
+          <div class="sidebar-panel-nav">
+            <div>
+              <label>Estensione riscaldo 20 secondi</label>
+            </div>
+          </div>
+          <div class="sidebar-panel-nav">
+            <div>
+              <toggle-button></toggle-button>
+              <label>Nome azione soft key</label>
+            </div>
+          </div>
+          <div class="sidebar-panel-nav">
+            <div>
+              <toggle-button></toggle-button>
+              <label>Nome azione soft key</label>
+            </div>
+          </div>
+          <div class="sidebar-panel-nav">
+            <div>
+              <label>Nome azione soft key</label>
+            </div>
+          </div>
+        </section>
+      </aside>
     </div>
     <!-- </transition> -->
   </div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.ts
index 1852a8f7..6ad81a5f 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.ts
@@ -9,6 +9,14 @@ export default class SwitchButton extends Vue{
         return this.$store.state.paddle.isNavOpen;
     }
 
+    get action1(){
+        return this.$store.state.paddle.action1;
+    }
+
+    get action2(){
+        return this.$store.state.paddle.action2;
+    }
+
     togglePaddle() {
         paddleActions.Toggle(this.$store);
     }
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.vue
index 59161c66..d059104b 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ 'active' : isSwitchActive() }" @click="togglePaddle()">
+    <div :class="{ 'active' : isSwitchActive() , 'active_second_card' : action1 || action2}" @click="togglePaddle()">
         <slot>
             <button title="Menu">
                 <div>
diff --git a/Thermo.Active/wwwroot/src/store/paddle.store.ts b/Thermo.Active/wwwroot/src/store/paddle.store.ts
index f74b748e..8ede24dc 100644
--- a/Thermo.Active/wwwroot/src/store/paddle.store.ts
+++ b/Thermo.Active/wwwroot/src/store/paddle.store.ts
@@ -1,20 +1,36 @@
 
 export interface PaddleModel {
-    isNavOpen: boolean
+    isNavOpen: boolean,
+    action1: boolean,
+    action2:boolean
   }
 
 export const paddleStore={
     state:{
-        isNavOpen:false
+        isNavOpen:false,
+        action1:false,
+        action2:false
     } as PaddleModel,
     mutations: {
         toggleNav(state){
-            state.isNavOpen=!state.isNavOpen
+            state.isNavOpen=!state.isNavOpen,
+            state.action1=false,
+            state.action2=false
+        },
+        toggleAction(state,action:string){
+            if(action=="action1"){
+                state.action1=!state.action1
+            }else{
+                state.action2=!state.action2
+            }
         }
     },
     actions:{
         Toggle(context){
             context.commit("toggleNav");
+        },
+        ToggleAction(context,action:string){
+            context.commit("toggleAction",action);
         }
     }
 }

From 99279824ef13443fd9bfa198ea1285a993bc3f84 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Wed, 17 Jun 2020 11:51:06 +0200
Subject: [PATCH 2/3] fix buttons

---
 .../wwwroot/assets/styles/base/paddle.less       | 16 +++++++++++++++-
 Thermo.Active/wwwroot/assets/styles/style.css    | 14 +++++++++++++-
 .../components/paddle/sidebar.ts                 |  2 ++
 .../components/paddle/sidebar.vue                |  8 ++++----
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/paddle.less b/Thermo.Active/wwwroot/assets/styles/base/paddle.less
index 165f684a..51388809 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/paddle.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/paddle.less
@@ -93,7 +93,21 @@
         .head-sidebar {
           margin: 10px 0px;
           display: flex;
-          justify-content: center;
+          align-items: center;
+          justify-content: space-evenly;
+
+          button{
+            width: 100px;
+            height: 30px;
+            font-size: 20px;
+            background-color: unset;
+            border: none;
+            
+            &.selected{
+              color:#002680;
+              border-bottom:  2px solid #002680;
+            }
+          }
           
           label {
             font-size     : 24px;
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index c5e0ccf5..7e221466 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -5026,7 +5026,19 @@ article .box .body {
 .container #app .sidebar .sidebar-panel .head-sidebar {
   margin: 10px 0px;
   display: flex;
-  justify-content: center;
+  align-items: center;
+  justify-content: space-evenly;
+}
+.container #app .sidebar .sidebar-panel .head-sidebar button {
+  width: 100px;
+  height: 30px;
+  font-size: 20px;
+  background-color: unset;
+  border: none;
+}
+.container #app .sidebar .sidebar-panel .head-sidebar button.selected {
+  color: #002680;
+  border-bottom: 2px solid #002680;
 }
 .container #app .sidebar .sidebar-panel .head-sidebar label {
   font-size: 24px;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts
index 8e6050fe..2f1e3788 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts
@@ -5,6 +5,8 @@ import { paddleActions } from '@/store/paddle.store';
 @Component({ name: 'sidebar' })
 export default class Sidebar extends Vue {
 
+  show:string="tutti";
+
   isPanelOpen() {
     return this.$store.state.paddle.isNavOpen;
   }
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
index 081ea69a..00246dd5 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
@@ -70,10 +70,10 @@
 
     <div v-if="(action1||action2) && isPanelOpen()" class="sidebar-panel">
       <div class="head-sidebar">
-        <button>Tutti</button>
-        <button>Gruppo 1</button>
-        <button>Gruppo 2</button>
-        <button>Gruppo 3</button>
+        <button :class="{'selected':show=='tutti'}" @click="show='tutti'">Tutti</button>
+        <button :class="{'selected':show=='one'}" @click="show='one'">Gruppo 1</button>
+        <button :class="{'selected':show=='two'}" @click="show='two'">Gruppo 2</button>
+        <button :class="{'selected':show=='three'}" @click="show='three'">Gruppo 3</button>
       </div>
 
       <aside class="scrollable auto">

From c0fdf9668b07046e13be67be8ec54d54c3eddcb8 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Wed, 17 Jun 2020 15:31:25 +0200
Subject: [PATCH 3/3] fix layout processo

---
 .../wwwroot/assets/styles/base/processo.less  | 59 +++++++------
 .../wwwroot/assets/styles/base/setup.less     | 52 +++++------
 Thermo.Active/wwwroot/assets/styles/style.css | 87 ++++++++++---------
 .../processo/components/processo.vue          | 15 ++--
 4 files changed, 104 insertions(+), 109 deletions(-)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/processo.less b/Thermo.Active/wwwroot/assets/styles/base/processo.less
index 32c7ff14..183d7da9 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/processo.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/processo.less
@@ -5,49 +5,48 @@
 
 
 .modal.processo-info {
+  width     : 1808px;
+  height    : 976px;
+  margin    : 120px auto;
+  box-shadow: none;
+  position  : relative;
 
   header {
-    font-size: 22px;
-    color: #4b4b4b;
+    font-size      : 22px;
+    color          : #4b4b4b;
+    display        : flex;
+    flex-flow      : row nowrap;
+    justify-content: space-evenly;
+    align-items    : center;
 
     .tab-header {
-      padding: 10px 0px;
+      width          : 70%;
+      display        : flex;
+      align-items    : center;
+      justify-content: space-evenly;
 
       button {
-        padding: 0;
-        display: flex;
-        justify-content: flex-start;
-        margin-right: 10px;
-        width: 149px;
-        height: 48px;
-        border-radius: 2px;
-        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
-        background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%);
-        font-size: 14px;
-        font-weight: 500;
-        font-stretch: normal;
-        font-style: normal;
-        line-height: 1.15;
-        letter-spacing: normal;
-        color: #4b4b4b;
+        border               : none;
+        border-radius        : 2px;
+        background-image     : linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%);
+        display              : grid;
+        grid-template-columns: 48px 101px;
+        grid-template-rows   : 48px;
 
-        img {
-          margin-right: 20px;
+        span {
+          margin   : auto;
+          font-size: 13px;
+          color    : #4b4b4b;
         }
 
+        img {
+          margin: auto;
+        }
       }
 
-      label {
-        width: 106px;
-        height: 32px;
+      label{
         font-size: 32px;
-        font-weight: 600;
-        font-stretch: normal;
-        font-style: normal;
         line-height: 1;
-        letter-spacing: normal;
-        text-align: right;
-        color: #545454;
       }
 
     }
diff --git a/Thermo.Active/wwwroot/assets/styles/base/setup.less b/Thermo.Active/wwwroot/assets/styles/base/setup.less
index 8c7db1e4..ca868987 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/setup.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/setup.less
@@ -11,7 +11,29 @@
   flex-flow: column nowrap;
   width: 100vw;
   height: 100vh;
-
+  
+  .tab-header {
+    display: flex;
+    flex-flow: row;
+    align-items: stretch;
+    justify-content: flex-start;
+  
+    button {
+      background: none;
+      border: 1px solid #bbbcbc;
+      padding: 0 38px;
+      border-bottom: none;
+      font-size: 20px;
+      background-color: #bbbcbc;
+      color: #002680;
+  
+      &.active {
+        background-color: #fff;
+        font-weight: bold;
+        border-top: 2px solid #002680;
+      }
+    }
+  }
   hr {
     flex-shrink: 0;
     background-color: #979797;
@@ -237,37 +259,11 @@
     padding-left: 31px;
     display: flex;
     align-items: center;
-
     font-size: 20px;
     font-weight: bold;
     color: darkblue;
   }
-}
 
-
-.tab-header {
-  display: flex;
-
-  flex-flow: row;
-  align-items: stretch;
-  justify-content: flex-start;
-
-  button {
-
-    background: none;
-    border: 1px solid #bbbcbc;
-    padding: 0 38px;
-    border-bottom: none;
-    font-size: 20px;
-    background-color: #bbbcbc;
-    color: #002680;
-
-    &.active {
-      background-color: #fff;
-      font-weight: bold;
-      border-top: 2px solid #002680;
-    }
-  }
 }
 
 .modal.setup-info {
@@ -277,7 +273,7 @@
   margin: 150px auto;
   box-shadow: none;
   position: relative;
-
+  
   section {
     height: 100%;
 
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 7e221466..2666c294 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -10,6 +10,26 @@
   width: 100vw;
   height: 100vh;
 }
+.setup .tab-header {
+  display: flex;
+  flex-flow: row;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.setup .tab-header button {
+  background: none;
+  border: 1px solid #bbbcbc;
+  padding: 0 38px;
+  border-bottom: none;
+  font-size: 20px;
+  background-color: #bbbcbc;
+  color: #002680;
+}
+.setup .tab-header button.active {
+  background-color: #fff;
+  font-weight: bold;
+  border-top: 2px solid #002680;
+}
 .setup hr {
   flex-shrink: 0;
   background-color: #979797;
@@ -195,26 +215,6 @@
   font-weight: bold;
   color: darkblue;
 }
-.tab-header {
-  display: flex;
-  flex-flow: row;
-  align-items: stretch;
-  justify-content: flex-start;
-}
-.tab-header button {
-  background: none;
-  border: 1px solid #bbbcbc;
-  padding: 0 38px;
-  border-bottom: none;
-  font-size: 20px;
-  background-color: #bbbcbc;
-  color: #002680;
-}
-.tab-header button.active {
-  background-color: #fff;
-  font-weight: bold;
-  border-top: 2px solid #002680;
-}
 .modal.setup-info {
   width: 1639px;
   height: 695px;
@@ -5158,45 +5158,46 @@ article .box .body {
 .modal.avvio-produzione-info section.body section .specific .tast {
   margin-left: 25%;
 }
+.modal.processo-info {
+  width: 1808px;
+  height: 976px;
+  margin: 120px auto;
+  box-shadow: none;
+  position: relative;
+}
 .modal.processo-info header {
   font-size: 22px;
   color: #4b4b4b;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+  align-items: center;
 }
 .modal.processo-info header .tab-header {
-  padding: 10px 0px;
+  width: 70%;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
 }
 .modal.processo-info header .tab-header button {
-  padding: 0;
-  display: flex;
-  justify-content: flex-start;
-  margin-right: 10px;
-  width: 149px;
-  height: 48px;
+  border: none;
   border-radius: 2px;
-  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
   background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%);
-  font-size: 14px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.15;
-  letter-spacing: normal;
+  display: grid;
+  grid-template-columns: 48px 101px;
+  grid-template-rows: 48px;
+}
+.modal.processo-info header .tab-header button span {
+  margin: auto;
+  font-size: 13px;
   color: #4b4b4b;
 }
 .modal.processo-info header .tab-header button img {
-  margin-right: 20px;
+  margin: auto;
 }
 .modal.processo-info header .tab-header label {
-  width: 106px;
-  height: 32px;
   font-size: 32px;
-  font-weight: 600;
-  font-stretch: normal;
-  font-style: normal;
   line-height: 1;
-  letter-spacing: normal;
-  text-align: right;
-  color: #545454;
 }
 .modal.progr-preriscaldo-info header {
   padding-left: 31px;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
index b65e5537..b29965a1 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
@@ -1,16 +1,15 @@
 <template>
-    <div class="setup">
+    <div class="container">
         <modal type="processo-info" :title="'processo_lbl_title' | localize('Attività attuale (es. attesa spostamento assi)')">
             <div class="tab-header" slot="header-buttons">
-				<button> <img src="assets/icons/png/star.png"> Opzioni di lavorazione </button>
-				<button> <img src="assets/icons/png/star.png"> Pirometro</button>
-				<button> <img src="assets/icons/png/star.png"> Attivazione riscaldi</button>
-                <button> <img src="assets/icons/png/star.png"> Riscaldo +10 secondi</button>
-                <button> <img src="assets/icons/png/star.png"> Risclado -10 secondi</button>
-                <button> <img src="assets/icons/png/star.png"> Label pulsante opzionanle</button>
+				<button> <img src="assets/icons/png/star.png"> <span>Opzioni di lavorazione</span> </button>
+				<button> <img src="assets/icons/png/star.png"> <span>Pirometro</span> </button>
+				<button> <img src="assets/icons/png/star.png"> <span>Attivazione riscaldi</span> </button>
+                <button> <img src="assets/icons/png/star.png"> <span>Riscaldo +10 secondi</span> </button>
+                <button> <img src="assets/icons/png/star.png"> <span>Risclado -10 secondi</span> </button>
+                <button> <img src="assets/icons/png/star.png"> <span>Label pulsante opzionale</span></button>
                 <label>{{actual}}/{{tot}}</label>
 			</div>
-            <circlegantt></circlegantt>
         </modal>
     </div>
 </template>