@tracked/emails 0.1.5 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/dist/components/content.d.ts +58 -0
  2. package/dist/components/content.d.ts.map +1 -0
  3. package/dist/components/content.js +166 -0
  4. package/dist/components/content.js.map +1 -0
  5. package/dist/components/index.d.ts +6 -0
  6. package/dist/components/index.d.ts.map +1 -0
  7. package/dist/components/index.js +11 -0
  8. package/dist/components/index.js.map +1 -0
  9. package/dist/components/interactive.d.ts +23 -0
  10. package/dist/components/interactive.d.ts.map +1 -0
  11. package/dist/components/interactive.js +66 -0
  12. package/dist/components/interactive.js.map +1 -0
  13. package/dist/components/layout.d.ts +27 -0
  14. package/dist/components/layout.d.ts.map +1 -0
  15. package/dist/components/layout.js +83 -0
  16. package/dist/components/layout.js.map +1 -0
  17. package/dist/components/tokens.d.ts +58 -0
  18. package/dist/components/tokens.d.ts.map +1 -0
  19. package/dist/components/tokens.js +64 -0
  20. package/dist/components/tokens.js.map +1 -0
  21. package/dist/components/typography.d.ts +31 -0
  22. package/dist/components/typography.d.ts.map +1 -0
  23. package/dist/components/typography.js +72 -0
  24. package/dist/components/typography.js.map +1 -0
  25. package/dist/emails/anniversary.d.ts +12 -0
  26. package/dist/emails/anniversary.d.ts.map +1 -0
  27. package/dist/emails/anniversary.js +41 -0
  28. package/dist/emails/anniversary.js.map +1 -0
  29. package/dist/emails/app-review-request.d.ts +11 -0
  30. package/dist/emails/app-review-request.d.ts.map +1 -0
  31. package/dist/emails/app-review-request.js +24 -0
  32. package/dist/emails/app-review-request.js.map +1 -0
  33. package/dist/emails/bodyweight-goal-reached.d.ts +1 -1
  34. package/dist/emails/bodyweight-goal-reached.d.ts.map +1 -1
  35. package/dist/emails/bodyweight-goal-reached.js +86 -159
  36. package/dist/emails/bodyweight-goal-reached.js.map +1 -1
  37. package/dist/emails/client-inactive-alert.d.ts +14 -0
  38. package/dist/emails/client-inactive-alert.d.ts.map +1 -0
  39. package/dist/emails/client-inactive-alert.js +34 -0
  40. package/dist/emails/client-inactive-alert.js.map +1 -0
  41. package/dist/emails/client-onboarded.d.ts +35 -0
  42. package/dist/emails/client-onboarded.d.ts.map +1 -0
  43. package/dist/emails/client-onboarded.js +66 -0
  44. package/dist/emails/client-onboarded.js.map +1 -0
  45. package/dist/emails/coach-invite.d.ts +1 -1
  46. package/dist/emails/coach-invite.d.ts.map +1 -1
  47. package/dist/emails/coach-invite.js +13 -121
  48. package/dist/emails/coach-invite.js.map +1 -1
  49. package/dist/emails/coach-removed-client.d.ts +1 -1
  50. package/dist/emails/coach-removed-client.d.ts.map +1 -1
  51. package/dist/emails/coach-removed-client.js +3 -76
  52. package/dist/emails/coach-removed-client.js.map +1 -1
  53. package/dist/emails/direct-message.d.ts +1 -1
  54. package/dist/emails/direct-message.d.ts.map +1 -1
  55. package/dist/emails/direct-message.js +22 -96
  56. package/dist/emails/direct-message.js.map +1 -1
  57. package/dist/emails/feature-discovery.d.ts +2 -1
  58. package/dist/emails/feature-discovery.d.ts.map +1 -1
  59. package/dist/emails/feature-discovery.js +20 -117
  60. package/dist/emails/feature-discovery.js.map +1 -1
  61. package/dist/emails/first-workout-assigned.d.ts +1 -1
  62. package/dist/emails/first-workout-assigned.d.ts.map +1 -1
  63. package/dist/emails/first-workout-assigned.js +3 -94
  64. package/dist/emails/first-workout-assigned.js.map +1 -1
  65. package/dist/emails/first-workout-completed.d.ts +1 -1
  66. package/dist/emails/first-workout-completed.d.ts.map +1 -1
  67. package/dist/emails/first-workout-completed.js +14 -125
  68. package/dist/emails/first-workout-completed.js.map +1 -1
  69. package/dist/emails/inactive-reengagement.d.ts +10 -0
  70. package/dist/emails/inactive-reengagement.d.ts.map +1 -0
  71. package/dist/emails/inactive-reengagement.js +31 -0
  72. package/dist/emails/inactive-reengagement.js.map +1 -0
  73. package/dist/emails/index.d.ts +1 -0
  74. package/dist/emails/index.d.ts.map +1 -1
  75. package/dist/emails/index.js +1 -0
  76. package/dist/emails/index.js.map +1 -1
  77. package/dist/emails/monthly-report.d.ts +2 -1
  78. package/dist/emails/monthly-report.d.ts.map +1 -1
  79. package/dist/emails/monthly-report.js +14 -166
  80. package/dist/emails/monthly-report.js.map +1 -1
  81. package/dist/emails/new-follower.d.ts +1 -1
  82. package/dist/emails/new-follower.d.ts.map +1 -1
  83. package/dist/emails/new-follower.js +7 -91
  84. package/dist/emails/new-follower.js.map +1 -1
  85. package/dist/emails/nps-survey.d.ts +9 -0
  86. package/dist/emails/nps-survey.d.ts.map +1 -0
  87. package/dist/emails/nps-survey.js +51 -0
  88. package/dist/emails/nps-survey.js.map +1 -0
  89. package/dist/emails/subscription-canceled.d.ts +1 -1
  90. package/dist/emails/subscription-canceled.d.ts.map +1 -1
  91. package/dist/emails/subscription-canceled.js +20 -127
  92. package/dist/emails/subscription-canceled.js.map +1 -1
  93. package/dist/emails/support-email.d.ts +1 -1
  94. package/dist/emails/support-email.d.ts.map +1 -1
  95. package/dist/emails/support-email.js +3 -38
  96. package/dist/emails/support-email.js.map +1 -1
  97. package/dist/emails/team-invite.d.ts.map +1 -1
  98. package/dist/emails/team-invite.js +7 -96
  99. package/dist/emails/team-invite.js.map +1 -1
  100. package/dist/emails/team-member-removed-email.d.ts +1 -1
  101. package/dist/emails/team-member-removed-email.d.ts.map +1 -1
  102. package/dist/emails/team-member-removed-email.js +3 -93
  103. package/dist/emails/team-member-removed-email.js.map +1 -1
  104. package/dist/emails/tracked-magic-link-activate.d.ts +2 -2
  105. package/dist/emails/tracked-magic-link-activate.d.ts.map +1 -1
  106. package/dist/emails/tracked-magic-link-activate.js +3 -91
  107. package/dist/emails/tracked-magic-link-activate.js.map +1 -1
  108. package/dist/emails/tracked-magic-link.d.ts +3 -3
  109. package/dist/emails/tracked-magic-link.d.ts.map +1 -1
  110. package/dist/emails/tracked-magic-link.js +3 -99
  111. package/dist/emails/tracked-magic-link.js.map +1 -1
  112. package/dist/emails/week-one-checkin.d.ts +3 -2
  113. package/dist/emails/week-one-checkin.d.ts.map +1 -1
  114. package/dist/emails/week-one-checkin.js +22 -136
  115. package/dist/emails/week-one-checkin.js.map +1 -1
  116. package/dist/emails/weekly-progress-digest.d.ts +21 -0
  117. package/dist/emails/weekly-progress-digest.d.ts.map +1 -0
  118. package/dist/emails/weekly-progress-digest.js +78 -0
  119. package/dist/emails/weekly-progress-digest.js.map +1 -0
  120. package/dist/emails/welcome.d.ts +3 -2
  121. package/dist/emails/welcome.d.ts.map +1 -1
  122. package/dist/emails/welcome.js +16 -142
  123. package/dist/emails/welcome.js.map +1 -1
  124. package/dist/index.d.ts +9 -2
  125. package/dist/index.d.ts.map +1 -1
  126. package/dist/index.js +12 -2
  127. package/dist/index.js.map +1 -1
  128. package/package.json +20 -20
  129. package/src/components/content.tsx +351 -0
  130. package/src/components/index.ts +44 -0
  131. package/src/components/interactive.tsx +260 -0
  132. package/src/components/layout.tsx +217 -0
  133. package/src/components/tokens.ts +74 -0
  134. package/src/components/typography.tsx +148 -0
  135. package/src/emails/anniversary.tsx +133 -0
  136. package/src/emails/app-review-request.tsx +100 -0
  137. package/src/emails/bodyweight-goal-reached.tsx +202 -350
  138. package/src/emails/client-inactive-alert.tsx +130 -0
  139. package/src/emails/client-onboarded.tsx +272 -0
  140. package/src/emails/coach-invite.tsx +67 -250
  141. package/src/emails/coach-removed-client.tsx +36 -197
  142. package/src/emails/direct-message.tsx +69 -227
  143. package/src/emails/feature-discovery.tsx +82 -266
  144. package/src/emails/first-workout-assigned.tsx +52 -238
  145. package/src/emails/first-workout-completed.tsx +88 -294
  146. package/src/emails/inactive-reengagement.tsx +81 -0
  147. package/src/emails/index.tsx +1 -0
  148. package/src/emails/monthly-report.tsx +198 -520
  149. package/src/emails/new-follower.tsx +60 -238
  150. package/src/emails/nps-survey.tsx +149 -0
  151. package/src/emails/subscription-canceled.tsx +88 -294
  152. package/src/emails/support-email.tsx +33 -67
  153. package/src/emails/team-invite.tsx +47 -240
  154. package/src/emails/team-member-removed-email.tsx +23 -218
  155. package/src/emails/tracked-magic-link-activate.tsx +29 -237
  156. package/src/emails/tracked-magic-link.tsx +31 -251
  157. package/src/emails/week-one-checkin.tsx +108 -329
  158. package/src/emails/weekly-progress-digest.tsx +248 -0
  159. package/src/emails/welcome.tsx +58 -326
  160. package/src/index.ts +19 -2
  161. package/dist/emails/client-accepted-invitation.d.ts +0 -10
  162. package/dist/emails/client-accepted-invitation.d.ts.map +0 -1
  163. package/dist/emails/client-accepted-invitation.js +0 -99
  164. package/dist/emails/client-accepted-invitation.js.map +0 -1
  165. package/src/emails/client-accepted-invitation.tsx +0 -258
