misc qa fixes #1817 #1811 #1812 #1816 (#1860)

* misc qa fixes

* updated as per PR and added button margin

* span is now really a span

challenges/templates/challenges/edp/build.html

@@ -4,7 +4,7 @@
 
 {% block left_panel %}
   {% block commenting_bubble %}
-  <div class="panel panel-bubble plan-build edp-comments">
+  <div class="panel panel-bubble build edp-comments">
     <div class="panel-body">
       <h1 data-submit-replacement-text="Please wait...">What step are you on?</h1>
       <p>{{challenge.build_call_to_action}}</p>

challenges/templates/challenges/edp/plan.html

@@ -5,7 +5,7 @@
 
 {% block left_panel %}
   {% block commenting_bubble %}
-  <div class="panel panel-bubble plan-build edp-comments">
+  <div class="panel panel-bubble plan edp-comments">
     <div class="panel-body">
       <h1 data-submit-replacement-text="Please wait...">Post your plan!</h1>
       <p>Sketch a plan for your design and what materials you'll use!</p>

challenges/templates/challenges/edp/progress/student/reflect.html

@@ -13,10 +13,10 @@ <h2>Congratulations!</h2>
               You just completed a design challenge! Now you can post a picture of your project to the Inspiration Gallery
               to share with the community.
             </p>
-            <div class="button-wrapper">
-              <a href="{% url "challenges:examples" challenge_id=challenge.id %}" class="btn btn-primary">Go to the Inspiration Gallery</a>
-              <a href="{% url 'profiles:home' %}" class="btn btn-primary">Return to Dashboard</a>
-            </div>
+            <span>
+              <a href="{% url "challenges:examples" challenge_id=challenge.id %}" class="btn btn-primary congratulations-button">Go to the Inspiration Gallery</a>
+              <a href="{% url 'profiles:home' %}" class="btn btn-primary congratulations-button">Return to Dashboard</a>
+            </span>
           </div>
         </div>
       </div>

challenges/templates/challenges/edp/reflect.html

@@ -25,7 +25,7 @@ <h1>Reflect Quiz</h1>
   </div>
   {% elif feedback_form and progress.completed and not feedback_response %}
   {% url "challenges:feedback:submit" challenge_id=challenge.id username=progress.owner.username feedback_id=feedback_form.model.id as action_url %}
-  <div class="panel panel-bubble teal reflect-box edp-comments">
+  <div class="panel panel-bubble feedback feedback-box edp-comments">
     <div class="panel-body">
       <h1 data-submit-replacement-text="Please wait...">Feedback</h1>
       <p class="hide_upon_submit">Are you finished with your project? Please answer the feedback question below! Then you'll be able to share your design in the <a href="{% url "challenges:examples" challenge_id=challenge.id %}"><strong>Inspiration Gallery</strong></a>.</p>

curiositymachine/static/less/pages/base.less

@@ -120,7 +120,7 @@ body {
   width: 100%;
   padding: 1px 0px;
   border-radius: 5px;
-  background: darken(@green, 5%);
+  background-color:rgba(0, 0, 0, 0.05);
   box-shadow: inset 2px 2px 0 rgba(0,0,0,.1);
   text-align: center;
   li {
@@ -132,15 +132,15 @@ body {
   input {
     display: none;
     &:checked + label {
-      background: @green;
+      background: @orange;
       color: #fff;
-      box-shadow: 2px 2px 0 rgba(0,0,0,.1);
+      box-shadow: 2px 2px 0 rgba(0,0,0,.2);
     }
   }
   label {
     border-radius: 3px;
     margin: 0;
-    color: lighten(@green, 5%);
+    color:rgba(100%, 100%, 100%, 0.3);
     font-weight: 600;
     padding: 10px 0px;
     cursor: pointer;
@@ -453,6 +453,32 @@ margin-left: auto;
   }
 }
 
+//feedback
+.feedback-box {
+  textarea {
+    display: block;
+    width: 100%;
+    color: @text-color;
+    resize: vertical;
+  }
+  .action-list li .btn {
+    .button-variant(#fff; @teal; @teal);
+    margin-right: 10px;
+  }
+  .btn-link {
+    color: #fff;
+  }
+  label {
+    display: none;
+  }
+  p {
+    margin: 20px 0;
+  }
+  a {
+    color: #fff;
+  }
+}
+
 //reflect
 .reflect-box {
   textarea {
@@ -534,6 +560,10 @@ margin-left: auto;
     url(../images/examples/balloon-right-animated.gif) top right no-repeat;
 }
 
+.congratulations-button {
+  margin-bottom: 10px;
+}
+
 .feedback-panel {
   min-height: 140px;
   padding-top: 0px;

curiositymachine/static/less/panels.less

@@ -287,11 +287,11 @@
   }
   .panel-heading-build {
     .panel-heading;
-    background-color: #F16243;
+    background-color: @orange;
   }
   .panel-heading-test {
     .panel-heading;
-    background-color: #FA5882;
+    background-color: @orange;
   }
   .panel-heading-reflect {
     .panel-heading;
@@ -309,7 +309,16 @@
   &:before {border-color: lighten(@teal, 5%) transparent transparent transparent;}
 }
 
-.panel-bubble.plan-build {
+.panel-bubble.feedback {
+  background: lighten(#000, 60%);
+  color: #fff;
+  h1 {
+    color: #fff;
+    font-size: @font-size-h1 * 1.5;
+  }
+}
+
+.panel-bubble.plan {
   background: lighten(@green, 5%);
   color: #fff;
   h1 {
@@ -321,6 +330,18 @@
   }
 }
 
+.panel-bubble.build {
+  background: @orange;
+  color: #fff;
+  h1 {
+    color: #fff;
+    font-size: @font-size-h1;
+  }
+  p {
+    margin: 20px 0;
+  }
+}
+
 .panel-bubble.outline {
   background: transparent;
   box-shadow: none;