Fix user account menu background color. Add helper to responsively style modality text

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js

@@ -34,6 +34,39 @@ Template.studyTimepointStudy.onRendered(() => {
     }
 });
 
+Template.studyTimepointStudy.helpers({
+    modalities() {
+        const instance = Template.instance();
+        let modalities = instance.data.study.modalities;
+
+        // Replace backslashes with spaces
+        return modalities.replace(/\\/g, ' ');
+    },
+
+    modalityStyle() {
+        // Responsively styles the Modality Acronyms for studies
+        // with more than one modality
+        const instance = Template.instance();
+        const modalities = instance.data.study.modalities;
+        const numModalities = modalities.split(/\\/g).length;
+
+        if (numModalities === 1) {
+            // If we have only one modality, it should take up the whole
+            // div.
+            return 'font-size: 1vw';
+        } else if (numModalities === 2) {
+            // If we have two, let them sit side-by-side
+            return 'font-size: 0.75vw';
+        } else {
+            // If we have more than two modalities, change the line
+            // height to display multiple rows, depending on the number
+            // of modalities we need to display.
+            const lineHeight = Math.ceil(numModalities / 2) * 1.2;
+            return 'line-height: ' + lineHeight + 'vh';
+        }
+    }
+});
+
 Template.studyTimepointStudy.events({
     // Recalculates the timepoint height to make CSS transition smoother
     'transitionend .studyTimepointThumbnails'(event, instance) {