gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-27 18:10:58 +00:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

improves styles

Browse Source
This commit is contained in:
ChaosExAnima 2025-09-11 17:11:39 +02:00
parent 89e4fb2f0f
commit 3c7e612d41
No known key found for this signature in database
GPG Key ID: 8F2B333100FB6117
2 changed files with 64 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/javascript/mastodon/features/ui/components/donate_modal.tsx
View File

@ -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>

66
app/javascript/mastodon/features/ui/components/donate_model.scss
View File

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