Fixes after merge

package.json

@@ -17,7 +17,7 @@
     "start": "ng serve",
     "startforelectron": "ng serve --configuration=electronDev",
     "build": "ng build",
-    "buildforproduction": "ng build --source-map=false --configuration=production --base-href /static/web-ui/",
+    "buildforproduction": "ng build --source-map=false --build-optimizer --configuration=production --base-href /static/web-ui/",
     "buildforelectron": "ng build --configuration=electronProd",
     "buildforgithub": "ng build --configuration=githubProd",
     "test": "ng test",

src/app/cartography/helpers/font-fixer.ts

@@ -9,8 +9,8 @@ import { Font } from '../models/font';
 export class FontFixer {
   static DEFAULT_FONT = 'TypeWriter';
   static DEFAULT_SIZE = 10;
-  static REPLACE_BY_FONT = 'Arial';
+  static REPLACE_BY_FONT = 'Noto Sans';
-  static REPLACE_BY_SIZE = 12;
+  static REPLACE_BY_SIZE = 11;
 
   public fix(font: Font): Font {
     if (font.font_family === FontFixer.DEFAULT_FONT && font.font_size === FontFixer.DEFAULT_SIZE) {

src/app/cartography/widgets/drawings/text-drawing.spec.ts

@@ -42,7 +42,7 @@ describe('TextDrawingWidget', () => {
     const text_element = drew.nodes()[0];
     expect(text_element.innerHTML).toEqual('<tspan xml:space="preserve" x="0" dy="0em">THIS IS TEXT</tspan>');
     expect(text_element.getAttribute('fill')).toEqual('#000000');
-    expect(text_element.getAttribute('style')).toEqual('font-family: "Arial"; font-size: 12pt; font-weight: bold');
+    expect(text_element.getAttribute('style')).toEqual('font-family: "Noto Sans"; font-size: 11pt; font-weight: bold');
     expect(text_element.getAttribute('text-decoration')).toEqual('line-through');
   });
 

src/app/cartography/widgets/interface-status.ts

@@ -97,9 +97,9 @@ export class InterfaceStatusWidget implements Widget {
           .attr('y', (ls: LinkStatus) => ls.y - 10)
           .attr('rx', 8)
           .attr('ry', 8)
-          .style('fill', '#c7ffdf')
+          .style('fill', 'white')
           .attr('stroke', '#2ecc71')
-          .attr('stroke-width', 2);
+          .attr('stroke-width', 3);
         status_started.exit().remove();
         const status_started_label = link_group
           .selectAll<SVGTextElement, LinkStatus>('text.status_started_label')
@@ -111,7 +111,7 @@ export class InterfaceStatusWidget implements Widget {
           .text((ls: LinkStatus) => ls.port)
           .attr('x', (ls: LinkStatus) => ls.x - 25)
           .attr('y', (ls: LinkStatus) => ls.y + 5)
-          .attr('fill', `#0e9647`);
+          .attr('fill', `black`);
         status_started_label.exit().remove();
 
         const status_stopped = link_group
@@ -129,9 +129,9 @@ export class InterfaceStatusWidget implements Widget {
           .attr('y', (ls: LinkStatus) => ls.y - 10)
           .attr('rx', 8)
           .attr('ry', 8)
-          .style('fill', '#ffe3e3')
+          .style('fill', 'white')
           .attr('stroke', 'red')
-          .attr('stroke-width', 2);
+          .attr('stroke-width', 3);
         status_stopped.exit().remove();
         const status_stopped_label = link_group
           .selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label')
@@ -143,7 +143,7 @@ export class InterfaceStatusWidget implements Widget {
           .text((ls: LinkStatus) => ls.port)
           .attr('x', (ls: LinkStatus) => ls.x - 25)
           .attr('y', (ls: LinkStatus) => ls.y + 5)
-          .attr('fill', `red`);
+          .attr('fill', `black`);
         status_stopped_label.exit().remove();
 
         const status_suspended = link_group
@@ -162,8 +162,8 @@ export class InterfaceStatusWidget implements Widget {
           .attr('rx', 8)
           .attr('ry', 8)
           .style('fill', 'white')
-          .attr('stroke', '#fffbc3')
+          .attr('stroke', '#FFFF00')
-          .attr('stroke-width', 2);
+          .attr('stroke-width', 3);
         status_suspended.exit().remove();
         const status_suspended_label = link_group
           .selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label')
@@ -175,7 +175,7 @@ export class InterfaceStatusWidget implements Widget {
           .text((ls: LinkStatus) => ls.port)
           .attr('x', (ls: LinkStatus) => ls.x - 25)
           .attr('y', (ls: LinkStatus) => ls.y + 5)
-          .attr('fill', `#6b5633`);
+          .attr('fill', `black`);
         status_suspended_label.exit().remove();
       } else {
         const status_started = link_group

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

@@ -40,7 +40,7 @@
               <mat-form-field class="form-field">
                   <input formControlName="cpus" matInput type="number" [(ngModel)]="node.properties.cpus" placeholder="Maximum CPUs">
               </mat-form-field>
-              
+
               <button mat-button class="form-field" (click)="configureCustomAdapters()">
                   Configure custom adapters
               </button>
@@ -108,9 +108,9 @@
               <textarea matInput type="text" [(ngModel)]="node.properties.extra_hosts"></textarea></mat-form-field
             ><br />
 
-            <h6>Additional directories</h6>
+            <h6>Additional volumes</h6>
             <mat-form-field class="form-field">
-              <textarea matInput type="text" [(ngModel)]="additionalDirectories"></textarea>
+              <textarea matInput type="text" [(ngModel)]="node.properties.extra_volumes"></textarea>
             </mat-form-field>
           </mat-tab>
 

src/app/components/project-map/project-map.component.scss

@@ -73,10 +73,6 @@ g.node:hover {
     font-size: 28px !important;
   }
 
-  .map-settings-button mat-icon {
-    font-size: 22px !important;
-  }
-
   .selected {
     background: rgba(0, 151, 167, 0.1);
 

src/app/components/template/template.component.scss

@@ -1,7 +1,6 @@
 ::ng-deep .mat-menu-panel {
   max-width: 400px;
-  max-height: 640px;
+  max-height: 500px;
-  border-radius: 8px;
 }
 
 .menu {
@@ -9,26 +8,6 @@
   overflow-y: scroll;
   scrollbar-color: darkgrey #263238;
   scrollbar-width: thin;
-  font-size: 12px;
-}
-
-.templateMenuHeader {
-   border-bottom: 1px solid rgba(255,255,255,0.05);
-}
-
-.templateFilterBar {
-   padding: 10px 2%;
-   background-color: rgba(0,0,0,0.2);
-   margin-bottom: 10px;
-}
-
-.templateFilterBar > .form-field {
-   font-size: 12px;
-}
-
-.templateFilterBar .searchIcon {
-   position: relative;
-   top: 5px;
 }
 
 ::-webkit-scrollbar {
@@ -45,22 +24,20 @@
 }
 
 .form-field {
-  width: 44%;
+  width: 90%;
-  margin-left: 3%;
+  margin-left: 5%;
-  margin-right: 3%;
+  margin-right: 5%;
 }
 
 .image {
-  display: inline-block;
+  width: 65px;
-  width: 55px;
+  height: 65px;
-  height: 55px;
   filter: invert(0);
   --webkit-filter: invert(0) !important;
 }
 
 .templateList {
   width: 100%;
-  padding: 10px;
 }
 
 .templateRow {
@@ -78,23 +55,6 @@
 }
 
 .templateIcon {
-  width: 90px !important;
+  width: 80px !important;
-  padding: 2px 5px;
+  padding: 10px;
-  text-align: center;
-  margin: 3px;
-}
-
-.templateIcon > .iconContainer {
-   display: inline-flex;
-   align-items: center;
-   justify-content: center;
-   width: 70px;
-   height: 70px;
-   margin-bottom: 10px;
-   border-radius: 50%;
-   cursor: move;
-}
-
-.templateIcon > .iconContainer:hover {
-   background-color: rgba(237, 246, 231, 0.08);
 }