Starting designing homepage

client/src/App.vue

@@ -1,11 +1,13 @@
 <template>
   <div id="app" class="font-sans bg-gray-200">
-    <div class="nav">
+
+
+    <!-- <div class="nav">
       <router-link to="/">Accueil</router-link> |
       <router-link :to="`/summoner/euw/${summoner}`">
           {{ linkText }}
       </router-link>
-    </div>
+    </div> -->
     
     <router-view/>
 

client/src/assets/css/base.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

client/src/assets/css/form.css

@@ -0,0 +1,25 @@
+button:focus {
+  outline: 0;
+}
+
+.vertical-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.horizontal-center {
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+
+.input {
+  border: 4px solid rgba(129, 230, 217, .7);
+  background: rgba(40, 94, 97, .35);
+}
+
+.input:focus,
+.btn:hover {
+  background: rgba(40, 94, 97, .75);
+  border-color: rgba(129, 230, 217, .9);
+}

client/src/assets/css/main.css

@@ -0,0 +1,3 @@
+@import 'tailwind.css';
+@import 'base.css';
+@import 'form.css';

client/src/components/SearchForm.vue

@@ -1,42 +1,45 @@
 <template>
-  <form @submit.prevent="formSubmit" class="flex">
+  <form @submit.prevent="formSubmit" class="flex text-teal-100 text-lg w-full">
-    <div class="relative">
+    <div class="relative w-full">
-      <v-icon name="search" class="absolute ml-2 vertical-center"></v-icon>
+      <!-- <v-icon name="search" class="absolute ml-2 vertical-center"></v-icon> -->
       <input 
         type="text" 
-        placeholder="Entre un pseudo." 
+        autofocus
-        class="bg-gray-300 p-2 rounded-l outline-none focus:bg-gray-400 pl-8 pr-16" 
+        class="input w-full px-2 py-4 rounded-lg outline-none pl-8 pr-16 font-bold" 
         v-model="summoner"
       >
-      <div class="absolute right-0 vertical-center flex items-center h-full mr-1">
+      <div class="absolute right-0 vertical-center flex items-center h-full mr-2">
         <div 
           @click="dropdown = !dropdown"
-          class="cursor-pointer flex items-center px-2 py-1 rounded-lg hover:bg-gray-200"
+          class="cursor-pointer flex items-center px-2 py-1 rounded-lg hover:bg-teal-700"
         >
-          <span class="selected">{{ selectedRegion }}</span>
+          <span class="selected font-bold">{{ selectedRegion }}</span>
           <v-icon name="caret-down" class="ml-1"></v-icon>
         </div>
       </div>
-
+      <transition name="bounce">
-      <div
+        <div
-        v-if="dropdown"
+          v-if="dropdown"
-        @click="dropdown = !dropdown"
+          @click="dropdown = !dropdown"
-        class="absolute right-0 text-white rounded-b-lg shadow cursor-pointer"
+          class="absolute right-0 text-white rounded-b-lg shadow cursor-pointer mr-2"
-      >
-        <div 
-          v-for="(region, index) in regions" 
-          :key="region"
-          @click="selectedRegion = region"
-          class="px-4 py-1 text-sm bg-teal-500 hover:bg-teal-400"
-          :class="classRegions(index)"
         >
-          {{ region }}
+          <div 
+            v-for="(region, index) in regions" 
+            :key="region"
+            @click="selectedRegion = region"
+            class="px-4 py-1 text-sm bg-teal-600 hover:bg-teal-500"
+            :class="classRegions(index)"
+          >
+            {{ region }}
+          </div>
         </div>
-      </div>
+      </transition>
 
     </div>
 
-    <button class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400" type="submit">Rechercher</button>
+    <button class="input btn w-20 rounded-lg ml-2 relative" type="submit">
+      <v-icon name="search" class="absolute vertical-center horizontal-center"></v-icon>
+    </button>
   </form>
 </template>
 
@@ -69,8 +72,23 @@ export default {
 </script>
 
 <style scoped>
-.vertical-center {
+.bounce-enter-active {
-  top: 50%;
+  animation: bounce-in .5s;
-  transform: translateY(-50%);
+}
+
+.bounce-leave-active {
+  animation: bounce-in .5s reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 </style>

client/src/main.js

@@ -3,7 +3,7 @@ import axios from 'axios'
 import VueAxios from 'vue-axios'
 import DotLoader from 'vue-spinner/src/DotLoader.vue'
 
-import '@/assets/css/tailwind.css'
+import '@/assets/css/main.css'
 import 'vue-awesome/icons'
 
 import App from './App.vue'

client/src/views/Home.vue

@@ -1,8 +1,12 @@
 <template>
-  <div class="h-screen flex flex-col items-center justify-center">
+  <div class="homepage h-screen flex flex-col items-center justify-center">
-    <h1>Home page test</h1>
 
-    <SearchForm @formSubmit="redirect"/>
+    <div class="relative flex flex-col items-center w-full max-w-lg">
+      <div class="absolute logo">
+        <img src="@/assets/Logo.svg" alt="logo">
+      </div>
+      <SearchForm @formSubmit="redirect"/>
+    </div>
 
   </div>
 </template>
@@ -21,3 +25,16 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.homepage {
+  background-image: url("../assets/bg-homepage-1.jpg");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.logo {
+  top: -160px;
+}
+</style>

client/src/views/Summoner.vue

@@ -2,23 +2,27 @@
   <div>
     <button class="debug" @click="resetLocalStorage"></button>
 
-    <div class="search mb-4">
+    <header class="search mb-4 bg-teal-900 text-teal-100">
-      <div class="container mx-auto">
+      <div class="container mx-auto flex justify-between py-8">
+
+        <router-link to="/" class="flex items-center text-lg text-teal-100 mr-8 hover:text-teal-200">Accueil</router-link>
 
         <SearchForm @formSubmit="redirect"/>
 
         <button
           v-if="summonerFound"
           id="refresh" 
-          class="block bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow ml-2"
+          class="input btn w-20 rounded-lg ml-2 relative"
           :disabled="loading"
           @click="apiCall"
         >
-          <v-icon name="sync"/>
+          <v-icon name="sync" class="absolute vertical-center horizontal-center"/>
         </button>
 
+ 
+
       </div>
-    </div>
+    </header>
    
     <template v-if="summonerFound && !loading">
       <div class="container mx-auto pb-16">
@@ -264,18 +268,6 @@ export default {
   background: #ef5753;
 }
 
-.search {
-  background: #4dc0b5;
-}
-
-.search .container {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-
-  padding: 32px 0;
-}
-
 .player {
   text-align: center;
   margin: 16px auto 0;

client/tailwind.config.js

@@ -150,6 +150,7 @@ module.exports = {
     },
     fontFamily: {
       sans: [
+        'Lato',
         '-apple-system',
         'BlinkMacSystemFont',
         '"Segoe UI"',