studio - tender widget: added compromise of style given iframe and clunky DOM…

studio - tender widget: added compromise of style given iframe and clunky DOM elements that tender is using. meh.

cms/static/sass/_tender-widget.scss

 // tender help/support widget
 // ====================
 
-// tender help link
+#tender_frame, #tender_window {
+  background-image: none !important;
+}
 
+#tender_frame {
+  @include border-radius(3px);
+  @include box-shadow(0 2px 3px $shadow);
+  border: 1px solid $gray;
+  background: $white;
+}
+
+#tender_closer {
+  color: $blue-l2 !important;
+  margin-top: 15px;
+  margin-right: 5px;
+}
 
 // ====================
 
-// tender modal UI
-#tender_window {
+// tender style overrides - not rendered through here, but an archive is needed
+#tender_frame iframe html {
+  font-size: 62.5%;
+}
+
+.widget-layout {
+  font-family: 'Open Sans', sans-serif;
+}
 
+.widget-layout .search, 
+.widget-layout .tabs, 
+.widget-layout .header h1 a {
+  display: none;
 }
 
-#tender_frame {
+.widget-layout .header {
+  background: rgb(85, 151, 221);
+  padding: 20px;
+}
 
+.widget-layout h1, .widget-layout h2, .widget-layout h3, .widget-layout h4, .widget-layout h5, .widget-layout h6, .widget-layout label {
+  font-weight: 600;
 }
 
-.widget-layout {
-  font-family: 'Open Sans', sans-serif;
+.widget-layout .header h1 {
+  font-weight: 700;
+  font-size: 24px;
+  font-size: 2.4rem;
+}
+
+.widget-layout .content {
+  padding: 20px;
+}
+
+.widget-layout label {
+  font-size: 14px;
+  font-size: 1.4rem;
+  margin-bottom: 5px;
+  color: rgb(127,127,127) !important;
+}
+
+.widget-layout input[type="text"], .widget-layout textarea {
+  padding: 10px;
+  font-size: 16px;
+  font-size: 1.6rem;
+  color: rgb(0,0,0) !important;
+}
+
+.widget-layout textarea {
+  width: 97%;
+}
+
+.widget-layout .form-actions {
+  border-top: 1px solid #ccc;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+
+.widget-layout dl.form {
+  margin-bottom: 15px;
+}
+
+.widget-layout #brain_buster_captcha {
+  display: block;
+  width: 100%;
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
 }
\ No newline at end of file

cms/static/sass/_variables.scss

@@ -16,6 +16,7 @@ $error-red: rgb(253, 87, 87);
 
 // colors - new for re-org
 $black: rgb(0,0,0);
+$black-t0: rgba(0,0,0,0.125);
 $white: rgb(255,255,255);
 
 $gray: rgb(127,127,127);

cms/templates/base.html

@@ -54,9 +54,9 @@
 
     <%block name="content"></%block>
     <%include file="widgets/footer.html" />
+    <%include file="widgets/tender.html" />
 
     <%block name="jsextra"></%block>
-    <%include file="widgets/tender.html" />
   </body>
 </html>
 

cms/templates/widgets/footer.html

@@ -18,7 +18,7 @@
           <a href="http://help.edge.edx.org/" rel="external">edX Studio Help</a>
         </li>
         <li class="nav-item nav-peripheral-tender show-tender">
-          <a class="show-tender" href="http://help.edge.edx.org/discussion/new">Provide Feedback</a>
+          <a class="show-tender" href="http://help.edge.edx.org/discussion/new" title="Use our feedback tool, Tender, to share your feedback">Provide Feedback</a>
         </li>
         <li class="nav-item nav-peripheral-contact">
           <a href="https://www.edx.org/contact" rel="external">Contact edX</a>