feat(feedback): Align secondary buttons with the web (#4572)

antonis · web-flow · commit ba260a4ae98b · 2025-02-20T12:44:10.000+02:00
* Align secondary buttons with the web

* Update snapshots
diff --git a/packages/core/src/js/feedback/FeedbackWidget.styles.ts b/packages/core/src/js/feedback/FeedbackWidget.styles.ts
@@ -42,11 +42,13 @@ const defaultStyles: FeedbackWidgetStyles = {
     color: FOREGROUND_COLOR,
   },
   screenshotButton: {
-    backgroundColor: '#eee',
+    backgroundColor: BACKGROUND_COLOR,
     padding: 15,
     borderRadius: 5,
     alignItems: 'center',
     flex: 1,
+    borderWidth: 1,
+    borderColor: BORDER_COLOR,
   },
   screenshotContainer: {
     flexDirection: 'row',
@@ -61,7 +63,7 @@ const defaultStyles: FeedbackWidgetStyles = {
     marginRight: 10,
   },
   screenshotText: {
-    color: '#333',
+    color: FOREGROUND_COLOR,
     fontSize: 16,
   },
   submitButton: {
@@ -76,8 +78,12 @@ const defaultStyles: FeedbackWidgetStyles = {
     fontSize: 18,
   },
   cancelButton: {
-    paddingVertical: 15,
+    backgroundColor: BACKGROUND_COLOR,
+    padding: 15,
+    borderRadius: 5,
     alignItems: 'center',
+    borderWidth: 1,
+    borderColor: BORDER_COLOR,
   },
   cancelText: {
     color: FOREGROUND_COLOR,
diff --git a/packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap b/packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap
@@ -761,8 +761,12 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
     style={
       {
         "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderColor": "rgba(41, 35, 47, 0.13)",
+        "borderRadius": 5,
+        "borderWidth": 1,
         "opacity": 1,
-        "paddingVertical": 15,
+        "padding": 15,
       }
     }
   >
@@ -980,8 +984,10 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#eee",
+          "backgroundColor": "#ffffff",
+          "borderColor": "rgba(41, 35, 47, 0.13)",
           "borderRadius": 5,
+          "borderWidth": 1,
           "flex": 1,
           "opacity": 1,
           "padding": 15,
@@ -991,7 +997,7 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
       <Text
         style={
           {
-            "color": "#333",
+            "color": "#2b2233",
             "fontSize": 16,
           }
         }
@@ -1081,8 +1087,12 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
     style={
       {
         "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderColor": "rgba(41, 35, 47, 0.13)",
+        "borderRadius": 5,
+        "borderWidth": 1,
         "opacity": 1,
-        "paddingVertical": 15,
+        "padding": 15,
       }
     }
   >
@@ -1340,8 +1350,12 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
     style={
       {
         "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderColor": "rgba(41, 35, 47, 0.13)",
+        "borderRadius": 5,
+        "borderWidth": 1,
         "opacity": 1,
-        "paddingVertical": 15,
+        "padding": 15,
       }
     }
   >
@@ -1559,8 +1573,10 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#eee",
+          "backgroundColor": "#ffffff",
+          "borderColor": "rgba(41, 35, 47, 0.13)",
           "borderRadius": 5,
+          "borderWidth": 1,
           "flex": 1,
           "opacity": 1,
           "padding": 15,
@@ -1570,7 +1586,7 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
       <Text
         style={
           {
-            "color": "#333",
+            "color": "#2b2233",
             "fontSize": 16,
           }
         }
@@ -1660,8 +1676,12 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
     style={
       {
         "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderColor": "rgba(41, 35, 47, 0.13)",
+        "borderRadius": 5,
+        "borderWidth": 1,
         "opacity": 1,
-        "paddingVertical": 15,
+        "padding": 15,
       }
     }
   >

Original file line number	Diff line number	Diff line change
@@ -761,8 +761,12 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
`761`	`761`	`style={`
`762`	`762`	`{`
`763`	`763`	`"alignItems": "center",`
	`764`	`+ "backgroundColor": "#ffffff",`
	`765`	`+ "borderColor": "rgba(41, 35, 47, 0.13)",`
	`766`	`+ "borderRadius": 5,`
	`767`	`+ "borderWidth": 1,`
`764`	`768`	`"opacity": 1,`
`765`		`- "paddingVertical": 15,`
	`769`	`+ "padding": 15,`
`766`	`770`	`}`
`767`	`771`	`}`
`768`	`772`	`>`
@@ -980,8 +984,10 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
`980`	`984`	`style={`
`981`	`985`	`{`
`982`	`986`	`"alignItems": "center",`
`983`		`- "backgroundColor": "#eee",`
	`987`	`+ "backgroundColor": "#ffffff",`
	`988`	`+ "borderColor": "rgba(41, 35, 47, 0.13)",`
`984`	`989`	`"borderRadius": 5,`
	`990`	`+ "borderWidth": 1,`
`985`	`991`	`"flex": 1,`
`986`	`992`	`"opacity": 1,`
`987`	`993`	`"padding": 15,`
@@ -991,7 +997,7 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
`991`	`997`	`<Text`
`992`	`998`	`style={`
`993`	`999`	`{`
`994`		`- "color": "#333",`
	`1000`	`+ "color": "#2b2233",`
`995`	`1001`	`"fontSize": 16,`
`996`	`1002`	`}`
`997`	`1003`	`}`
@@ -1081,8 +1087,12 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
`1081`	`1087`	`style={`
`1082`	`1088`	`{`
`1083`	`1089`	`"alignItems": "center",`
	`1090`	`+ "backgroundColor": "#ffffff",`
	`1091`	`+ "borderColor": "rgba(41, 35, 47, 0.13)",`
	`1092`	`+ "borderRadius": 5,`
	`1093`	`+ "borderWidth": 1,`
`1084`	`1094`	`"opacity": 1,`
`1085`		`- "paddingVertical": 15,`
	`1095`	`+ "padding": 15,`
`1086`	`1096`	`}`
`1087`	`1097`	`}`
`1088`	`1098`	`>`
@@ -1340,8 +1350,12 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
`1340`	`1350`	`style={`
`1341`	`1351`	`{`
`1342`	`1352`	`"alignItems": "center",`
	`1353`	`+ "backgroundColor": "#ffffff",`
	`1354`	`+ "borderColor": "rgba(41, 35, 47, 0.13)",`
	`1355`	`+ "borderRadius": 5,`
	`1356`	`+ "borderWidth": 1,`
`1343`	`1357`	`"opacity": 1,`
`1344`		`- "paddingVertical": 15,`
	`1358`	`+ "padding": 15,`
`1345`	`1359`	`}`
`1346`	`1360`	`}`
`1347`	`1361`	`>`
@@ -1559,8 +1573,10 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
`1559`	`1573`	`style={`
`1560`	`1574`	`{`
`1561`	`1575`	`"alignItems": "center",`
`1562`		`- "backgroundColor": "#eee",`
	`1576`	`+ "backgroundColor": "#ffffff",`
	`1577`	`+ "borderColor": "rgba(41, 35, 47, 0.13)",`
`1563`	`1578`	`"borderRadius": 5,`
	`1579`	`+ "borderWidth": 1,`
`1564`	`1580`	`"flex": 1,`
`1565`	`1581`	`"opacity": 1,`
`1566`	`1582`	`"padding": 15,`
@@ -1570,7 +1586,7 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
`1570`	`1586`	`<Text`
`1571`	`1587`	`style={`
`1572`	`1588`	`{`
`1573`		`- "color": "#333",`
	`1589`	`+ "color": "#2b2233",`
`1574`	`1590`	`"fontSize": 16,`
`1575`	`1591`	`}`
`1576`	`1592`	`}`
@@ -1660,8 +1676,12 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
`1660`	`1676`	`style={`
`1661`	`1677`	`{`
`1662`	`1678`	`"alignItems": "center",`
	`1679`	`+ "backgroundColor": "#ffffff",`
	`1680`	`+ "borderColor": "rgba(41, 35, 47, 0.13)",`
	`1681`	`+ "borderRadius": 5,`
	`1682`	`+ "borderWidth": 1,`
`1663`	`1683`	`"opacity": 1,`
`1664`		`- "paddingVertical": 15,`
	`1684`	`+ "padding": 15,`
`1665`	`1685`	`}`
`1666`	`1686`	`}`
`1667`	`1687`	`>`