diff --git a/src/components/cylc/Info.vue b/src/components/cylc/Info.vue
index 7c779070e..9d22716cd 100644
--- a/src/components/cylc/Info.vue
+++ b/src/components/cylc/Info.vue
@@ -106,9 +106,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :class="{satisfied: condition.satisfied}"
                   >
                     {{ condition.exprAlias.replace(/c/, '') }}
-                  </span>
-                  <span style="margin-left: 0.5em">
-                    {{ condition.taskId }}:{{ condition.reqState }}
+
+                    <span style="margin-left: 0.5em; color: rgb(0,0,0)">
+                      {{ condition.taskId }}:{{ condition.reqState }}
+                    </span>
                   </span>
                 </li>
               </ul>
@@ -206,18 +207,25 @@ export default {
 
     // for user-defined text where whitespace should be preserved
     .markup {
-      white-space: pre;
+      white-space: pre-wrap;
+    }
+
+    // change the appearance of satisfied/unsatisfied conditions
+    .condition {
+      opacity: 0.6;
+    }
+    .condition.satisfied {
+      opacity: 1;
     }
 
     // prefixes a tick or cross before the entry
     .condition:before {
-      content: '☐';
+      content: '\25CB';
       padding-right: 0.5em;
       color: rgb(0, 0, 0);
     }
     .condition.satisfied:before {
-      content: '✓';
-      color: rgb(75, 230, 75);
+      content: '\25CF';
     }
 
     // for prerequsite task "aliases" (used in conditional expressions)
diff --git a/src/views/Info.vue b/src/views/Info.vue
index 21ed8a9ed..d3bcd1568 100644
--- a/src/views/Info.vue
+++ b/src/views/Info.vue
@@ -150,9 +150,9 @@ class InfoCallback extends DeltasCallback {
   /**
    * @param {Results} results
    */
-  constructor (taskNode) {
+  constructor (task, taskNode) {
     super()
-    this.task = {}
+    this.task = task
     this.taskNode = taskNode
   }
 
@@ -219,6 +219,7 @@ export default {
       requestedTask: undefined,
 
       // The task formatted as a data-store node
+      task: {},
       taskNode: {},
     }
   },
@@ -233,7 +234,7 @@ export default {
         { ...this.variables, taskID: this.requestedTokens?.relativeID },
         `info-query-${this._uid}`,
         [
-          new InfoCallback(this.taskNode)
+          new InfoCallback(this.task, this.taskNode)
         ],
         /* isDelta */ true,
         /* isGlobalCallback */ false