LIMS-1974: Use a phase banner

Author: Mark Williams

client/src/js/app/components/breadcrumbs.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="bread">
-    <ul id="breadcrumbs" :class="getBackgroundClass">
+    <ul id="breadcrumbs">
       <li
         v-for="(item, index) in bc"
         :key="index"
@@ -30,21 +30,14 @@ export default {
             var title = this.bc.map( (item) => { return item.title} )
             document.title = 'ISPyB » ' + title.join(' » ')
         }
-    },
-    computed: {
-        isDevMode() {
-            return this.$store.state.mode === 'development'
-        },
-        getBackgroundClass : function() {
-            return this.isDevMode ? 'tw-bg-header-background-dev' : 'tw-bg-header-background'
-        },
-    },
+    }
 }
 </script>
 
 <style scoped>
 
 #breadcrumbs {
+    @apply tw-bg-header-bc-background;
     @apply tw-text-header-bc-color;
     @apply tw-p-1;
     @apply tw-text-xxs;

client/src/js/app/components/header.vue

@@ -1,8 +1,15 @@
 <template>
+  <div>
+  <div
+    v-if="isDevMode"
+    class="tw-flex tw-h-10 tw-items-center tw-bg-content-active"
+  >
+    <span class="fa fa-2x fa-exclamation-circle tw-mx-1"></span>
+    This application is running in development mode. Data will not be persisted.
+  </div>
   <div
     id="vue-header"
-    class="tw-flex tw-justify-between tw-items-center tw-h-10"
-    :class="getBackgroundClass"
+    class="tw-flex tw-justify-between tw-items-center tw-h-10 tw-bg-header-background"
   >
     <div class="">
       <router-link
@@ -50,10 +57,6 @@
         </p>
       </router-link>
     </div>
-    <div v-if="isDevMode" class="tw-flex tw-items-center tw-justify-center tw-text-header-color">
-      <span class="fa fa-2x fa-exclamation-circle tw-mx-1"></span>
-      <p class="tw-hidden lg:tw-inline">Development Database</p>
-    </div>
     <div
       class="tw-flex"
     >
@@ -77,6 +80,7 @@
       </router-link>
     </div>
   </div>
+  </div>
 </template>
 
 <script>
@@ -118,9 +122,6 @@ export default {
         isDevMode() {
             return this.$store.state.mode === 'development'
         },
-        getBackgroundClass : function() {
-            return this.isDevMode ? 'tw-bg-header-background-dev' : 'tw-bg-header-background'
-        },
     },
     methods: {
       logout: function () {

client/tailwind.config.js

@@ -95,15 +95,13 @@ module.exports = {
         'sidebar-mobile-hover-background': 'rgb(105,105,105)',
 // Header
         'header-background': '#112e4d',
-        'header-background-dev': '#2e4d11',
         'header-color': '#aaaaaa',
         'header-hover-color': '#ffffff',
 // Header Menu
         'header-menu-color': '#dddddd',
         'header-menu-hover': '#ffffff',
 // Header Breadcrumbs
         'header-bc-background': '#112e4d',
-        'header-bc-background-dev': '#2e4d11',
         'header-bc-color': '#dbdbdb',
         'header-bc-hover': '#ffffff',
 // Footer