Auto stash before merge of "master" and "origin/master"

app/src/app/instances/instance-info/instance-info.component.html

@@ -31,7 +31,7 @@
   </ng-container>
 
   <li class="dropdown-header">Deletion protection</li>
-  <li class="list-group-item ps-0 pb-0">
+  <li class="list-group-item ps-0 pb-0 mt-2 ms-2">
     <div class="form-check form-switch">
       <input class="form-check-input mt-0" type="checkbox" id="dp{{ instance.id }}" [(ngModel)]="instance.deletion_protection"
              (change)="toggleDeletionProtection($event, instance)">

app/src/app/instances/instance-networks/instance-networks.component.html

@@ -21,7 +21,7 @@
       </ul>
     </div>
 
-    <div class="form-check form-switch">
+    <div class="form-check form-switch mb-0">
       <input class="form-check-input mt-0" type="checkbox" id="fw{{ instance.id }}" [(ngModel)]="instance.firewall_enabled"
              (change)="toggleCloudFirewall($event, instance)">
       <label class="form-check-label" for="fw{{ instance.id }}">Toggle cloud firewall</label>

app/src/app/instances/instance-networks/instance-networks.component.scss

@@ -43,3 +43,8 @@
 {
   font-size: 1rem;
 }
+
+.dropdown-menu b
+{
+  font-weight: 400;
+}

app/src/app/instances/instance-snapshots/instance-snapshots.component.html

@@ -33,7 +33,7 @@
          *ngIf="snapshot.state === 'created' && !snapshot.working">
       <button class="btn btn-link text-success" tooltip="Start machine from this snapshot" container="body" placement="top" [adaptivePosition]="false"
               (click)="restoreSnapshot(snapshot)">
-        <fa-icon icon="history" [fixedWidth]="true" size="sm"></fa-icon>
+        <fa-icon icon="undo" [fixedWidth]="true" size="sm"></fa-icon>
       </button>
 
       <button class="btn btn-link text-info" dropdownToggle

app/src/app/instances/instance-snapshots/instance-snapshots.component.scss

@@ -49,7 +49,7 @@
   {
     position: absolute;
     left: .5rem;
-    top: 50%;
+    top: 51%;
     transform: translateY(-50%);
     z-index: 1;
     pointer-events: none;

app/src/app/instances/instance-wizard/instance-wizard.component.scss

@@ -180,6 +180,7 @@ p
     padding: .75rem .25rem;
     color: #5a8cd8;
     font-family: "Mukta", sans-serif;
+    font-size: 1.1rem;
     text-transform: none;
   }
 }

app/src/app/instances/instances.component.html

@@ -93,7 +93,7 @@
                         [parentScroll]="scroller.window.document.getElementById('scrollingBlock')" [scrollThrottlingTime]="250">
         <div *ngFor="let instance of scroller.viewPortItems; trackBy: trackByFunction; let index = index"
              [ngClass]="showMachineDetails ? 'col-12 full-details' : 'col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12'"
-          [class.col-lg-6]="editorForm.get('fullDetailsTwoColumns').value" lazyLoad [lazyLoadDelay]="lazyLoadDelay"
+             [class.col-lg-6]="showMachineDetails && editorForm.get('fullDetailsTwoColumns').value" lazyLoad [lazyLoadDelay]="lazyLoadDelay"
              [container]="scroller.element.nativeElement.getElementsByClassName('scrollable-content')[0]"
              (canLoad)="instance.loading = false" (unload)="instance.loading = true"
              (load)="loadInstanceDetails(instance)">
@@ -154,6 +154,7 @@
                        [class.bg-danger]="instance.state === 'stopped'" [class.bg-success]="instance.state === 'running'"
                        (click)="showMachineHistory(instance)" tooltip="{{ 'dashboard.listItem.history' | translate }}"
                        container="body" placement="top" [adaptivePosition]="false">
