Fix mat-table style and project readme edit

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html

@@ -1,8 +1,22 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Cloud node template configuration</h1>
+      <div class="col-md-1">
+        <button
+        *ngIf="controller"
+        class="top-button"
+        class="cancel-button"
+        (click)="goBack()"
+        mat-button
+      >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">Cloud node template configuration</h1>
+      </div>
     </div>
+  </div>
     <div class="default-content" *ngIf="cloudNodeTemplate">
         <mat-accordion>
             <mat-expansion-panel>
@@ -111,7 +125,7 @@
                         UDP tunnels
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
+                <table *ngIf="dataSourceUdp.length" mat-table [dataSource]="dataSourceUdp">
                     <ng-container matColumnDef="name">
                         <th mat-header-cell *matHeaderCellDef> Name </th>
                         <td mat-cell *matCellDef="let element"> {{element.name}} </td>

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts

@@ -11,7 +11,7 @@ import { ToasterService } from '../../../../../services/toaster.service';
 @Component({
   selector: 'app-cloud-nodes-template-details',
   templateUrl: './cloud-nodes-template-details.component.html',
-  styleUrls: ['./cloud-nodes-template-details.component.scss', '../../../preferences.component.scss'],
+  styleUrls: ['../../../preferences.component.scss'],
 })
 export class CloudNodesTemplateDetailsComponent implements OnInit {
   controller:Controller ;

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html

@@ -1,20 +1,19 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-    <div class="col col-md-1">
+      <div class="col col-md-1">
-      <button
+        <button
-      *ngIf="controller"
+        *ngIf="controller"
-      class="top-button"
+        class="top-button"
-      class="cancel-button col"
+        class="cancel-button col"
-      (click)="goBack()"
+        (click)="goBack()"
-      mat-button
+        mat-button>
-    >
+        <mat-icon>arrow_back</mat-icon>
-      <mat-icon>arrow_back</mat-icon>
+      </button>
-    </button>
+      </div>
-    </div>
+      <div class="col-md-11">
-    <div class="col-md-11">
+        <h1 class="col">New Ethernet switch template</h1>
-      <h1 class="col">New Ethernet switch template</h1>
+      </div>
-    </div>
     </div>
   </div>
   <div class="default-content">

src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html

@@ -1,4 +1,4 @@
-<table class="table" mat-table [dataSource]="adapters">
+<table mat-table [dataSource]="adapters">
   <ng-container matColumnDef="adapter_number">
     <th mat-header-cell *matHeaderCellDef>Adapter number</th>
     <td mat-cell *matCellDef="let element">Adapter {{ element.adapter_number }}</td>

src/app/components/preferences/common/ports/ports.component.html

@@ -1,4 +1,4 @@
-<table class="table" mat-table [dataSource]="ethernetPorts">
+<table mat-table [dataSource]="ethernetPorts">
   <ng-container matColumnDef="port_number">
     <th mat-header-cell *matHeaderCellDef>Port number</th>
     <td mat-cell *matCellDef="let element">{{ element.port_number }}</td>

src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html

@@ -1,4 +1,4 @@
-<table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
+<table *ngIf="dataSourceUdp.length" mat-table [dataSource]="dataSourceUdp">
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef>Name</th>
     <td mat-cell *matCellDef="let element">{{ element.name }}</td>

src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html

@@ -1,7 +1,20 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">IOS router template configuration</h1>
+      <div class="col-md-1">
+        <button
+        *ngIf="controller"
+        class="top-button"
+        class="cancel-button"
+        (click)="goBack()"
+        mat-button
+      >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">IOS router template configuration</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="iosTemplate">

src/app/components/preferences/preferences.component.scss

@@ -1,3 +1,7 @@
+table {
+  width: 100%;
+}
+
 .listcontainer {
   padding-left: 0px !important;
   padding-right: 0px !important;

src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html

@@ -4,7 +4,7 @@
   <div class="content">
     <div class="default-content">
       <mat-card>
-        <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
+        <table *ngIf="nodeMappingsDataSource.length" mat-table [dataSource]="nodeMappingsDataSource">
           <ng-container matColumnDef="portIn">
             <th mat-header-cell *matHeaderCellDef>Port : VPI : VCI</th>
             <td mat-cell *matCellDef="let element">{{ element.portIn }}</td>

src/app/components/project-map/node-editors/configurator/configurator.component.scss

@@ -1,3 +1,7 @@
+table {
+  width: 100%;
+}
+
 .form-field {
   width: 100%;
 }

src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html

@@ -4,7 +4,7 @@
   <div class="content">
     <div class="default-content">
       <mat-card>
-        <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
+        <table *ngIf="nodeMappingsDataSource.length" mat-table [dataSource]="nodeMappingsDataSource">
           <ng-container matColumnDef="portIn">
             <th mat-header-cell *matHeaderCellDef>Port : DLCI</th>
             <td mat-cell *matCellDef="let element">{{ element.portIn }}</td>

src/app/components/project-map/project-readme/project-readme.component.ts

@@ -3,7 +3,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { Controller } from '../../../models/controller';
 import { Project } from '../../../models/project';
 import { ProjectService } from '../../../services/project.service';
-import * as marked from 'marked';
+import { marked } from 'marked';
 import { ElementRef } from '@angular/core';
 import { Renderer2 } from '@angular/core';
 import { ViewChild } from '@angular/core';

src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html

@@ -57,7 +57,7 @@
                 </mat-form-field>
             </form>
             <button class="form-field" mat-button (click)="addVariable()" mat-raised-button color="primary">Add variable</button>
-            <table class="table" mat-table [dataSource]="variables">
+            <table mat-table [dataSource]="variables">
                 <ng-container matColumnDef="name">
                     <th mat-header-cell *matHeaderCellDef>Name</th>
                     <td mat-cell *matCellDef="let element">{{element.name}} </td>

src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss

@@ -1,3 +1,7 @@
+table {
+  width: 100%;
+}
+
 .form-field {
   width: 100%;
 }

src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.scss

@@ -4,8 +4,6 @@
 }
 
 .editorWrapper {
-    background-color: white;
-    color: black;
     height: 500px!important;
     overflow-y: scroll;
 }

src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
-import * as marked from 'marked';
+import { marked } from 'marked';
 import { ProjectService } from '../../../../services/project.service';
 import { Controller } from '../../../../models/controller';
 import { Project } from '../../../../models/project';

src/app/directives/marked.directive.ts

@@ -1,5 +1,5 @@
 import { Directive, ElementRef, OnInit, Renderer2, Input, OnChanges } from '@angular/core';
-import * as marked from 'marked';
+import { marked } from 'marked';
 
 @Directive({
     selector: '[appMarked]'