Bug 1077599 - Rounding corners of buttons. r=mikedeboer a=loop-only
authorJared Wein <jwein@mozilla.com>
Mon, 27 Oct 2014 10:51:58 -0400
changeset 235094 97384b6dc451bc8fbd7bfc24a4ca6e8fad5f3c06
parent 235093 2f0874bd9c8d7ff85d45e89872922c42a8a01a4a
child 235095 5548849a18780656464299cf8c1b11f33fdd180a
push id611
push userraliiev@mozilla.com
push dateMon, 05 Jan 2015 23:23:16 +0000
treeherdermozilla-release@345cd3b9c445 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer, loop-only
bugs1077599
milestone35.0a2
Bug 1077599 - Rounding corners of buttons. r=mikedeboer a=loop-only
browser/components/loop/content/shared/css/conversation.css
browser/components/loop/content/shared/js/views.js
browser/components/loop/content/shared/js/views.jsx
browser/components/loop/standalone/content/css/webapp.css
browser/components/loop/test/shared/views_test.js
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -429,31 +429,37 @@
   padding: .2rem .8rem;
   border: 1px solid #aaa;
   border-radius: 2px;
   background: transparent;
   color: #777;
   cursor: pointer;
 }
 
-.feedback label {
+.feedback-category-label {
   display: block;
   line-height: 1.5em;
 }
 
-.feedback form input[type="radio"] {
+.feedback-category-radio {
   margin-right: .5em;
 }
 
-.feedback form button[type="submit"],
-.feedback form input[type="text"] {
+.feedback > form > .btn-success,
+.feedback-description {
   width: 100%;
   margin-top: 14px;
 }
 
+.feedback > form > .btn-success {
+  padding-top: .5em;
+  padding-bottom: .5em;
+  border-radius: 2px;
+}
+
 .feedback .info {
   display: block;
   font-size: 10px;
   color: #CCC;
   text-align: center;
 }
 
 .fx-embedded .local-stream {
--- a/browser/components/loop/content/shared/js/views.js
+++ b/browser/components/loop/content/shared/js/views.js
@@ -392,18 +392,19 @@ loop.shared.views = (function(_, OT, l10
         other:         l10n.get("feedback_category_other")
       };
     },
 
     _getCategoryFields: function() {
       var categories = this._getCategories();
       return Object.keys(categories).map(function(category, key) {
         return (
-          React.DOM.label({key: key}, 
+          React.DOM.label({key: key, className: "feedback-category-label"}, 
             React.DOM.input({type: "radio", ref: "category", name: "category", 
+                   className: "feedback-category-radio", 
                    value: category, 
                    onChange: this.handleCategoryChange, 
                    checked: this.state.category === category}), 
             categories[category]
           )
         );
       }, this);
     },
@@ -461,16 +462,17 @@ loop.shared.views = (function(_, OT, l10
                                     this.state.description : "";
       return (
         FeedbackLayout({title: l10n.get("feedback_what_makes_you_sad"), 
                         reset: this.props.reset}, 
           React.DOM.form({onSubmit: this.handleFormSubmit}, 
             this._getCategoryFields(), 
             React.DOM.p(null, 
               React.DOM.input({type: "text", ref: "description", name: "description", 
+                className: "feedback-description", 
                 onChange: this.handleDescriptionFieldChange, 
                 onFocus: this.handleDescriptionFieldFocus, 
                 value: descriptionDisplayValue, 
                 placeholder: 
                   l10n.get("feedback_custom_category_text_placeholder")})
             ), 
             React.DOM.button({type: "submit", className: "btn btn-success", 
                     disabled: !this._isFormReady()}, 
--- a/browser/components/loop/content/shared/js/views.jsx
+++ b/browser/components/loop/content/shared/js/views.jsx
@@ -392,18 +392,19 @@ loop.shared.views = (function(_, OT, l10
         other:         l10n.get("feedback_category_other")
       };
     },
 
     _getCategoryFields: function() {
       var categories = this._getCategories();
       return Object.keys(categories).map(function(category, key) {
         return (
-          <label key={key}>
+          <label key={key} className="feedback-category-label">
             <input type="radio" ref="category" name="category"
+                   className="feedback-category-radio"
                    value={category}
                    onChange={this.handleCategoryChange}
                    checked={this.state.category === category} />
             {categories[category]}
           </label>
         );
       }, this);
     },
@@ -461,16 +462,17 @@ loop.shared.views = (function(_, OT, l10
                                     this.state.description : "";
       return (
         <FeedbackLayout title={l10n.get("feedback_what_makes_you_sad")}
                         reset={this.props.reset}>
           <form onSubmit={this.handleFormSubmit}>
             {this._getCategoryFields()}
             <p>
               <input type="text" ref="description" name="description"
+                className="feedback-description"
                 onChange={this.handleDescriptionFieldChange}
                 onFocus={this.handleDescriptionFieldFocus}
                 value={descriptionDisplayValue}
                 placeholder={
                   l10n.get("feedback_custom_category_text_placeholder")} />
             </p>
             <button type="submit" className="btn btn-success"
                     disabled={!this._isFormReady()}>
--- a/browser/components/loop/standalone/content/css/webapp.css
+++ b/browser/components/loop/standalone/content/css/webapp.css
@@ -180,16 +180,17 @@ p.standalone-btn-label {
   }
   .standalone-call-btn-video-icon {
     background-image: url("../shared/img/video-inverse-14x14@2x.png");
   }
 }
 
 .btn-pending-cancel-group > .btn-cancel {
   flex: 2 1 auto;
+  border-radius: 2px;
 }
 
 .btn-large {
   /* Dimensions from spec
    * https://people.mozilla.org/~dhenein/labs/loop-link-spec/#call-start */
   font-size: 1rem;
   padding: .3em .5rem;
 }
--- a/browser/components/loop/test/shared/views_test.js
+++ b/browser/components/loop/test/shared/views_test.js
@@ -521,17 +521,17 @@ describe("loop.shared.views", function()
       it("should empty the description field when a predefined category is " +
          "chosen",
         function() {
           clickSadFace(comp);
 
           fillSadFeedbackForm(comp, "confusing");
 
           expect(comp.getDOMNode()
-                     .querySelector("form input[type='text']").value).eql("");
+                     .querySelector(".feedback-description").value).eql("");
         });
 
       it("should enable the form submit button once a predefined category is " +
          "chosen",
         function() {
           clickSadFace(comp);
 
           fillSadFeedbackForm(comp, "confusing");