reorganize packages, start converting overall app to react (very broken at the moment)

Packages/ohif-viewerbase/styles/components/dialog.styl

@@ -0,0 +1,11 @@
+@import "{ohif:viewerbase}/app"
+
+.viewerDialogs>.dialog-animated
+  &:not(.dialog-closed):not(.dialog-open)
+    display: none
+
+  &.dialog-closed
+    animateFadeOut()
+
+  &.dialog-open
+    animateFadeIn()

Packages/ohif-viewerbase/styles/components/popover.styl

@@ -0,0 +1,21 @@
+@require '{ohif:viewerbase}/app'
+
+div.popover
+  theme('background-color', '$uiGray')
+  theme('color', '$textPrimaryColor')
+
+  .popover-title
+    theme('background-color', '$uiGrayDark')
+    theme('border-bottom-color', '$uiGrayDarkest')
+
+  &.top .arrow:after
+    theme('border-top-color', '$uiGray')
+
+  &.right .arrow:after
+    theme('border-right-color', '$uiGray')
+
+  &.bottom .arrow:after
+    theme('border-bottom-color', '$uiGray')
+
+  &.left .arrow:after
+    theme('border-left-color', '$uiGray')

Packages/ohif-viewerbase/styles/components/radio.styl

@@ -0,0 +1,39 @@
+@import "{ohif:viewerbase}/app"
+
+.group-radio
+  label
+    cursor: pointer
+
+    input
+      display: none
+
+    span
+      padding-left: 23px
+      position: relative
+      &:before
+        background: white
+        border-radius: 8px
+        content: ''
+        display: block
+        height: 16px
+        left: 0
+        position: absolute
+        top: 50%
+        transform(translateY(-50%))
+        width: 16px
+
+    input:focus + span:before
+      // TODO: [design] define a outline for the design
+      theme('box-shadow', '0 0 2px 2px $textSecondaryColor')
+      outline: none
+
+    input:checked + span:after
+      theme('background', '$uiBorderColorDark')
+      border-radius: 5px
+      content: ''
+      height: 10px
+      left: 3px
+      position: absolute
+      top: 50%
+      transform(translateY(-50%))
+      width: 10px

Packages/ohif-viewerbase/styles/components/select2.styl

@@ -0,0 +1,70 @@
+@import "{ohif:viewerbase}/app"
+
+// TODO: [design] can't we use colors that are already in common pallete?
+$gray1 = #C3C3C3
+$gray2 = #B6B6B6
+$gray3 = #A6A6A6
+$gray4 = #676767
+$gray5 = #3E3E3E
+$borderRadius = 2px
+
+span.select2.select2-container
+  font-weight: normal
+
+  span.select2-selection
+    &:hover, &:focus
+      span.select2-selection__arrow
+        background-color: $gray3
+
+  span.select2-selection
+    border: 0
+    border-radius: $borderRadius
+
+    &, span.select2-selection__rendered, span.select2-selection__arrow
+      height: 30px
+
+  span.select2-selection__rendered
+    line-height: 34px
+    padding-left: 11px
+
+  span.select2-selection__arrow
+    theme('border-left', '1px solid $primaryBackgroundColor')
+    background-color: $gray1
+    border-top-right-radius: $borderRadius
+    border-bottom-right-radius: $borderRadius
+    right: 0
+    top: 0
+    transition(background-color 0.3s ease)
+    width: 20px
+
+    b
+      display: none
+
+  span.select2-selection--multiple
+    background-color: $gray2
+    min-height: 30px
+
+    input.select2-search__field
+      color: $gray5
+      placeholder-color($gray5)
+
+    li.select2-selection__choice
+      theme('border-color', '$uiGray')
+      background-color: #FFF
+      border-radius: $borderRadius
+      color: $gray5
+      font-size: 12px
+      line-height: 22px
+      margin-top: 3px
+
+    span.select2-selection__choice__remove
+      color: $gray4
+      float: right
+      font-size: 20px
+      font-weight: 300
+      line-height: 20px
+      margin-left: 6px
+      margin-right: 0
+
+    span.select2-selection__clear
+      display: none

Packages/ohif-viewerbase/styles/components/states.styl

@@ -0,0 +1,31 @@
+@import "{ohif:viewerbase}/app"
+
+.form-themed .state-error, .state-error
+
+    &.wrapperLabel input + .wrapperText
+        theme('color', '$uiStateErrorText')
+
+    &+.tooltip
+
+        .tooltip-inner
+            color: white
+            theme('background-color', '$uiStateErrorBorder')
+
+        &.top .tooltip-arrow
+            theme('border-top-color', '$uiStateErrorBorder')
+        &.right .tooltip-arrow
+            theme('border-right-color', '$uiStateErrorBorder')
+        &.bottom .tooltip-arrow
+            theme('border-bottom-color', '$uiStateErrorBorder')
+        &.left .tooltip-arrow
+            theme('border-left-color', '$uiStateErrorBorder')
+
+
+    &:not(.component-group)
+        &.form-control, .form-control
+            theme('background-color', '$uiStateError')
+            theme('border-color', '$uiStateErrorBorder')
+
+        .select2-selection
+            theme('background-color', '$uiStateError')
+            theme('border-color', '$uiStateErrorBorder')