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

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

@@ -5,15 +5,17 @@
                 {{>loadingText}}
                 <div class="studyModality">
                     <div class="studyModalityBox">
-                        {{#if this.study.modalities}}
+                        <div class="studyModalityText" style="{{modalityStyle}}">
-                            {{this.study.modalities}}
+                            {{#if this.study.modalities}}
-                        {{else}}
+                                {{ modalities }}
-                            UN
+                            {{else}}
-                        {{/if}}
+                                UN
+                            {{/if}}
+                        </div>
                     </div>
-                    <div class="studyModalityText">
+                    <div class="studyText">
-                        <div class="studyModalityDate">{{formatDA this.study.studyDate 'D-MMM-YYYY'}}</div>
+                        <div class="studyDate">{{formatDA this.study.studyDate 'D-MMM-YYYY'}}</div>
-                        <div class="studyModalityDescription">{{this.study.studyDescription}}</div>
+                        <div class="studyDescription">{{this.study.studyDescription}}</div>
                     </div>
                 </div>
             </div>

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) {

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

@@ -80,29 +80,31 @@ $spacerY = 12px
     padding: 0
     text-align: center
 
-  .studyModalityText
+  .studyText
     font-size: 13px
     left: ($spacerX * 3) + $boxWidth + ($nestingMargin * 3)
     line-height: 14px
     position: absolute
     right: $spacerX
     top: $spacerY
-    .studyModalityDate
+    .studyDate
       margin-top: 8px
       color: $textSecondaryColor
-    .studyModalityDescription
+    .studyDescription
       margin-top: 8px
       color: $textPrimaryColor
 
   .studyModalityBox
     color: $textSecondaryColor
-    font-size: 22px
     line-height: $boxWidth
     margin-left: $nestingMargin * 2
     margin-top: $nestingMargin * 2
     position: relative
-    text-align: center
+
-    text-transform: uppercase
+    .studyModalityText
+      text-align: center
+      text-transform: uppercase
+      height: 100%
 
     &
     &:before

Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl

@@ -5,7 +5,6 @@
   height: 100%
 
   .dropdown-toggle
-    background-color: $primaryBackgroundColor
     color: $defaultColor
     cursor: pointer
     font-size: 13px