Skip to content

Commit 9bad7c5

Browse files
axguaxgu
committed
chore: email template styling
1 parent d847540 commit 9bad7c5

File tree

3 files changed

+164
-48
lines changed

3 files changed

+164
-48
lines changed

‎src/emails/archive.tsx‎

Lines changed: 73 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ type Props = {
1717
items: Item[];
1818
};
1919

20+
const baseUrl = process.env.DEPLOY_URL;
21+
2022
export function ArchiveEmail({ items }: Props) {
2123
return (
2224
<Html>
@@ -28,7 +30,7 @@ export function ArchiveEmail({ items }: Props) {
2830
<Row>
2931
<Column className="flex items-center space-x-8 font-semibold">
3032
<Img
31-
src="https://lost-and-found-rni32iluj-scottylabs.vercel.app/logo.svg"
33+
src={`${baseUrl}/logo.png`}
3234
width="42"
3335
height="42"
3436
alt="Lost and Found Logo"
@@ -46,32 +48,80 @@ export function ArchiveEmail({ items }: Props) {
4648

4749
<Section>
4850
{items?.map((item) => (
49-
<Row key={item.id}>
50-
<Column align="right" className="w-1/3 pl-[8px]">
51-
<Text>
52-
Item Name:{' '}
53-
<span className="font-semibold">{item.name}</span>
54-
</Text>
55-
</Column>
56-
<Column align="right" className="w-1/3 px-[8px]">
57-
<Text>
58-
Description:{' '}
59-
<span className="font-semibold">{item.itemLocation}</span>
60-
</Text>
61-
</Column>
62-
<Column align="right" className="w-1/3 pr-[8px]">
63-
<Text>
64-
Location:{' '}
65-
<span className="font-semibold">
66-
{item.shortDescription}
67-
</span>
68-
</Text>
69-
</Column>
70-
</Row>
51+
<div key={item.id}>
52+
<Row className="mb-[0px] pb-[0px]">
53+
<Column align="left" className="w-1 pl-[8px]">
54+
<Text className="leading-[0px] text-[#7B9E94]">
55+
<span className="font-bold">{item.name}</span>
56+
</Text>
57+
</Column>
58+
</Row>
59+
<Row className="my-[0px] py-[0px]">
60+
<Column align="left" className="w-1/3 pl-[8px]">
61+
<Text className="font-semibold leading-[0px]">
62+
Date Found:{' '}
63+
<span className="font-normal">
64+
{`${(item.foundDate.getMonth() + 1)
65+
.toString()
66+
.padStart(2, '0')}/` +
67+
`${item.foundDate
68+
.getDate()
69+
.toString()
70+
.padStart(2, '0')}/` +
71+
`${item.foundDate.getFullYear()}`}
72+
</span>
73+
</Text>
74+
</Column>
75+
<Column align="left" className="w-1/3 px-[8px]">
76+
<Text className="font-semibold leading-[0px]">
77+
Location Found:{' '}
78+
<span className="font-normal">{item.itemLocation}</span>
79+
</Text>
80+
</Column>
81+
<Column align="left" className="w-1/3 pr-[8px]">
82+
<Text className="font-semibold leading-[0px]">
83+
Color:{' '}
84+
<span className="font-normal">
85+
{item.shortDescription}
86+
</span>
87+
</Text>
88+
</Column>
89+
</Row>
90+
<Row className="mt-[0px] mb-[14px]">
91+
<Column align="left" className="w-1 pl-[8px]">
92+
<Text className="font-semibold leading-[0px]">
93+
Description:{' '}
94+
<span className="font-normal">
95+
{item.shortDescription}
96+
</span>
97+
</Text>
98+
</Column>
99+
</Row>
100+
</div>
71101
))}
72102
</Section>
73103

74104
<Hr className="my-[26px] mx-0 w-full border border-solid border-[#eaeaea]" />
105+
106+
<Section className="mt-[20px] text-center">
107+
<Text className="leading-[6px] text-[#1F4C4C]">
108+
<a
109+
href="https://lostandfound.andrew.cmu.edu"
110+
className="text-[#1F4C4C] underline"
111+
>
112+
lostandfound.andrew.cmu.edu
113+
</a>
114+
</Text>
115+
<Text className="leading-[6px] text-[#1F4C4C]">
116+
Powered by{' '}
117+
<a
118+
href="https://scottylabs.org"
119+
className="text-[#1F4C4C] underline"
120+
>
121+
ScottyLabs &lt;3
122+
</a>
123+
</Text>
124+
</Section>
75125
</Container>
76126
</Body>
77127
</Tailwind>

‎src/emails/subscription-end.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,26 @@ export function EndEmail({ previewText = '', category }: EndProps) {
6262
</Text>
6363

6464
<Hr className="my-[26px] mx-0 w-full border border-solid border-[#eaeaea]" />
65+
66+
<Section className="mt-[20px] text-center">
67+
<Text className="leading-[6px] text-[#1F4C4C]">
68+
<a
69+
href="https://lostandfound.andrew.cmu.edu"
70+
className="text-[#1F4C4C] underline"
71+
>
72+
lostandfound.andrew.cmu.edu
73+
</a>
74+
</Text>
75+
<Text className="leading-[6px] text-[#1F4C4C]">
76+
Powered by{' '}
77+
<a
78+
href="https://scottylabs.org"
79+
className="text-[#1F4C4C] underline"
80+
>
81+
ScottyLabs &lt;3
82+
</a>
83+
</Text>
84+
</Section>
6585
</Container>
6686
</Body>
6787
</Tailwind>

‎src/emails/subscription.tsx‎

Lines changed: 71 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
Tailwind,
1515
Text
1616
} from '@react-email/components';
17-
import { Categories, Locations } from 'types';
17+
import { Categories } from 'types';
1818

1919
export type Props = {
2020
previewText?: string;
@@ -64,34 +64,80 @@ export function Email({ previewText = '', category, items }: Props) {
6464

6565
<Section>
6666
{items?.map((item) => (
67-
<Row key={item.id}>
68-
<Column align="right" className="w-1/4 pl-[8px]">
69-
<Text>
70-
Item Name:{' '}
71-
<span className="font-semibold">{item.name}</span>
72-
</Text>
73-
</Column>
74-
<Column align="right" className="w-3/8 px-[8px]">
75-
<Text>
76-
Description:{' '}
77-
<span className="font-semibold">
78-
{item.shortDescription}
79-
</span>
80-
</Text>
81-
</Column>
82-
<Column align="right" className="w-3/8 pr-[8px]">
83-
<Text>
84-
Location Found:{' '}
85-
<span className="font-semibold">
86-
{Locations[item.foundLocation]}
87-
</span>
88-
</Text>
89-
</Column>
90-
</Row>
67+
<div key={item.id}>
68+
<Row className="mb-[0px] pb-[0px]">
69+
<Column align="left" className="w-1 pl-[8px]">
70+
<Text className="leading-[0px] text-[#7B9E94]">
71+
<span className="font-bold">{item.name}</span>
72+
</Text>
73+
</Column>
74+
</Row>
75+
<Row className="my-[0px] py-[0px]">
76+
<Column align="left" className="w-1/3 pl-[8px]">
77+
<Text className="font-semibold leading-[0px]">
78+
Date Found:{' '}
79+
<span className="font-normal">
80+
{`${(item.foundDate.getMonth() + 1)
81+
.toString()
82+
.padStart(2, '0')}/` +
83+
`${item.foundDate
84+
.getDate()
85+
.toString()
86+
.padStart(2, '0')}/` +
87+
`${item.foundDate.getFullYear()}`}
88+
</span>
89+
</Text>
90+
</Column>
91+
<Column align="left" className="w-1/3 px-[8px]">
92+
<Text className="font-semibold leading-[0px]">
93+
Location Found:{' '}
94+
<span className="font-normal">{item.itemLocation}</span>
95+
</Text>
96+
</Column>
97+
<Column align="left" className="w-1/3 pr-[8px]">
98+
<Text className="font-semibold leading-[0px]">
99+
Color:{' '}
100+
<span className="font-normal">
101+
{item.shortDescription}
102+
</span>
103+
</Text>
104+
</Column>
105+
</Row>
106+
<Row className="mt-[0px] mb-[14px]">
107+
<Column align="left" className="w-1 pl-[8px]">
108+
<Text className="font-semibold leading-[0px]">
109+
Description:{' '}
110+
<span className="font-normal">
111+
{item.shortDescription}
112+
</span>
113+
</Text>
114+
</Column>
115+
</Row>
116+
</div>
91117
))}
92118
</Section>
93119

94120
<Hr className="my-[26px] mx-0 w-full border border-solid border-[#eaeaea]" />
121+
122+
<Section className="mt-[20px] text-center">
123+
<Text className="leading-[6px] text-[#1F4C4C]">
124+
<a
125+
href="https://lostandfound.andrew.cmu.edu"
126+
className="text-[#1F4C4C] underline"
127+
>
128+
lostandfound.andrew.cmu.edu
129+
</a>
130+
</Text>
131+
<Text className="leading-[6px] text-[#1F4C4C]">
132+
Powered by{' '}
133+
<a
134+
href="https://scottylabs.org"
135+
className="text-[#1F4C4C] underline"
136+
>
137+
ScottyLabs &lt;3
138+
</a>
139+
</Text>
140+
</Section>
95141
</Container>
96142
</Body>
97143
</Tailwind>

0 commit comments

Comments
 (0)