Add routing for public channel pages, add layout and style fixes

brave-intl · Aug 29, 2024 · ece9c7c · ece9c7c
1 parent 92926dd
commit ece9c7c
Show file tree

Hide file tree

Showing 17 changed files with 286 additions and 110 deletions.
diff --git a/app/controllers/api/nextv1/public_channel_controller.rb b/app/controllers/api/nextv1/public_channel_controller.rb
@@ -1,4 +1,6 @@
 class Api::Nextv1::PublicChannelController < Api::Nextv1::BaseController
+  skip_before_action :authenticate_publisher!
+
   def show
     channel = Channel.includes(:site_banner).find_by(public_identifier: params[:public_identifier])
     channel_title = channel&.publication_title

diff --git a/config/routes.rb b/config/routes.rb
@@ -221,7 +221,7 @@
         resource :uphold_connection, except: [:new]
       end
 
-      get "c/:public_identifier", to: "public_channel#show", as: :public_channel
+      get "public_channel/:public_identifier", to: "public_channel#show", as: :public_channel
       get "/get_ratios", to: "public_channel#get_ratios"
     end
 

diff --git a/nextjs/package-lock.json b/nextjs/package-lock.json
diff --git a/nextjs/public/images/brave_creators_full_logo.png b/nextjs/public/images/brave_creators_full_logo.png
diff --git a/nextjs/public/images/brave_logo_dark_bg.png b/nextjs/public/images/brave_logo_dark_bg.png
diff --git a/nextjs/public/images/brave_logo_dark_bg.svg b/nextjs/public/images/brave_logo_dark_bg.svg
diff --git a/nextjs/scripts/create-local-server.js b/nextjs/scripts/create-local-server.js
@@ -21,7 +21,8 @@ const nextAllowPageRoutes = [
   'publishers/totp_registrations/new',
   'publishers/u2f_registrations/new',
   'publishers/home',
-  'publishers/contribution_page'
+  'publishers/contribution_page',
+  'c/*'
 ];
 const routeMatch = [
   nextAllowPageRoutes.map((r) => `ja/${r}`).join('|'),

diff --git a/nextjs/src/app/[locale]/c/[public_identifier]/CryptoPaymentWidget.jsx b/nextjs/src/app/[locale]/c/[public_identifier]/CryptoPaymentWidget.jsx
@@ -443,12 +443,12 @@ export default function CryptoPaymentWidget({title, cryptoAddresses, cryptoConst
     return (
       <div className={`${styles['crypto-widget-wrapper']}`}>
         <div className={`${styles['heading-wrapper']}`}>
-          <div className={`${styles['widget-subheading']}`}>
+          <div className='default-regular'>
             {t("publicChannelPage.paymentSubHeading")}
           </div>
-          <div className={`${styles['widget-heading']}`}>
+          <h3 className={`${styles['widget-heading']}`}>
             {t("publicChannelPage.paymentHeading")}
-          </div>
+          </h3>
         </div>
         <div className={`${styles['payment-options']}`}>
           <Select
@@ -531,13 +531,13 @@ export default function CryptoPaymentWidget({title, cryptoAddresses, cryptoConst
               />
             </div>
             <div className="col-span-12 md:col-span-5 text-right align-top">
-              <div className={`${styles['large-currency-display']}`}>
+              <h2 className={`${styles['large-currency-display']}`}>
                 {toggle === 'crypto' ? (
                     <span>{roundCryptoPrice()} <span className={`${styles['currency']} align-middle`}>{displayChain}</span></span>
                   ) : (
                     <span>${currentAmount} <span className={`${styles['currency']} align-middle`}>USD</span></span>
                   )}
-              </div>
+              </h2>
               <div className={`${styles['small-currency-display']}`}>
                 {toggle === 'fiat' ? (
                     <span>{roundCryptoPrice()} {displayChain}</span>
@@ -582,6 +582,7 @@ export default function CryptoPaymentWidget({title, cryptoAddresses, cryptoConst
           isOpen={isModalOpen}
           showClose={true}
           onClose={() => setIsModalOpen(false)}
+          className={`${styles['qr-modal']}`}
         >
           <QRCodeModal
             address={addresses[baseChain()]}
@@ -593,6 +594,7 @@ export default function CryptoPaymentWidget({title, cryptoAddresses, cryptoConst
           isOpen={isTryBraveModalOpen}
           showClose={true}
           onClose={() => isTryBraveModalOpen(false)}
+          className={`${styles['try-brave-modal']}`}
         >
           <TryBraveModal />
         </Dialog>

diff --git a/nextjs/src/app/[locale]/c/[public_identifier]/PublicChannelPage.jsx b/nextjs/src/app/[locale]/c/[public_identifier]/PublicChannelPage.jsx
@@ -22,7 +22,7 @@ export default function PublicChannelPage({publicIdentifier, previewMode}) {
   const [url, setUrl] = useState('');
 
   async function fetchChannelData() {
-    const channelData = await apiRequest(`c/${publicIdentifier}`);
+    const channelData = await apiRequest(`public_channel/${publicIdentifier}`);
 
     const siteBannerData = channelData.site_banner;
     setTitle(siteBannerData.title);
@@ -64,12 +64,12 @@ export default function PublicChannelPage({publicIdentifier, previewMode}) {
         <div className={`${styles['image-container']}`}>
           <div style={{ '--cover-url': `url('${coverUrl}')` }} className={`${styles['cover']}`}></div>
         </div>
-        <div className='container'>
+        <div className='container mx-auto'>
           <div className='grid grid-cols-1 lg:grid-cols-2'>
             <div className={`${styles['description-container']} px-4`}>
               <div className={`${styles['logo']}`} style={{ '--logo-url': `url('${logoUrl}')` }}></div>
-              <div className={`${styles['creator-title']}`}>{title} <Icon name='verification-filled-color' className='inline-block' /></div>
-              <div className={`${styles['creator-description']}`}>{description}</div>
+              <h1 className={`${styles['creator-title']}`}>{title} <Icon name='verification-filled-color' className='inline-block' /></h1>
+              <div className={`${styles['creator-description']} large-regular`}>{description}</div>
               <div>
                 {Object.keys(socialLinks).map((key) => {
                   if (socialLinks[key].length) {

diff --git a/nextjs/src/app/[locale]/c/[public_identifier]/QRCodeModal.jsx b/nextjs/src/app/[locale]/c/[public_identifier]/QRCodeModal.jsx
@@ -46,17 +46,17 @@ export default function QRCodeModal({address, chain, displayChain}) {
   return (
     <div>
       <div className={`${styles['qr-title']}`}>
-        {t('publicChannelPage.QRModalHeader')}
+        <h2>{t('publicChannelPage.QRModalHeader')}</h2>
           {displayChain.includes('BAT') ? (
-            <div className={`${styles['qr-subtitle']}`}>{t('publicChannelPage.QRBatText', {chain: t(`publicChannelPage.${chain}`)})}</div>
+            <div className={`${styles['qr-subtitle']} default-regular`}>{t('publicChannelPage.QRBatText', {chain: t(`publicChannelPage.${chain}`)})}</div>
           ) : (
-            <div className={`${styles['qr-subtitle']}`}>{t('publicChannelPage.QRStandardText', {chain})}</div>
+            <div className={`${styles['qr-subtitle']} default-regular`}>{t('publicChannelPage.QRStandardText', {chain})}</div>
           )}
       </div>
-      <div id="qr-wrapper" ref={ref} className={`text-center ${styles['crypto-option']}`}></div>
+      <div id="qr-wrapper" ref={ref} className={`text-center ${styles['qr-box']}`}></div>
       <div className={`${styles['qr-text']}`}>
         <div className={`${styles['qr-text-item']}`}>
-          <Icon name='smartphone-laptop' className="pr-3"/>
+          <Icon name='smartphone-laptop' className={`${styles['qr-text-icon']} pr-3 color-interactive`} />
         </div>
         <div className={`${styles['qr-text-item']}`}>
           {t('publicChannelPage.QRModalText')}