style updates for the sequence builder

app/assets/stylesheets/farmbot.css.scss

@@ -452,10 +452,10 @@ button {
   border-style: dashed;
   border-width: 2px;
   border-color: $light_gray;
+  color: $gray;
+  font-weight: bold;
   margin-bottom: 1rem;
   padding: 1.25rem;
-  background: $off_white;
-  color: $dark_gray;
   text-align: center;
 }
 .blue-header {
@@ -465,8 +465,6 @@ button {
 .blue-block {
   background-color: $light_blue;
   color: $dark_gray;
-  border-right: 2px solid $dark_blue;
-  border-bottom: 2px solid $dark_blue;
   &:hover {
     background-color: $light_blue;
     color: $dark_gray;
@@ -487,8 +485,6 @@ button {
 .green-block {
   background-color: $light_green;
   color: $dark_gray;
-  border-right: 2px solid $green;
-  border-bottom: 2px solid $green;
   &:hover {
     background-color: $light_green;
     color: $dark_gray;
@@ -504,20 +500,18 @@ button {
 }
 
 .yellow-header {
-  background-color: $light_yellow;
+  background-color: $yellow;
   color: $dark_gray;
 }
 .yellow-block {
-  background-color: $light_yellow;
+  background-color: $yellow;
   color: $dark_gray;
-  border-right: 2px solid $gold;
-  border-bottom: 2px solid $gold;
   &:hover {
-    background-color: $light_yellow;
+    background-color: $yellow;
     color: $dark_gray;
   }
   &:focus {
-    background-color: $light_yellow;
+    background-color: $yellow;
     color: $dark_gray;
   }
 }
@@ -531,8 +525,6 @@ button {
 .orange-block {
   background-color: $peach;
   color: $dark_gray;
-  border-right: 2px solid $dark_orange;
-  border-bottom: 2px solid $dark_orange;
   &:hover {
     background-color: $peach;
     color: $dark_gray;
@@ -552,8 +544,6 @@ button {
 .purple-block {
   background-color: $lavender;
   color: $dark_gray;
-  border-right: 2px solid $royal_purple;
-  border-bottom: 2px solid $royal_purple;
   &:hover {
     background-color: $lavender;
     color: $dark_gray;
@@ -579,8 +569,6 @@ button {
 .pink-block {
   background-color: $light_purple;
   color: $dark_gray;
-  border-right: 2px solid $dark_purple;
-  border-bottom: 2px solid $dark_purple;
   &:hover {
     background-color: $light_purple;
     color: $dark_gray;
@@ -600,8 +588,6 @@ button {
 .gray-block {
   background-color: $gray;
   color: $dark_gray;
-  border-right: 2px solid $dark_gray;
-  border-bottom: 2px solid $dark_gray;
   &:hover {
     background-color: $gray;
     color: $dark_gray;
@@ -621,8 +607,6 @@ button {
 .red-block {
   background-color: $pink;
   color: $dark_gray;
-  border-right: 2px solid $dark_pink;
-  border-bottom: 2px solid $dark_pink;
   &:hover {
     background-color: $pink;
     color: $dark_gray;
@@ -637,9 +621,9 @@ button {
 }
 .block {
   margin-bottom: 20px;
-    box-shadow: 0 4px 10px $translucent;
+  box-shadow: 0px 0px 10px $light_gray;
   &:hover {
-        transform: translateY(-2px);
+        transform: translateY(-1px);
         box-shadow: 0 4px 10px $translucent;
         transition: all 0.2s ease-out;
     .edit-icon {
@@ -1038,3 +1022,12 @@ table thead tr th {
   padding: .5rem;
 }
 
+.margin-top {
+  margin-top: 9px;
+}
+.margin-left {
+  margin-left: 12px;
+}
+.margin-right {
+  margin-right: 12px;
+}

app/views/dashboard/ng-partials/widgets/_build_sequence.html.haml

@@ -1,35 +1,29 @@
 .widget-wrapper
   .row
     .small-12.columns
+      %button.green.button-like{ "ng-click" => "saveSequence(sequence)", style: "margin: 9px;" }
+        Save
+      %button.yellow.button-like{ "ng-click" => "execute(sequence)", style: "margin: 9px;" }
+        Execute
+      %button.red.button-like{ "ng-click" => "deleteSequence(sequence)", style: "margin: 9px;" }
+        Delete
       .header-wrapper
-        %h5 Build A Sequence
+        %h5 Sequence Builder
   .row
     .small-12.columns
       .content-wrapper
         .row
-          .small-6.columns
-            %input#right-label{"ng-model" => "sequence.name", :type => "text"}
-          .small-2.columns
-            %button.green.button-like{"ng-click" => "saveSequence(sequence)"}
-              Save
-          .small-2.columns
-            %button.yellow.button-like{"ng-click" => "execute(sequence)"}
-              Execute
-          .small-2.columns
-            %button.red.button-like{"ng-click" => "deleteSequence(sequence)"}
-              Delete
+          .small-12.columns
+            %label.left NAME
+            %input{"ng-model" => "sequence.name", :type => "text"}
         .row
           .small-12.columns
-            .drag-drop-area.padding
-              %h6 DRAG BASIC OPERATIONS AND/OR SAVE SEQUENCES HERE
-        .row
-          .small-4.columns
-            %label Sequence Parameters:
-          .small-5.columns
-            %a.tiny.expand.button.round.dark-gray{:href => "#"} PLANT-ID/PLANT-GROUP-ID
-          .small-3.columns
-            %a.tiny.expand.button.radius.dark-gray{:href => "#"} ADD PARAMETER
+            %label.left PARAMETERS
+            %button.round.dark-gray.left.margin-left PLANT-ID
           .small-12.columns{"as-sortable" => "dragControlListeners", "ng-model" => "sequence.steps"}
             %div{"ng-repeat" => "step in sequence.steps | orderBy: 'position'", 'as-sortable-item' => true}
               .row
                 %ng-include{src: "'sequence-builder/' + step.message_type"}
+        .row
+          .small-12.columns
+            .drag-drop-area.padding DRAG AND DROP BASIC OPERATIONS AND SEQUENCES HERE

app/views/dashboard/ng-partials/widgets/_saved_sequences.html.haml

@@ -1,14 +1,13 @@
 .widget-wrapper
   .row
     .small-12.columns
+      %button.green.button-like{"ng-click" => "addSequence()", style: "margin: 9px;" }
+        Add
       .header-wrapper
-        %h5 Saved Sequences
+        %h5 Sequences
   .row
     .small-12.columns
       .content-wrapper
-        %button.full-width.green.margin.button-like.text-left{"ng-click" => "addSequence()"}
-          %i.step.fi-plus.size-12
-          New Sequence
         %div{"ng-repeat" => "seq in storedSequences track by $id(seq)"}
           %button.full-width.text-left.no-radius.block{"ng-click" => "load(seq)", class: "{{seq.color}}-block"}
             {{seq.name}}

app/views/layouts/application.html.haml

@@ -30,7 +30,7 @@
           %a.large-menu-right{:href => page_path('help')} Help
         - if current_user && controller_name == "dashboard"
           %stopbutton
-          %syncbutton{schedules: "schedules"}
+          %syncbutton{ schedules: "schedules" }
     .container.small-12.medium-6.large-4.small-centered.columns
       - if notice
         .alert-box.notice.round{"onClick" => "hidden = true"}