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

Remove 'donations.scss'

See merge request soapbox-pub/soapbox!1900

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 = <><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 {
     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>
   );
 };

app/styles/application.scss

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

app/styles/donations.scss

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