From 72b8004847f47870df8256e1aeb87a657b5e3482 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 30 Apr 2023 13:46:00 +0200
Subject: [PATCH] Changed home page layout for next options

---
 src/App.vue                      |  4 ----
 src/components/GeolocRequest.vue | 16 ++++++++++------
 src/components/RepInfo.vue       |  5 ++++-
 src/main.ts                      | 11 +++++++++--
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 13ea6b3..6664008 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import Navbar from "./components/navbar/Navbar.vue";
-</script>
-
 <template>
   <div id="wrapper">
     <div class="flex justify-center items-center">
diff --git a/src/components/GeolocRequest.vue b/src/components/GeolocRequest.vue
index 253ccb5..50ca250 100644
--- a/src/components/GeolocRequest.vue
+++ b/src/components/GeolocRequest.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useRepStore } from "@/stores/repStore";
 import { useGeolocation } from "@vueuse/core";
+import RepButton from "./RepButton.vue";
 
 const { coords } = useGeolocation();
 const { getRep, setRep } = useRepStore();
@@ -12,10 +13,13 @@ async function handleGeolocClick() {
 </script>
 
 <template>
-  <button
-    class="py-2 px-4 rounded-sm bg-white text-sm text-slate-950"
-    @click="handleGeolocClick"
-  >
-    Trouver mon député
-  </button>
+  <section class="text-center">
+    <header class="mb-4">
+      <h1 class="mt-4 text-center font-bold text-3xl">Trouver mon député</h1>
+    </header>
+    <RepButton @click="handleGeolocClick" :style="'btn-red'">
+      <font-awesome-icon :icon="['fass', 'location-dot']" size="lg" />
+      <span>Géolocalisation</span>
+    </RepButton>
+  </section>
 </template>
diff --git a/src/components/RepInfo.vue b/src/components/RepInfo.vue
index d306075..29101d2 100644
--- a/src/components/RepInfo.vue
+++ b/src/components/RepInfo.vue
@@ -52,7 +52,10 @@ const repSocials = {
 <template>
   <section>
     <header>
-      <figure class="mt-8 mx-auto w-60 h-60 rounded-full overflow-hidden">
+      <div class="text-center">
+        <small class="text-base font-bold"> Votre député est... </small>
+      </div>
+      <figure class="mt-4 mx-auto w-60 h-60 rounded-full overflow-hidden">
         <img
           :src="repImage"
           :alt="repFullName"
diff --git a/src/main.ts b/src/main.ts
index 81a1d50..1e84cc8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,9 +15,16 @@ import {
   faLinkedin,
   faInstagram,
 } from "@fortawesome/free-brands-svg-icons";
-import { faLandmark } from "@fortawesome/free-solid-svg-icons";
+import { faLandmark, faLocationDot } from "@fortawesome/free-solid-svg-icons";
 
-library.add(faTwitter, faFacebook, faLinkedin, faInstagram, faLandmark);
+library.add(
+  faTwitter,
+  faFacebook,
+  faLinkedin,
+  faInstagram,
+  faLandmark,
+  faLocationDot
+);
 
 const app = createApp(App);