Added IdeComponent styles

Author: Mrcel97

angular.json

@@ -38,8 +38,7 @@
               "./node_modules/jquery/dist/jquery.js",
               "node_modules/chart.js/dist/Chart.js",
               "node_modules/hammerjs/hammer.min.js",
-              "./node_modules/jquery/dist/jquery.min.js",
-              "./node_modules/froala-editor/js/froala_editor.pkgd.min.js"
+              "./node_modules/jquery/dist/jquery.min.js"
             ]
           },
           "configurations": {

src/app/ide/ide.component.html

@@ -1,10 +1,12 @@
-<div class="d-flex flex-row">
+<div *ngIf="false" class="d-flex flex-row">
   <button type="button" class="btn btn-outline-info go-back" mdbWavesEffect (click)="router.navigateByUrl('/')"><i class="fas fa-arrow-left"></i></button>
   <h1 class="p-2">StackBlitz Editor Example:</h1>
   <button class="btn blue" (click)="refresh()" mdbWavesEffect>refresh</button>
   <button class="btn blue" (click)="receiveUpdates()" mdbWavesEffect>Receive Updates</button>
   <button class="btn blue" (click)="createFile()" mdbWavesEffect>create file</button>
   <button class="btn blue" (click)="getSnapshot()" mdbWavesEffect>get workspace</button>
 </div>
-<div #editor name='editor' id="editor"></div>
+<div class="ide-container">
+  <div #editor name='editor' id="editor"></div>
+</div>
 <app-github [user]='userStatus' *ngIf="options"></app-github>

src/app/ide/ide.component.scss

@@ -0,0 +1,14 @@
+@import '../../assets/themes/dark.scss';
+
+.ide-container {
+  order: 0;
+  flex: 1 1 auto;
+  align-self: auto;
+  display: block;
+}
+
+/deep/ html.gr__localhost body app-root app-ide iframe#editor {
+  position: absolute;
+  padding-top: 3.35em;
+  height: 100%;
+}

src/app/interface/interface.component.scss

@@ -9,7 +9,7 @@
 }
 
 .bloquer {
-  min-height: 6em;
+  min-height: 5em;
 }
 
 .welcome-text {

src/styles.scss

@@ -1,7 +1,10 @@
 @import "./assets/themes/dark.scss";
 
-html {
-  background-color: transparent;
+html, body {
+  background-color: #3c3c3c;
+  min-height: 100vh;
+  height: auto;
+  margin: 0;
 }
 
 .container {
@@ -11,11 +14,23 @@ html {
 
 .navbar {
   padding-right: 0rem;
-  padding-left: .5rem;
+  padding-left: .3rem;
   background-color: $primary-color-variant;
   color: $text-color;
 }
 
+.navbar.scrolling-navbar {
+  padding-top: .1em;
+  padding-bottom: .1em;
+}
+
+@media (max-width: 993px) {
+  .navbar.scrolling-navbar {
+    padding-top: .45em;
+    padding-bottom: .45em;
+  }
+}
+
 .navbar-brand, .nav-link {
   color: $text-color;
 }