End of call survey UI change (#3951)

* ui change

* Change files

* Duplicate change files for beta release

* Update packages/react-composites CallComposite browser test snapshots

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: carocao-msft

change-beta/@azure-communication-react-edb149fd-bdf4-4fb2-8c66-80daa27b1a40.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Modify end of call survey UI based on post bug bash suggestions",
+  "comment": "ui change",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-edb149fd-bdf4-4fb2-8c66-80daa27b1a40.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Modify end of call survey UI based on post bug bash suggestions",
+  "comment": "ui change",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/Survey/StarSurvey/StarSurvey.styles.ts

@@ -10,7 +10,7 @@ import { _pxToRem } from '@internal/acs-ui-common';
 export const helperTextStyle = (theme: Theme): string =>
   mergeStyles({
     fontWeight: 600,
-    fontSize: _pxToRem(14),
+    fontSize: _pxToRem(16),
     lineHeight: _pxToRem(20),
     color: theme.palette.neutralPrimary,
     paddingTop: _pxToRem(20)
@@ -36,10 +36,18 @@ export const ratingHelperTextStyle = (theme: Theme): string =>
 export const ratingStyles = (theme: Theme): Partial<IRatingStyles> => {
   return {
     root: {
-      textAlign: 'center'
+      textAlign: 'center',
+      height: 'auto',
+      marginTop: _pxToRem(8)
+    },
+    ratingStarIsLarge: {
+      height: 'auto',
+      padding: 0
     },
     ratingStar: {
-      transform: 'scale(1.15)'
+      transform: 'scale(1.2)',
+      margin: _pxToRem(6),
+      height: 'auto'
     },
     ratingStarFront: {
       color: theme.palette.themePrimary

packages/react-components/src/components/Survey/TagsSurvey/TagsSurvey.styles.ts

@@ -10,7 +10,7 @@ import { _pxToRem } from '@internal/acs-ui-common';
 export const questionTextStyle = (theme: Theme): string =>
   mergeStyles({
     fontWeight: 600,
-    fontSize: _pxToRem(14),
+    fontSize: _pxToRem(16),
     lineHeight: _pxToRem(20),
     color: theme.palette.neutralPrimary,
     paddingTop: _pxToRem(20)
@@ -24,7 +24,7 @@ export const helperTextStyle = (theme: Theme): string =>
     fontWeight: 400,
     fontSize: _pxToRem(12),
     lineHeight: _pxToRem(16),
-    color: theme.palette.neutralPrimary
+    color: theme.palette.neutralSecondary
   });
 
 /**
@@ -40,8 +40,7 @@ export const checkboxClassName = mergeStyles({
  */
 export const freeFormTextCheckboxStyles: Partial<ICheckboxStyles> = {
   root: {
-    padding: _pxToRem(8),
-    paddingLeft: 0,
+    paddingBottom: _pxToRem(8),
     width: '100%'
   },
   label: {
@@ -53,5 +52,9 @@ export const freeFormTextCheckboxStyles: Partial<ICheckboxStyles> = {
  * @private
  */
 export const freeFormTextFieldClassName = mergeStyles({
-  width: '100%'
+  width: '100%',
+  marginLeft: _pxToRem(4),
+  input: {
+    padding: 0
+  }
 });

packages/react-components/src/components/Survey/TagsSurvey/TagsSurvey.tsx

@@ -196,7 +196,6 @@ export const _TagsSurvey = (props: _TagsSurveyProps): JSX.Element => {
     <>
       <Stack verticalAlign="center">
         <Text className={questionTextStyle(theme)}>{strings?.tagsSurveyQuestion}</Text>
-        <Text className={helperTextStyle(theme)}>{strings?.tagsSurveyHelperText}</Text>
       </Stack>
 
       <Pivot>
@@ -234,6 +233,8 @@ export const _TagsSurvey = (props: _TagsSurveyProps): JSX.Element => {
           );
         })}
       </Pivot>
+
+      <Text className={helperTextStyle(theme)}>{strings?.tagsSurveyHelperText}</Text>
     </>
   );
 };

packages/react-composites/src/composites/common/SurveyPane.tsx

@@ -57,7 +57,7 @@ export const SurveyPane = (props: {
     () => (
       <>
         {showSubmitFeedbackButton && (
-          <Stack style={{ borderTop: 'solid', borderTopColor: 'lightgrey' }} horizontalAlign="end">
+          <Stack horizontalAlign="end">
             <PrimaryButton
               style={{ marginTop: '1rem' }}
               onClick={() => {