bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'remove-donations-scss' into 'develop'

Browse source 
Remove 'donations.scss'

See merge request soapbox-pub/soapbox!1900
This commit is contained in:
Chewbacca 2022-11-16 18:27:53 +00:00
commit a806b3ece4
3 changed files with 15 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/soapbox/features/ui/components/funding-panel.tsx
View file

@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { fetchPatronInstance } from 'soapbox/actions/patron'; 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'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
/** Open link in a new tab. */ /** Open link in a new tab. */
@ -42,7 +42,7 @@ const FundingPanel: React.FC = () => {
let ratioText; let ratioText;
if (goalReached) { if (goalReached) {
ratioText = <><strong>{moneyFormat(goal)}</strong> per month<span className='funding-panel__reached'>&mdash; reached!</span></>; ratioText = <><strong>{moneyFormat(goal)}</strong> per month <span>&mdash; reached!</span></>;
} else { } else {
ratioText = <><strong>{moneyFormat(amount)} out of {moneyFormat(goal)}</strong> per month</>; 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' />} title={<FormattedMessage id='patron.title' defaultMessage='Funding Goal' />}
onActionClick={handleDonateClick} onActionClick={handleDonateClick}
> >
<div className='funding-panel__ratio'> <Stack space={4}>
<Text>{ratioText}</Text> <Stack space={2}>
</div> <Text>{ratioText}</Text>
<ProgressBar progress={amount / goal} /> <ProgressBar progress={amount / goal} />
<div className='funding-panel__description'> </Stack>
<Text>{goalText}</Text>
</div> <Stack space={2}>
<div> <Text theme='muted'>{goalText}</Text>
<Button theme='secondary' onClick={handleDonateClick}> <Button block theme='primary' onClick={handleDonateClick}>
<FormattedMessage id='patron.donate' defaultMessage='Donate' /> <FormattedMessage id='patron.donate' defaultMessage='Donate' />
</Button> </Button>
</div> </Stack>
</Stack>
</Widget> </Widget>
); );
}; };

1
app/styles/application.scss
View file

@ -22,7 +22,6 @@
@import 'emoji-picker'; @import 'emoji-picker';
@import 'rtl'; @import 'rtl';
@import 'accessibility'; @import 'accessibility';
@import 'donations';
@import 'dyslexic'; @import 'dyslexic';
@import 'demetricator'; @import 'demetricator';
@import 'chats'; @import 'chats';

113
app/styles/donations.scss
View file

@ -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);
}
}