From 03b994222ae0cfe23f35d0f4eb3ba3b75d5a7ca4 Mon Sep 17 00:00:00 2001
From: "nicolas.marsal" <nicolas.marsal@sundayapp.com>
Date: Tue, 2 Aug 2022 12:50:46 +0200
Subject: [PATCH] feat: better UI

---
 src/App.vue                                    | 10 +++++++---
 src/assets/main.css                            |  2 --
 src/assets/sheets-of-paper.css                 |  2 +-
 src/components/informations/MyInformations.vue |  9 ++++++---
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ca2e154..d2c38f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import MyCv from "@/components/cv/MyCv.vue";
+import DownloadIcon from "@/components/icons/DownloadIcon.vue";
 </script>
 
 <template>
+  <MyCv />
   <div class="menu">
-    <button onclick="window.downloadPdf()">Download</button>
+    <button onclick="window.downloadPdf()">
+      <DownloadIcon width="32" height="32" />
+    </button>
   </div>
-  <MyCv />
 </template>
 
 <script lang="ts">
@@ -21,6 +24,7 @@ export default defineComponent({
 .menu {
   display: flex;
   flex-direction: column;
-  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: 6px;
 }
 </style>
diff --git a/src/assets/main.css b/src/assets/main.css
index baa29dd..e17a55a 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -8,8 +8,6 @@
 .main {
     display: flex;
     flex-direction: row;
-    width: 1024px;
-    height: 100%;
 }
 
 .main-title {
diff --git a/src/assets/sheets-of-paper.css b/src/assets/sheets-of-paper.css
index 819ce82..86cdd7a 100644
--- a/src/assets/sheets-of-paper.css
+++ b/src/assets/sheets-of-paper.css
@@ -30,7 +30,7 @@ html, body {
     /* Styles for better appearance on screens only -- are reset to defaults in print styles later */
 
     /* Divide single pages with some space and center all pages horizontally */
-    margin: 0cm auto;
+    margin: 0;
     /* Define a white paper background that sticks out from the darker overall background */
     background: #fff;
     /* Show a drop shadow beneath each page */
diff --git a/src/components/informations/MyInformations.vue b/src/components/informations/MyInformations.vue
index 3bf2fc7..457b0c2 100644
--- a/src/components/informations/MyInformations.vue
+++ b/src/components/informations/MyInformations.vue
@@ -1,21 +1,24 @@
 <script setup lang="ts">
 import LeftSection from "@/components/common/LeftSection.vue";
+import EmailIcon from "@/components/icons/EmailIcon.vue";
+import HouseIcon from "@/components/icons/HouseIcon.vue";
+import PhoneIcon from "@/components/icons/PhoneIcon.vue";
 </script>
 
 <template>
   <LeftSection :title="$t('section.information')">
     <div class="my-informations-line">
-      <font-awesome-icon icon="fa-solid fa-at" />
+      <EmailIcon width="20" height="20" />
       <div>{{ infos.email }}</div>
     </div>
     <div class="my-informations-line">
-      <font-awesome-icon icon="fa-solid fa-house-chimney" />
+      <HouseIcon width="20" height="20" />
       <div class="my-informations-address">
         <div v-for="line in infos.address" :key="line">{{ line }}</div>
       </div>
     </div>
     <div class="my-informations-line">
-      <font-awesome-icon icon="fa-solid fa-phone" />
+      <PhoneIcon width="20" height="20" />
       <div>{{ infos.phoneNumber }}</div>
     </div>
     <div class="my-informations-line">