Skip to content

Commit 37aa244

Browse files
MiseiMisei
Misei
authored and
Misei
committed
Make donation UI Twitch-focused with Amazon Prime info
- Emphasize Twitch subscription as primary support method - Add Amazon Prime Gaming information (free monthly subscription) - Make Twitch button larger and more prominent (contained variant) - Change GitHub buttons to outlined variant for secondary emphasis - Update layout: Twitch full width, GitHub buttons side-by-side - Apply changes to both DonationDialog and Developer page
1 parent 45324ba commit 37aa244

File tree

2 files changed

+65
-46
lines changed

2 files changed

+65
-46
lines changed

‎app/src/components/DonationDialog.tsx‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -59,54 +59,64 @@ const DonationDialog = ({ open, onClose }: DonationDialogProps) => {
5959

6060
<Typography variant="body2" color="text.secondary" paragraph>
6161
This project is open source and completely free to use.
62-
If you find it helpful, please consider supporting its continued development.
62+
If you find it helpful, please consider supporting its continued development via Twitch subscriptions.
6363
</Typography>
6464

6565
<Typography variant="body2" color="text.secondary" paragraph>
66-
Your support helps maintain and improve the application for everyone.
66+
<strong>💡 Did you know?</strong> If you have Amazon Prime, you can subscribe for free each month via Prime Gaming! Twitch subscriptions don't auto-renew, so you can choose to support the project every month.
6767
</Typography>
6868

6969
<Grid2 container spacing={2} sx={{ mt: 2 }}>
7070
<Grid2 size={12}>
7171
<Button
7272
variant="contained"
7373
sx={{
74-
backgroundColor: '#FFA500',
75-
'&:hover': { backgroundColor: '#FF8C00' },
74+
backgroundColor: '#9146FF',
75+
'&:hover': { backgroundColor: '#772CE8' },
76+
height: '56px',
77+
fontSize: '1.1rem',
7678
}}
77-
startIcon={<Star />}
78-
onClick={() => openInBrowser('https://github.com/Incomplete-Outputs-Lab/vmix-utility')}
79+
startIcon={<TwitchIcon />}
80+
onClick={() => openInBrowser('https://subs.twitch.tv/flowingspdg')}
7981
fullWidth
8082
>
81-
Star on GitHub
83+
Subscribe on Twitch
8284
</Button>
8385
</Grid2>
84-
<Grid2 size={12}>
86+
<Grid2 size={{ xs: 12, sm: 6 }}>
8587
<Button
86-
variant="contained"
88+
variant="outlined"
8789
sx={{
88-
backgroundColor: '#13C3FF',
89-
'&:hover': { backgroundColor: '#0FA8CC' },
90+
borderColor: '#FFA500',
91+
color: '#FFA500',
92+
'&:hover': {
93+
borderColor: '#FF8C00',
94+
backgroundColor: 'rgba(255, 165, 0, 0.08)',
95+
},
9096
}}
91-
startIcon={<FavoriteOutlined />}
92-
onClick={() => openInBrowser('https://github.com/sponsors/FlowingSPDG')}
97+
startIcon={<Star />}
98+
onClick={() => openInBrowser('https://github.com/Incomplete-Outputs-Lab/vmix-utility')}
9399
fullWidth
94100
>
95-
GitHub Sponsors
101+
Star on GitHub
96102
</Button>
97103
</Grid2>
98-
<Grid2 size={12}>
104+
<Grid2 size={{ xs: 12, sm: 6 }}>
99105
<Button
100-
variant="contained"
106+
variant="outlined"
101107
sx={{
102-
backgroundColor: '#9146FF',
103-
'&:hover': { backgroundColor: '#772CE8' },
108+
borderColor: '#13C3FF',
109+
color: '#13C3FF',
110+
'&:hover': {
111+
borderColor: '#0FA8CC',
112+
backgroundColor: 'rgba(19, 195, 255, 0.08)',
113+
},
104114
}}
105-
startIcon={<TwitchIcon />}
106-
onClick={() => openInBrowser('https://subs.twitch.tv/flowingspdg')}
115+
startIcon={<FavoriteOutlined />}
116+
onClick={() => openInBrowser('https://github.com/sponsors/FlowingSPDG')}
107117
fullWidth
108118
>
109-
Subscribe on Twitch
119+
GitHub Sponsors
110120
</Button>
111121
</Grid2>
112122
</Grid2>

‎app/src/pages/Developer.tsx‎

Lines changed: 34 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -136,56 +136,65 @@ const Developer = () => {
136136
Support the Project
137137
</Typography>
138138
</Box>
139-
139+
140140
<Typography variant="body2" color="text.secondary" gutterBottom>
141141
If you find this project helpful, consider supporting its development via Twitch subscriptions.
142142
</Typography>
143-
<Typography variant="body2" color="text.secondary">
144-
Twitch subscriptions do not auto-renew, so you can choose to support the project every month. If you have Amazon Prime, you can subscribe for free each month via Prime Gaming.
143+
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
144+
<strong>💡 Did you know?</strong> If you have Amazon Prime, you can subscribe for free each month via Prime Gaming! Twitch subscriptions don't auto-renew, so you can choose to support the project every month.
145145
</Typography>
146-
146+
147147
<Grid2 container spacing={2} sx={{ mt: 1 }}>
148-
<Grid2 size={{ xs: 12, sm: 4 }}>
148+
<Grid2 size={12}>
149149
<Button
150150
variant="contained"
151151
sx={{
152-
backgroundColor: '#FFA500',
153-
'&:hover': { backgroundColor: '#FF8C00' },
152+
backgroundColor: '#9146FF',
153+
'&:hover': { backgroundColor: '#772CE8' },
154+
height: '56px',
155+
fontSize: '1.1rem',
154156
}}
155-
startIcon={<Star />}
156-
onClick={() => openInBrowser(repositoryUrl)}
157+
startIcon={<TwitchIcon />}
158+
onClick={() => openInBrowser(twitchSupportUrl)}
157159
fullWidth
158160
>
159-
Star on GitHub
161+
Subscribe on Twitch
160162
</Button>
161163
</Grid2>
162-
<Grid2 size={{ xs: 12, sm: 4 }}>
164+
<Grid2 size={{ xs: 12, sm: 6 }}>
163165
<Button
164-
variant="contained"
166+
variant="outlined"
165167
sx={{
166-
backgroundColor: '#13C3FF',
167-
'&:hover': { backgroundColor: '#0FA8CC' },
168+
borderColor: '#FFA500',
169+
color: '#FFA500',
170+
'&:hover': {
171+
borderColor: '#FF8C00',
172+
backgroundColor: 'rgba(255, 165, 0, 0.08)',
173+
},
168174
}}
169-
startIcon={<FavoriteOutlined />}
170-
onClick={() => openInBrowser(sponsorUrl)}
175+
startIcon={<Star />}
176+
onClick={() => openInBrowser(repositoryUrl)}
171177
fullWidth
172178
>
173-
GitHub Sponsors
179+
Star on GitHub
174180
</Button>
175181
</Grid2>
176-
<Grid2 size={{ xs: 12, sm: 4 }}>
182+
<Grid2 size={{ xs: 12, sm: 6 }}>
177183
<Button
178-
variant="contained"
184+
variant="outlined"
179185
sx={{
180-
backgroundColor: '#9146FF',
181-
'&:hover': { backgroundColor: '#772CE8' },
182-
height: '100%',
186+
borderColor: '#13C3FF',
187+
color: '#13C3FF',
188+
'&:hover': {
189+
borderColor: '#0FA8CC',
190+
backgroundColor: 'rgba(19, 195, 255, 0.08)',
191+
},
183192
}}
184-
startIcon={<TwitchIcon />}
185-
onClick={() => openInBrowser(twitchSupportUrl)}
193+
startIcon={<FavoriteOutlined />}
194+
onClick={() => openInBrowser(sponsorUrl)}
186195
fullWidth
187196
>
188-
Subscribe on Twitch
197+
GitHub Sponsors
189198
</Button>
190199
</Grid2>
191200
</Grid2>

0 commit comments

Comments
 (0)