aesthetic changes and conection with backend

breadcrums correctly display current cluster
padding between sections fixed
Commands table is in light theme
added required column in commands table, needs to be connected to backend
properly organized the columns
JIRA: ZAPP-200
JIRA: ZAPP-201

src/components/ZclClusterView.vue

@@ -28,7 +28,7 @@ limitations under the License.
           <!-- this needs to be updated depending on how the pages will work -->
           <q-breadcrumbs-el label="Endpoint x0001" to="/"></q-breadcrumbs-el>
           <q-breadcrumbs-el label="General Clusters" to="/"></q-breadcrumbs-el>
-          <q-breadcrumbs-el label="{{ item.label }}" to="/"></q-breadcrumbs-el>
+          <q-breadcrumbs-el to="/">{{ item.label }}</q-breadcrumbs-el>
         </q-breadcrumbs>
       </div>
 
@@ -38,6 +38,7 @@ limitations under the License.
 
       <div class="row q-py-none">
         <div class="col">
+          <!--  -->
           <p v-if="selectionServer && selectionClient">
             Cluster ID: 0x000{{ item.id }}, Enabled for <b>Server</b> and
             <b>Client</b>

src/components/ZclCommandnewView.vue

@@ -79,7 +79,9 @@ limitations under the License.
           <q-td key="commandName" :props="props" auto-width>{{
             props.row.label
           }}</q-td>
-          <!-- TODO add required column -->
+          <q-td key="required" :props="props" auto-width>
+            <!-- TODO add required  -->
+          </q-td>
           <q-td key="mfgId" :props="props" auto-width>{{
             props.row.manufacturerCode
           }}</q-td>
@@ -97,9 +99,6 @@ export default {
   name: 'ZclCommandnewView',
   mounted() {
     this.$serverOn('zcl-item', (event, arg) => {
-      if (arg.type === 'cluster') {
-        this.$store.dispatch('zap/updateCommands', arg.commandData || [])
-      }
       if (arg.type === 'endpointTypeCommands') {
         this.$store.dispatch('zap/setCommandStateLists', arg.data)
       }
@@ -255,7 +254,6 @@ export default {
           field: 'commandId',
           sortable: true,
         },
-        // TODO add required column
         {
           name: 'commandName',
           align: 'left',
@@ -263,6 +261,13 @@ export default {
           field: 'commandName',
           sortable: true,
         },
+        {
+          name: 'required',
+          align: 'left',
+          label: 'Required',
+          field: 'required',
+          sortable: true,
+        },
         {
           name: 'mfgId',
           align: 'left',