feat: unify header and input style

src/client/champion/filters/filters.component.scss

@@ -2,25 +2,28 @@
   display: flex;
 }
 
+h2 {
+  margin-top: 10px;
+}
+
 label {
   display: inline-block;
   margin: 8px;
   text-align: initial;
 }
 
 .center {
-  max-width: 250px;
+  max-width: 266px;
   width: 25%;
 }
 
 .center input[type='text'] {
-  width: 100%;
+  width: 90%;
 }
 
 .center label {
-  margin: 20px 0 0 0;
   text-align: center;
-  width: 5em;
+  width: 250px;
 }
 
 @media (max-width: 850px) {

src/client/champion/filters/filters.component.ts

@@ -6,15 +6,15 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
   template: `
     <lb-tags-filter [(tags)]="tags"></lb-tags-filter>
     <div class="center align-center">
-      <div>
+      <label>
         <h2 id="sub-title">Pick your champion</h2>
         <input type="text"
                name="name"
                placeholder="Name"
                aria-labelledby="sub-title"
                (keyup.enter)="enterHit.next()"
                (input)="nameChange.next($event.target.value)" autofocus/>
-      </div>
+      </label>
     </div>
     <lb-sort-filter [sort]="sort" (sortChange)="sortChange.next($event)"></lb-sort-filter>`
 })

src/client/region/region.component.scss

@@ -12,7 +12,9 @@ a {
 }
 
 h2 {
+  margin: 0 auto 20px auto;
   margin-top: 0;
+  width: 200px;
 }
 
 button {

src/client/region/region.component.ts

@@ -7,7 +7,7 @@ import {LolApiService} from '../services';
   styleUrls: ['./region.component.scss'],
   template: `
   <div class="align-center">
-    <h2>Select your region:</h2>
+    <h2>Select your region</h2>
     <lb-loading [observable]="lolApi.getRegions()">
       <button *ngFor="let region of lolApi.getRegions() | async">
         <a [routerLink]="[region?.slug]">

src/client/shared/error.component.scss

@@ -31,6 +31,6 @@
   }
 
   .error-text {
-    margin: 3px 0 0 10px;
+    margin: 4px 0 0 10px;
   }
 }

src/client/summoner/summoner.component.scss

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

src/client/summoner/summoner.component.ts

@@ -18,9 +18,11 @@ const errors = {
   template: `
     <div class="align-center">
       <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>
+        <h2>Enter your summoner name</h2>
+        <div class="align-center">
+          <input type="text" name="name" #name (keyup.enter)="getAccountId(name.value)">
+          <button (click)="getAccountId(name.value)">Go</button>
+        </div>
       </label>
       <lb-error [error]="error" [message]="message"></lb-error>
       <lb-icon-load *ngIf="loading"></lb-icon-load>

src/styles.scss

@@ -129,7 +129,7 @@ select {
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: .8em;
-  padding: 2px 5px;
+  padding: 5px 8px;
 }
 
 input[type='checkbox'] {
@@ -138,7 +138,6 @@ input[type='checkbox'] {
 
 label {
   display: block;
-  font-size: 1.1em;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;