From c2cedaf02cf758faa7b369e6afc731639d022905 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 16 Nov 2022 12:50:38 -0500
Subject: [PATCH] Remove 'donations.scss'

---
 .../features/ui/components/funding-panel.tsx  |  29 ++---
 app/styles/application.scss                   |   1 -
 app/styles/donations.scss                     | 113 ------------------
 3 files changed, 15 insertions(+), 128 deletions(-)
 delete mode 100644 app/styles/donations.scss

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