From 574a5c58c29b6cf0ef07045d69e2a3e5666aa9e2 Mon Sep 17 00:00:00 2001
From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com>
Date: Thu, 7 Mar 2024 10:20:29 -0500
Subject: [PATCH] feat: news v2, warning text on notification (#1115)

---
 .husky/pre-commit                        |   2 -
 src/components/Assets/ImagePreview.tsx   |   2 +
 src/components/Creatives/NewsPreview.tsx | 137 +++++++++++++----------
 src/locales/en.po                        |  18 ++-
 src/locales/es.po                        |  18 ++-
 src/locales/pt.po                        |  18 ++-
 src/user/ads/NotificationAd.tsx          |  12 ++
 7 files changed, 133 insertions(+), 74 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 172000ea..36af2198 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -2,5 +2,3 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged
-npm run extract
-git add *.po
diff --git a/src/components/Assets/ImagePreview.tsx b/src/components/Assets/ImagePreview.tsx
index 2cadc83a..4afa7cb1 100644
--- a/src/components/Assets/ImagePreview.tsx
+++ b/src/components/Assets/ImagePreview.tsx
@@ -34,6 +34,7 @@ export const ImagePreview = ({
         height,
         width,
         bgcolor: "#AEB1C2",
+        borderRadius: "6px",
       }}
     >
       {url?.endsWith(".pad") ? (
@@ -45,6 +46,7 @@ export const ImagePreview = ({
           style={{
             opacity: selected === false ? 0.3 : 1,
             filter: selected === false ? "grayscale(20%)" : "none",
+            borderRadius: "6px",
           }}
         />
       ) : (
diff --git a/src/components/Creatives/NewsPreview.tsx b/src/components/Creatives/NewsPreview.tsx
index 50945b07..9d7d63f4 100644
--- a/src/components/Creatives/NewsPreview.tsx
+++ b/src/components/Creatives/NewsPreview.tsx
@@ -14,73 +14,96 @@ export function NewsPreview() {
   return (
     <Card
       sx={{
-        bgcolor: "rgba(53, 53, 53, 0.47)",
-        display: "flex",
-        flexDirection: "column",
-        height: "525px",
-        width: "600px",
+        textDecoration: "none",
+        bgcolor: "rgba(33, 39, 42, 1)",
+        borderRadius: "16px",
       }}
     >
-      <Box display="flex" justifyContent="center">
-        {value?.imageUrl ? (
-          <ImagePreview url={value.imageUrl} height={400} width={500} />
-        ) : (
-          <Box height={400} width={500} />
-        )}
-      </Box>
       <Box
-        padding="20px 25px"
-        bgcolor="rgba(53, 53, 53, 0.47)"
-        flexGrow={1}
-        display="flex"
-        flexDirection="column"
-        justifyContent="space-between"
+        sx={{
+          padding: "16px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          bgcolor: "rgba(255, 255, 255, 0.05)",
+        }}
       >
+        <Box display="flex" justifyContent="center" borderRadius="12px">
+          {value?.imageUrl ? (
+            <ImagePreview url={value.imageUrl} height={400} width={500} />
+          ) : (
+            <Box height={400} width={500} />
+          )}
+        </Box>
+        <Box height="18px" gap="8px">
+          <OutlinedAd />{" "}
+          <AdDescription description={value?.description ?? advertiser.name} />
+        </Box>
+        <Typography
+          display="flex"
+          alignItems="center"
+          margin={0}
+          textAlign="start"
+          fontWeight={600}
+          fontSize="14px"
+          lineHeight="22px"
+          color="rgba(255, 255, 255, 1)"
+        >
+          {value?.title || (
+            <Trans>
+              This is a news display ad, it wll look like part of the news feed.
+            </Trans>
+          )}
+        </Typography>
         <Box
+          width="100px"
+          height="35px"
+          padding="5px, 9px, 5px, 9px"
+          borderRadius="8px"
+          bgcolor="rgba(104, 123, 133, 0.3)"
           display="flex"
-          flexDirection="row"
-          mb={1}
-          gap={2}
-          justifyContent="space-between"
           alignItems="center"
+          justifyContent="center"
         >
-          <Typography
-            color="#ffff"
-            fontSize="16px"
-            fontWeight={500}
-            maxWidth={400}
-          >
-            {value?.title || (
-              <Trans>
-                This is a news display ad, it wll look like part of the news
-                feed.
-              </Trans>
-            )}
-          </Typography>
-          <Box
-            width="200px"
-            display="flex"
-            alignItems="center"
-            justifyContent="flex-end"
-          >
-            <Box
-              color="#ffff"
-              border="1px solid #ffff"
-              padding="8px 10px"
-              minWidth="100px"
-              textAlign="center"
-              borderRadius="100px"
-            >
-              <Typography fontSize="14px">
-                {value?.ctaText || <Trans>Click Here!</Trans>}
-              </Typography>
-            </Box>
-          </Box>
+          <span style={{ fontSize: "11px", color: "#fff", fontWeight: 600 }}>
+            {value?.ctaText || <Trans>Click Here!</Trans>}
+          </span>
         </Box>
-        <Typography color="#ffff" fontSize="14px" fontWeight={500}>
-          {value?.description ?? advertiser.name}
-        </Typography>
       </Box>
     </Card>
   );
 }
+
+const OutlinedAd = () => {
+  return (
+    <span
+      style={{
+        lineHeight: "16px",
+        padding: "0px 2px",
+        border: "1px solid rgba(255, 255, 255, 0.3)",
+        borderRadius: "3px",
+        textDecoration: "none",
+        fontSize: "11px",
+        color: "rgba(255, 255, 255, 1)",
+      }}
+    >
+      <Trans>Ad</Trans>
+    </span>
+  );
+};
+
+const AdDescription = (props: { description: string }) => {
+  return (
+    <span
+      style={{
+        margin: "0",
+        fontWeight: "400",
+        fontSize: "11px",
+        lineHeight: "18px",
+        color: "rgba(255, 255, 255, 0.5)",
+      }}
+    >
+      • {props.description}
+    </span>
+  );
+};
diff --git a/src/locales/en.po b/src/locales/en.po
index 181daf74..468bfc31 100644
--- a/src/locales/en.po
+++ b/src/locales/en.po
@@ -81,6 +81,10 @@ msgstr "Account Settings"
 msgid "Activate"
 msgstr "Activate"
 
+#: src/components/Creatives/NewsPreview.tsx:90
+msgid "Ad"
+msgstr "Ad"
+
 #: src/validation/CreativeSchema.tsx:45
 msgid "Ad body is required"
 msgstr "Ad body is required"
@@ -450,7 +454,7 @@ msgstr "City"
 msgid "City is required"
 msgstr "City is required"
 
-#: src/components/Creatives/NewsPreview.tsx:75
+#: src/components/Creatives/NewsPreview.tsx:69
 msgid "Click Here!"
 msgstr "Click Here!"
 
@@ -847,7 +851,7 @@ msgstr "Enter Ads Manager"
 msgid "Enter your email address to get a secure login link. Use this link to access your Brave Ads account."
 msgstr "Enter your email address to get a secure login link. Use this link to access your Brave Ads account."
 
-#: src/user/ads/NotificationAd.tsx:73
+#: src/user/ads/NotificationAd.tsx:79
 msgid "Example - https://brave.com/brave-rewards/"
 msgstr "Example - https://brave.com/brave-rewards/"
 
@@ -1010,7 +1014,7 @@ msgstr "I would like to receive marketing emails about new features and promotio
 msgid "Image"
 msgstr "Image"
 
-#: src/components/Assets/ImagePreview.tsx:56
+#: src/components/Assets/ImagePreview.tsx:58
 msgid "Image failed to load"
 msgstr "Image failed to load"
 
@@ -1174,6 +1178,10 @@ msgstr "Logging in"
 msgid "Make payment & submit for approval"
 msgstr "Make payment & submit for approval"
 
+#: src/user/ads/NotificationAd.tsx:68
+msgid "Make sure to include your brand name in the title OR body of the ad. Otherwise, it will be rejected."
+msgstr "Make sure to include your brand name in the title OR body of the ad. Otherwise, it will be rejected."
+
 #: src/auth/registration/AccountChoice.tsx:72
 #~ msgid "Managed service"
 #~ msgstr "Managed service"
@@ -1819,7 +1827,7 @@ msgstr "Take our survey!"
 #~ msgstr "Tap into over <0>9 billion</0> annual Web searches"
 
 #: src/user/ads/InlineContentAd.tsx:84
-#: src/user/ads/NotificationAd.tsx:72
+#: src/user/ads/NotificationAd.tsx:78
 msgid "Target URL"
 msgstr "Target URL"
 
@@ -1883,7 +1891,7 @@ msgstr "The username or password did not match our records."
 #~ msgid "Third party tracking acknowledgement is required"
 #~ msgstr "Third party tracking acknowledgement is required"
 
-#: src/components/Creatives/NewsPreview.tsx:54
+#: src/components/Creatives/NewsPreview.tsx:52
 msgid "This is a news display ad, it wll look like part of the news feed."
 msgstr "This is a news display ad, it wll look like part of the news feed."
 
diff --git a/src/locales/es.po b/src/locales/es.po
index 4df3a497..1cf67bd9 100644
--- a/src/locales/es.po
+++ b/src/locales/es.po
@@ -85,6 +85,10 @@ msgstr ""
 msgid "Activate"
 msgstr ""
 
+#: src/components/Creatives/NewsPreview.tsx:90
+msgid "Ad"
+msgstr ""
+
 #: src/validation/CreativeSchema.tsx:45
 msgid "Ad body is required"
 msgstr ""
@@ -454,7 +458,7 @@ msgstr ""
 msgid "City is required"
 msgstr ""
 
-#: src/components/Creatives/NewsPreview.tsx:75
+#: src/components/Creatives/NewsPreview.tsx:69
 msgid "Click Here!"
 msgstr ""
 
@@ -851,7 +855,7 @@ msgstr ""
 msgid "Enter your email address to get a secure login link. Use this link to access your Brave Ads account."
 msgstr ""
 
-#: src/user/ads/NotificationAd.tsx:73
+#: src/user/ads/NotificationAd.tsx:79
 msgid "Example - https://brave.com/brave-rewards/"
 msgstr ""
 
@@ -1018,7 +1022,7 @@ msgstr ""
 msgid "Image"
 msgstr ""
 
-#: src/components/Assets/ImagePreview.tsx:56
+#: src/components/Assets/ImagePreview.tsx:58
 msgid "Image failed to load"
 msgstr ""
 
@@ -1182,6 +1186,10 @@ msgstr ""
 msgid "Make payment & submit for approval"
 msgstr ""
 
+#: src/user/ads/NotificationAd.tsx:68
+msgid "Make sure to include your brand name in the title OR body of the ad. Otherwise, it will be rejected."
+msgstr ""
+
 #: src/auth/registration/AccountChoice.tsx:72
 #~ msgid "Managed service"
 #~ msgstr ""
@@ -1827,7 +1835,7 @@ msgstr ""
 #~ msgstr ""
 
 #: src/user/ads/InlineContentAd.tsx:84
-#: src/user/ads/NotificationAd.tsx:72
+#: src/user/ads/NotificationAd.tsx:78
 msgid "Target URL"
 msgstr ""
 
@@ -1891,7 +1899,7 @@ msgstr ""
 #~ msgid "Third party tracking acknowledgement is required"
 #~ msgstr ""
 
-#: src/components/Creatives/NewsPreview.tsx:54
+#: src/components/Creatives/NewsPreview.tsx:52
 msgid "This is a news display ad, it wll look like part of the news feed."
 msgstr ""
 
diff --git a/src/locales/pt.po b/src/locales/pt.po
index 2f89ab15..0d05c9ec 100644
--- a/src/locales/pt.po
+++ b/src/locales/pt.po
@@ -85,6 +85,10 @@ msgstr ""
 msgid "Activate"
 msgstr ""
 
+#: src/components/Creatives/NewsPreview.tsx:90
+msgid "Ad"
+msgstr ""
+
 #: src/validation/CreativeSchema.tsx:45
 msgid "Ad body is required"
 msgstr ""
@@ -454,7 +458,7 @@ msgstr ""
 msgid "City is required"
 msgstr ""
 
-#: src/components/Creatives/NewsPreview.tsx:75
+#: src/components/Creatives/NewsPreview.tsx:69
 msgid "Click Here!"
 msgstr ""
 
@@ -851,7 +855,7 @@ msgstr ""
 msgid "Enter your email address to get a secure login link. Use this link to access your Brave Ads account."
 msgstr ""
 
-#: src/user/ads/NotificationAd.tsx:73
+#: src/user/ads/NotificationAd.tsx:79
 msgid "Example - https://brave.com/brave-rewards/"
 msgstr ""
 
@@ -1018,7 +1022,7 @@ msgstr ""
 msgid "Image"
 msgstr ""
 
-#: src/components/Assets/ImagePreview.tsx:56
+#: src/components/Assets/ImagePreview.tsx:58
 msgid "Image failed to load"
 msgstr ""
 
@@ -1182,6 +1186,10 @@ msgstr ""
 msgid "Make payment & submit for approval"
 msgstr ""
 
+#: src/user/ads/NotificationAd.tsx:68
+msgid "Make sure to include your brand name in the title OR body of the ad. Otherwise, it will be rejected."
+msgstr ""
+
 #: src/auth/registration/AccountChoice.tsx:72
 #~ msgid "Managed service"
 #~ msgstr ""
@@ -1827,7 +1835,7 @@ msgstr ""
 #~ msgstr ""
 
 #: src/user/ads/InlineContentAd.tsx:84
-#: src/user/ads/NotificationAd.tsx:72
+#: src/user/ads/NotificationAd.tsx:78
 msgid "Target URL"
 msgstr ""
 
@@ -1891,7 +1899,7 @@ msgstr ""
 #~ msgid "Third party tracking acknowledgement is required"
 #~ msgstr ""
 
-#: src/components/Creatives/NewsPreview.tsx:54
+#: src/components/Creatives/NewsPreview.tsx:52
 msgid "This is a news display ad, it wll look like part of the news feed."
 msgstr ""
 
diff --git a/src/user/ads/NotificationAd.tsx b/src/user/ads/NotificationAd.tsx
index b5d7738a..f5f99106 100644
--- a/src/user/ads/NotificationAd.tsx
+++ b/src/user/ads/NotificationAd.tsx
@@ -64,6 +64,18 @@ const NotificationAdForm = (props: NotificationAdProps) => {
         maxLengthInstantFeedback={60}
       />
 
+      <Typography
+        variant="caption"
+        textAlign="center"
+        display="block"
+        fontWeight={500}
+      >
+        <Trans>
+          Make sure to include your brand name in the title OR body of the ad.
+          Otherwise, it will be rejected.
+        </Trans>
+      </Typography>
+
       <NotificationPreview />
 
       <UrlResolver