diff --git a/app/javascript/flavours/glitch/entrypoints/wrapstodon.tsx b/app/javascript/flavours/glitch/entrypoints/wrapstodon.tsx index 972e5dac03..4efcf619ad 100644 --- a/app/javascript/flavours/glitch/entrypoints/wrapstodon.tsx +++ b/app/javascript/flavours/glitch/entrypoints/wrapstodon.tsx @@ -25,7 +25,7 @@ function loaded() { const initialState = JSON.parse( propsNode.textContent, - ) as ApiAnnualReportResponse & { me?: string }; + ) as ApiAnnualReportResponse & { me?: string; domain: string }; const report = initialState.annual_reports[0]; if (!report) { @@ -38,6 +38,7 @@ function loaded() { meta: { locale: document.documentElement.lang, me: initialState.me, + domain: initialState.domain, }, accounts: initialState.accounts, }), diff --git a/app/javascript/flavours/glitch/features/annual_report/index.tsx b/app/javascript/flavours/glitch/features/annual_report/index.tsx index ea88a168cf..5345cbdb72 100644 --- a/app/javascript/flavours/glitch/features/annual_report/index.tsx +++ b/app/javascript/flavours/glitch/features/annual_report/index.tsx @@ -27,7 +27,7 @@ import { NewPosts } from './new_posts'; const moduleClassNames = classNames.bind(styles); -const accountSelector = createAppSelector( +export const accountSelector = createAppSelector( [(state) => state.accounts, (state) => state.annualReport.report], (accounts, report) => { if (report?.schema_version === 2) { diff --git a/app/javascript/flavours/glitch/features/annual_report/shared_page.module.scss b/app/javascript/flavours/glitch/features/annual_report/shared_page.module.scss index b29ab51707..ea3ea471b9 100644 --- a/app/javascript/flavours/glitch/features/annual_report/shared_page.module.scss +++ b/app/javascript/flavours/glitch/features/annual_report/shared_page.module.scss @@ -16,22 +16,16 @@ $mobile-breakpoint: 540px; display: flex; flex-direction: column; align-items: center; - gap: 0.75rem; + gap: 1.8rem; margin-top: 2rem; font-size: 16px; + line-height: 1.4; text-align: center; color: var(--color-text-secondary); -} -.logo { - width: 2rem; - opacity: 0.6; -} - -.nav { - display: flex; - flex-wrap: wrap; - gap: 12px; + strong { + font-weight: 600; + } a:any-link { color: inherit; @@ -43,3 +37,22 @@ $mobile-breakpoint: 540px; color: var(--color-text-primary); } } + +.logo { + width: 2rem; + opacity: 0.6; +} + +.footerSection { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; +} + +.linkList { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 12px; +} diff --git a/app/javascript/flavours/glitch/features/annual_report/shared_page.tsx b/app/javascript/flavours/glitch/features/annual_report/shared_page.tsx index 8e08817924..634f5c2d12 100644 --- a/app/javascript/flavours/glitch/features/annual_report/shared_page.tsx +++ b/app/javascript/flavours/glitch/features/annual_report/shared_page.tsx @@ -2,43 +2,66 @@ import type { FC } from 'react'; import { FormattedMessage } from 'react-intl'; +import { DisplayName } from '@/flavours/glitch/components/display_name'; import { IconLogo } from '@/flavours/glitch/components/logo'; import { useAppSelector } from '@/flavours/glitch/store'; -import { AnnualReport } from './index'; +import { AnnualReport, accountSelector } from './index'; import classes from './shared_page.module.scss'; export const WrapstodonSharedPage: FC = () => { - const isLoggedIn = useAppSelector((state) => !!state.meta.get('me')); + const account = useAppSelector(accountSelector); + const domain = useAppSelector((state) => state.meta.get('domain') as string); return (
);