Replace less with scss, add homepage widgets, add registrars selector and registrars page (#2114)

* Replace less compiler with scss

* Replace less with scss, add homepage widgets, add registrars selector and registrars page

console-webapp/src/theme.scss

@@ -0,0 +1,69 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+/** Copied from docs section **/
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$theme-primary: mat.define-palette(mat.$indigo-palette);
+$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$theme-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $theme-primary,
+      accent: $theme-accent,
+      warn: $theme-warn,
+    ),
+    density: 0,
+  )
+);
+
+/** Application specific section **/
+
+@mixin form-field-density($density) {
+  $field-typography: mat.define-typography-config(
+    $body-1: mat.define-typography-level(12px, 24px, 400),
+  );
+  @include mat.typography-level($field-typography, "body-1");
+  @include mat.form-field-density($density);
+}
+
+// Define lowest possible density class to be used in application
+// In the same manner -1...-5 classes can be defined
+.mat-form-field-density-5 {
+  @include form-field-density(-5);
+}
+
+$foreground: map.merge($theme, mat.$light-theme-foreground-palette);
+
+// Access and define a class with secondary color exposed
+.secondary-text {
+  color: map.get($foreground, "secondary-text");
+}
+
+:root {
+  --primary: #{mat.get-color-from-palette($theme-primary, 500)};
+  --secondary: #{map.get($foreground, "secondary-text")};
+}
+
+@include mat.all-component-themes($theme);
+@import "@angular/material/theming";
+
+// Define application specific typography settings, font-family, etc
+$typography-configuration: mat-typography-config(
+  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
+);
+
+@include angular-material-typography($typography-configuration);