diff --git a/css/_feedback.scss b/css/_feedback.scss
index ea8ae88d5..e065e5b18 100644
--- a/css/_feedback.scss
+++ b/css/_feedback.scss
@@ -1,48 +1,107 @@
-/**
- * The feedback window inner div css.
- */
-.feedback {
- width: 450px;
- display: block;
- margin-left: auto;
- margin-right: auto;
+@-webkit-keyframes shake-rotate {
+ 0% {
+ -webkit-transform:scale(1) rotate(0deg);
+ transform:scale(1) rotate(0deg)
+ }
+
+ 50% {
+ -webkit-transform:scale(.8) rotate(-5deg);
+ transform:scale(.8) rotate(-5deg)
+ }
+
+ to {
+ -webkit-transform:scale(1) rotate(3deg);
+ transform:scale(1) rotate(3deg)
+ }
+}
+
+@keyframes shake-rotate {
+ 0% {
+ -webkit-transform:scale(1) rotate(0deg);
+ transform:scale(1) rotate(0deg)
+ }
+
+ 50% {
+ -webkit-transform:scale(.8) rotate(-5deg);
+ transform:scale(.8) rotate(-5deg)
+ }
+
+ to {
+ -webkit-transform:scale(1) rotate(3deg);
+ transform:scale(1) rotate(3deg)
+ }
+}
+
+.shake-rotate {
+ -webkit-animation-duration: .4s;
+ animation-duration: .4s;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-animation-name: shake-rotate;
+ animation-name: shake-rotate;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out
+}
+
+.text-center {
text-align: center;
- font-size: 22px;
}
-/**
- * Style of the thank you text inside the feedback window.
- */
-.feedbackTitle {
- font-size: 22px;
- color: #087dba;
-}
-
-/**
- * Stars div css.
- */
-#stars {
- font-size: 30px;
-}
-
-/**
- * Star css.
- */
-#stars>a {
- padding-right: 4px;
-}
-
-/**
- * Mouse over a star.
- */
-.starHover {
- color: #087dba;
-}
-
-/**
- * Detailed feedback section text area style.
- */
.feedbackDetails textarea {
resize: vertical;
min-height: 100px;
-}
\ No newline at end of file
+}
+
+.feedback-rating {
+ line-height: 1.2;
+ padding: 20px 0;
+
+ h2 {
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 1.2;
+ padding: auto;
+ margin: auto;
+ border: none;
+ }
+
+ p {
+ margin-top: 10px;
+ margin-left: 0px;
+ margin-bottom: 0px;
+ margin-right: 0px;
+ }
+
+ .star-label {
+ font-size: 16px;
+ color: $rateStarLabelColor;
+ }
+
+ .star-btn {
+ color: $rateStarDefault;
+ font-size: 36px;
+ position: relative;
+ cursor: pointer;
+ outline: none;
+ text-decoration: none;
+ @include transition(all .2s ease);
+
+ &.starHover,
+ &.active,
+ &:hover {
+ color: $rateStarActivity;
+
+ .fa {
+ top: -6px;
+ }
+ };
+
+ &.rated:hover .fa {
+ top: 0;
+ }
+
+ .fa {
+ position: relative;
+ }
+ }
+}
diff --git a/css/_mixins.scss b/css/_mixins.scss
index 167a25b9d..43aec2431 100644
--- a/css/_mixins.scss
+++ b/css/_mixins.scss
@@ -34,4 +34,19 @@
@keyframes #{$animationName} {
@content;
}
-}
\ No newline at end of file
+}
+
+@mixin transform($func) {
+ -moz-transform: $func;
+ -ms-transform: $func;
+ -webkit-transform: $func;
+ -o-transform: $func;
+ transform: $func;
+}
+
+@mixin transition($transition...) {
+ -moz-transition: $transition;
+ -o-transition: $transition;
+ -webkit-transition: $transition;
+ transition: $transition;
+}
diff --git a/css/_variables.scss b/css/_variables.scss
index 3fe42a996..e44bf9e2d 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -1,4 +1,5 @@
/**
+<<<<<<< HEAD
* Style variables
*/
$baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -34,3 +35,7 @@ $borderRadius: 4px;
*/
$toolbarZ: 900;
$overlayZ: 800;
+
+$rateStarDefault: #ccc;
+$rateStarActivity: #f6c342;
+$rateStarLabelColor: #333;
diff --git a/lang/main.json b/lang/main.json
index f8d5d1c9b..443639820 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -250,6 +250,8 @@
"displayNameRequired": "Please enter your display name",
"extensionRequired": "Extension required:",
"firefoxExtensionPrompt": "You need to install a Firefox extension in order to use screen sharing. Please try again after you get it from here!",
+ "rateExperience": "Please rate your meeting experience.",
+ "feedbackHelp": "Your feedback will help us to improve our video experience.",
"feedbackQuestion": "How was your call?",
"thankYou": "Thank you for using __appName__!",
"sorryFeedback": "We're sorry to hear that. Would you like to tell us more?",
diff --git a/modules/UI/Feedback.js b/modules/UI/Feedback.js
index 4a6e21fe6..708b762c3 100644
--- a/modules/UI/Feedback.js
+++ b/modules/UI/Feedback.js
@@ -49,6 +49,37 @@ var constructDetailedFeedbackHtml = function() {
return message;
};
+var createRateFeedbackHTML = function () {
+ var rate = APP.translation.translateString('dialog.rateExperience'),
+ help = APP.translation.translateString('dialog.feedbackHelp');
+
+ return `
+
+
${ rate }
+
+
+
+
${ help }
+