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">
-      <button
-      *ngIf="controller"
-      class="top-button"
-      class="cancel-button col"
-      (click)="goBack()"
-      mat-button
-    >
-      <mat-icon>arrow_back</mat-icon>
-    </button>
-    </div>
-    <div class="col-md-11">
-      <h1 class="col">New Ethernet switch template</h1>
-    </div>
+      <div class="col col-md-1">
+        <button
+        *ngIf="controller"
+        class="top-button"
+        class="cancel-button col"
+        (click)="goBack()"
+        mat-button>
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">New Ethernet switch template</h1>
+      </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

@@ -7,36 +7,36 @@
                 <mat-form-field class="form-field">
                     <input matInput formControlName="projectName" placeholder="Project name" type="text">
                 </mat-form-field>
-            
+
                 <mat-form-field class="form-field">
                     <input matInput formControlName="width" placeholder="Scene width (px)" type="number">
                 </mat-form-field>
-            
+
                 <mat-form-field class="form-field">
                     <input matInput formControlName="height" placeholder="Scene height (px)" type="number">
                 </mat-form-field>
-            
+
                 <mat-form-field class="form-field">
                     <input matInput formControlName="nodeGridSize" placeholder="Node grid size" type="number">
                 </mat-form-field>
-            
+
                 <mat-form-field class="form-field">
                     <input matInput formControlName="drawingGridSize" placeholder="Drawing grid size" type="number">
                 </mat-form-field>
             </form>
-            
+
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_open">
                 Open this project in the background when GNS3 controller starts
             </mat-checkbox>
-            
+
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_start">
                 Start all nodes when this project is opened
             </mat-checkbox>
-            
+
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="auto_close">
                 Leave this project running in the background after closing
             </mat-checkbox>
-            
+
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.show_interface_labels">
                 Show interface labels at start
             </mat-checkbox>
@@ -51,23 +51,23 @@
                 <mat-form-field class="form-field">
                     <input matInput formControlName="name" placeholder="Name" type="text">
                 </mat-form-field>
-            
+
                 <mat-form-field class="form-field">
                     <input matInput formControlName="value" placeholder="Value" type="text">
                 </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>
                 </ng-container>
-            
+
                 <ng-container matColumnDef="value">
                     <th mat-header-cell *matHeaderCellDef>Value</th>
                     <td mat-cell *matCellDef="let element">{{element.value}}</td>
                 </ng-container>
-            
+
                 <ng-container matColumnDef="actions">
                     <th mat-header-cell *matHeaderCellDef>Actions</th>
                     <td mat-cell *matCellDef="let element">
@@ -76,7 +76,7 @@
                         </button>
                     </td>
                 </ng-container>
-                
+
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </table>

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]'