Add color to outgoing and incoming challenges (#9235)

* add colour to incoming challenge

* add color to outgoing challenge

* align color in incoming challenge

* use colorChoice rather than finalColor

* yarn run format

* sbt scalafmtAll

app/views/challenge/bits.scala

@@ -41,6 +41,8 @@ object bits {
           )
         )
       ),
-      div(cls := "mode")(modeName(c.mode))
+      div(cls := "mode")(
+        s"${c.colorChoice.toString()} • ${modeName(c.mode)}"
+      )
     )
 }

ui/challenge/css/_challenge.scss

@@ -164,6 +164,10 @@
     .head .user-link {
       margin-left: -5px;
     }
+
+    .color-icon::before {
+      vertical-align: text-top;
+    }
   }
 
   .create {

ui/challenge/src/view.ts

@@ -47,10 +47,11 @@ function challenge(ctrl: Ctrl, dir: ChallengeDirection) {
       [
         h('div.content', [
           h('span.head', renderUser(dir === 'in' ? c.challenger : c.destUser)),
-          h(
-            'span.desc',
-            [ctrl.trans()(c.rated ? 'rated' : 'casual'), timeControl(c.timeControl), c.variant.name].join(' • ')
-          ),
+          h('span.desc', [
+            h('span.is.is2.color-icon.' + (c.color || 'random')),
+            ' • ',
+            [ctrl.trans()(c.rated ? 'rated' : 'casual'), timeControl(c.timeControl), c.variant.name].join(' • '),
+          ]),
         ]),
         h('i', {
           attrs: { 'data-icon': c.perf.icon },