Skip to content

Commit ff290ff

Browse files
daveearleydaveearley
committed
Update dashboard
1 parent 783ba21 commit ff290ff

File tree

20 files changed

+885
-653
lines changed

20 files changed

+885
-653
lines changed

‎frontend/src/components/routes/account/ManageAccount/sections/PaymentSettings/index.tsx‎

Lines changed: 44 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import classes from "../../ManageAccount.module.scss";
1111
import {useEffect, useState} from "react";
1212
import {IconAlertCircle, IconBrandStripe, IconCheck, IconExternalLink} from '@tabler/icons-react';
1313
import {formatCurrency} from "../../../../../../utilites/currency.ts";
14+
import {showSuccess} from "../../../../../../utilites/notifications.tsx";
1415

1516
interface FeePlanDisplayProps {
1617
configuration?: {
@@ -45,26 +46,30 @@ const FeePlanDisplay = ({configuration}: FeePlanDisplayProps) => {
4546
<Card variant={'lightGray'}>
4647
<Title order={4}>{configuration.name}</Title>
4748
<Grid>
48-
<Grid.Col span={{base: 12, sm: 6}}>
49-
<Group gap="xs" wrap={'nowrap'}>
50-
<Text size="sm">
51-
{t`Transaction Fee:`}{' '}
52-
<Text span fw={600}>
53-
{formatPercentage(configuration.application_fees.percentage)}
49+
{configuration.application_fees.percentage > 0 && (
50+
<Grid.Col span={{base: 12, sm: 6}}>
51+
<Group gap="xs" wrap={'nowrap'}>
52+
<Text size="sm">
53+
{t`Transaction Fee:`}{' '}
54+
<Text span fw={600}>
55+
{formatPercentage(configuration.application_fees.percentage)}
56+
</Text>
5457
</Text>
55-
</Text>
56-
</Group>
57-
</Grid.Col>
58-
<Grid.Col span={{base: 12, sm: 6}}>
59-
<Group gap="xs" wrap={'nowrap'}>
60-
<Text size="sm">
61-
{t`Fixed Fee:`}{' '}
62-
<Text span fw={600}>
63-
{formatCurrency(configuration.application_fees.fixed)}
58+
</Group>
59+
</Grid.Col>
60+
)}
61+
{configuration.application_fees.fixed > 0 && (
62+
<Grid.Col span={{base: 12, sm: 6}}>
63+
<Group gap="xs" wrap={'nowrap'}>
64+
<Text size="sm">
65+
{t`Fixed Fee:`}{' '}
66+
<Text span fw={600}>
67+
{formatCurrency(configuration.application_fees.fixed)}
68+
</Text>
6469
</Text>
65-
</Text>
66-
</Group>
67-
</Grid.Col>
70+
</Group>
71+
</Grid.Col>
72+
)}
6873
</Grid>
6974
</Card>
7075

@@ -90,6 +95,24 @@ const ConnectStatus = ({account}: { account: Account }) => {
9095
const stripeDetails = stripeDetailsQuery.data;
9196
const error = stripeDetailsQuery.error as any;
9297

98+
useEffect(() => {
99+
if (typeof window === 'undefined') {
100+
return;
101+
}
102+
setIsReturningFromStripe(
103+
window.location.search.includes('is_return') || window.location.search.includes('is_refresh')
104+
);
105+
}, []);
106+
107+
useEffect(() => {
108+
if (fetchStripeDetails && !stripeDetailsQuery.isLoading) {
109+
setFetchStripeDetails(false);
110+
showSuccess(t`Redirecting to Stripe...`);
111+
window.location.href = String(stripeDetails?.connect_url);
112+
}
113+
114+
}, [fetchStripeDetails, stripeDetailsQuery.isFetched]);
115+
93116
if (error?.response?.status === 403) {
94117
return (
95118
<>
@@ -110,23 +133,6 @@ const ConnectStatus = ({account}: { account: Account }) => {
110133
);
111134
}
112135

113-
useEffect(() => {
114-
if (typeof window === 'undefined') {
115-
return;
116-
}
117-
setIsReturningFromStripe(
118-
window.location.search.includes('is_return') || window.location.search.includes('is_refresh')
119-
);
120-
}, []);
121-
122-
useEffect(() => {
123-
if (fetchStripeDetails && !stripeDetailsQuery.isLoading) {
124-
setFetchStripeDetails(false);
125-
window.location.href = String(stripeDetails?.connect_url);
126-
}
127-
128-
}, [fetchStripeDetails, stripeDetailsQuery.isFetched]);
129-
130136
return (
131137
<div className={paymentClasses.stripeInfo}>
132138
<Title mb={10} order={3}>{t`Payment Processing`}</Title>
@@ -186,13 +192,14 @@ const ConnectStatus = ({account}: { account: Account }) => {
186192
return;
187193
} else {
188194
if (typeof window !== 'undefined') {
195+
showSuccess(t`Redirecting to Stripe...`);
189196
window.location.href = String(stripeDetails?.connect_url)
190197
}
191198
}
192199
}}
193200
>
194-
{(!isReturningFromStripe) && t`Connect with Stripe`}
195-
{(isReturningFromStripe) && t`Complete Stripe Setup`}
201+
{(!isReturningFromStripe && !account?.stripe_account_id) && t`Connect with Stripe`}
202+
{(isReturningFromStripe || account?.stripe_account_id) && t`Complete Stripe Setup`}
196203
</Button>
197204
<Group gap="xs">
198205
<Anchor

‎frontend/src/components/routes/event/EventDashboard/EventDashboard.module.scss‎

Lines changed: 58 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
.setupCard {
2525
margin-bottom: 28px;
2626
margin-top: 24px;
27-
overflow: hidden;
2827
position: relative;
2928
padding: 32px 28px;
3029
background: linear-gradient(to right, rgba(249, 250, 251, 0.6), rgba(243, 244, 246, 0.6));
@@ -36,23 +35,21 @@
3635
position: absolute;
3736
top: 16px;
3837
right: 16px;
39-
width: 36px;
40-
height: 36px;
41-
border-radius: 12px;
38+
width: 32px;
39+
height: 32px;
40+
border-radius: 8px;
4241
display: flex;
4342
align-items: center;
4443
justify-content: center;
4544
cursor: pointer;
4645
z-index: 10;
4746
color: #9e9e9e;
4847
background-color: rgba(255, 255, 255, 0.7);
49-
backdrop-filter: blur(6px);
5048
transition: all 0.2s ease;
5149

5250
&:hover {
5351
background-color: rgba(255, 255, 255, 0.9);
5452
color: #555;
55-
transform: scale(1.05);
5653
}
5754
}
5855

@@ -66,18 +63,18 @@
6663
width: 100%;
6764

6865
h2 {
69-
font-size: 1.8rem;
70-
margin-bottom: 1rem;
66+
font-size: 1.5rem;
67+
margin-bottom: 0.75rem;
7168
margin-top: 0;
7269
color: #444;
73-
font-weight: 700;
74-
letter-spacing: -0.02em;
70+
font-weight: 600;
71+
letter-spacing: -0.01em;
7572
}
7673

7774
.setupDescription {
78-
margin-bottom: 2.25rem;
75+
margin-bottom: 1.75rem;
7976
color: #666;
80-
font-size: 1.05rem;
77+
font-size: 1rem;
8178
line-height: 1.5;
8279
max-width: 80%;
8380
}
@@ -92,67 +89,79 @@
9289
.checklistItem {
9390
width: calc(50% - 24px);
9491
margin: 0 12px 24px;
95-
padding: 24px;
96-
background: rgba(255, 255, 255, 0.85);
97-
backdrop-filter: blur(10px);
98-
border-radius: 16px;
99-
border: 1px solid rgba(230, 230, 230, 0.8);
100-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
101-
transition: all 0.3s ease;
102-
103-
&:hover {
104-
transform: translateY(-2px);
105-
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
106-
border-color: rgba(210, 210, 210, 0.9);
107-
}
92+
padding: 20px;
93+
background: rgba(255, 255, 255, 0.9);
94+
border-radius: 12px;
95+
border: 1px solid rgba(230, 230, 230, 0.9);
96+
transition: all 0.2s ease;
10897

10998
h3 {
110-
font-size: 1.15rem;
111-
margin: 0 0 0.8rem 0;
99+
font-size: 1.1rem;
100+
margin: 0 0 0.75rem 0;
112101
color: #333;
113102
font-weight: 600;
114103
display: flex;
115104
align-items: center;
116105
}
117106

118107
p {
119-
margin: 0 0 1.2rem 0;
108+
margin: 0 0 1rem 0;
120109
color: #666;
121110
font-size: 0.95rem;
122111
line-height: 1.5;
123112
}
113+
114+
/* Always show a consistent layout with status indicator */
115+
.status-section {
116+
min-height: 36px;
117+
display: flex;
118+
align-items: center;
119+
}
124120
}
125121

126122
.checkboxContainer {
127-
margin-right: 14px;
123+
margin-right: 12px;
128124
}
129125

130126
.checkbox {
131-
width: 26px;
132-
height: 26px;
133-
border-radius: var(--tk-radius-sm);
127+
width: 24px;
128+
height: 24px;
129+
border-radius: 6px;
134130
border: 2px solid #ddd;
135131
display: flex;
136132
align-items: center;
137133
justify-content: center;
138134
background-color: rgba(255, 255, 255, 0.6);
139135
transition: all 0.2s ease;
140-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
141136

142137
svg {
143-
transition: all 0.2s ease;
144138
transform: scale(0.85);
145139
}
146140
}
147141

148-
.checklistItemContent {
149-
flex: 1;
142+
.status-badge {
143+
display: inline-flex;
144+
align-items: center;
145+
padding: 4px 10px;
146+
border-radius: 6px;
147+
font-size: 0.85rem;
148+
font-weight: 500;
149+
}
150+
151+
.status-complete {
152+
background-color: rgba(52, 211, 153, 0.1);
153+
color: #10b981;
154+
}
155+
156+
.status-pending {
157+
background-color: rgba(245, 158, 11, 0.1);
158+
color: #f59e0b;
150159
}
151160

152-
// Tablet and smaller desktop styles
161+
/* Tablet and smaller desktop styles */
153162
@media (max-width: 1200px) {
154163
.setupCard {
155-
padding: 28px 24px;
164+
padding: 24px 20px;
156165
}
157166

158167
.checklistContainer {
@@ -162,48 +171,48 @@
162171
}
163172
}
164173

165-
// Small tablet styles
174+
/* Small tablet styles */
166175
@media (max-width: 992px) {
167176
.checklistItem {
168177
width: 100%;
169178
margin-bottom: 16px;
170179
}
171180

172181
.setupCard {
173-
padding: 24px 20px;
182+
padding: 20px 18px;
174183
}
175184

176185
.checklistContainer h2 {
177-
font-size: 1.6rem;
186+
font-size: 1.4rem;
178187
}
179188
}
180189

181-
// Mobile styles
190+
/* Mobile styles */
182191
@media (max-width: 768px) {
183192
.setupCard {
184-
padding: 24px 16px;
185-
margin-bottom: 24px;
193+
padding: 20px 16px;
194+
margin-bottom: 20px;
186195
}
187196

188197
.checklistContainer {
189198
h2 {
190-
font-size: 1.4rem;
199+
font-size: 1.3rem;
191200
}
192201

193202
.setupDescription {
194-
font-size: 1rem;
203+
font-size: 0.95rem;
195204
margin-bottom: 1.5rem;
196205
}
197206
}
198207

199208
.checklistItem {
200-
padding: 20px 16px;
209+
padding: 18px 16px;
201210
}
202211

203212
.dismissButton {
204213
top: 12px;
205214
right: 12px;
206-
width: 32px;
207-
height: 32px;
215+
width: 28px;
216+
height: 28px;
208217
}
209218
}

‎frontend/src/locales/de.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)