Add footer and small text fixes

brave-intl · Jul 18, 2024 · 4b5e0c9 · 4b5e0c9
1 parent 4ac5131
commit 4b5e0c9
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 17 deletions.
diff --git a/nextjs/src/app/[locale]/publishers/home/channels/ChannelCard.tsx b/nextjs/src/app/[locale]/publishers/home/channels/ChannelCard.tsx
@@ -82,7 +82,7 @@ export default function ChannelCard({ channel, publisherId, onChannelDelete }) {
         </div>
         <div>{displayVerified()}</div>
       </section>
-      <h3 className='pb-3'>{channel.details.publication_title || defaultName}</h3>
+      <h3 className='pb-3 break-words'>{channel.details.publication_title || defaultName}</h3>
       <section className='pb-1'>
         {isUnverifiedChannel() ? (
           <div className='error-text mt-3'>

diff --git a/nextjs/src/app/[locale]/publishers/layout.jsx b/nextjs/src/app/[locale]/publishers/layout.jsx
@@ -148,6 +148,15 @@ export default function NavigationLayout({ children }) {
         </div>
         <div className={`${isNavOpen ? 'flex' : 'hidden'} bg-gray-400`}></div>
       </div>
+      <div className={`${styles['footer']} text-center small-regular color-subtle`}>
+        <a className={`${styles['footer-link']} color-tertiary`} rel="noopener" href='https://brave.com/'>{t('shared.brave_copyright')}</a>
+        <span className={`${styles['footer-divider']}`}>|</span>
+        <a className={`${styles['footer-link']} color-tertiary`} rel="noopener" href='https://basicattentiontoken.org/publisher-terms-of-service/'>{t('shared.terms_of_use')}</a>
+        <span className={`${styles['footer-divider']}`}>|</span>
+        <a className={`${styles['footer-link']} color-tertiary`} rel="noopener" href='https://brave.com/privacy/publishers-creators/'>{t('shared.privacy_policy')}</a>
+        <span className={`${styles['footer-divider']}`}>|</span>
+        <a className={`${styles['footer-link']} color-tertiary`} rel="noopener" href='https://hackerone.com/brave?type=team'>{t('shared.security_issue')}</a>
+      </div>
     </UserProvider>
   );
 }
diff --git a/nextjs/src/app/[locale]/publishers/security/page.tsx b/nextjs/src/app/[locale]/publishers/security/page.tsx
@@ -108,9 +108,9 @@ export default function SecurityPage() {
                 </div>
               </div>
             </div>
-
-            <hr className='my-4' />
-
+          </div>
+          <hr className='my-4' />
+          <div className='max-w-screen-md'>
             <div className='mb-3 mt-4 flex flex-col justify-between md:flex-row '>
               <div className='md:w-[80%]'>
                 <h3 className='mb-2'>{t('security.index.totp.heading')}</h3>
@@ -147,9 +147,9 @@ export default function SecurityPage() {
                 <PhoneOutline className='mt-3 hidden h-[70px] w-[40px] md:block' />
               </div>
             </div>
-
-            <hr className='my-4' />
-
+          </div>
+          <hr className='my-4' />
+          <div className='max-w-screen-md'>
             <div className='mb-3 mt-4 flex flex-col justify-between md:flex-row'>
               <div className='md:w-[80%]'>
                 <h3 className='mb-2'>{t('security.index.u2f.heading')}</h3>

diff --git a/nextjs/src/components/Container.tsx b/nextjs/src/components/Container.tsx
@@ -10,7 +10,7 @@ const Container: FC<Props> = ({ children, className }) => {
   return (
     <div
       className={clsx(
-        'container content-background rounded p-0.5 md:p-4 m-1 transition-colors',
+        'container content-background rounded m-1 transition-colors',
         className,
       )}
     >

diff --git a/nextjs/src/messages/en.json b/nextjs/src/messages/en.json
@@ -45,14 +45,18 @@
     "bitflyer": "bitFlyer",
     "dismiss": "Dismiss",
     "learn_more": "Learn more",
+    "brave_copyright": "2024 © Brave Software, Inc.",
+    "terms_of_use": "Terms of Use",
+    "privacy_policy": "Privacy Policy",
+    "security_issue": "Report a security issue",
     "channel_names": {
       "site": "Website",
       "twitter": "X",
       "reddit": "Reddit",
       "vimeo": "Vimeo",
-      "youtube": "Youtube",
+      "youtube": "YouTube",
       "twitch": "Twitch",
-      "github": "Github"
+      "github": "GitHub"
     }
   },
   "activerecord": {
@@ -85,7 +89,7 @@
     "support": "Support",
     "crypto_contributions_header": "Receive crypto contributions",
     "crypto_contributions_text": "Connect your favorite Ethereum and Solana wallets for each of your channels and receive contributions from your fans",
-    "contribution_banners": "Contribution banners"
+    "contribution_banners": "Contribution pages"
   },
   "Home": {
     "headings": {
@@ -140,7 +144,7 @@
       "addressConnectFailure": "Connecting new address failed",
       "solanaConnectionFailure": "Solana connection was interrupted",
       "notConnected": "Not Connected",
-      "channelPageLink": "View Channel Page",
+      "channelPageLink": "View contribution page",
       "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",

diff --git a/nextjs/src/messages/ja.json b/nextjs/src/messages/ja.json
@@ -157,7 +157,7 @@
   "shared": {
     "add_channel": "チャンネルを追加",
     "app_title": "Brave クリエイター",
-    "app_description": "Webサイトや、YoutubeやTwitchにチャンネルをお持ちですか？ 認証を行うと閲覧者からの支援を受け収益化することができます。",
+    "app_description": "Webサイトや、YouTubeやTwitchにチャンネルをお持ちですか？ 認証を行うと閲覧者からの支援を受け収益化することができます。",
     "cancel": "キャンセル",
     "channel_created": "チャンネルを作成しました。24-48時間以内に認証ステータスが表示されます。",
     "channel_contested": "チャンネルは %{time_until_transfer}以内に現在の所有者から移管されます",
@@ -200,14 +200,18 @@
     "bitflyer": "bitFlyer",
     "dismiss": "取消",
     "learn_more": "詳細はこちら",
+    "brave_copyright": "2024 © Brave Software, Inc.",
+    "terms_of_use": "利用規約",
+    "privacy_policy": "プライバシーポリシー",
+    "security_issue": "セキュリティに関する問題を報告",
     "channel_names": {
       "site": "Webサイト",
       "twitter": "X（旧Twitter）",
       "reddit": "Reddit",
       "vimeo": "Vimeo",
-      "youtube": "Youtube",
+      "youtube": "YouTube",
       "twitch": "Twitch",
-      "github": "Github"
+      "github": "GitHub"
     }
   },
   "totp_registrations": {

diff --git a/nextjs/src/styles/Layout.module.css b/nextjs/src/styles/Layout.module.css
@@ -31,4 +31,26 @@
 	padding: 12px 0;
 	box-shadow: 0 4px 16px -2px rgba(0 0 0 / 10%), 0 1px 0 0 rgba(0 0 0 / 5%);
 	position:relative;
+}
+
+.footer {
+	padding: var(--leo-spacing-2xl) var(--leo-spacing-xl) var(--leo-spacing-2xl) var(--leo-spacing-xl);
+	margin-left: 280px;
+}
+
+.footer-divider {
+	padding: 0 8px;
+}
+
+.footer-link {
+	--leo-color-text-interactive: var(--leo-color-text-tertiary);
+	--visited-color: var(--leo-color-text-tertiary);
+}
+
+@media (width <= 768px) {
+  .footer {
+  	border-top: 1px solid var(--leo-color-divider-strong);
+    margin-left: 0;
+    padding: var(--leo-spacing-2xl) var(--leo-spacing-3xl);
+  }
 }
diff --git a/nextjs/src/styles/globals.css b/nextjs/src/styles/globals.css
@@ -25,7 +25,7 @@ html {
 
 body {
   color: var(--leo-color-text-primary);
-  background: var(--leo-color-page-background);
+  background: var(--leo-color-container-background);
   font: var(--leo-font-default-regular);
 }
 
@@ -112,6 +112,10 @@ h4.mobile {
   color: var(--leo-color-text-secondary);
 }
 
+.color-subtle {
+  color: var(--leo-color-divider-subtle);
+}
+
 .label-component {
   color: var(--leo-color-text-secondary);
   line-height: var(--leo-typography-components-label-line-height);
@@ -163,17 +167,19 @@ h4.mobile {
   height: 100%;
   min-height: calc(100vh - 80px);
 
-  background: var(--leo-color-page-background);
   width: 100%;
 }
 
 .content-background {
   background: var(--leo-color-page-background);
+  padding: var(--leo-spacing-4xl);
   width: 100%;
+  border-radius: var(--leo-radius-xl) var(--leo-radius-m) var(--leo-radius-m) var(--leo-radius-xl);
 }
 
 @media (width <= 768px) {
   .content-background, .main {
+    padding: 5px;
     background: var(--leo-color-container-background);
   }
 }

diff --git a/nextjs/src/styles/variables.css b/nextjs/src/styles/variables.css
@@ -38,6 +38,7 @@
   --leo-font-components-tableheader: 500 13px/15.6px 'Inter';
   --leo-font-components-label: 700 10px/12px 'Inter';
   --leo-typography-components-label-font-weight: 700;
+
 
   /* this needs to be fixed in Leo */
   --leo-color-text-primary: rgb(13 15 20);