feat(summoner): improve error output

src/client/shared/error.component.scss

@@ -1,15 +1,10 @@
 :host {
   background-color: transparent;
   display: flex;
-  font-size: 1.3em;
-  justify-content: space-between;
+  font-size: 1em;
   max-width: 500px;
   padding: 10px;
 
-  .error-text {
-    line-height: 54px;
-  }
-
   button {
     font-size: .8em;
     margin-left: 20px;
@@ -24,8 +19,18 @@
     padding-top: 10px;
   }
 
+  lb-icon-error {
+    height: 32px;
+    margin: auto 0;
+    width: 32px;
+  }
+
   .error {
     color: #900000;
     fill: #900000;
   }
+
+  .error-text {
+    margin: 3px 0 0 10px;
+  }
 }

src/client/summoner/summoner.component.scss

@@ -5,10 +5,15 @@
     background-color: #fff;
     border-radius: 10px;
     padding: 20px;
-    width: 250px;
+    width: 300px;
   }
 }
 
 input[type='text'] {
+  margin-top: 10px;
   padding: 5px 8px;
 }
+
+label {
+  width: 230px;
+}

src/client/summoner/summoner.component.ts

@@ -5,38 +5,43 @@ import {LolApiService} from '../services';
 import {tim} from '../shared/tim';
 
 const errors = {
-  short: 'Summoner name \'{{ name }}\' is too short.',
-  long: 'Summoner name \'{{ name }}\'.. is too long.',
-  invalid: 'Summoner name \'{{ name }}\' is invalid.',
-  unkown: 'Summoner name \'{{ name }}\' unknown.'
+  empty: 'Empty summoner name.',
+  short: 'Summoner name [{{ name }}] is too short.',
+  long: 'Summoner name [{{ name }}].. is too long.',
+  invalid: 'Summoner name [{{ name }}] is invalid.',
+  unkown: 'Summoner name [{{ name }}] unknown.'
 };
 
 @Component({
   selector: 'lb-summoner',
   styleUrls: ['./summoner.component.scss'],
   template: `
     <div class="align-center">
-      <p>
-        Enter your summoner name:
+      <label class="align-center">
+        <span>Enter your summoner name:</span>
         <input type="text" name="name" #name (keyup.enter)="getAccountId(name.value)">
         <button (click)="getAccountId(name.value)">Go</button>
-      </p>
+      </label>
       <lb-error [error]="error" [message]="message"></lb-error>
       <lb-icon-load *ngIf="loading"></lb-icon-load>
     </div>`
 })
 
 export class SummonerComponent {
-  error: boolean = false;
+  error = false;
   message: string;
-  loading: boolean = false;
+  loading = false;
 
   constructor(
       private route: ActivatedRoute, private router: Router, private lolApi: LolApiService) {}
 
   getAccountId(name: string) {
     this.error = false;
     this.loading = true;
+    if (name.length <= 0) {
+      this.setError(errors.empty, name);
+      return;
+    }
     if (name.length < 3) {
       this.setError(errors.short, name);
       return;

src/styles.scss

@@ -137,7 +137,6 @@ input[type='checkbox'] {
 }
 
 label {
-  cursor: pointer;
   display: block;
   font-size: 1.1em;
   -webkit-user-select: none;