Lesion Tracker Redesign so far

Packages/design/components/roundedButtonGroup/roundedButtonGroup.html

@@ -0,0 +1,7 @@
+<template name="roundedButtonGroup">
+    <div class="{{class}} viewerRoundedButtonGroup clearfix center-table">
+        {{#each item in this.options}}
+            <a class="viewerRoundedButton noselect {{inlineIf value.get item.key 'active'}}" data-key="{{item.key}}">{{item.text}}</a>
+        {{/each}}
+    </div>
+</template>

Packages/design/components/roundedButtonGroup/roundedButtonGroup.js

@@ -0,0 +1,15 @@
+Template.roundedButtonGroup.onRendered(() => {
+    const instance = Template.instance();
+    const value = instance.data.value;
+    if (!value.get()) {
+        value.set(instance.data.options[0].key);
+    }
+});
+
+Template.roundedButtonGroup.events({
+    'click [data-key]'(event, instance) {
+        const $element = $(event.currentTarget);
+        const key = $element.attr('data-key');
+        instance.data.value.set(key);
+    }
+});

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -0,0 +1,46 @@
+@import "{design}/app"
+
+$height = 25px
+$borderColorActive = #3C8074
+$textColorActive = #2D2D2D
+
+.viewerRoundedButtonGroup
+  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-weight: 500
+  position: relative
+
+  .viewerRoundedButton
+    background: $darkUiColor
+    border: 1px $uiBorderColorDark solid
+    color: $textSecondaryColor
+    cursor: pointer
+    display: inline-block
+    margin-left: -1px
+    float: left
+    font-size: 11px
+    height: $height
+    line-height: $height
+    padding: 0 15px
+    text-decoration: none
+    text-transform: uppercase
+    transition: $sidebarTransition
+    -webkit-transition: $sidebarTransition
+    -ms-transition: $sidebarTransition
+    -o-transition: $sidebarTransition
+    -moz-transition: $sidebarTransition
+    z-index: 1
+
+    &.active
+      background: $activeColor
+      color: $textColorActive
+      border-color: $borderColorActive
+      z-index: 2
+
+    &:first-child
+      margin-left: 0
+      border-bottom-left-radius: $height
+      border-top-left-radius: $height
+
+    &:last-child
+      border-bottom-right-radius: $height
+      border-top-right-radius: $height