diff --git a/app/soapbox/features/ui/components/funding-panel.tsx b/app/soapbox/features/ui/components/funding-panel.tsx
index 48245a741..3d3441383 100644
--- a/app/soapbox/features/ui/components/funding-panel.tsx
+++ b/app/soapbox/features/ui/components/funding-panel.tsx
@@ -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 = <>{moneyFormat(goal)} per month— reached!>;
+ ratioText = <>{moneyFormat(goal)} per month — reached!>;
} else {
ratioText = <>{moneyFormat(amount)} out of {moneyFormat(goal)} per month>;
}
@@ -56,18 +56,19 @@ const FundingPanel: React.FC = () => {
title={}
onActionClick={handleDonateClick}
>
-
- {ratioText}
-
-
-
- {goalText}
-
-
-
-
+
+
+ {ratioText}
+
+
+
+
+ {goalText}
+
+
+
);
};
diff --git a/app/styles/application.scss b/app/styles/application.scss
index d96a607f8..583f3c5ab 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -22,7 +22,6 @@
@import 'emoji-picker';
@import 'rtl';
@import 'accessibility';
-@import 'donations';
@import 'dyslexic';
@import 'demetricator';
@import 'chats';
diff --git a/app/styles/donations.scss b/app/styles/donations.scss
deleted file mode 100644
index 121e6fbc3..000000000
--- a/app/styles/donations.scss
+++ /dev/null
@@ -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);
- }
-}