4 files changed, 94 insertions, 71 deletions

diff --git a/app/assets/sass/_buttons.scss b/app/assets/sass/_buttons.scss
index 747b1f7..2d0bb6d 100644
--- a/app/assets/sass/_buttons.scss
+++ b/app/assets/sass/_buttons.scss
@@ -1,68 +1,97 @@
 .btn {
-  border-radius: $border-radius-base;
-  padding: $padding-base $padding-lg;
-  font-size: $font-size-base;
-  line-height: 1.2;
-  text-decoration: none;
-  text-transform: uppercase;
-  cursor: pointer;
-  margin-left: $padding-base;
+   border-radius: $border-radius-base;
+   padding: $padding-base $padding-lg;
+   font-size: $font-size-base;
+   line-height: 1.2;
+   text-decoration: none;
+   text-transform: uppercase;
+   cursor: pointer;
+   margin-left: $padding-base;
 
-  &-default {
-    border: 1px solid $blue;
-    color: $blue;
-    background-color: #fff;
+   &-default {
+   border: 1px solid $blue;
+   color: $blue;
+   background-color: #fff;
 
-    &:hover {
-      background-color: $light-blue;
-      color: #fff;
-    }
-  }
+      &:hover {
+         background-color: $light-blue;
+         color: #fff;
+      }
+   }
 
-  &-lg {
-    padding: $padding-base $padding-lg*2;
-    font-size: round($font-size-base * 1.2);
-  }
+   &-lg {
+      padding: $padding-base $padding-lg*2;
+      font-size: round($font-size-base * 1.2);
+   }
 
-  &-sm {
-     padding: $padding-base $padding-base;
-    font-size: round($font-size-base * 0.9);
- }
+   &-sm {
+      padding: $padding-base $padding-base;
+      font-size: round($font-size-base * 0.9);
+   }
 
- &-slim {
-    .fa { margin: 0};
-}
+   &-slim {
+      .fa { margin: 0};
+   }
+
+   &-link {
+      border: 0;
+      background-color: transparent;
+      color: $link-color;
+      padding: 0;
+   }
+
+   &-danger {
+      border: 1px solid $red;
+      color: $red;
+      text-transform: uppercase;
+      background-color: #fff;
+
+      &:hover {
+         background-color: $light-red;
+      }
+   }
 
-  &-danger {
-    border: 1px solid $red;
-    color: $red;
-    text-transform: uppercase;
-    background-color: #fff;
+   &-primary {
+      border: 0;
+      background: $blue;
+      box-shadow: 1px 1px 1px $gray;
+      color: #ffffff;
 
-    &:hover {
-      background-color: $light-red;
-    }
-  }
+      &:hover {
+         background: $dark-blue;
+      }
+   }
 
-  &-primary {
-    border: 0;
-    background: $blue;
-   //  background-image: linear-gradient(to bottom, $blue, $dark-blue);
-    box-shadow: 1px 1px 1px $gray;
-    color: #ffffff;
+   &-close {
+      @extend .btn-slim;
+         border-radius: 50%;
+         box-shadow: 0;
+         line-height: 1.5;
+         border: 1px solid $line-color;
+         background-color: #fff;
+      }
+   }
 
-    &:hover {
-      background: $dark-blue;
-      // background-image: linear-gradient(to bottom, $dark-blue, $blue);
-    }
-  }
+.button-group {
+   button {
+      margin: 0;
+      background-color: $gray-lightest;
+      border-radius: 0;
+      float: left;
+      border: 1px solid $line-color;
+      cursor: pointer;
 
-  &-close {
-     @extend .btn-slim;
-     border-radius: 50%;
-     box-shadow: 0;
-     line-height: 1.5;
-     border: 1px solid $line-color;
-     background-color: #fff;
- }
+      &:first-of-type {
+         border-top-left-radius: $border-radius-lg;
+         border-bottom-left-radius: $border-radius-lg;
+      }
+      &:last-of-type {
+         border-top-right-radius: $border-radius-lg;
+         border-bottom-right-radius: $border-radius-lg;
+      }
+   }
+   
+   .selected {
+      background-color: $gray-light;
+   }
 }
diff --git a/app/assets/sass/_menu.scss b/app/assets/sass/_menu.scss
index 66394ed..baf03b9 100644
--- a/app/assets/sass/_menu.scss
+++ b/app/assets/sass/_menu.scss
@@ -3,7 +3,7 @@ $menu-toggle-height: 45px;
 
 .menu {
    width: 190px;
-   height: 230px;
+   height: 240px;
    position: absolute;
    font-size: $font-size-sm;
    top: $menu-offset - 5;
@@ -18,7 +18,7 @@ $menu-toggle-height: 45px;
    header {
       h3 {
          padding-top: $padding-lg;
-         margin-bottom: $padding-lg * 2;
+         margin-bottom: $padding-base;
          font-size: round($font-size-base * 1.2);
          font-weight: 600;
          line-height: 2;
@@ -36,16 +36,16 @@ $menu-toggle-height: 45px;
    }
 
    &-toggle {
-      font-size: round($font-size-lg * 1.5);
+      font-size: round($font-size-lg * 1.3);
       float: left;
-      padding-left: $padding-lg;
+      padding-left: $padding-base;
       line-height: 2;
       cursor: pointer;
    }
 
    &-hidden {
-      width: 50px;
-      height: 50px;
+      width: $menu-toggle-height;
+      height: $menu-toggle-height;
       border-top-right-radius: 50%;
       border-bottom-right-radius: 50%;
 
@@ -54,11 +54,3 @@ $menu-toggle-height: 45px;
       }
    }
 }
-
-.menu button {
-   border: 1px solid #fff;
-   background-color: #544D4D;
-   color: #fff;
-   padding: 2px;
-   border-radius: 3px;
-}
diff --git a/app/assets/sass/_plan-node.scss b/app/assets/sass/_plan-node.scss
index 1bd99cb..988264e 100644
--- a/app/assets/sass/_plan-node.scss
+++ b/app/assets/sass/_plan-node.scss
@@ -13,7 +13,7 @@
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
-   width: 220px;
+   width: 240px;
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
 
    header {
diff --git a/app/assets/sass/_plan.scss b/app/assets/sass/_plan.scss
index f93ee70..ccf4064 100644
--- a/app/assets/sass/_plan.scss
+++ b/app/assets/sass/_plan.scss
@@ -6,6 +6,8 @@ $connector-line: 2px solid darken($line-color, 10%);
 	overflow: auto;
 	height: 100%;
    min-height: 550px;
+   margin-left: 50px;
+   margin-right: 50px;
 	width: 100%;
 
 	ul {