+                      <fa-icon icon="history" [fixedWidth]="true"></fa-icon>
                       {{ instance.state }}
                     </a>
 
@@ -243,8 +244,7 @@
                       </ng-template>
                       <div class="card-body p-2 h-100">
                         <ul class="list-group list-group-flush list-info">
-                          <li
+                          <li class="list-group-item text-uppercase px-0 dns d-flex justify-content-between align-items-center"
-                            class="list-group-item text-uppercase px-0 dns d-flex justify-content-between align-items-center"
                               *ngFor="let volume of instance.volumes">
                             <div class="text-truncate">
                               <fa-icon icon="database" [fixedWidth]="true" size="sm"></fa-icon>
@@ -276,12 +276,15 @@
       <div class="btn-group w-100 mb-3" dropdown>
         <button class="btn btn-state-filter dropdown-toggle d-flex justify-content-between align-items-center"
                 dropdownToggle>
-          <span *ngIf="!editorForm.get(['filters', 'stateFilter']).value">{{ 'dashboard.list.anyState' | translate
+          <span *ngIf="!editorForm.get(['filters', 'stateFilter']).value">
-            }}</span>
+            {{ 'dashboard.list.anyState' | translate }}
-          <span *ngIf="editorForm.get(['filters', 'stateFilter']).value === 'running'">{{
+          </span>
-            'dashboard.listItem.stateRunning' | translate }}</span>
+          <span *ngIf="editorForm.get(['filters', 'stateFilter']).value === 'running'">
-          <span *ngIf="editorForm.get(['filters', 'stateFilter']).value === 'stopped'">{{
+            {{ 'dashboard.listItem.stateRunning' | translate }}
-            'dashboard.listItem.stateStopped' | translate }}</span>
+          </span>
+          <span *ngIf="editorForm.get(['filters', 'stateFilter']).value === 'stopped'">
+            {{ 'dashboard.listItem.stateStopped' | translate }}
+          </span>
         </button>
         <ul *dropdownMenu class="dropdown-menu dropdown-menu-state-filter" role="menu">
           <li role="menuitem">
@@ -313,8 +316,9 @@
       <div class="dropdown-header">{{ 'dashboard.list.filterByDisk' | translate }}</div>
       <ngx-slider class="mb-3" formControlName="diskFilter" [options]="diskFilterOptions"></ngx-slider>
 
-      <button class="btn btn-outline-dark w-100 mt-3" (click)="clearFilters()">{{ 'dashboard.list.resetFilters' |
+      <button class="btn btn-outline-dark w-100 mt-3" (click)="clearFilters()">
-        translate }}</button>
+        {{ 'dashboard.list.resetFilters' | translate }}
+      </button>
     </ng-container>
 
     <div class="dropdown-divider"></div>
@@ -343,40 +347,46 @@
   <ul class="list-group list-group-flush" role="menu">
     <li role="menuitem">
       <button class="dropdown-item" (click)="renameMachine(instance)">
-        <fa-icon icon="pen" [fixedWidth]="true"></fa-icon>
+        <fa-icon icon="pen" [fixedWidth]="true" size="sm"></fa-icon>
         {{ 'dashboard.listItem.rename' | translate }}
       </button>
     </li>
     <li role="menuitem">
       <button class="dropdown-item" (click)="showTagEditor(instance)">
-        <fa-icon icon="tags" [fixedWidth]="true"></fa-icon>
+        <fa-icon icon="tags" [fixedWidth]="true" size="sm"></fa-icon>
         {{ 'dashboard.listItem.editTags' | translate }}
       </button>
     </li>
     <li role="menuitem">
       <button class="dropdown-item" (click)="showTagEditor(instance, true)">
-        <fa-icon icon="tags" [fixedWidth]="true"></fa-icon>
+        <fa-icon icon="tags" [fixedWidth]="true" size="sm"></fa-icon>
         {{ 'dashboard.listItem.editMetadata' | translate }}
       </button>
     </li>
     <li class="dropdown-divider"></li>
     <li role="menuitem">
       <button class="dropdown-item" (click)="createMachine(instance)">
