Improving the "No observations" message

src/components/ObservationList.vue

@@ -23,28 +23,26 @@
 -->
 <template>
 <div>
-  <div class="hello" >
+  <div class="addItem">
     <router-link to="/observation" custom v-slot="{ navigate }">
       <button type="button" class="btn btn-primary" @click="navigate">+</button>
     </router-link> 
   </div>
   
-  <div v-if="observations">
-  <ul class="list-group" v-if="isInitialized">
-       <router-link :to="{name: 'Observation', params: {observationId:obs.observationId}}" class="list-group-item list-group-item-action " v-bind:class="{'text-danger':obs.isNew, 'text-primary':obs.toUpload, 'text-secondary':obs.isDeleted}" v-for="obs in sortedObservations" v-bind:key="obs.observationId">
-         <div v-if="obs.isDeleted">
-            <strike>  {{ obs.timeOfObservation | dateFormat }}  <b>{{obs.observationHeading}}</b> </strike>
-         </div>
-         <div v-else>
-           {{ obs.timeOfObservation | dateFormat }}  <b>{{obs.observationHeading}}</b>
-         </div>
-    </router-link >
-
-  </ul>
-  </div>
-  <div v-else class="alert alert-warning" role="alert">
-      <p class="text-danger">{{ $t("observationlist.alert.emptylist")}}</p>
+  <div v-if="observations && observations.length > 0" class="bg-light">
+	  <ul class="list-group bg-light" v-if="isInitialized">
+	       <router-link :to="{name: 'Observation', params: {observationId:obs.observationId}}" class="list-group-item list-group-item-action bg-light" v-bind:class="{'text-danger':obs.isNew, 'text-primary':obs.toUpload, 'text-secondary':obs.isDeleted}" v-for="obs in sortedObservations" v-bind:key="obs.observationId">
+	         <div v-if="obs.isDeleted">
+	            <strike>  {{ obs.timeOfObservation | dateFormat }}  <b>{{obs.observationHeading}}</b> </strike>
+	         </div>
+	         <div v-else>
+	           {{ obs.timeOfObservation | dateFormat }}  <b>{{obs.observationHeading}}</b>
+	         </div>
+	    	</router-link >
+	
+	  </ul>
   </div>
+  <div v-else class="alert alert-info" role="alert">{{ $t("observationlist.alert.emptylist")}}</div>
   <common-util ref="CommonUtil"/>
   <sync ref="Sync" />
 </div>
@@ -115,6 +113,7 @@ export default {
   filters: {
     dateFormat: function(timeStr) {
       //return DateTime.fromISO(timeStr).toISODate();
+//return timeStr;
       return DateTime.fromISO(timeStr).toLocaleString(DateTime.DATETIME_MED);
     }
   },
@@ -140,19 +139,34 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h1,
-h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
+	div.addItem {
+		position: fixed;
+		bottom: 25px;
+		right: 25px;
+		
+	}
+	div.addItem button {
+		background-color: #3d8052 !important;
+		border-radius: 25px;
+		border: 0px;
+		font-weight: bolder;
+	}
+	h1,
+	h2 {
+	  font-weight: normal;
+	}
+	ul {
+	  list-style-type: none;
+	  padding: 0;
+	}
+	li {
+	  display: inline;
+	  margin: 0 0;
+	}
+	a {
+		color: black;
+		border-radius: 0 !important;
+		border-width: 0px 0px 1px 0px !important;
+	}
+	
 </style>
\ No newline at end of file

src/locales/nb.json

 {
 	"observationlist.heading"				:	"Mine observasjoner",
-	"observationlist.alert.emptylist"		:	"Ingen registrerte observasjoner",
+	"observationlist.alert.emptylist"		:	"Du har ingen registrerte observasjoner. For å registrere en ny, klikk på pluss-ikonet nede til høyre.",
 
   "welcome.header.text"                      :   "VIPS feltobservasjonsapp",
   "welcome.body.text"						: "I denne appen kan du registrere, stedfeste og ta bilder av skadegjørere i landbruket. Registreringene kan brukes som førstefunn, inngå i modellberegninger og brukes til rapportering og forskning.<br/>For å bruke appen må du ha en brukerkonto på VIPS. Hvis du ikke har det, <a href='https://logic.vips.nibio.no/' target='new'>klikk her for å opprette</a>.<br/>Har du brukerkonto allerede? Klikk på menyikonet oppe til høyre for å logge inn.",