Fix bugs

mikechu-optimizely · mikechu-optimizely · commit f21e56a2013e · 2023-07-11T20:35:04.000Z
diff --git a/src/components/DecisionOutput.vue b/src/components/DecisionOutput.vue
@@ -1,22 +1,38 @@
 <script setup lang="ts">
+import { defineProps } from 'vue'
 import { type Result } from '../types/Result'
 
 const props = defineProps({
-  result: Result
+  result: {
+    type: Object as () => Result,
+    required: true
+  }
 })
 </script>
 
 <template>
-    <pre>
+    <div>        
         User 
-        {{ result.userId }} saw variation
-        {{ result.variation }} and got products sorted by 
-        {{ result.sortMethod }}
-    </pre>
+        <b class="userId">{{ result.userId }}</b> saw variation
+        <b class="variation">{{ result.variation }}</b> and got products sorted by 
+        <b class="sortMethod">{{ result.sortMethod }}</b>
+    </div>
 </template>
 
 <style scoped>
-pre {
+div {
     margin: 0px;
 }
+b {
+    font-weight: bold;
+}
+.userId {
+    color: #ff0000;
+}
+.variation {
+    color: #0000ff;
+}
+.sortMethod {
+    color: #00ff00;
+}
 </style>
diff --git a/src/types/Result.d.ts b/src/types/Result.d.ts
diff --git a/src/views/RunView.vue b/src/views/RunView.vue
@@ -66,6 +66,8 @@ for (let i = 0; i < 10; i++) {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
+    font-family: monospace;
   }
 }
 </style>
