feat(feedback): tweak styling (#2791)

- Green stars
- Label for feedback box
- Adjust margins/padding

css/_variables.scss

@@ -80,10 +80,6 @@ $feedbackInputBg: #fff;
 $feedbackTextColor: #000;
 $feedbackInputTextColor: #333;
 $feedbackInputPlaceholderColor: #777;
-$rateStarLabelColor: #333;
-$rateStarDefault: #ccc;
-$rateStarActivity: #165ecc;
-$rateStarSize: 34px;
 
 /**
  * Modals

css/modals/feedback/_feedback.scss

@@ -47,10 +47,6 @@
 
 .feedback-dialog {
     .details {
-        margin-top: 20px;
-        padding-left: 60px;
-        padding-right: 60px;
-
         textarea {
             min-height: 100px;
         }
@@ -82,10 +78,10 @@
         }
 
         .star-btn {
-            color: $rateStarDefault;
+            color: inherit;
             cursor: pointer;
             display: inline-block;
-            font-size: $rateStarSize;
+            font-size: 34px;
             outline: none;
             position: relative;
             text-decoration: none;
@@ -94,7 +90,7 @@
             &.active,
             &:hover,
             &.starHover {
-                color: $rateStarActivity;
+                color: #36B37E;
             };
 
         }

lang/main.json

@@ -506,7 +506,8 @@
         "average": "Average",
         "bad": "Bad",
         "good": "Good",
-        "rateExperience": "Please rate your meeting experience.",
+        "detailsLabel": "Tell us more about it.",
+        "rateExperience": "Rate your meeting experience",
         "veryBad": "Very Bad",
         "veryGood": "Very Good"
     },

react/features/feedback/components/FeedbackDialog.web.js

@@ -224,9 +224,8 @@ class FeedbackDialog extends Component {
                             autoFocus = { true }
                             className = 'input-control'
                             id = 'feedbackTextArea'
-                            isLabelHidden = { true }
+                            label = { t('feedback.detailsLabel') }
                             onChange = { this._onMessageChange }
-                            placeholder = { t('dialog.feedbackHelp') }
                             shouldFitContainer = { true }
                             value = { message } />
                     </div>