From 05ea5119377beaa3eb6d21d8b3ad9f9cb16d4608 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Tue, 14 Mar 2023 13:38:58 +0100
Subject: [PATCH] Fix webhook details (#3334)

---
 locale/defaultMessages.json                               | 8 ++++----
 .../components/WebhookHeaders/WebhookHeaders.tsx          | 7 ++++++-
 src/custom-apps/components/WebhookHeaders/messages.ts     | 4 ++--
 src/custom-apps/components/WebhookHeaders/styles.ts       | 4 ++--
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 9f4dcef0b..0583f4578 100644
--- a/locale/defaultMessages.json
+++ b/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"
diff --git a/src/custom-apps/components/WebhookHeaders/WebhookHeaders.tsx b/src/custom-apps/components/WebhookHeaders/WebhookHeaders.tsx
index b646ef1dd..44174bab2 100644
--- a/src/custom-apps/components/WebhookHeaders/WebhookHeaders.tsx
+++ b/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>
 
diff --git a/src/custom-apps/components/WebhookHeaders/messages.ts b/src/custom-apps/components/WebhookHeaders/messages.ts
index cd9940592..f0ec2d5b7 100644
--- a/src/custom-apps/components/WebhookHeaders/messages.ts
+++ b/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: {
diff --git a/src/custom-apps/components/WebhookHeaders/styles.ts b/src/custom-apps/components/WebhookHeaders/styles.ts
index b4d4f35b3..f9e24e89f 100644
--- a/src/custom-apps/components/WebhookHeaders/styles.ts
+++ b/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: {