From fec27babbe6b902b1de8a1b15ffac49c4e0b02b3 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Mon, 13 Jun 2022 15:35:35 +0200
Subject: [PATCH] visual changes when option 'create household' is checked in
 user create form

---
 .../vuejs/Address/components/ShowPane.vue     | 50 +++++++++++++------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
index 4be073991..cc1c3b0e5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
@@ -16,26 +16,30 @@
       </div>
 
       <div v-if="showMessageWhenNoAddress" class="mt-5">
-         <p class="chill-no-data-statement">
-            {{ $t('not_yet_address') }}
-         </p>
+         <div class="no-address-yet col-sm-8">
+            <i class="fa fa-home" aria-hidden="true"></i>
+            <p class="chill-no-data-statement">
+               {{ $t('not_yet_address') }}
+            </p>
+
+            <action-buttons
+               :options="this.options"
+               :defaultz="this.defaultz"
+               class="add-address-btn">
+               <template v-slot:action>
+                  <button @click.prevent="$emit('openEditPane')"
+                     class="btn" :class="getClassButton"
+                     type="button" name="button" :title="$t(getTextButton)">
+                     <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+                  </button>
+               </template>
+            </action-buttons>
+         </div>
       </div>
 
       <address-render-box :address="address" :useDatePane="useDatePane"></address-render-box>
    </div>
 
-   <action-buttons
-      :options="this.options"
-      :defaultz="this.defaultz">
-      <template v-slot:action>
-         <button @click.prevent="$emit('openEditPane')"
-            class="btn" :class="getClassButton"
-            type="button" name="button" :title="$t(getTextButton)">
-            <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
-         </button>
-      </template>
-   </action-buttons>
-
 </template>
 
 <script>
@@ -101,3 +105,19 @@ export default {
    }
 };
 </script>
+
+<style lang="scss">
+.no-address-yet {
+   text-align: center;
+   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+   padding:1.5rem;
+   margin-left: auto;
+   i {
+      font-size:2rem;
+      margin-bottom:2rem;
+   }
+   .add-address-btn {
+      display: block
+   }
+}
+</style>