Merge pull request #4525 from brave-intl/feat/good-first-issues

Feat/good first issues

app/assets/stylesheets/theme/panels.scss

@@ -3,6 +3,14 @@ $brave-panels-borderRadius: 8px;
 .panels-container {
   padding: 0 15px;
 }
+// bootstrap replacements
+.my-3 {
+  margin-top: 1rem !important;
+}
+
+.text-left {
+  text-align: left !important;
+}
 
 .single-panel {
   &--wrapper {
@@ -69,6 +77,7 @@ $brave-panels-borderRadius: 8px;
     text-align: center;
     justify-content: center;
     flex: 1;
+    font-family: $font-family-base;
 
     &--platforms {
       padding-top: $spacer * 2;

app/views/publishers/two_factor_authentications_removals/new.html.slim

@@ -6,9 +6,11 @@
 
       h4.single-panel--headline= t("publishers.two_factor_authentication_removal.heading")
 
-      p= t("publishers.two_factor_authentication_removal.leadin")
+      .my-3.text-left
+        p= t("publishers.two_factor_authentication_removal.leadin")
 
-      == t("publishers.two_factor_authentication_removal.note")
+      .my-3.text-left
+        == t("publishers.two_factor_authentication_removal.note")
       .my-3.text-left
         == t("publishers.two_factor_authentication_removal.removals")
 

config/locales/en.yml

@@ -688,11 +688,11 @@ en:
       leadin: If you've lost your authenticator app or device, access can be restored by removing your 2-factor security settings.
       note: Please note, for your security, we require a <strong>2 day waiting period</strong> for the 2-factor authentication removal to complete
       removals: >
-        <ul>
+        <ol>
           <li>The account channels will need to be re-verified.</li>
           <li>The account wallet will need to be re-verified.</li>
           <li>There will be a 30-day waiting period on payments.</li>
-        </ul>
+        </ol>
 
       reminder_body_html: >
         This is a friendly reminder that the requested changes to your security settings are in progress. In %{remainder}, 2-factor authentication will be removed from your account. Please note, once your 2-factor authentication is removed:

config/locales/ja.yml

@@ -660,7 +660,7 @@ ja:
       heading: 二要素認証に問題がありますか？
       leadin: 認証アプリまたはデバイスを紛失した場合、二要素セキュリティ設定を削除することでアクセスできます。
       note: セキュリティ上の理由から、2要素認証の削除を完了するには、<strong> 2日間の待機期間</strong>が必要です。
-      removals: "<ul><li>アカウントチャンネルを再認証する必要があります。</li><li>アカウントウォレットを再認証する必要があります。</li><li>支払いには30日間の待機期間があります。</li></ul>"
+      removals: "<ol><li>アカウントチャンネルを再認証する必要があります。</li><li>アカウントウォレットを再認証する必要があります。</li><li>支払いには30日間の待機期間があります。</li></ol>"
 
       reminder_body_html: "セキュリティ設定に対して変更しようとしています。%{remainder}では、この後二要素認証がアカウントから削除されます。 二要素認証削除に付随して、以下の点にご注意ください：<ul><li>アカウントチャンネルを再認証する必要があります。</li><li>アカウントウォレットを再認証する必要があります。</li><li>支払いには30日間の待機期間があります。</li></ul>"
       reminder_body_two_html: >

nextjs/src/app/[locale]/layout.tsx

@@ -25,7 +25,7 @@ export async function generateMetadata({ params: { locale }}) {
   return {
     title: {
       default: t("title"),
-      template: `%s | ${t("title")}`,
+      template: `${t("title")} - %s`,
     },
     description: t("description"),
     robots: { index: true, follow: true },

nextjs/src/app/[locale]/publishers/home/channels/AddChannelModal.tsx

@@ -8,18 +8,14 @@ import styles from '@/styles/ChannelCard.module.css';
 
 export default function AddChannelModal() {
   const t = useTranslations();
-  const channels = ['website', 'youtube', 'twitch', 'x', 'vimeo', 'reddit'];
-
-  function capitalizeFirstLetter(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-  }
+  const channels = ['site', 'youtube', 'twitch', 'x', 'vimeo', 'reddit'];
 
   async function addChannel(channel) {
     axios.defaults.xsrfCookieName = 'CSRF-TOKEN';
     axios.defaults.xsrfHeaderName = 'X-CSRF-Token';
     axios.defaults.withCredentials = true;
 
-    if (channel === 'website') {
+    if (channel === 'site') {
       window.location.pathname = '/site_channels/new';
     } else if (channel === 'x') {
       const response = await axios({
@@ -52,9 +48,9 @@ export default function AddChannelModal() {
               <Icon
                 className='mx-auto mb-2 inline-block'
                 forceColor={true}
-                name={channel === 'website' ? 'globe' : `social-${channel}`}
+                name={channel === 'site' ? 'globe' : `social-${channel}`}
               />
-              <h4 className='pb-1'>{capitalizeFirstLetter(channel)}</h4>
+              <h4 className='pb-1'>{t(`shared.channel_names.${channel}`)}</h4>
               <p className='color-tertiary small-regular'>
                 {t(`Home.channels.${channel}_prompt`)}
               </p>

nextjs/src/app/[locale]/publishers/home/layout.jsx

@@ -0,0 +1,23 @@
+import { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+
+export function generateStaticParams() {
+  return [{ locale: 'en' }, { locale: 'ja' }];
+}
+
+// Look at @/constant/config to change them
+export async function generateMetadata({ params: { locale }}) {
+  const t = await getTranslations({ locale, namespace: 'metadata'});
+  return {
+    title: t('dashboard'),
+    description: t("description"),
+    icons: {
+      icon: '/favicon/favicon.ico',
+    },
+    manifest: `/favicon/site.webmanifest`,
+  };
+}
+
+export default async function RootLayout({ children }) {
+  return <>{children}</>;
+}

nextjs/src/messages/en.json

@@ -1,6 +1,7 @@
 {
   "metadata": {
     "title": "Brave Creators",
+    "dashboard": "Dashboard",
     "description": "Sign up with Brave Creators to begin receiving contributions from your fans and supporters. Register your website or social media accounts now to begin receiving payouts and contributions. Earn more with Brave Creators."
   },
   "shared": {
@@ -57,6 +58,7 @@
     "channel_names": {
       "site": "Website",
       "twitter": "X",
+      "x": "X",
       "reddit": "Reddit",
       "vimeo": "Vimeo",
       "youtube": "YouTube",
@@ -109,7 +111,7 @@
       "custodial_accounts": "Payout account",
       "connected_account": "Connected account:",
       "deposit_currency": "You receive:",
-      "country_label": "Select your country",
+      "country_label": "Select your region",
       "country_placeholder": "Select one",
       "connect_prompt": "Connect an account to receive BAT contributions and monthly payouts. Select your country to see a list of available account providers. ",
       "country_disclaimer": "You won’t be eligible for monthly payouts until you connect a custodial account. ",
@@ -125,7 +127,7 @@
       "incomplete": "INCOMPLETE",
       "add_channel": "Add channel",
       "add_channel_prompt": "Let's start with choosing where you're publishing your content:",
-      "website_prompt": "I have my own website and have access to the domain directory.",
+      "site_prompt": "I have my own website and have access to the domain directory.",
       "youtube_prompt": "I own or manage a YouTube channel.",
       "twitch_prompt": "I'm the primary owner of a Twitch channel.",
       "x_prompt": "I own or manage an X account.",
@@ -153,7 +155,7 @@
       "privacyHeader": "Privacy reminder",
       "privacyNotification": "Using the same crypto address for multiple channels will allow others to know that those channels all belong to you. If you don't want others to know, use a different crypto address for each of your channels.",
       "privacyQuit": "Cancel",
-      "privacyContinue": "I understand and would like to continue"
+      "privacyContinue": "I understand"
     }
   },
   "Settings": {

nextjs/src/messages/ja.json

@@ -1,6 +1,7 @@
 {
   "metadata": {
     "title": "Brave クリエイター",
+    "dashboard": "ダッシュボード",
     "description": "Brave Creatorsに登録して、ファンやサポーターからの支援を受け取り始めましょう。ウェブサイトやソーシャルメディアアカウントを今すぐ登録して、支払いや支援の受け取りを開始しましょう。Brave Creatorsでより多くの収益を得ることができます。"
   },
   "NavDropdown": {
@@ -211,6 +212,7 @@
     "channel_names": {
       "site": "Webサイト",
       "twitter": "X（旧Twitter）",
+      "x": "X（旧Twitter）",
       "reddit": "Reddit",
       "vimeo": "Vimeo",
       "youtube": "YouTube",
@@ -291,7 +293,7 @@
       "incomplete": "未完了",
       "add_channel": "チャンネルを追加",
       "add_channel_prompt": "チャンネルとは、YouTubeチャンネル、Redditアカウント、自分のWebサイトなど、あなたが所有するWeb上のアカウントやサイトなどを指します。",
-      "website_prompt": "私は自分のWebサイトを持っていて、ドメイン・ディレクトリにアクセスできます。",
+      "site_prompt": "私は自分のWebサイトを持っていて、ドメイン・ディレクトリにアクセスできます。",
       "youtube_prompt": "私はYouTubeチャンネルを所有、または管理しています。",
       "twitch_prompt": "私はTwitchチャンネルのメインオーナーです。",
       "x_prompt": "私はXアカウントを所有、または管理しています。",

nextjs/src/styles/ChannelCard.module.css

@@ -85,7 +85,7 @@
   font-weight: 400;
   line-height: 26px;
   letter-spacing: -0.2px;
-  padding-top: 20px;
+  padding-top: 40px;
 }
 
 .privacy-button-container {

nextjs/src/styles/globals.css

@@ -183,7 +183,7 @@ hr {
 @media (width <= 468px) {
   .content-background, .main {
     margin:0;
-    padding: 0;
+    padding: 10px;
     background: var(--leo-color-container-background);
   }
 }

test/system/nextjs/publishers_home_test.rb

@@ -56,7 +56,7 @@ class PublishersHomeTest < ApplicationSystemTestCase
     assert_content page, "Website"
     assert_content page, "YouTube"
 
-    page.find("#add-website").click
+    page.find("#add-site").click
 
     assert_current_path(/site_channels\/new/)
   end