feat(user preferences) Add User Preferences & Theming to Standalone Viewer (closes #117). Update Standalone to Meteor 1.7

Packages/ohif-design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -32,7 +32,7 @@ $height = 25px
       padding: 0 22px
       position: relative
       text-transform: uppercase
-      transition: transition($sidebarTransition)
+      transition($sidebarTransition)
       z-index: 1
 
       svg

Packages/ohif-design/styles/common/form.styl

@@ -76,3 +76,19 @@ label.wrapperLabel:not(.checkboxLabel)
     &.select2-container--open span.select2-selection span.select2-selection__arrow
       theme('background-color', '$uiGrayDark')
       theme('color', '$textPrimaryColor')
+
+  .form-control
+    background-color: #FFFFFF
+    border: 0
+    border-radius(2px)
+    font-size: 14px
+    height: 30px
+    line-height: 16px
+    padding: 8px 9px 6px
+
+    &:focus
+      theme('box-shadow', '0 0 0 2px $activeColor !important')
+
+  .form-themed .form-control
+    theme('box-shadow', '0 0 0 1px $uiBorderColor')
+

Packages/ohif-design/styles/common/global.styl

@@ -1,8 +1,10 @@
-@require '{ohif:design}/app'
+@import '{ohif:design}/app'
 
 html body
   theme('background-color', '$primaryBackgroundColor')
   font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
+  -webkit-backface-visibility: hidden // Prevent Chrome from shifting parent elements on transform
+  font-family: Roboto
 
 html body.stretch
   height: 100%
@@ -105,15 +107,62 @@ body .select2-container--default .select2-results>.select2-results__options
 
 .modal-dialog
   .modal-content
-    theme('background', '$primaryBackgroundColor')
+    theme('background-color', '$uiGrayDarker')
     theme('border-color', '$uiBorderColor')
     theme('color', '$textSecondaryColor')
+    border-radius(6px)
+    border: 0
 
     .modal-header, .modal-footer
       theme('border-color', '$uiBorderColor')
 
-    &:hover
+    .dialog-separator,
+    .dialog-separator-before,
+    .dialog-separator-after
+      position: relative
+
+    .dialog-separator:before,
+    .dialog-separator:after,
+    .dialog-separator-before:before,
+    .dialog-separator-after:after
+      background-color: #000000
+      box-shadow(-50px 0 0 #000000\, 50px 0 0 #000000)
+      content: ' '
+      display: block
+      height: 3px
+      left: 0
+      position: absolute
+      width: 100%
+
+    .dialog-separator:before,
+    .dialog-separator-before:before
+      top: -3px
+
+    .dialog-separator:after,
+    .dialog-separator-after:after
+      bottom: -3px
+
+    .modal-body
       theme('color', '$textPrimaryColor')
+      padding: 16px 22px 25px
+      position: relative
+
+    .modal-header
+      border-bottom-width: 3px
+      border-bottom-style: solid
+      border-bottom-color: #000000
+      padding: 19px 22px 17px
+      position: relative
+
+      h4
+        theme('color', '$textSecondaryColor')
+        font-size: 20px
+        font-weight: 500
+        line-height: 24px
+        padding-right: 24px
+
+    .modal-footer
+      border-top: 0
 
   .card-round
     theme('background-color', '$uiGrayDark')
@@ -199,3 +248,109 @@ body .select2-container--default .select2-results>.select2-results__options
 
 .nowrap
   white-space: nowrap
+
+.themed
+  table
+    theme('color', '$textPrimaryColor')
+
+    th, td
+      font-size: 15px
+      font-weight: normal
+
+    th
+      line-height: 60px
+
+    td
+      line-height: 18px
+
+  .btn
+    border: 0
+    border-radius(4px)
+    font-size: 15px
+    font-weight: normal
+    height: 37px
+    line-height: 37px
+    padding: 0 12px
+
+    &.btn-primary, &.btn-secondary
+      color: #000000
+
+      &:hover, &:active, &:focus, &:focus:active
+        color: #000000
+
+    &.btn-primary, &.btn-secondary, &.btn-danger
+      transition(background-color 0.3s ease)
+
+    &.btn-primary
+      theme('background-color', '$activeColor')
+
+      &:hover, &:active, &:focus, &:focus:active
+        theme('background-color', '$activeColor', 0.8)
+
+    &.btn-secondary
+      theme('background-color', '$textSecondaryColor')
+
+      &:hover, &:active, &:focus, &:focus:active
+        theme('background-color', '$textSecondaryColor', 0.8)
+
+    &.btn-danger
+      theme('background-color', '$destructiveColor')
+      theme('color', '$textPrimaryColor')
+
+      &:hover, &:active, &:focus, &:focus:active
+        theme('color', '$textPrimaryColor')
+        theme('background-color', '$destructiveColor', 0.8)
+
+    &.active
+      box-shadow(inset 1px 1px 2px rgba(0, 0, 0, 0.5))
+
+  .wrapperLabel .wrapperText
+    theme('color', '$textPrimaryColor')
+    font-size: 14px
+    font-weight: bold
+    line-height: 16px
+
+    &:not(:empty)
+      margin-bottom: 13px
+
+  .nav-tabs
+    border-bottom: 0
+    margin-bottom: 3px
+    position: relative
+    z-index: 1
+
+    &>li
+      font-size: 14px
+      font-weight: normal
+      height: 40px
+      line-height: 40px
+      margin-bottom: 0
+
+      &>a
+        display: block
+        width: 100%
+        line-height: inherit
+        margin: 0
+        height: inherit
+        padding: 0 10px 0 10px
+
+        &:after
+          background-color: transparent
+          bottom: -3px
+          content: ' '
+          display: block
+          height: 3px
+          transition(background-color 0.3s ease)
+          width: 100%
+
+      &>a, &.active>a
+        &, &:hover, &:active, &:focus
+          theme('color', '$activeColor')
+          background-color: transparent
+          border: 0
+
+      &.active>a
+        font-weight: bold
+
+        &:after
+          theme('background-color', '$activeColor')