From 540b91ec90b17f343a9f62f1ddfab215587f3765 Mon Sep 17 00:00:00 2001 From: Jennifer Byrne Date: Wed, 4 Sep 2024 16:24:13 -0500 Subject: [PATCH] Further fixes for the contribution page, some nala corrections and updates --- nextjs/package-lock.json | 255 +++++++++--------- nextjs/package.json | 2 +- nextjs/scripts/create-local-server.js | 2 +- nextjs/src/app/[locale]/c/layout.jsx | 9 +- .../publishers/contribution_page/page.jsx | 60 +++-- .../contribution_page/preview/preview.jsx | 4 +- .../src/styles/ContributionBanner.module.css | 19 +- .../src/styles/PublicChannelPage.module.css | 2 + nextjs/src/styles/PublicLayout.module.css | 4 +- nextjs/src/styles/globals.css | 24 +- nextjs/src/styles/variables.css | 30 +-- nextjs/tailwind.config.ts | 2 +- 12 files changed, 200 insertions(+), 213 deletions(-) diff --git a/nextjs/package-lock.json b/nextjs/package-lock.json index b5a72c198b..ec20f976fa 100644 --- a/nextjs/package-lock.json +++ b/nextjs/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.0", "hasInstallScript": true, "dependencies": { - "@brave/leo": "github:brave/leo#862f4d19a6a52906d097f2366cd4208a11c9bfc1", + "@brave/leo": "github:brave/leo#140cf08aa03bdf0d45455c0237ee3a00963e6093", "@fontsource/dm-mono": "5.0.19", "@fontsource/inter": "5.0.17", "@fontsource/poppins": "5.0.12", @@ -2109,12 +2109,12 @@ }, "node_modules/@brave/leo": { "version": "0.0.1", - "resolved": "git+ssh://git@github.com/brave/leo.git#862f4d19a6a52906d097f2366cd4208a11c9bfc1", - "integrity": "sha512-R/eT1/YyjM1VHfoHGg7vZj1mYAvjKDaztDt+oJRtK2dsYkqs0yVF2upDB9GafgTKuWr+rSUNRDA5GtirfTqBNg==", + "resolved": "git+ssh://git@github.com/brave/leo.git#140cf08aa03bdf0d45455c0237ee3a00963e6093", + "integrity": "sha512-m9dw9bskxWF/nzsOLt0V7bcYj71w8MlP6VALdDaE147KdZmz0iIoQdu6oEX77vww72puzHukr0vtLALn9aWMTg==", "license": "MIT", "dependencies": { "@storybook/test": "8.1.11", - "svelte": "4.2.18", + "svelte": "4.2.19", "svelte-preprocess": "5.1.4", "tailwindcss": "3.2.6", "tslib": "2.5.0" @@ -3504,6 +3504,126 @@ "node": ">= 10" } }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz", + "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz", + "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz", + "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz", + "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz", + "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz", + "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz", + "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz", + "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@noble/curves": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.5.0.tgz", @@ -15655,9 +15775,10 @@ } }, "node_modules/svelte": { - "version": "4.2.18", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.18.tgz", - "integrity": "sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==", + "version": "4.2.19", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz", + "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==", + "license": "MIT", "dependencies": { "@ampproject/remapping": "^2.2.1", "@jridgewell/sourcemap-codec": "^1.4.15", @@ -17682,126 +17803,6 @@ "funding": { "url": "https://github.com/sponsors/colinhacks" } - }, - "node_modules/@next/swc-darwin-x64": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz", - "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-gnu": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz", - "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-musl": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz", - "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-gnu": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz", - "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-musl": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz", - "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-arm64-msvc": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz", - "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-ia32-msvc": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz", - "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-x64-msvc": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz", - "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } } } } diff --git a/nextjs/package.json b/nextjs/package.json index 1441c46517..c40e4d34fe 100644 --- a/nextjs/package.json +++ b/nextjs/package.json @@ -18,7 +18,7 @@ "typecheck": "tsc --noEmit --incremental false" }, "dependencies": { - "@brave/leo": "github:brave/leo#862f4d19a6a52906d097f2366cd4208a11c9bfc1", + "@brave/leo": "github:brave/leo#4596893bbc1f7bbf1ef4d2e0ddca63b570cb997f", "@fontsource/poppins": "5.0.12", "@fontsource/inter": "5.0.17", "@fontsource/dm-mono": "5.0.19", diff --git a/nextjs/scripts/create-local-server.js b/nextjs/scripts/create-local-server.js index f5b20f7058..c919348038 100644 --- a/nextjs/scripts/create-local-server.js +++ b/nextjs/scripts/create-local-server.js @@ -22,7 +22,7 @@ const nextAllowPageRoutes = [ 'publishers/u2f_registrations/new', 'publishers/home', 'publishers/contribution_page', - 'c/*' + '/c/*' ]; const routeMatch = [ nextAllowPageRoutes.map((r) => `ja/${r}`).join('|'), diff --git a/nextjs/src/app/[locale]/c/layout.jsx b/nextjs/src/app/[locale]/c/layout.jsx index 623e68542a..950ed9c877 100644 --- a/nextjs/src/app/[locale]/c/layout.jsx +++ b/nextjs/src/app/[locale]/c/layout.jsx @@ -13,10 +13,7 @@ export default function PublicChannelLayout({ children }) { const t = useTranslations(); return ( -
- - test - +
- {children} +
+ {children} +
diff --git a/nextjs/src/app/[locale]/publishers/contribution_page/page.jsx b/nextjs/src/app/[locale]/publishers/contribution_page/page.jsx index 4f3d3c7e5b..1dec796058 100644 --- a/nextjs/src/app/[locale]/publishers/contribution_page/page.jsx +++ b/nextjs/src/app/[locale]/publishers/contribution_page/page.jsx @@ -28,6 +28,7 @@ export default function ContributionPage() { const [channel, setChannel] = useState({}); const [channelList, setChannelList] = useState([]); const [title, setTitle] = useState(''); + const [publicIdentifier, setPublicIdentifier] = useState(''); const [description, setDescription] = useState(''); const [socialLinks, setSocialLinks] = useState({}); const [logoUrl, setLogoUrl] = useState(''); @@ -39,11 +40,13 @@ export default function ContributionPage() { const channelCategories = ['twitter', 'youtube', 'twitch', 'github', 'reddit', 'vimeo']; const searchParams = useSearchParams(); const channelId = searchParams.get('channel'); + const [currentDomain, setCurrentDomain] = useState(''); const t = useTranslations(); const router = useRouter(); useEffect(() => { fetchChannelList(); + setCurrentDomain(window.location.origin) }, []); async function fetchChannelList() { @@ -68,6 +71,7 @@ export default function ContributionPage() { async function updateChannelAttributes(channelData) { const bannerDetails = channelData.site_banner.read_only_react_property; setTitle(bannerDetails.title); + setPublicIdentifier(channelData.public_identifier); setDescription(bannerDetails.description); setSocialLinks(bannerDetails.socialLinks); setLogoUrl(bannerDetails.logoUrl); @@ -82,13 +86,13 @@ export default function ContributionPage() { return t(`contribution_pages.channel_names.${type}`); } - function channelIconType(channelType, color = true) { + function channelIconType(channelType) { if (channelType === 'site') { - return ; + return ; } else if (channelType === 'twitter') { - return ; + return ; } else { - return ; + return ; } } @@ -104,7 +108,9 @@ export default function ContributionPage() { } async function saveDescription(e) { - await updateAttribute({ description: e.target.value }); + if (e.target.value !== description) { + await updateAttribute({ description: e.target.value }); + } } async function updateSocial(category, value) { @@ -135,9 +141,12 @@ export default function ContributionPage() { } async function deleteImage(type) { - const res = await apiRequest(`contribution_page/${channel.id}/destroy_attachment`, 'DELETE', {[type]: true}); - setChannel(res) - await updateChannelAttributes(res); + if((type === 'logo' && logoUrl.length) || (type === 'cover' && coverUrl.length)) { + setToastMessage(t('contribution_pages.saving_toast')) + const res = await apiRequest(`contribution_page/${channel.id}/destroy_attachment`, 'DELETE', {[type]: true}); + setChannel(res) + await updateChannelAttributes(res); + } } function renderSocialLinks(category, socialLinks) { @@ -151,7 +160,6 @@ export default function ContributionPage() { {t('contribution_pages.add_account')} )} -
+
{channelIconType(category, !(noOptions || !socialLinks[category]))}
@@ -168,12 +176,12 @@ export default function ContributionPage() { {options.map((opt) => { return( -
{opt.details.url.replace('https://','')}
+
{opt.details.url.replace('https://','')}
 ) })} -
{t('contribution_pages.clear_social')}
+
{t('contribution_pages.clear_social')}
@@ -241,16 +249,13 @@ export default function ContributionPage() {

{t('contribution_pages.channel_header')}

- {/* {t('contribution_pages.sharable_url')}
+ -
- {t('contribution_pages.sharable_url')} -
- */} + value={`${currentDomain}/c/${publicIdentifier}`} + className='w-full md:w-1/2 inline-block pb-3' + disabled={true} + />
{t('contribution_pages.avatar_cover_image')}
@@ -260,9 +265,9 @@ export default function ContributionPage() { - +
@@ -271,19 +276,20 @@ export default function ContributionPage() { - +
-
{t('contribution_pages.channel_name')}
+
{t('contribution_pages.channel_name')}
-
{t('contribution_pages.bio')}
+
{t('contribution_pages.bio')}