-        <fa-icon icon="clone" [fixedWidth]="true"></fa-icon>
+        <fa-icon icon="clone" [fixedWidth]="true" size="sm"></fa-icon>
         {{ 'dashboard.listItem.clone' | translate }}
       </button>
     </li>
     <li role="menuitem">
       <button class="dropdown-item" (click)="createImageFromMachine(instance)">
-        <fa-icon icon="layer-group" [fixedWidth]="true"></fa-icon>
+        <fa-icon icon="layer-group" [fixedWidth]="true" size="sm"></fa-icon>
         {{ 'dashboard.listItem.createImage' | translate }}
       </button>
     </li>
     <li class="dropdown-divider"></li>
     <ng-container *ngIf="instance.state === 'running'">
+      <li role="menuitem">
+        <button class="dropdown-item" (click)="restartMachine(instance)">
+          <fa-icon icon="undo" [fixedWidth]="true" size="sm"></fa-icon>
+          {{ 'dashboard.listItem.restart' | translate }}
+        </button>
+      </li>
       <li role="menuitem">
         <button class="dropdown-item" (click)="stopMachine(instance)">
-          <fa-icon icon="stop" [fixedWidth]="true"></fa-icon>
+          <fa-icon icon="stop" [fixedWidth]="true" size="sm"></fa-icon>
           {{ 'dashboard.listItem.stop' | translate }}
         </button>
       </li>
@@ -384,7 +394,7 @@
     </ng-container>
     <li role="menuitem">
       <button class="dropdown-item" (click)="deleteMachine(instance)">
-        <fa-icon icon="trash" [fixedWidth]="true"></fa-icon>
+        <fa-icon icon="trash" [fixedWidth]="true" size="sm"></fa-icon>
         {{ 'dashboard.listItem.delete' | translate }}
       </button>
     </li>

app/src/app/instances/instances.component.scss

