[BI-2102] updated colors for better contrast

Breeding-Insight · Jun 6, 2024 · 114f637 · 114f637
1 parent 8b07dfc
commit 114f637
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
@@ -27,14 +27,15 @@
 // Override Bulma default colors
 $red: #E20057;
 $yellow: #FFCC21;
-$green: #2AB14E;
+$green: #1d7b36;
 $blue: #1B64DD;
 
 // Custom colors
 $purple: #763FCE;
 $magenta: #9c27b0;
 $applegreen: #C1ED2F;
 $turquoise: #3FB3B6;
+$dark-turquoise: #287274;
 $darkmenu: #4a4a4a; // $grey-dark, can't specify here because variables not loaded
 $link-light: #edf3fd; // variables not loaded
 $pending: $applegreen;
@@ -48,7 +49,7 @@ $custom-colors: (
 // Update Bulma's global variables
 $family-sans-serif: "Source Sans Pro", "Segoe UI", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 $primary: $purple;
-$info: $turquoise;
+$info: $dark-turquoise;
 $family-heading: "Fira Sans", "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 $code: $magenta;
 $menu-item-color: white;
@@ -64,7 +65,7 @@ $footer-padding: 1rem 2.5rem;
 $level-item-spacing: 2rem;
 
 $tabs-boxed-link-radius: 1px;
-$tabs-link-active-color: $turquoise;
+$tabs-link-active-color: $dark-turquoise;
 $tabs-boxed-link-hover-border-bottom-color: $turquoise;
 $tabs-border-bottom-color: $turquoise;
 $tabs-boxed-link-active-border-color: $turquoise;
@@ -978,7 +979,9 @@ tr:nth-child(odd) td.db-filled {
     white-space: -pre-wrap;
     white-space: -o-pre-wrap;
   }
-
+  .message-body.high-contrast{
+    color: $dark-turquoise;
+  }
   .field-book-info {
     .columns {
       margin-bottom: 0;

diff --git a/src/views/BrAPI/BrAPIInfo.vue b/src/views/BrAPI/BrAPIInfo.vue
@@ -36,7 +36,7 @@
                   <qr-code v-bind:text="getBrAPIRootPath()" v-bind:size="100" v-bind:error-level="'L'"/>
                 </div>
                 <article class="message is-info mt-5">
-                  <div class="message-body">
+                  <div class="message-body high-contrast">
                     Example BrAPI call:<br>
                     <a :href="getBrAPIRootPath()+'/brapi/v2/serverinfo'" target="_blank">{{getBrAPIRootPath() + '/brapi/v2/serverinfo'}}</a>
                   </div>
@@ -47,7 +47,7 @@
                   <qr-code v-bind:text="getFieldBookSettings()" v-bind:size="200" v-bind:error-level="'L'"/>
                 </div>
                 <article class="message is-info mt-5">
-                  <div class="message-body field-book-info">
+                  <div class="message-body field-book-info high-contrast">
                     From Field Book's BrAPI settings screen, tap:<br>"<strong>Scan a configuration code</strong>",<br> then scan the above QR code.<br><br>
                     The settings that will be set are:
                     <div class="columns mt-1">
@@ -99,7 +99,7 @@
           <div class="card-content">
             <h3 class="title is-4">Access Token</h3>
             <article class="message is-info mt-5">
-              <div class="message-body">
+              <div class="message-body high-contrast">
                 Executing BrAPI calls to DeltaBreed via scripts (e.g. R or Python) requires an authorization token.  Click "<strong>Generate Token</strong>" to create a new token to inject into your scripts.
               </div>
             </article>

diff --git a/src/views/program/JobManagement.vue b/src/views/program/JobManagement.vue
@@ -40,7 +40,7 @@
     >
       <b-table-column field="data.statuscode" label="Status" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
         <span class="tag" :class="progressTagType(props.row.data.statuscode)">
-          {{ formatProgress(props.row.data.statuscode) }}
+         {{ formatProgress(props.row.data.statuscode) }}
         </span>
       </b-table-column>
       <b-table-column field="data.jobType" label="Type" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">