diff --git a/src/chrome/RatingButton.tsx b/src/chrome/RatingButton.tsx index 4f1905da2..cfbd49801 100644 --- a/src/chrome/RatingButton.tsx +++ b/src/chrome/RatingButton.tsx @@ -73,6 +73,32 @@ const Row = styled(FlexRow)({ flexWrap: 'wrap', }); +const DismissRow = styled(Row)({ + marginBottom: 0, + marginTop: 10, +}); + +const DismissButton = styled('span')({ + '&:hover': { + textDecoration: 'underline', + cursor: 'pointer', + }, +}); + +const Spacer = styled(FlexColumn)({ + flexGrow: 1, +}); + +function dismissRow(dismiss: () => void) { + return ( + + + Dismiss + + + ); +} + type FeedbackComponentState = { rating: number | null; hoveredRating: number; @@ -91,7 +117,8 @@ class FeedbackComponent extends Component< selectedPredefinedComments: Array, allowUserInfoSharing: boolean, ) => void; - close(): void; + close: () => void; + dismiss: () => void; promptData: FeedbackPrompt; }, FeedbackComponentState @@ -175,6 +202,7 @@ class FeedbackComponent extends Component< body = [ {this.props.promptData.bodyText}, {stars}, + dismissRow(this.props.dismiss), ]; break; case 'leave-comment': @@ -220,6 +248,7 @@ class FeedbackComponent extends Component< Submit , + dismissRow(this.props.dismiss), ]; break; case 'finished': @@ -329,6 +358,7 @@ export default class RatingButton extends Component { close={() => { this.setState({isShown: false}); }} + dismiss={this.onClick.bind(this)} promptData={promptData} /> }