Fix webhook details (#3334)

locale/defaultMessages.json

@@ -5171,6 +5171,10 @@
   "ZIc5lM": {
     "string": "Product Name"
   },
+  "ZJPYFl": {
+    "context": "accepted header names",
+    "string": "Headers with in following format are accepted: <code>authorization*</code>, <code>x-*</code>"
+  },
   "ZKuzRy": {
     "context": "order history message",
     "string": "Transaction void requested"
@@ -8148,10 +8152,6 @@
     "context": "see error log label in notification",
     "string": "See error log"
   },
-  "wChjN/": {
-    "context": "accepted header names",
-    "string": "Headers with in following format are accepted: `authorization*`, `x-*`"
-  },
   "wDUBLR": {
     "context": "order refund amount",
     "string": "Proposed refund amount"

src/custom-apps/components/WebhookHeaders/WebhookHeaders.tsx

@@ -106,7 +106,12 @@ const WebhookHeaders: React.FC<WebhookHeadersProps> = ({
                 <>
                   <CardContent>
                     <Typography variant="body2">
-                      <FormattedMessage {...messages.acceptedFormat} />
+                      <FormattedMessage
+                        {...messages.acceptedFormat}
+                        values={{
+                          code: (...chunks) => <code>${chunks}</code>,
+                        }}
+                      />
                     </Typography>
                   </CardContent>
 

src/custom-apps/components/WebhookHeaders/messages.ts

@@ -13,9 +13,9 @@ export const messages = defineMessages({
     description: "empty headers text",
   },
   acceptedFormat: {
-    id: "wChjN/",
+    id: "ZJPYFl",
     defaultMessage:
-      "Headers with in following format are accepted: `authorization*`, `x-*`",
+      "Headers with in following format are accepted: <code>authorization*</code>, <code>x-*</code>",
     description: "accepted header names",
   },
   headerName: {

src/custom-apps/components/WebhookHeaders/styles.ts

@@ -14,7 +14,7 @@ const useStyles = makeStyles(
     return {
       tableCell: {
         paddingTop: theme.spacing(3),
-        paddingLeft: theme.spacing(1),
+        paddingLeft: "3.2rem !important",
         paddingRight: theme.spacing(1),
 
         "& .MuiFormHelperText-root": {
@@ -29,7 +29,7 @@ const useStyles = makeStyles(
       colAction: {
         "&:last-child": {
           ...colAction,
-          paddingRight: theme.spacing(3),
+          paddingRight: "3.2rem",
         },
       },
       colActionHeader: {