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

* Align secondary buttons with the web * Update snapshots
getsentry · Feb 20, 2025 · ba260a4 · ba260a4
1 parent ee3aa70
commit ba260a4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 11 deletions.
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,
       }
     }
   >