Fixes focus in Feedback and makes animation configurable.

css/_variables.scss

@@ -48,7 +48,7 @@ $dominantSpeakerBg: #165ecc;
 $raiseHandBg: #D6D61E;
 
 $rateStarDefault: #ccc;
-$rateStarActivity: #f6c342;
+$rateStarActivity: #165ecc;
 $rateStarLabelColor: #333;
 
 /**
@@ -64,7 +64,7 @@ $toolbarZ: 900;
 $overlayZ: 800;
 
 /**
- * Font Colors TODO: change according the design
+ * Font Colors TODO: Change colors when general dialogs are implemented.
  */
 $defaultFontColor: #777;
 $defaultLightFontColor: #F1F1F1;

css/modals/feedback/_feedback.scss

@@ -102,8 +102,8 @@
     &__details {
         text-align: left;
         textarea {
-            resize: vertical;
             min-height: 100px;
+            width: 100%;
         }
     }
 }

interface_config.js

@@ -38,5 +38,7 @@ var interfaceConfig = {
     LOCAL_THUMBNAIL_RATIO_WIDTH: 16,
     LOCAL_THUMBNAIL_RATIO_HEIGHT: 9,
     REMOTE_THUMBNAIL_RATIO_WIDTH: 1,
-    REMOTE_THUMBNAIL_RATIO_HEIGHT: 1
+    REMOTE_THUMBNAIL_RATIO_HEIGHT: 1,
+    // Enables feedback star animation.
+    ENABLE_FEEDBACK_ANIMATION: false
 };

modules/UI/feedback/FeedbackWindow.js

@@ -48,12 +48,17 @@ let constructDetailedFeedbackHtml = function() {
  * @returns {string} the contructed html string
  */
 let createRateFeedbackHTML = function (Feedback) {
-    var rateExperience = APP.translation.translateString('dialog.rateExperience'),
+    let rateExperience
+            = APP.translation.translateString('dialog.rateExperience'),
         feedbackHelp = APP.translation.translateString('dialog.feedbackHelp'),
         feedbackQuestion = (Feedback.feedbackScore < 0)
         ? `<p><br/>${APP.translation.translateString('dialog.feedbackQuestion')}</p>`
         : '';
 
+    let starClassName = (interfaceConfig.ENABLE_FEEDBACK_ANIMATION)
+                            ? "icon-star shake-rotate"
+                            : "icon-star";
+
     return `
         <div class="aui-dialog2-content feedback__content">
             ${feedbackQuestion}
@@ -63,19 +68,19 @@ let createRateFeedbackHTML = function (Feedback) {
                     <p class="star-label">&nbsp;</p>
                     <div id="stars" class="feedback-stars">
                         <a class="star-btn">
-                            <i class="icon-star shake-rotate"></i>
+                            <i class=${ starClassName }></i>
                         </a>
                         <a class="star-btn">
-                            <i class="icon-star shake-rotate"></i>
+                            <i class=${ starClassName }></i>
                         </a>
                         <a class="star-btn">
-                            <i class="icon-star shake-rotate"></i>
+                            <i class=${ starClassName }></i>
                         </a>
                         <a class="star-btn">
-                            <i class="icon-star shake-rotate"></i>
+                            <i class=${ starClassName }></i>
                         </a>
                         <a class="star-btn">
-                            <i class="icon-star shake-rotate"></i>
+                            <i class=${ starClassName }></i>
                         </a>
                     </div>
                     <p>&nbsp;</p>
@@ -140,6 +145,8 @@ let onLoadDetailedFunction = function(Feedback) {
             Feedback.hide();
         });
     }
+
+    $('#feedbackTextArea').focus();
 };
 
 /**