From e97eb670fa8ffd3fff44e63bd323df74cb717d0c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 30 Apr 2023 23:08:29 +0200
Subject: [PATCH] Fixed some issues with the background image

---
 ...ône-alpes.svg => auvergne-rhône-alpes.svg} |  0
 public/regions/ile-de-france.svg              | 24 +++++++++++++++++++
 src/components/RepInfo.vue                    | 18 +++++++-------
 3 files changed, 34 insertions(+), 8 deletions(-)
 rename public/regions/{auverge-rhône-alpes.svg => auvergne-rhône-alpes.svg} (100%)
 create mode 100644 public/regions/ile-de-france.svg

diff --git a/public/regions/auverge-rhône-alpes.svg b/public/regions/auvergne-rhône-alpes.svg
similarity index 100%
rename from public/regions/auverge-rhône-alpes.svg
rename to public/regions/auvergne-rhône-alpes.svg
diff --git a/public/regions/ile-de-france.svg b/public/regions/ile-de-france.svg
new file mode 100644
index 0000000..30bbfde
--- /dev/null
+++ b/public/regions/ile-de-france.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 51.4 39.4" style="enable-background:new 0 0 51.4 39.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFF;}
+</style>
+<path class="st0" d="M26.9,38.3c0.3-0.2,0.4-0.4,0.4-0.7c0-0.6-0.1-1.2-0.1-1.8c0-0.5-0.2-0.8-0.6-0.9c-0.9-0.3-1.4-0.9-1.8-1.7
+	c-0.4-0.7-0.9-1-1.7-0.9c-0.2,0-0.5,0-0.7,0c-1,0-2-0.2-2.7-1c-0.3-0.4-0.7-0.5-1,0c-1,1.4-2.5,1.5-4,1.5c-0.4,0-0.5-0.1-0.5-0.4
+	c0-1.3-0.4-2.6-0.6-3.9c-0.1-0.6-0.3-0.9-0.9-0.9c-0.5,0-0.9-0.2-1.4-0.3c-0.9-0.2-1.4-0.8-1.5-1.7c-0.1-0.4-0.1-0.8-0.2-1.2
+	c0-0.8-0.2-1.5-1.3-1.4c-0.3,0-0.5-0.2-0.5-0.5c0-0.6-0.4-0.9-0.8-1.2c-0.4-0.3-0.9-0.5-1.2-1c-0.4-0.8-0.7-1.6,0.1-2.4
+	c0.3-0.3,0.3-0.7,0-1C5,16.1,5,15.3,5.4,14.4c0.3-0.7,0.3-1.2-0.4-1.7c-0.4-0.3-0.6-0.7-0.6-1.1c-0.1-0.6-0.3-1.1-0.8-1.4
+	C3,9.8,3.1,9.4,3.6,9C3.8,8.9,4,8.7,4,8.4C3.9,8.4,3.7,8.3,3.5,8.3c-1.1,0.1-1-0.9-1.4-1.5C1.9,6.5,2.3,6.5,2.4,6.5
+	C3,6.3,3.5,6.1,4,6c1.7-0.2,2.3-1.4,2.7-2.8C7,2.5,7,1.7,7.4,1c0.1,0.1,0.2,0.1,0.2,0.2c0.5,1.4,1.6,1.6,2.9,1.6c1,0,2,0.1,3,0
+	c0.8-0.1,1.6-0.2,2.2-0.9c0.3-0.3,0.6-0.4,1-0.1c0.3,0.2,0.7,0.4,1,0.6c1.1,1.2,2.4,0.9,3.6,0.3c0.5-0.2,0.8-0.2,1.3,0
+	c1.8,1,3.7,1.8,5.2,3.3c0.4,0.4,0.7,0.1,0.9-0.1C29.3,5.2,30,5.4,30.7,6c0.8,0.7,1.9,0.6,2.6-0.1c0.3-0.3,0.6-0.2,0.8,0
+	c0.7,0.6,1.3,0.5,2,0.1c0.7-0.4,1.3-0.5,2.1-0.2c0.5,0.3,0.8-0.3,1.2-0.6c0.4-0.2,0.6-0.8,1.1-0.5c0.5,0.2,0.7,0.7,0.7,1.3
+	c0,1.3,0.5,2.3,1.5,3.1c1.1,0.8,1.7,2.1,3.1,2.5c0.1,0,0.2,0.1,0.2,0.2c0.3,1,0.8,1.6,1.9,1.7c0.4,0,0.3,0.4,0,0.6
+	c-1.1,0.6-0.6,1.8-0.9,2.7c-0.1,0.2,0.3,0.3,0.5,0.5c0.9,0.6,1.1,1.4,0.6,2.4c-0.4,0.9,0.2,2,1.2,2.1c-0.9,0.2-1,0.8-1,1.6
+	c0,0.2,0,0.5-0.1,0.6c-1.2,1.4-1.1,3.1-1.4,4.7c-0.1,0.8-0.6,1.2-1.4,1.2c-0.9,0-1.8-0.1-2.7-0.1c-0.9-0.1-1.6,0-2.5,0.4
+	c-1.4,0.5-2,1.6-2.6,2.9c-0.2,0.5,0,0.7,0.3,1c0.4,0.3,0.3,0.6,0,0.9c-1,1.2-1.9,2.4-3.4,3c-0.3,0.1-0.4,0.3-0.7-0.1
+	c-0.3-0.4-1-0.2-1.5-0.3c-0.6-0.1-0.9,0.1-1.1,0.7c-0.2,0.5-0.7,0.5-1.1,0.5c-1.1,0-2.2-0.1-3.3-0.1C26.8,38.4,26.8,38.4,26.9,38.3
+	C26.8,38.3,26.9,38.3,26.9,38.3z"/>
+</svg>
diff --git a/src/components/RepInfo.vue b/src/components/RepInfo.vue
index 5ce2f1c..12d743f 100644
--- a/src/components/RepInfo.vue
+++ b/src/components/RepInfo.vue
@@ -59,20 +59,17 @@ const regionBgFile = computed(
   () =>
     `regions/${String(repMandate.value?.election?.lieu.region)
       .toLocaleLowerCase()
-      .replace(" ", "-")}.svg`
+      .replace(/\s/g, "-")}.svg`
 );
 </script>
 
 <template>
-  <section class="py-8 md:py-0">
-    <header
-      :style="`background-image: url(/${regionBgFile}); background-position: center;`"
-      class="bg-contain bg-no-repeat"
-    >
+  <section class="py-8 md:py-0 w-96 max-w-full">
+    <header class="relative">
       <div class="text-center">
         <small class="text-base font-bold"> Votre député·e est... </small>
       </div>
-      <figure class="mt-4 mx-auto w-60 h-60 rounded-full overflow-hidden">
+      <figure class="mt-4 mx-auto w-44 h-44 rounded-full overflow-hidden">
         <img
           :src="repImage"
           :alt="repFullName"
@@ -87,6 +84,11 @@ const regionBgFile = computed(
         {{ repMandate?.election?.lieu.departement }} -
         {{ repMandate?.election?.lieu.numCirco }}e circonscription
       </h2>
+
+      <img
+        :src="regionBgFile"
+        class="absolute top-0 left-0 w-full h-full object-contain select-none -z-20 pointer-events-none"
+      />
     </header>
 
     <h3 class="mt-2 text-center font-medium text-lg">
@@ -107,7 +109,7 @@ const regionBgFile = computed(
       </div>
 
       <menu
-        class="mt-4 flex flex-col gap-y-4 md:flex-row md:gap-x-3 md:gap-y-0"
+        class="mt-4 flex flex-col gap-y-4 md:justify-center md:flex-row md:gap-x-3 md:gap-y-0"
       >
         <li v-if="repTwitter">
           <RepButton