Wallet fixes #5 (4, 8, 12)

src/gui/qt-daemon/html/assets/scss/layout/_main.scss

@@ -75,6 +75,37 @@ app-settings {
         color: themed(optionalTextColor);
       }
     }
+
+    .scale-selection {
+
+      .button-block {
+
+        @include themify($themes) {
+          background-color: themed(tabInactiveBackgroundColor);
+        }
+
+        .label {
+
+          @include themify($themes) {
+            color: themed(optionalTextColor);
+          }
+        }
+
+        &.active {
+
+          @include themify($themes) {
+            background-color: themed(blueTextColor);
+          }
+
+          .label {
+
+            @include themify($themes) {
+              color: themed(blueTextColor);
+            }
+          }
+        }
+      }
+    }
   }
 }
 

src/gui/qt-daemon/html/assets/scss/modules/_head.scss

@@ -19,6 +19,7 @@
         position: relative;
         cursor: pointer;
         margin-right: 20px;
+        outline-style: none;
 
         &:after {
 

src/gui/qt-daemon/html_source/src/app/contracts/contracts.component.scss

@@ -68,8 +68,10 @@
         }
 
         .status, .comment {
+          display: inline-block;
           text-overflow: ellipsis;
           overflow: hidden;
+          max-width: 100%;
         }
       }
     }

src/gui/qt-daemon/html_source/src/app/main/main.component.html

@@ -1,6 +1,6 @@
 <div class="content">
 
-  <div class="head">
+  <div class="head" *ngIf="variablesService.wallets.length > 0">
     <button type="button" class="back-btn" (click)="back()">
       <i class="icon back"></i>
       <span>{{ 'COMMON.BACK' | translate }}</span>

src/gui/qt-daemon/html_source/src/app/settings/settings.component.html

@@ -24,23 +24,10 @@
     </div>
   </div>
 
-  <div class="theme-selection">
-    <div class="radio-block">
-      <input class="style-radio" type="radio" id="75%" name="scale" value="dark" [checked]="scale == 7.5" (change)="setScale(7.5)">
-      <label for="75%">75% scale</label>
-    </div>
-    <div class="radio-block">
-      <input class="style-radio" type="radio" id="100%" name="scale" value="white" [checked]="scale == 10" (change)="setScale(10)">
-      <label for="100%">100% scale</label>
-    </div>
-    <div class="radio-block">
-      <input class="style-radio" type="radio" id="125%" name="scale" value="gray" [checked]="scale == 12.5" (change)="setScale(12.5)">
-      <label for="125%">125% scale</label>
-    </div>
-    <div class="radio-block">
-      <input class="style-radio" type="radio" id="150%" name="scale" value="gray" [checked]="scale == 15" (change)="setScale(15)">
-      <label for="150%">150% scale</label>
-    </div>
+  <div class="scale-selection">
+    <button type="button" class="button-block" [class.active]="item.id === variablesService.settings.scale" *ngFor="let item of appScaleOptions" (click)="setScale(item.id)">
+      <span class="label">{{item.name}}</span>
+    </button>
   </div>
 
   <div class="lock-selection">

src/gui/qt-daemon/html_source/src/app/settings/settings.component.scss

@@ -37,6 +37,35 @@
   }
 }
 
+.scale-selection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 4rem;
+  width: 50%;
+  height: 0.5rem;
+
+  .button-block {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 0 auto;
+    margin: 0 0.2rem;
+    padding: 0;
+    height: 0.5rem;
+
+    .label {
+      position: absolute;
+      bottom: -1rem;
+      left: 50%;
+      transform: translate(-50%, 100%);
+      font-size: 1rem;
+      white-space: nowrap;
+    }
+  }
+}
+
 .master-password {
   width: 50%;
 

src/gui/qt-daemon/html_source/src/app/settings/settings.component.ts

@@ -32,6 +32,24 @@ export class SettingsComponent implements OnInit {
       name: 'SETTINGS.APP_LOCK.TIME4'
     }
   ];
+  appScaleOptions = [
+    {
+      id: 7.5,
+      name: '75% scale'
+    },
+    {
+      id: 10,
+      name: '100% scale'
+    },
+    {
+      id: 12.5,
+      name: '125% scale'
+    },
+    {
+      id: 15,
+      name: '150% scale'
+    }
+  ];
 
   constructor(private renderer: Renderer2, public variablesService: VariablesService, private backend: BackendService, private location: Location) {
     this.theme = this.variablesService.settings.theme;

src/gui/qt-daemon/html_source/src/assets/scss/layout/_main.scss

@@ -75,6 +75,37 @@ app-settings {
         color: themed(optionalTextColor);
       }
     }
+
+    .scale-selection {
+
+      .button-block {
+
+        @include themify($themes) {
+          background-color: themed(tabInactiveBackgroundColor);
+        }
+
+        .label {
+
+          @include themify($themes) {
+            color: themed(optionalTextColor);
+          }
+        }
+
+        &.active {
+
+          @include themify($themes) {
+            background-color: themed(blueTextColor);
+          }
+
+          .label {
+
+            @include themify($themes) {
+              color: themed(blueTextColor);
+            }
+          }
+        }
+      }
+    }
   }
 }
 

src/gui/qt-daemon/html_source/src/assets/scss/modules/_head.scss

@@ -19,6 +19,7 @@
         position: relative;
         cursor: pointer;
         margin-right: 20px;
+        outline-style: none;
 
         &:after {