Migrating from css to scss

angular.json

@@ -42,7 +42,7 @@
 						"styles": [
 							"node_modules/bootstrap/dist/css/bootstrap.min.css",
 							"node_modules/notosans-fontface/css/notosans-fontface.min.css",
-              "src/styles.css",
+							"src/styles.scss",
 							{
 								"inject": false,
 								"input": "src/theme.scss",
@@ -183,7 +183,7 @@
 						"styles": [
 							"node_modules/bootstrap/dist/css/bootstrap.min.css",
 							"node_modules/notosans-fontface/css/notosans-fontface.min.css",
-              "src/styles.css",
+							"src/styles.scss",
 							"src/theme.scss"
 						],
 						"assets": [
@@ -208,6 +208,11 @@
 						]
 					}
 				}
+			},
+			"schematics": {
+				"@schematics/angular:component": {
+					"style": "scss"
+				}
 			}
 		},
 		"gns3-web-ui-e2e": {

package.json

@@ -79,6 +79,7 @@
     "rxjs-compat": "^6.6.3",
     "save-html-as-image": "^1.3.4",
     "save-svg-as-png": "^1.4.14",
+    "schematics-scss-migrate": "^1.2.10",
     "snyk": "^1.413.3",
     "svg-crowbar": "^0.6.1",
     "tree-kill": "^1.2.1",

src/app/app.component.ts

@@ -10,7 +10,7 @@ import { ProgressService } from './common/progress/progress.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
   constructor(

src/app/components/dialogs/information-dialog.component.ts

@@ -4,7 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 @Component({
   selector: 'app-information-dialog',
   templateUrl: 'information-dialog.component.html',
-  styleUrls: ['information-dialog.component.css']
+  styleUrls: ['information-dialog.component.scss']
 })
 export class InformationDialogComponent implements OnInit {
   public confirmationMessage: string;

src/app/components/drawings-listeners/drawing-added/drawing-added.component.ts

@@ -13,7 +13,7 @@ import { AddedDataEvent } from '../../../cartography/events/event-source';
 @Component({
   selector: 'app-drawing-added',
   templateUrl: './drawing-added.component.html',
-  styleUrls: ['./drawing-added.component.css']
+  styleUrls: ['./drawing-added.component.scss']
 })
 export class DrawingAddedComponent implements OnInit, OnDestroy {
   @Input() server: Server;

src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.ts

@@ -12,7 +12,7 @@ import { Project } from '../../../models/project';
 @Component({
   selector: 'app-drawing-dragged',
   templateUrl: './drawing-dragged.component.html',
-  styleUrls: ['./drawing-dragged.component.css']
+  styleUrls: ['./drawing-dragged.component.scss']
 })
 export class DrawingDraggedComponent implements OnInit, OnDestroy {
   @Input() server: Server;

src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.ts

@@ -12,7 +12,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-drawing-resized',
   templateUrl: './drawing-resized.component.html',
-  styleUrls: ['./drawing-resized.component.css']
+  styleUrls: ['./drawing-resized.component.scss']
 })
 export class DrawingResizedComponent implements OnInit, OnDestroy {
   @Input() server: Server;

src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.ts

@@ -11,7 +11,7 @@ import { LinksEventSource } from '../../../cartography/events/links-event-source
 @Component({
   selector: 'app-interface-label-dragged',
   templateUrl: './interface-label-dragged.component.html',
-  styleUrls: ['./interface-label-dragged.component.css']
+  styleUrls: ['./interface-label-dragged.component.scss']
 })
 export class InterfaceLabelDraggedComponent {
   @Input() server: Server;

src/app/components/drawings-listeners/link-created/link-created.component.ts

@@ -14,7 +14,7 @@ import { LinksEventSource } from '../../../cartography/events/links-event-source
 @Component({
   selector: 'app-link-created',
   templateUrl: './link-created.component.html',
-  styleUrls: ['./link-created.component.css']
+  styleUrls: ['./link-created.component.scss']
 })
 export class LinkCreatedComponent implements OnInit, OnDestroy {
   @Input() server: Server;

src/app/components/drawings-listeners/node-dragged/node-dragged.component.ts

@@ -12,7 +12,7 @@ import { Project } from '../../../models/project';
 @Component({
   selector: 'app-node-dragged',
   templateUrl: './node-dragged.component.html',
-  styleUrls: ['./node-dragged.component.css']
+  styleUrls: ['./node-dragged.component.scss']
 })
 export class NodeDraggedComponent implements OnInit, OnDestroy {
   @Input() server: Server;

src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.ts

@@ -12,7 +12,7 @@ import { MapLabel } from '../../../cartography/models/map/map-label';
 @Component({
   selector: 'app-node-label-dragged',
   templateUrl: './node-label-dragged.component.html',
-  styleUrls: ['./node-label-dragged.component.css']
+  styleUrls: ['./node-label-dragged.component.scss']
 })
 export class NodeLabelDraggedComponent implements OnInit, OnDestroy {
   @Input() server: Server;

src/app/components/drawings-listeners/text-added/text-added.component.ts

@@ -15,7 +15,7 @@ import { Context } from '../../../cartography/models/context';
 @Component({
   selector: 'app-text-added',
   templateUrl: './text-added.component.html',
-  styleUrls: ['./text-added.component.css']
+  styleUrls: ['./text-added.component.scss']
 })
 export class TextAddedComponent implements OnInit, OnDestroy {
   @Input() server: Server;

src/app/components/drawings-listeners/text-edited/text-edited.component.ts

@@ -13,7 +13,7 @@ import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/ma
 @Component({
   selector: 'app-text-edited',
   templateUrl: './text-edited.component.html',
-  styleUrls: ['./text-edited.component.css']
+  styleUrls: ['./text-edited.component.scss']
 })
 export class TextEditedComponent implements OnInit, OnDestroy {
   @Input() server: Server;

src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts

@@ -15,7 +15,7 @@ import { projectNameAsyncValidator } from '../../../validators/project-name-asyn
 @Component({
   selector: 'app-add-blank-project-dialog',
   templateUrl: './add-blank-project-dialog.component.html',
-  styleUrls: ['./add-blank-project-dialog.component.css'],
+  styleUrls: ['./add-blank-project-dialog.component.scss'],
   providers: [ProjectNameValidator]
 })
 export class AddBlankProjectDialogComponent implements OnInit {

src/app/components/projects/confirmation-dialog/confirmation-dialog.component.ts

@@ -5,7 +5,7 @@ import { Project } from '../../../models/project';
 @Component({
   selector: 'app-import-project-dialog',
   templateUrl: 'confirmation-dialog.component.html',
-  styleUrls: ['confirmation-dialog.component.css']
+  styleUrls: ['confirmation-dialog.component.scss']
 })
 export class ConfirmationDialogComponent implements OnInit {
   private existingProject: Project;

src/app/components/projects/import-project-dialog/import-project-dialog.component.ts

@@ -13,7 +13,7 @@ import { ProjectNameValidator } from '../models/projectNameValidator';
 @Component({
   selector: 'app-import-project-dialog',
   templateUrl: 'import-project-dialog.component.html',
-  styleUrls: ['import-project-dialog.component.css'],
+  styleUrls: ['import-project-dialog.component.scss'],
   providers: [ProjectNameValidator]
 })
 export class ImportProjectDialogComponent implements OnInit {

src/app/components/projects/projects.component.ts

@@ -28,7 +28,7 @@ import { ElectronService } from 'ngx-electron';
 @Component({
   selector: 'app-projects',
   templateUrl: './projects.component.html',
-  styleUrls: ['./projects.component.css']
+  styleUrls: ['./projects.component.scss']
 })
 export class ProjectsComponent implements OnInit {
   server: Server;

src/app/components/projects/save-project-dialog/save-project-dialog.component.ts

@@ -14,7 +14,7 @@ import { NodesDataSource } from '../../../cartography/datasources/nodes-datasour
 @Component({
   selector: 'app-save-project-dialog',
   templateUrl: './save-project-dialog.component.html',
-  styleUrls: ['./save-project-dialog.component.css'],
+  styleUrls: ['./save-project-dialog.component.scss'],
   providers: [ProjectNameValidator]
 })
 export class SaveProjectDialogComponent implements OnInit {

src/app/components/servers/servers.component.ts

@@ -18,7 +18,7 @@ import { ConfirmationBottomSheetComponent } from '../projects/confirmation-botto
 @Component({
   selector: 'app-server-list',
   templateUrl: './servers.component.html',
-  styleUrls: ['./servers.component.css']
+  styleUrls: ['./servers.component.scss']
 })
 export class ServersComponent implements OnInit, OnDestroy {
   dataSource: ServerDataSource;

src/app/layouts/default-layout/default-layout.component.ts

@@ -13,7 +13,7 @@ import { Router } from '@angular/router';
   selector: 'app-default-layout',
   encapsulation: ViewEncapsulation.None,
   templateUrl: './default-layout.component.html',
-  styleUrls: ['./default-layout.component.css']
+  styleUrls: ['./default-layout.component.scss']
 })
 export class DefaultLayoutComponent implements OnInit, OnDestroy {
   public isInstalledSoftwareAvailable = false;

yarn.lock

@@ -117,6 +117,28 @@
     rxjs "6.6.2"
     source-map "0.7.3"
 
+"@angular-devkit/core@10.2.0", "@angular-devkit/core@^10.1.0":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-10.2.0.tgz#fcde160afc2786d2da0166526f065c6cf98684c0"
+  integrity sha512-XAszFhSF3mZw1VjoOsYGbArr5NJLcStjOvcCGjBPl1UBM2AKpuCQXHxI9XJGYKL3B93Vp5G58d8qkHvamT53OA==
+  dependencies:
+    ajv "6.12.4"
+    fast-json-stable-stringify "2.1.0"
+    magic-string "0.25.7"
+    rxjs "6.6.2"
+    source-map "0.7.3"
+
+"@angular-devkit/core@9.1.12":
+  version "9.1.12"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-9.1.12.tgz#7cebce51918fe7f3462d8c58c9fbd5a3e2c3b3e7"
+  integrity sha512-D/GnBeSlmdgGn7EhuE32HuPuRAjvUuxi7Q6WywBI8PSsXKAGnrypghBwMATNnOA24//CgbW2533Y9VWHaeXdeA==
+  dependencies:
+    ajv "6.12.3"
+    fast-json-stable-stringify "2.1.0"
+    magic-string "0.25.7"
+    rxjs "6.5.4"
+    source-map "0.7.3"
+
 "@angular-devkit/schematics@10.1.7":
   version "10.1.7"
   resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-10.1.7.tgz#b98d2c41b34ea94bf11d187f2206bdc020bd3860"
@@ -126,6 +148,24 @@
     ora "5.0.0"
     rxjs "6.6.2"
 
+"@angular-devkit/schematics@9.1.12":
+  version "9.1.12"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-9.1.12.tgz#bbf457f1b35941fddeeb1ee77336dd04ca60b8ba"
+  integrity sha512-+GYnUzmIy1/QpYitCC8mI7jcrViGHTtOKvvDPEFjU2nggjNEQaMmsHcdIsjrqggEc23ZZyebNAIewT8CMkJyrQ==
+  dependencies:
+    "@angular-devkit/core" "9.1.12"
+    ora "4.0.3"
+    rxjs "6.5.4"
+
+"@angular-devkit/schematics@^10.1.0":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-10.2.0.tgz#a45f316bbaa54cbabc06e2e54b04e1c8d103bc0b"
+  integrity sha512-TQI5NnE6iM3ChF5gZQ9qb+lZgMWa7aLoF5ksOyT3zrmOuICiQYJhA6SsjV95q7J4M55qYymwBib8KTqU/xuQww==
+  dependencies:
+    "@angular-devkit/core" "10.2.0"
+    ora "5.0.0"
+    rxjs "6.6.2"
+
 "@angular/animations@^10.1.5":
   version "10.2.0"
   resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-10.2.0.tgz#7d60e8261cccc9a348699f23bc40b8d5c569baaa"
@@ -1244,6 +1284,14 @@
     "@angular-devkit/schematics" "10.1.7"
     jsonc-parser "2.3.0"
 
+"@schematics/angular@^9.1.0":
+  version "9.1.12"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-9.1.12.tgz#608e25dbd517d867002781f695336b51f05417a2"
+  integrity sha512-r4+aPAGhstsKFMwW/kOen1ACnzuLpz+vMxEpndXOqqVXLkAMsuAbQUFYjIlMy6fH4zdhpI90EJZ1PbOrAXvKxA==
+  dependencies:
+    "@angular-devkit/core" "9.1.12"
+    "@angular-devkit/schematics" "9.1.12"
+
 "@schematics/update@0.1001.7":
   version "0.1001.7"
   resolved "https://registry.yarnpkg.com/@schematics/update/-/update-0.1001.7.tgz#9187cf25ceceab122b15529df3e9d40591706d21"
@@ -2267,6 +2315,16 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
+ajv@6.12.3:
+  version "6.12.3"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.3.tgz#18c5af38a111ddeb4f2697bd78d68abc1cabd706"
+  integrity sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 ajv@6.12.4:
   version "6.12.4"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.4.tgz#0614facc4522127fa713445c6bfd3ebd376e2234"
@@ -3456,7 +3514,7 @@ cli-spinner@0.2.10:
   resolved "https://registry.yarnpkg.com/cli-spinner/-/cli-spinner-0.2.10.tgz#f7d617a36f5c47a7bc6353c697fc9338ff782a47"
   integrity sha512-U0sSQ+JJvSLi1pAYuJykwiA8Dsr15uHEy85iCJ6A+0DjVxivr3d+N2Wjvodeg89uP5K6TswFkKBfAD7B3YSn/Q==
 
-cli-spinners@^2.4.0:
+cli-spinners@^2.2.0, cli-spinners@^2.4.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.5.0.tgz#12763e47251bf951cb75c201dfa58ff1bcb2d047"
   integrity sha512-PC+AmIuK04E6aeSs/pUccSujsTzBhu4HzC2dL+CfJB/Jcc2qTRbEwZQDfIUpt2Xl8BodYBEq8w4fc0kU2I9DjQ==
@@ -7572,6 +7630,13 @@ lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.1
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+log-symbols@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
+  integrity sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==
+  dependencies:
+    chalk "^2.4.2"
+
 log-symbols@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
@@ -8619,6 +8684,20 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
+ora@4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-4.0.3.tgz#752a1b7b4be4825546a7a3d59256fa523b6b6d05"
+  integrity sha512-fnDebVFyz309A73cqCipVL1fBZewq4vwgSHfxh43vVy31mbyoQ8sCH3Oeaog/owYOs/lLlGVPCISQonTneg6Pg==
+  dependencies:
+    chalk "^3.0.0"
+    cli-cursor "^3.1.0"
+    cli-spinners "^2.2.0"
+    is-interactive "^1.0.0"
+    log-symbols "^3.0.0"
+    mute-stream "0.0.8"
+    strip-ansi "^6.0.0"
+    wcwidth "^1.0.1"
+
 ora@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/ora/-/ora-5.0.0.tgz#4f0b34f2994877b49b452a707245ab1e9f6afccb"
@@ -10262,6 +10341,13 @@ rxjs-tslint@^0.1.8:
     typescript ">=2.8.3"
     yargs "^15.3.1"
 
+rxjs@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.4.tgz#e0777fe0d184cec7872df147f303572d414e211c"
+  integrity sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==
+  dependencies:
+    tslib "^1.9.0"
+
 rxjs@6.6.2:
   version "6.6.2"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.2.tgz#8096a7ac03f2cc4fe5860ef6e572810d9e01c0d2"
@@ -10386,6 +10472,17 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+schematics-scss-migrate@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/schematics-scss-migrate/-/schematics-scss-migrate-1.2.10.tgz#024db1d330f29536c2d8d8c5e32a621f0666378e"
+  integrity sha512-t/pfjyLPjWFY9hAMqPLBuyC4jW+rpWuh3Qw3GrvUq8TtkWXiabCVX8VSG+i6WOmhtlRiucweDBh2iZaJXGHPmg==
+  dependencies:
+    "@angular-devkit/core" "^10.1.0"
+    "@angular-devkit/schematics" "^10.1.0"
+    "@schematics/angular" "^9.1.0"
+    glob "^7.1.6"
+    typescript "~4.0.2"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -12084,6 +12181,11 @@ typescript@>=2.8.3, typescript@^4.0.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.3.tgz#153bbd468ef07725c1df9c77e8b453f8d36abba5"
   integrity sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==
 
+typescript@~4.0.2:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
+  integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
+
 ua-parser-js@0.7.22:
   version "0.7.22"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.22.tgz#960df60a5f911ea8f1c818f3747b99c6e177eae3"