@@ -1,18 +1,17 @@
1
- import React from "react";
1
+ import * as React from "react";
2
+ import { Section, Text, Row, Column } from "@react-email/components";
2
3
  import {
3
- Body,
4
- Column,
5
- Container,
6
- Head,
7
- Hr,
8
- Html,
9
- Img,
10
- Link,
11
- Preview,
12
- Row,
13
- Section,
14
- Text,
15
- } from "@react-email/components";
4
+ EmailLayout,
5
+ EmailHeader,
6
+ EmailFooter,
7
+ Heading,
8
+ Paragraph,
9
+ FeatureBox,
10
+ FeatureList,
11
+ PrimaryButton,
12
+ DiscordButton,
13
+ colors,
14
+ } from "../components";
16
15
 
17
16
  interface BodyweightGoalReachedEmailProps {
18
17
  userName: string;
@@ -23,20 +22,18 @@ interface BodyweightGoalReachedEmailProps {
23
22
  weightUnit: "kg" | "lbs";
24
23
  timeToGoal?: string;
25
24
  progressUrl: string;
26
- websiteUrl: string;
25
+ websiteUrl?: string;
27
26
  }
28
27
 
29
- const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
30
-
31
28
  export const BodyweightGoalReachedEmail = ({
32
- userName,
33
- goalType,
34
- startWeight,
35
- currentWeight,
36
- goalWeight,
37
- weightUnit,
38
- timeToGoal,
39
- progressUrl,
29
+ userName = "Alex",
30
+ goalType = "loss",
31
+ startWeight = 185,
32
+ currentWeight = 170,
33
+ goalWeight = 170,
34
+ weightUnit = "lbs",
35
+ timeToGoal = "12 weeks",
36
+ progressUrl = "tracked://bodyweight",
40
37
  websiteUrl = "https://tracked.gg",
41
38
  }: BodyweightGoalReachedEmailProps) => {
42
39
  const weightChange = Math.abs(currentWeight - startWeight);
@@ -56,341 +53,196 @@ export const BodyweightGoalReachedEmail = ({
56
53
  };
57
54
 
58
55
  return (
59
- <Html>
60
- <Head>
61
- <meta name="color-scheme" content="light only" />
62
- <meta name="supported-color-schemes" content="light only" />
63
- </Head>
64
- <Preview>Congratulations! You've reached your bodyweight goal on Tracked</Preview>
65
- <Body style={main}>
66
- <Container style={container}>
67
- <Section style={box}>
68
- <Row style={{ marginBottom: "8px" }}>
69
- <Column style={{ width: "auto", verticalAlign: "middle" }}>
70
- <Img src={`${baseUrl}`} width="28" height="28" alt="Tracked" />
71
- </Column>
72
- <Column
73
- style={{
74
- width: "auto",
75
- verticalAlign: "middle",
76
- paddingLeft: "4px",
77
- }}
78
- >
79
- <Text
80
- style={{
81
- fontSize: "28px",
82
- fontWeight: "900",
83
- fontFamily:
84
- "Raleway, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
85
- color: "#020617",
86
- margin: "0",
87
- lineHeight: "32px",
88
- letterSpacing: "0.5px",
89
- }}
90
- >
91
- TRACKED
92
- </Text>
93
- </Column>
94
- </Row>
95
- <Hr style={hr} />
96
-
97
- <Section style={{ textAlign: "center" as const, margin: "24px 0" }}>
98
- <Text style={{ fontSize: "64px", margin: "0" }}>🎉</Text>
99
- </Section>
100
-
101
- <Text style={heading}>Goal Achieved!</Text>
102
- <Text style={celebrationText}>{getGoalMessage()}</Text>
103
-
104
- <Section style={statsBox}>
105
- <Text style={statsHeading}>Your Achievement:</Text>
106
- <Row>
107
- <Column>
108
- <Text style={statsLabel}>Starting Weight</Text>
109
- <Text style={statsValue}>
110
- {startWeight} {weightUnit}
111
- </Text>
112
- </Column>
113
- <Column>
114
- <Text style={statsLabel}>Current Weight</Text>
115
- <Text style={statsValue}>
116
- {currentWeight} {weightUnit}
117
- </Text>
118
- </Column>
119
- <Column>
120
- <Text style={statsLabel}>Goal Weight</Text>
121
- <Text style={statsValue}>
122
- {goalWeight} {weightUnit}
123
- </Text>
124
- </Column>
125
- </Row>
126
- <Section style={changeBox}>
127
- <Text style={changeText}>
128
- You've {changeDirection} {weightChange.toFixed(1)} {weightUnit}
129
- {timeToGoal && ` in ${timeToGoal}`}!
130
- </Text>
131
- </Section>
132
- </Section>
133
-
134
- <Text style={paragraph}>
135
- Congratulations, {userName}! This is a huge accomplishment that took
136
- dedication, consistency, and hard work. You set a goal and achieved
137
- it - that's something to be proud of!
56
+ <EmailLayout preview="Congratulations! You've reached your bodyweight goal on Tracked">
57
+ <EmailHeader />
58
+
59
+ <Section style={{ textAlign: "center" as const, margin: "24px 0" }}>
60
+ <Text style={{ fontSize: "64px", margin: "0" }}>🎉</Text>
61
+ </Section>
62
+
63
+ <Heading style={{ textAlign: "center" as const, fontSize: "32px" }}>
64
+ Goal Achieved!
65
+ </Heading>
66
+ <Text
67
+ style={{
68
+ color: colors.accent,
69
+ fontSize: "18px",
70
+ lineHeight: "26px",
71
+ textAlign: "center" as const,
72
+ marginBottom: "24px",
73
+ }}
74
+ >
75
+ {getGoalMessage()}
76
+ </Text>
77
+
78
+ <Section
79
+ style={{
80
+ backgroundColor: colors.surface,
81
+ padding: "20px 24px",
82
+ borderRadius: "8px",
83
+ margin: "24px 0",
84
+ borderLeft: `4px solid ${colors.accent}`,
85
+ }}
86
+ >
87
+ <Text
88
+ style={{
89
+ color: colors.accent,
90
+ fontSize: "16px",
91
+ fontWeight: "bold" as const,
92
+ marginBottom: "16px",
93
+ textAlign: "center" as const,
94
+ }}
95
+ >
96
+ Your Achievement:
97
+ </Text>
98
+ <Row>
99
+ <Column>
100
+ <Text
101
+ style={{
102
+ color: colors.textMuted,
103
+ fontSize: "12px",
104
+ textAlign: "center" as const,
105
+ marginBottom: "4px",
106
+ textTransform: "uppercase" as const,
107
+ }}
108
+ >
109
+ Starting Weight
138
110
  </Text>
139
-
140
- <div
111
+ <Text
141
112
  style={{
142
- marginTop: "24px",
143
- marginBottom: "24px",
144
- textAlign: "left" as const,
113
+ color: colors.textPrimary,
114
+ fontSize: "20px",
115
+ fontWeight: "bold" as const,
116
+ textAlign: "center" as const,
145
117
  }}
146
118
  >
147
- <a
148
- href={progressUrl}
149
- style={{
150
- backgroundColor: "#0f172a",
151
- borderRadius: "8px",
152
- fontSize: "16px",
153
- fontWeight: "bold",
154
- textDecoration: "none",
155
- padding: "12px 32px",
156
- display: "inline-block",
157
- }}
158
- >
159
- <span style={{ color: "#ffffff", textDecoration: "none" }}>
160
- View Your Progress
161
- </span>
162
- </a>
163
- </div>
164
-
165
- <Section style={nextStepsBox}>
166
- <Text style={nextStepsHeading}>What's Next?</Text>
167
- <ul style={nextStepsList}>
168
- <li style={nextStepItem}>
169
- Maintain your progress with consistent training
170
- </li>
171
- <li style={nextStepItem}>
172
- Set a new goal to continue your journey
173
- </li>
174
- <li style={nextStepItem}>
175
- Share your success with the Tracked community
176
- </li>
177
- <li style={nextStepItem}>
178
- Reflect on what worked and keep building on it
179
- </li>
180
- </ul>
181
- </Section>
182
-
183
- <Section style={motivationBox}>
184
- <Text style={motivationText}>
185
- "Success is the sum of small efforts repeated day in and day out."
186
- </Text>
187
- <Text style={{ ...motivationText, marginTop: "8px", fontStyle: "normal" as const }}>
188
- You proved it - congratulations! 💪
189
- </Text>
190
- </Section>
191
-
192
- <div
119
+ {startWeight} {weightUnit}
120
+ </Text>
121
+ </Column>
122
+ <Column>
123
+ <Text
193
124
  style={{
194
- textAlign: "left" as const,
195
- margin: "24px 0",
125
+ color: colors.textMuted,
126
+ fontSize: "12px",
127
+ textAlign: "center" as const,
128
+ marginBottom: "4px",
129
+ textTransform: "uppercase" as const,
196
130
  }}
197
131
  >
198
- <a
199
- href="https://www.discord.gg/trackedgg"
200
- style={{
201
- backgroundColor: "#5865F2",
202
- borderRadius: "8px",
203
- fontSize: "16px",
204
- fontWeight: "bold",
205
- textDecoration: "none",
206
- padding: "12px 32px",
207
- display: "inline-block",
208
- }}
209
- >
210
- <span style={{ color: "#ffffff", textDecoration: "none" }}>
211
- Join our Discord Community
212
- </span>
213
- </a>
214
- </div>
215
-
216
- <Hr style={hr} />
217
- <Text style={footer}>
218
- Copyright © Tracked Training Platform Inc. <br /> 9101 Horne
219
- Street, Vancouver, BC
132
+ Current Weight
220
133
  </Text>
221
-
222
- <Container>
223
- <Link
224
- href={`${websiteUrl}/terms`}
225
- style={{ ...footer, paddingRight: 10 }}
226
- >
227
- Terms
228
- </Link>
229
- <Link style={{ ...footer, paddingRight: 10 }}> | </Link>
230
- <Link
231
- href={`${websiteUrl}/privacy`}
232
- style={{ ...footer, paddingRight: 10 }}
233
- >
234
- Privacy
235
- </Link>
236
- <Link style={{ ...footer, paddingRight: 10 }}> | </Link>
237
- <Link
238
- href={`${websiteUrl}/support`}
239
- style={{ ...footer, paddingRight: 10 }}
240
- >
241
- Support
242
- </Link>
243
- </Container>
244
-
245
- <Text style={footer}>
246
- This is a service notification by the Tracked Training Platform.
134
+ <Text
135
+ style={{
136
+ color: colors.textPrimary,
137
+ fontSize: "20px",
138
+ fontWeight: "bold" as const,
139
+ textAlign: "center" as const,
140
+ }}
141
+ >
142
+ {currentWeight} {weightUnit}
247
143
  </Text>
248
- </Section>
249
- </Container>
250
- </Body>
251
- </Html>
144
+ </Column>
145
+ <Column>
146
+ <Text
147
+ style={{
148
+ color: colors.textMuted,
149
+ fontSize: "12px",
150
+ textAlign: "center" as const,
151
+ marginBottom: "4px",
152
+ textTransform: "uppercase" as const,
153
+ }}
154
+ >
155
+ Goal Weight
156
+ </Text>
157
+ <Text
158
+ style={{
159
+ color: colors.textPrimary,
160
+ fontSize: "20px",
161
+ fontWeight: "bold" as const,
162
+ textAlign: "center" as const,
163
+ }}
164
+ >
165
+ {goalWeight} {weightUnit}
166
+ </Text>
167
+ </Column>
168
+ </Row>
169
+ <Section
170
+ style={{
171
+ backgroundColor: colors.surfaceAlt,
172
+ padding: "12px 16px",
173
+ borderRadius: "6px",
174
+ marginTop: "16px",
175
+ }}
176
+ >
177
+ <Text
178
+ style={{
179
+ color: colors.accent,
180
+ fontSize: "16px",
181
+ fontWeight: "bold" as const,
182
+ textAlign: "center" as const,
183
+ margin: "0",
184
+ }}
185
+ >
186
+ You've {changeDirection} {weightChange.toFixed(1)} {weightUnit}
187
+ {timeToGoal && ` in ${timeToGoal}`}!
188
+ </Text>
189
+ </Section>
190
+ </Section>
191
+
192
+ <Paragraph>
193
+ Congratulations, {userName}! This is a huge accomplishment that took
194
+ dedication, consistency, and hard work. You set a goal and achieved it -
195
+ that's something to be proud of!
196
+ </Paragraph>
197
+
198
+ <PrimaryButton href={progressUrl}>View Your Progress</PrimaryButton>
199
+
200
+ <FeatureBox title="What's Next?">
201
+ <FeatureList
202
+ items={[
203
+ { title: "Maintain your progress with consistent training" },
204
+ { title: "Set a new goal to continue your journey" },
205
+ { title: "Share your success with the Tracked community" },
206
+ { title: "Reflect on what worked and keep building on it" },
207
+ ]}
208
+ />
209
+ </FeatureBox>
210
+
211
+ <Section
212
+ style={{
213
+ padding: "16px 0 16px 20px",
214
+ margin: "24px 0",
215
+ borderLeft: `4px solid ${colors.accent}`,
216
+ }}
217
+ >
218
+ <Text
219
+ style={{
220
+ color: colors.textMuted,
221
+ fontSize: "15px",
222
+ lineHeight: "22px",
223
+ fontStyle: "italic" as const,
224
+ margin: "0",
225
+ }}
226
+ >
227
+ "Success is the sum of small efforts repeated day in and day out."
228
+ </Text>
229
+ <Text
230
+ style={{
231
+ color: colors.textMuted,
232
+ fontSize: "15px",
233
+ lineHeight: "22px",
234
+ marginTop: "8px",
235
+ }}
236
+ >
237
+ You proved it - congratulations! 💪
238
+ </Text>
239
+ </Section>
240
+
241
+ <DiscordButton />
242
+
243
+ <EmailFooter websiteUrl={websiteUrl} />
244
+ </EmailLayout>
252
245
  );
253
246
  };
254
247
 
255
- const main = {
256
- backgroundColor: "#020617", // slate-950
257
- fontFamily:
258
- '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
259
- };
260
-
261
- const container = {
262
- backgroundColor: "#020617", // slate-950
263
- margin: "0 auto",
264
- padding: "20px 0 48px",
265
- marginBottom: "64px",
266
- borderRadius: "8px",
267
- };
268
-
269
- const box = {
270
- padding: "0 24px",
271
- };
272
-
273
- const hr = {
274
- borderColor: "#4ade80", // green-400
275
- margin: "24px 0",
276
- borderWidth: "1px",
277
- };
278
-
279
- const paragraph = {
280
- color: "#ffffff", // white
281
- fontSize: "16px",
282
- lineHeight: "24px",
283
- textAlign: "left" as const,
284
- };
285
-
286
- const heading = {
287
- color: "#ffffff", // white
288
- fontSize: "32px",
289
- lineHeight: "40px",
290
- fontWeight: "bold",
291
- marginBottom: "8px",
292
- textAlign: "center" as const,
293
- };
294
-
295
- const celebrationText = {
296
- color: "#4ade80",
297
- fontSize: "18px",
298
- lineHeight: "26px",
299
- textAlign: "center" as const,
300
- marginBottom: "24px",
301
- };
302
-
303
- const statsBox = {
304
- backgroundColor: "#1e293b",
305
- padding: "20px 24px",
306
- borderRadius: "8px",
307
- margin: "24px 0",
308
- borderLeft: "4px solid #4ade80",
309
- };
310
-
311
- const statsHeading = {
312
- color: "#4ade80",
313
- fontSize: "16px",
314
- fontWeight: "bold",
315
- marginBottom: "16px",
316
- textAlign: "center" as const,
317
- };
318
-
319
- const statsLabel = {
320
- color: "#94a3b8",
321
- fontSize: "12px",
322
- textAlign: "center" as const,
323
- marginBottom: "4px",
324
- textTransform: "uppercase" as const,
325
- };
326
-
327
- const statsValue = {
328
- color: "#ffffff",
329
- fontSize: "20px",
330
- fontWeight: "bold",
331
- textAlign: "center" as const,
332
- };
333
-
334
- const changeBox = {
335
- backgroundColor: "#0f172a",
336
- padding: "12px 16px",
337
- borderRadius: "6px",
338
- marginTop: "16px",
339
- };
340
-
341
- const changeText = {
342
- color: "#4ade80",
343
- fontSize: "16px",
344
- fontWeight: "bold",
345
- textAlign: "center" as const,
346
- margin: "0",
347
- };
348
-
349
- const nextStepsBox = {
350
- backgroundColor: "#1e293b",
351
- padding: "16px 24px",
352
- borderRadius: "8px",
353
- margin: "24px 0",
354
- };
355
-
356
- const nextStepsHeading = {
357
- color: "#ffffff",
358
- fontSize: "16px",
359
- fontWeight: "bold",
360
- marginBottom: "12px",
361
- };
362
-
363
- const nextStepsList = {
364
- margin: "0",
365
- paddingLeft: "20px",
366
- };
367
-
368
- const nextStepItem = {
369
- color: "#e2e8f0",
370
- fontSize: "14px",
371
- lineHeight: "24px",
372
- marginBottom: "8px",
373
- };
374
-
375
- const motivationBox = {
376
- backgroundColor: "transparent",
377
- padding: "16px 0",
378
- margin: "24px 0",
379
- borderLeft: "4px solid #4ade80",
380
- paddingLeft: "20px",
381
- };
382
-
383
- const motivationText = {
384
- color: "#94a3b8",
385
- fontSize: "15px",
386
- lineHeight: "22px",
387
- fontStyle: "italic" as const,
388
- };
389
-
390
- const footer = {
391
- color: "#94a3b8", // slate-400 for subtle footer text
392
- fontSize: "12px",
393
- lineHeight: "16px",
394
- };
395
-
396
248
  export default BodyweightGoalReachedEmail;