@@ -1,61 +1,73 @@
-:host {
+:host
+{
   flex-direction: column;
   overflow: hidden;
 }
 
-.ips {
+.ips
-  +.ips {
+{
+  + .ips
+  {
     margin-left: .5rem;
     padding-left: .5rem;
     border-left: 2px solid #2b3540;
   }
 }
 
-.card {
+.card
+{
   border: 1px solid rgba(0, 0, 0, .5);
   background-color: rgba(16, 21, 39, .5);
   box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px #0b284b, 0 0 10px 3px #0e162a;
   transition: box-shadow .15s ease-out;
 
-  &:hover {
+  &:hover
+  {
     box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px rgba(18, 203, 240, .4), 0 0 10px 3px #0e162a;
   }
 
-  .card-title {
+  .card-title
+  {
     color: #ff9c07;
     margin-bottom: 0;
     font-weight: bold;
   }
 
-  .card-body {
+  .card-body
+  {
     background-color: rgba(16, 21, 39, .5);
     max-height: 205px;
     overflow: auto;
     padding-top: .7rem !important;
   }
 
-  .list-group-item {
+  .list-group-item
+  {
     background: none;
 
-    span {
+    span
+    {
       color: #8881ff;
     }
 
     b,
-    .strong {
+    .strong
+    {
       color: #ff9c07;
       font-weight: bold;
     }
   }
 
   .btn-info,
-  .btn-outline-info {
+  .btn-outline-info
+  {
     font-size: 1rem;
     line-height: 1;
   }
 }
 
-.card-info {
+.card-info
+{
   background-color: rgba(16, 21, 39, .75);
   display: flex;
   flex-direction: column;
@@ -64,99 +76,122 @@
   height: 170px;
 }
 
-.full-details .card-info {
+.full-details .card-info
+{
   height: 240px;
 }
 
-@media (max-width: 576px) {
+@media (max-width: 576px)
-  .card-info {
+{
+  .card-info
+  {
     height: auto;
   }
 }
 
-.no-overflow-sm {
+.no-overflow-sm
+{
   overflow: hidden;
 }
 
-@media (max-width: 992px) {
+@media (max-width: 992px)
-  .no-overflow-sm {
+{
+  .no-overflow-sm
+  {
     overflow: visible;
   }
 }
 
-.open .dropdown-toggle {}
+.open .dropdown-toggle
+{
+}
 
-.filters {
+.filters
+{
   width: 240px;
 }
 
-.form-check-label {
+.form-check-label
+{
   color: inherit;
 }
 
-.btn-toolbar .btn {
+.btn-toolbar .btn
-  .badge {
+{
-    padding    : 0.1rem 0.35rem 0;
+  .badge
+  {
+    padding: .1rem .35rem 0;
     border: 1px solid transparent;
-    text-shadow: 0 0 3px rgb(255 255 255 / 25%);
+    font-weight: 400;
+    font-size: 1.25rem;
 
-    &:first-letter {
+    &:first-letter
+    {
       font-size: 1.2rem;
     }
   }
 
-  &:hover {
+  &:hover
-    .badge {
+  {
-      border-color: #000;
+    .badge
+    {
+      border-color: rgba(0,0,0,.25);
     }
   }
 }
 
-@keyframes flash {
+@keyframes flash
+{
 
-  from,
+  from, 50%, to
-  50%,
+  {
-  to {
     opacity: 1;
   }
 
-  25%,
+  25%, 75%
-  75% {
+  {
     opacity: 0;
   }
 }
 
-.flash {
+.flash
+{
   animation-name: flash;
   animation-duration: calc(.9s * 1.3);
   animation-timing-function: ease-in-out;
 }
 
-.btn-state-filter:not(.btn-lg):not(.btn-sm) {
+.btn-state-filter:not(.btn-lg):not(.btn-sm)
+{
   background-color: #11182b;
   color: #ff9c07;
   padding: .5rem 1rem;
 }
 
-.open.show .btn-state-filter {
+.open.show .btn-state-filter
+{
   border-radius: 1.25rem 1.25rem 0 0;
 }
 
-.dropdown-menu.dropdown-menu-state-filter {
+.dropdown-menu.dropdown-menu-state-filter
+{
   background: #11182b;
   color: #ff9c07;
   width: 100%;
   padding: 0;
   border-radius: 0 0 .25rem .25rem;
 
-  .dropdown-item {
+  .dropdown-item
+  {
     color: inherit;
 
-    &.active {
+    &.active
+    {
       color: #0dcaf0;
     }
 
-    &:hover {
+    &:hover
+    {
       background-color: rgba(11, 172, 204, .2);
     }
   }
@@ -164,6 +199,17 @@
 
 .form-switch,
 .form-switch input,
-.form-switch label {
+.form-switch label
+{
   cursor: pointer;
 }
+
+.dropdown-toggle b
+{
+  font-weight: 400;
+}
+
+a.badge
+{
+    text-decoration: none;
+}

app/src/app/instances/instances.component.ts

@@ -774,7 +774,7 @@ export class InstancesComponent implements OnInit, OnDestroy
           instance.working = false;
         });
 
-    instance.shouldLoadInfo = this.editorForm.get('showMachineDetails').value;
+    instance.shouldLoadInfo = true;
   }
 
   // ----------------------------------------------------------------------------------------------------------------

app/src/app/shared.module.ts

@@ -32,7 +32,8 @@ import
   faTimes, faTrash, faUser, faUserTag, faTag, faUserLock, faLock, faPen, faCheckCircle, faPenNib, faPlus, faMinus, faAngleRight, faHandPointer,
   faArrowsAlt, faTags, faEllipsisV, faHatWizard, faUserCog, faCircle, faAngleLeft, faExternalLinkAlt, faCheck, faPowerOff, faBars, faSpinner,
   faStop, faPlay, faRedo, faMicrochip, faDesktop, faCopy, faSquare, faCheckSquare, faSave, faDatabase, faClone, faSearch, faHistory, faMask,
-  faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent
+  faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent,
+  faUndo
 } from '@fortawesome/free-solid-svg-icons';
 import { faDocker } from '@fortawesome/free-brands-svg-icons';
 
@@ -147,7 +148,8 @@ export class SharedModule
       faTimes, faTrash, faUser, faUserTag, faTag, faUserLock, faLock, faPen, faCheckCircle, faPenNib, faPlus, faMinus, faAngleRight, faHandPointer,
       faArrowsAlt, faTags, faEllipsisV, faHatWizard, faUserCog, faCircle, faAngleLeft, faExternalLinkAlt, faCheck, faPowerOff, faBars, faSpinner,
       faStop, faPlay, faRedo, faMicrochip, faDesktop, faCopy, faSquare, faCheckSquare, faSave, faDatabase, faClone, faSearch, faHistory, faMask,
-      faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent
+      faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent,
+      faUndo
     );
   }
 }

app/src/styles/_buttons.scss

@@ -2,7 +2,7 @@
 {
   border-radius: 2rem;
   line-height: 1.2;
-  font-family: "Mukta", sans-serif;
+  font-family: "Bebas Neue", sans-serif;
   text-transform: uppercase;
   font-weight: 400;
 
@@ -18,7 +18,7 @@
 
 .btn:not(.btn-lg):not(.btn-sm)
 {
-  font-size: 1.15rem;
+  font-size: 1.25rem;
   padding: .375rem .5rem .3rem;
 }
 
@@ -34,10 +34,10 @@
 
 .btn.btn-lg
 {
-  font-size: 1.15rem;
+  font-size: 1.5rem;
   padding-bottom: .35rem;
   line-height: 1;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 .btn-primary

app/src/styles/_forms.scss

@@ -2,8 +2,8 @@
 {
   text-transform: uppercase;
   color: #0dcaf0;
-  font-family: "Varta", sans-serif;
+  font-family: "Bebas Neue", sans-serif;
-  font-size: 1.2rem;
+  font-size: 1.25rem;
   vertical-align: middle;
 }
 

app/src/styles/_modal.scss

@@ -29,7 +29,7 @@
     h4
     {
       color: #3d5e8e;
-      font-family: "Varta", sans-serif;
+      font-family: "Bebas Neue", sans-serif;
     }
   }
 }

app/src/styles/styles.scss

@@ -116,7 +116,8 @@ body, div, virtual-scroller
     background: none;
     border-radius: 0;
     border: none;
-    font-family: "Varta", sans-serif;
+    font-family: "Bebas Neue", sans-serif;
+    text-transform: uppercase;
     text-align: center;
     color: #0dcaf0;
     width: 100%;
@@ -138,6 +139,7 @@ body, div, virtual-scroller
   .nav-tabs
   {
     border: none;
+    flex-wrap: nowrap;
   }
 
   .tab-content
@@ -266,10 +268,11 @@ accordion
 .dropdown-menu, .menu-popover, .menu-dropdown
 {
   background: linear-gradient(135deg, #1fd1f5 0%, #00c3ea 100%);
-  font-family: "Varta", sans-serif;
+  font-family: "Bebas Neue", sans-serif;
-  font-size: 1.2rem;
+  font-size: 1.25rem;
   z-index: 1020;
-  max-height: 60vh;
+  max-height: 80vh;
+  max-width: 600px;
   overflow: auto;
 }
 
@@ -472,7 +475,7 @@ accordion
 {
   thead
   {
-    font-family: "Varta", sans-serif;
+    font-family: "Bebas Neue", sans-serif;
     font-size: 1.2rem;
     color: #A3A4B8;
   }