LT-249: Fixing issue with multiple duplicated CSS imports

OHIFViewer/client/components/viewer/viewer.styl

@@ -1,7 +1,5 @@
 #viewer
   border-top: 1px solid #525252
-  display: flex
-  flex-flow: row nowrap
   height: 100%
   width: 100%
 

Packages/design/app.styl

@@ -1,7 +1,3 @@
-@import "{design}/styles/webfonts"
-@import "{design}/styles/variables"
-@import "{design}/styles/mixins"
-@import "{design}/styles/spacings"
-@import "{design}/styles/responsive"
-
-@import "{design}/styles/global"
+@import "{design}/styles/imports/mixins"
+@import "{design}/styles/imports/spacings"
+@import "{design}/styles/imports/variables"

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -5,7 +5,6 @@ $borderColorActive = #3C8074
 $textColorActive = #2D2D2D
 
 .roundedButtonGroup
-  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
 
   .roundedButtonWrapper
     cursor: pointer

Packages/design/package.js

@@ -15,16 +15,20 @@ Package.onUse(function(api) {
     // Importable colors / typography settings
     api.addFiles([
         'app.styl',
-        'styles/global.styl',
-        'styles/mixins.styl',
-        'styles/responsive.styl',
-        'styles/spacings.styl',
-        'styles/variables.styl',
-        'styles/webfonts.styl'
+        'styles/imports/mixins.styl',
+        'styles/imports/spacings.styl',
+        'styles/imports/variables.styl'
     ], 'client', {
         isImport: true
     });
 
+    // Common styles
+    api.addFiles([
+        'styles/common/webfonts.styl',
+        'styles/common/global.styl',
+        'styles/common/spacings.styl'
+    ], 'client');
+
     // Rounded Button Group
     api.addFiles([
         'components/roundedButtonGroup/roundedButtonGroup.html',

Packages/design/styles/common/global.styl

@@ -1,7 +1,9 @@
-html *
-    font-family: 'Roboto', sans-serif
+@import "{design}/app.styl"
 
-hr
+html body
+  font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
+
+html hr
   border-top: 1px solid $uiBorderColor
 
 .center-table

Packages/design/styles/common/spacings.styl

@@ -1,5 +1,10 @@
-@import "./spacings"
+@import "{design}/app.styl"
 
+generateSpacings('', $spacer-x, $spacer-y)
+
+.m-x-auto
+  margin-left: auto !important
+  margin-right: auto !important
 
 // MIN WIDTH 1920
 generateSpacings('r', $spacer-x, $spacer-y)

Packages/design/styles/imports/spacings.styl

@@ -34,9 +34,3 @@ generateSpacings($prefix, $spacerX, $spacerY)
         .{$prefix}{$property[0]}-{$axis[0]}-{$spacing[0]}
           {$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important
           {$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important
-
-generateSpacings('', $spacer-x, $spacer-y)
-
-.m-x-auto
-  margin-left: auto !important
-  margin-right: auto !important

Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl

@@ -2,6 +2,7 @@
 
 .viewerSection
   display: flex
+  flex: 1
   flex-flow: row nowrap
   align-items: stretch
   height: calc(100% - 78px);

Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl

@@ -29,7 +29,6 @@ $circleSize = 46px
     width: $circleSize
     height: $circleSize
     line-height: $circleSize
-    font-family: Roboto
     font-weight: 700
     font-size: 17px
     text-align: center

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

@@ -5,7 +5,7 @@ $timepointButtonHeight = 55px
 .studyTimepointBrowser
   background-color: $primaryBackgroundColor
   float: left
-  height: calc(100% - 55px - 50px - 30px)
+  height: 100%
   position: relative
   width: 100%
 
@@ -74,7 +74,6 @@ $timepointButtonHeight = 55px
 
     .timepointFollowupTitle
       color: $textPrimaryColor
-      font-family: Roboto
       padding-top: 2px
 
   .studyTimepointScrollArea

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

@@ -59,7 +59,6 @@ $spacerY = 12px
   border: 1px solid $boxBorderColor
   border-radius: 12px
   cursor: pointer
-  font-family: Roboto
   padding: $spacerY $spacerX ($spacerY - 1)
   position: relative
   transition($sidebarTransition)

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl

@@ -2,6 +2,7 @@
 
 .toolbarSection
   border-bottom: $uiBorderColor $uiBorderThickness solid
+  flex: 0 0 auto
   height: $toolbarHeight
   overflow: hidden
   padding-top: 6px

Packages/lesiontracker/client/components/viewer/viewer.styl

@@ -1,12 +1,14 @@
 @import "{design}/app"
 
 #viewer
-  width: 100%
+  align-items: stretch
+  background-color: black
+  display: flex
+  flex-flow: column wrap
   height: 100%
   margin: 0
   padding: 0
-  background-color: black
-
+  width: 100%
 
 //font awesome icons
 .fa-cr:before

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl

@@ -5,7 +5,6 @@ $seriesCountBackgroundColor = #678696
 .thumbnailEntry
   cursor: pointer
   display: table
-  font-family: Roboto
   margin: 0 auto
 
   &.draggable