diff --git a/src/components/donate.jsx b/src/components/donate.jsx index 0d7239e04..bad68a8a6 100644 --- a/src/components/donate.jsx +++ b/src/components/donate.jsx @@ -1,7 +1,9 @@ /* global CONFIG */ -import cn from 'classnames'; +import classnames from 'classnames'; +import { useState } from 'react'; import { Link } from 'react-router'; import { faPaypal } from '@fortawesome/free-brands-svg-icons'; +import { faHeart } from '@fortawesome/free-solid-svg-icons'; import styles from './donate.module.scss'; import { useDonationStatus } from './hooks/donation-status'; @@ -12,421 +14,587 @@ import { faLiberaPay, faYooMoney, faBoosty } from './fontawesome-custom-icons'; const cfg = CONFIG.donations; +const LANGUAGES = [ + { id: 'en', label: 'In English' }, + { id: 'ru', label: 'По-русски' }, +]; + +// eslint-disable-next-line complexity export default function Donate({ donationAccountName = cfg.statusAccount }) { const statusText = useDonationStatus(donationAccountName); - const [rusDetailsOpened, rusDetailsToggle] = useBool(false); - const [engDetailsOpened, engDetailsToggle] = useBool(false); + const [fundingStatusDetailsOpened, fundingStatusDetailsToggle] = useBool(false); + + const [lang, setLang] = useState(LANGUAGES[0].id); return (
-

Donate to FreeFeed

- -

- 🇷🇺 Прочесть по-русски -

- -

- FreeFeed is a small-scale social network and a blogging platform. - It is maintained by a non-profit organization FreeFeed MTU and is funded by voluntary - donations from its users. These donations are the only source of income for FreeFeed as it - has no sponsors and doesn't run ads. -

+
+ {LANGUAGES.map((l) => { + const onClick = () => setLang(l.id); + const cn = classnames(styles.lang, lang === l.id ? styles.active : false); + return ( + // eslint-disable-next-line react/jsx-no-bind + + {l.label} + + ); + })} +
- {cfg.reportsAccount && ( -

- See funding and expenses reports -

- )} - -

- All hosting expenses are covered by donations only. You can help us pay for hosting by - setting up a monthly donation. -

- - {statusText && ( - <> -

- Current funding status:{' '} - - {statusText} - {' '} - - What does it mean?{engDetailsOpened && ' (collapse)'} - -

-
); diff --git a/src/components/donate.module.scss b/src/components/donate.module.scss index 5911aa4ac..f85614b41 100644 --- a/src/components/donate.module.scss +++ b/src/components/donate.module.scss @@ -1,6 +1,145 @@ @import '../../styles/shared/mixins'; -.body { +.languages { + margin: 0; + padding: 0; + text-align: right; +} + +.lang { + display: inline-block; + padding: 5px 10px; + + &:hover { + cursor: pointer; + text-decoration: underline; + } +} + +.active { + font-weight: bold; + background-color: #eee; + text-decoration: none; + + :global(.dark-theme) & { + background-color: #666; + color: #000; + } +} + +.main { + font-size: 16px; + margin: 0; +} + +.header { + line-height: 30px; + font-size: 28px; + font-weight: normal; + margin: 10px 0 20px; +} + +.huh { + font-size: smaller; + font-style: italic; +} + +.currentFundingStatus { + display: block; +} + +.statusDetailsBox { + padding: 0.6em 1.5em; + border: 1px solid #eee; + background-color: #fafafa; + border-radius: 2px; + font-size: 0.9em; + line-height: 1.2em; + margin-bottom: 2em; +} + +.listOfFundingStatuses { + padding-left: 2em; +} + +.plea { + margin-top: 2em; +} + +.like { + color: #f9b616; + font-size: 14px; + position: relative; + top: -0.5px; +} + +.donationMethods { + display: flex; + gap: 1em; + flex-flow: row wrap; + margin-top: 2em; +} + +.donationMethodBox { + border: 5px solid #e8e8e8; + border-radius: 8px; + padding: 0.5em 1.7em 1.1em; + flex: 1; + flex-basis: 45%; + min-height: 11em; + + @media (max-width: 600px) { + flex-basis: auto; + } + + h4 { + font-weight: 600; + } +} + +.importantDonationMethod { + flex-basis: 100%; +} + +.donationMethodHint { + margin-top: 1em; + font-size: 0.9em; + line-height: 1.1em; +} + +.wireTable { + td:first-child { + text-align: right; + padding-right: 5px; + } +} + +.urBest { + margin-top: 30em; + text-align: center; + color: #cacaca; + font-weight: 400; + font-style: italic; + position: relative; + + .like { + top: 1px; + font-size: 15px; + transform: rotate(-10deg); + z-index: 1; + } + + .likeRed { + transform: rotate(10deg); + color: #e66; + font-size: 15px; + position: relative; + top: -2.5px; + left: -10px; + } +} + +.widgetBody { font-size: rem(12px) !important; } @@ -21,7 +160,7 @@ $color-critical: #fa6b4b; } } -.statusLink { +.widgetStatusLink { color: inherit !important; font-size: rem(14px); font-weight: bold; @@ -54,7 +193,7 @@ $color-critical: #fa6b4b; } } -.statusLinkInSidebar { +.widgetStatusLinkInSidebar { &[data-status='OK'], &[data-status='Low'], &[data-status='Very low'], @@ -67,17 +206,8 @@ $color-critical: #fa6b4b; } } -.donateLink { +.widgetDonateLink { color: inherit !important; font-weight: bold; text-decoration: underline !important; } - -.statusDetails { - padding-left: 1em; - border-left: 1px solid; -} - -.select { - max-width: 20em; -} diff --git a/src/components/donation-widget.jsx b/src/components/donation-widget.jsx index 8ff64cb29..e46811ba6 100644 --- a/src/components/donation-widget.jsx +++ b/src/components/donation-widget.jsx @@ -17,23 +17,23 @@ export function DonationWidget({ accountName = CONFIG.donations.statusAccount })
Donate
-
-

+

+

Current funding status:{' '} {statusText}

- + Donate to {CONFIG.siteTitle}

-

Your regular donations pay for hosting and keep FreeFeed running.

+

Your regular donations pay for hosting and keep {CONFIG.siteTitle} running.

);