Added blue design.

Author: mcibique

src/App.vue

@@ -46,6 +46,11 @@ body {
   height: 100vh;
   min-width: 320px;
   font-size: 1.6rem;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(4, 34, 62, 0.7) 0%,
+    rgb(4, 34, 62) 100%
+  );
 }
 
 input {
@@ -58,6 +63,11 @@ input {
   width: 100%;
 }
 
+:focus,
+input:focus {
+  outline: rgb(2, 116, 169, 0.5) auto 0.5rem;
+}
+
 label {
   display: block;
   line-height: 2rem;
@@ -89,6 +99,11 @@ a:active {
   color: rgba(2, 116, 169, 0.75);
 }
 
+a:focus {
+  outline-style: dashed;
+  outline-width: 0.1rem;
+}
+
 pre {
   white-space: pre-wrap;
   word-break: break-word;
@@ -101,7 +116,8 @@ pre {
 }
 
 .c-app__header {
-  background-color: #eee;
+  border-bottom: 1px solid rgba(17, 4, 62, 1);
+  background-color: rgba(17, 4, 62, 0.25);
   padding: 2rem 4rem;
   text-align: right;
   min-height: 6rem;
@@ -116,7 +132,7 @@ pre {
 
 .c-app__footer {
   padding: 2rem 4rem;
-  border-top: 1px solid #ccc;
-  background-color: #fafafa;
+  border-top: 1px solid rgba(17, 4, 62, 1);
+  background-color: rgba(17, 4, 62, 0.25);
 }
 </style>

src/views/About.vue

@@ -1,6 +1,27 @@
 <template functional>
   <section class="c-about">
-    <h1 class="c-about__heading" tid="c-about__heading">Vue testing examples</h1>
-    <p>Check out <a rel="noreferrer noopener" href="https://github.com/mcibique/vue-testing-examples" target="_blank" tid="c-about__github-link">github</a> page. Go <router-link :to="{ name: 'root' }" tid="c-about__back-link">back</router-link>.</p>
+    <div class="c-about__content-wrapper">
+      <h1 class="c-about__heading" tid="c-about__heading">Vue testing examples</h1>
+      <p>Check out <a rel="noreferrer noopener" href="https://github.com/mcibique/vue-testing-examples" target="_blank" tid="c-about__github-link">github</a> page. Go <router-link :to="{ name: 'root' }" tid="c-about__back-link">back</router-link>.</p>
+    </div>
   </section>
 </template>
+
+<style>
+.c-about {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+}
+
+.c-about__content-wrapper {
+  background-color: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(4, 34, 62, 1);
+  border-radius: 0.4rem;
+  box-shadow: 0.3rem 0.3rem 0.4rem 0.1rem rgba(4, 34, 62, 1);
+  padding: 0.5rem 2rem 4rem;
+  min-width: 320px;
+  text-align: center;
+}
+</style>

src/views/Login.vue

@@ -116,7 +116,10 @@ export default class LoginView extends Vue {
 .c-login__form {
   max-width: 400px;
   width: 100%;
-  border: 1px solid #eee;
+  background-color: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(4, 34, 62, 1);
+  border-radius: 0.4rem;
+  box-shadow: 0.3rem 0.3rem 0.4rem 0.1rem rgba(4, 34, 62, 1);
   padding: 4rem;
 }
 

src/views/Welcome.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="welcome" tid="welcome" v-if="!isLoading && !loadingError">
-    <h1 class="welcome__header" v-if="profile" tid="welcome__header">Welcome {{ profile | fullName }}!</h1>
+  <section class="c-welcome" tid="welcome" v-if="!isLoading && !loadingError">
+    <h1 class="c-welcome__header" v-if="profile" tid="welcome__header">Welcome {{ profile | fullName }}!</h1>
     <div tid="welcome__dashboard">
       <dashboard :emails="emails" @open-email="onEmailOpen"></dashboard>
     </div>
@@ -56,7 +56,15 @@ export default class WelcomeView extends Vue {
 </script>
 
 <style>
-.welcome__header {
+.c-welcome {
+  background-color: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(4, 34, 62, 1);
+  border-radius: 0.4rem;
+  box-shadow: 0.3rem 0.3rem 0.4rem 0.1rem rgba(4, 34, 62, 1);
+  padding: 0.5rem 2rem;
+}
+
+.c-welcome__header {
   border-bottom: 1px solid #333;
   margin-top: 2rem;
   margin-bottom: 5rem;