style(labels): display labels as pill

frontend/src/app.sass

@@ -1745,3 +1745,28 @@ video
   font-size: .5em
   font-family: var(--font-monospace)
   color: var(--color-fontsec)
+
+.exam-office-label
+  --lbl-padding-vert: 5px
+  --lbl-padding-hori: 15px
+  padding: var(--lbl-padding-vert) var(--lbl-padding-hori)
+  border-radius: 20px 20px 20px 20px
+  font-weight: 600
+  text-align: center
+  width: fit-content
+  margin: 0 auto
+  &.success
+    background-color: var(--color-success-dark)
+    color: var(--color-lightwhite)
+  &.error
+    background-color: var(--color-error)
+    color: var(--color-lightwhite)
+  &.warning
+    background-color: var(--color-warning)
+    color: var(--color-lightwhite)
+  &.info
+    background-color: var(--color-lightblack)
+    color: var(--color-lightwhite)
+  &.nonactive
+    background-color: var(--color-nonactive)
+    color: var(--color-nonactive-dark)

src/Handler/ExamOffice/Exams.hs

@@ -283,11 +283,7 @@ postEOExamsR = do
             -- TODO: use select frontend util
             if
               | Just (Just (Entity _ ExamOfficeLabel{..})) <- mLabel
-              -> return $ cell
-                [whamlet|
-                  $newline never
-                  #{examOfficeLabelName} (_{examOfficeLabelStatus}, #{tshow examOfficeLabelPriority})
-                |]
+              -> return $ cell $(widgetFile "widgets/exam-office-label")
               | otherwise -> return $ cell mempty
 
           colSynced = Colonnade.singleton (fromSortable . Sortable (Just "synced") $ i18nCell MsgExamSynchronised) $ \x -> flip runReader x $ do

templates/widgets/exam-office-label.hamlet

@@ -0,0 +1,4 @@
+$newline never
+
+<div .exam-office-label .#{toPathPiece examOfficeLabelStatus}>
+  #{examOfficeLabelName}