sforkowany z mirror/soapbox
Merge branch 'remove-donations-scss' into 'develop'
Remove 'donations.scss' See merge request soapbox-pub/soapbox!1900redesign-interaction-bar2
commit
a806b3ece4
|
@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { fetchPatronInstance } from 'soapbox/actions/patron';
|
||||
import { Widget, Button, ProgressBar, Text } from 'soapbox/components/ui';
|
||||
import { Widget, Button, ProgressBar, Text, Stack } from 'soapbox/components/ui';
|
||||
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
/** Open link in a new tab. */
|
||||
|
@ -42,7 +42,7 @@ const FundingPanel: React.FC = () => {
|
|||
let ratioText;
|
||||
|
||||
if (goalReached) {
|
||||
ratioText = <><strong>{moneyFormat(goal)}</strong> per month<span className='funding-panel__reached'>— reached!</span></>;
|
||||
ratioText = <><strong>{moneyFormat(goal)}</strong> per month <span>— reached!</span></>;
|
||||
} else {
|
||||
ratioText = <><strong>{moneyFormat(amount)} out of {moneyFormat(goal)}</strong> per month</>;
|
||||
}
|
||||
|
@ -56,18 +56,19 @@ const FundingPanel: React.FC = () => {
|
|||
title={<FormattedMessage id='patron.title' defaultMessage='Funding Goal' />}
|
||||
onActionClick={handleDonateClick}
|
||||
>
|
||||
<div className='funding-panel__ratio'>
|
||||
<Text>{ratioText}</Text>
|
||||
</div>
|
||||
<ProgressBar progress={amount / goal} />
|
||||
<div className='funding-panel__description'>
|
||||
<Text>{goalText}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Button theme='secondary' onClick={handleDonateClick}>
|
||||
<FormattedMessage id='patron.donate' defaultMessage='Donate' />
|
||||
</Button>
|
||||
</div>
|
||||
<Stack space={4}>
|
||||
<Stack space={2}>
|
||||
<Text>{ratioText}</Text>
|
||||
<ProgressBar progress={amount / goal} />
|
||||
</Stack>
|
||||
|
||||
<Stack space={2}>
|
||||
<Text theme='muted'>{goalText}</Text>
|
||||
<Button block theme='primary' onClick={handleDonateClick}>
|
||||
<FormattedMessage id='patron.donate' defaultMessage='Donate' />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Widget>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -22,7 +22,6 @@
|
|||
@import 'emoji-picker';
|
||||
@import 'rtl';
|
||||
@import 'accessibility';
|
||||
@import 'donations';
|
||||
@import 'dyslexic';
|
||||
@import 'demetricator';
|
||||
@import 'chats';
|
||||
|
|
|
@ -1,113 +0,0 @@
|
|||
.sub {
|
||||
border: 1px solid hsla(var(--primary-text-color_hsl), 0.5);
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
|
||||
&__title {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__amount {
|
||||
font-size: 2rem;
|
||||
line-height: normal;
|
||||
margin: 4px 0 12px;
|
||||
}
|
||||
|
||||
&__billing {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Status indicator */
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 13px;
|
||||
border-radius: 100%;
|
||||
background-color: transparent;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
&--trialing,
|
||||
&--active {
|
||||
&::before {
|
||||
background-color: #0f0;
|
||||
}
|
||||
}
|
||||
|
||||
&--cancelling::before {
|
||||
background-color: #ff0;
|
||||
}
|
||||
|
||||
&--incomplete,
|
||||
&--incomplete_expired,
|
||||
&--past_due,
|
||||
&--canceled,
|
||||
&--unpaid {
|
||||
&::before {
|
||||
background-color: #f00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subs {
|
||||
.sub {
|
||||
border-radius: 0;
|
||||
|
||||
& + .sub {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.admin {
|
||||
.actions {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.funding-panel {
|
||||
margin-top: 15px;
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__ratio {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 14px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__reached {
|
||||
color: var(--brand-color);
|
||||
}
|
||||
}
|
Ładowanie…
Reference in New Issue