From 3c7e612d41722269e972abe8b1b5d5573c77c236 Mon Sep 17 00:00:00 2001
From: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
Date: Thu, 11 Sep 2025 17:11:39 +0200
Subject: [PATCH] improves styles

---
 .../features/ui/components/donate_modal.tsx   | 32 +++++----
 .../features/ui/components/donate_model.scss  | 66 +++++++++++++------
 2 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/components/donate_modal.tsx b/app/javascript/mastodon/features/ui/components/donate_modal.tsx
index b51574b3e53..61c2299f782 100644
--- a/app/javascript/mastodon/features/ui/components/donate_modal.tsx
+++ b/app/javascript/mastodon/features/ui/components/donate_modal.tsx
@@ -11,6 +11,7 @@ import { Dropdown } from '@/mastodon/components/dropdown';
 import type { SelectItem } from '@/mastodon/components/dropdown_selector';
 import { IconButton } from '@/mastodon/components/icon_button';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import ExternalLinkIcon from '@/material-icons/400-24px/open_in_new.svg?react';
 
 import type { BaseConfirmationModalProps } from './confirmation_modals/confirmation_modal';
 
@@ -78,20 +79,20 @@ const DonateModal: FC<DonateModalProps> = forwardRef(({ onClose }, ref) => {
 
   return (
     <div className='modal-root__modal dialog-modal donate_modal'>
-      <div className='dialog-modal__header'>
-        <IconButton
-          className='dialog-modal__header__close'
-          title={intl.formatMessage(messages.close)}
-          icon='times'
-          iconComponent={CloseIcon}
-          onClick={onClose}
-        />
-        <span className='dialog-modal__header__title'>
-          By supporting Mastodon, you help sustain a global network that values
-          people over profit. Will you join us today?
-        </span>
-      </div>
       <div className='dialog-modal__content'>
+        <header className='row'>
+          <span className='dialog-modal__header__title'>
+            By supporting Mastodon, you help sustain a global network that
+            values people over profit. Will you join us today?
+          </span>
+          <IconButton
+            className='dialog-modal__header__close'
+            title={intl.formatMessage(messages.close)}
+            icon='times'
+            iconComponent={CloseIcon}
+            onClick={onClose}
+          />
+        </header>
         <div className='dialog-modal__content__form'>
           <div className='row'>
             <ToggleButton
@@ -138,7 +139,12 @@ const DonateModal: FC<DonateModalProps> = forwardRef(({ onClose }, ref) => {
 
           <Button className='submit' block>
             Continue to payment
+            <ExternalLinkIcon />
           </Button>
+
+          <p className='footer'>
+            You will be redirected to joinmastodon.org for secure payment
+          </p>
         </div>
       </div>
     </div>
diff --git a/app/javascript/mastodon/features/ui/components/donate_model.scss b/app/javascript/mastodon/features/ui/components/donate_model.scss
index 05d9094a673..d8137750164 100644
--- a/app/javascript/mastodon/features/ui/components/donate_model.scss
+++ b/app/javascript/mastodon/features/ui/components/donate_model.scss
@@ -6,30 +6,39 @@
   .row {
     display: flex;
     gap: 1rem;
+  }
 
-    &--select {
-      gap: 0;
-      width: 100%;
+  header {
+    padding: 24px 24px 0;
+    align-items: start;
+  }
 
-      button {
-        background-color: var(--button-color);
-        border: none;
-        border-top-left-radius: 4px;
-        border-bottom-left-radius: 4px;
-        color: white;
-        display: flex;
-        align-items: center;
-        padding: 0.5rem;
-      }
+  .row--select {
+    gap: 0;
+    width: 100%;
 
-      input {
-        flex-grow: 1;
-        background: none;
-        padding: 0.5rem;
-        color: white;
-        border: 1px solid var(--button-color);
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
+    button {
+      background-color: var(--button-color);
+      border: none;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      padding: 0.5rem;
+    }
+
+    input {
+      flex-grow: 1;
+      background: none;
+      padding: 0.5rem;
+      color: var(--on-input-color);
+      border: 1px solid var(--button-color);
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+
+      @media (prefers-color-scheme: dark) {
+        color-scheme: dark;
       }
     }
   }
@@ -45,4 +54,19 @@
       color: white;
     }
   }
+
+  .submit {
+    padding: 0.6rem 1rem;
+
+    svg {
+      fill: currentColor;
+      height: 1em;
+    }
+  }
+
+  .footer {
+    text-align: center;
+    color: var(--input-placeholder-color);
+    font-size: 0.9em;
+  }
 }