pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-03 17:26:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve site and resource info cards and other small visual tweaks

Browse Source
This commit is contained in:
Milo Schwartz
2024-12-30 23:41:06 -05:00
parent e6263567a9
commit 172e0f07d5
31 changed files with 469 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
server/emails/templates/NotifyResetPassword.tsx
View File

@@ -33,10 +33,20 @@ export const ConfirmPasswordReset = ({ email }: Props) => {
}
}}
>
<Body className="font-sans">
<Body className="font-sans relative">
<Container className="bg-white border border-solid border-gray-200 p-6 max-w-lg mx-auto my-8 rounded-lg">
<div className="flex items-center justify-between">
<div className="text-sm font-bold text-orange-500">
Pangolin
</div>
<div className="text-sm text-gray-500">
{new Date().toLocaleDateString()}
</div>
</div>
<Heading className="text-2xl font-semibold text-gray-800 text-center">
Your password has been successfully reset
Password Reset Confirmation
</Heading>
<Text className="text-base text-gray-700 mt-4">
Hi {email || "there"},
@@ -46,12 +56,10 @@ export const ConfirmPasswordReset = ({ email }: Props) => {
reset. If you made this change, no further action is
required.
</Text>
<Section className="text-center my-6">
<Text className="text-base text-gray-700">
If you did not request this change, please
contact our support team immediately.
</Text>
</Section>
<Text className="text-base text-gray-700">
If you did not request this change, please contact
our support team immediately.
</Text>
<Text className="text-base text-gray-700 mt-2">
Thank you for keeping your account secure.
</Text>

14
server/emails/templates/ResetPasswordCode.tsx
View File

@@ -37,8 +37,18 @@ export const ResetPasswordCode = ({ email, code, link }: Props) => {
>
<Body className="font-sans">
<Container className="bg-white border border-solid border-gray-200 p-6 max-w-lg mx-auto my-8 rounded-lg">
<div className="flex items-center justify-between">
<div className="text-sm font-bold text-orange-500">
Pangolin
</div>
<div className="text-sm text-gray-500">
{new Date().toLocaleDateString()}
</div>
</div>
<Heading className="text-2xl font-semibold text-gray-800 text-center">
You've requested to reset your password
Password Reset Request
</Heading>
<Text className="text-base text-gray-700 mt-4">
Hi {email || "there"},
@@ -51,7 +61,7 @@ export const ResetPasswordCode = ({ email, code, link }: Props) => {
and follow the instructions to reset your password,
or manually enter the following code:
</Text>
<Section className="text-center my-6">
<Section className="text-center">
<Text className="inline-block bg-primary text-xl font-bold text-white py-2 px-4 border border-gray-300 rounded-xl">
{code}
</Text>

13
server/emails/templates/ResourceOTPCode.tsx
View File

@@ -43,6 +43,16 @@ export const ResourceOTPCode = ({
>
<Body className="font-sans">
<Container className="bg-white border border-solid border-gray-200 p-6 max-w-lg mx-auto my-8 rounded-lg">
<div className="flex items-center justify-between">
<div className="text-sm font-bold text-orange-500">
Pangolin
</div>
<div className="text-sm text-gray-500">
{new Date().toLocaleDateString()}
</div>
</div>
<Heading className="text-2xl font-semibold text-gray-800 text-center">
Your One-Time Password
</Heading>
@@ -56,12 +66,11 @@ export const ResourceOTPCode = ({
<strong>{organizationName}</strong>. Use the OTP
below to complete your authentication:
</Text>
<Section className="text-center my-6">
<Section className="text-center">
<Text className="inline-block bg-primary text-xl font-bold text-white py-2 px-4 border border-gray-300 rounded-xl">
{otp}
</Text>
</Section>
<Text className="text-sm text-gray-500 mt-6">
Best regards,
<br />

16
server/emails/templates/SendInviteLink.tsx
View File

@@ -46,8 +46,18 @@ export const SendInviteLink = ({
>
<Body className="font-sans">
<Container className="bg-white border border-solid border-gray-200 p-6 max-w-lg mx-auto my-8 rounded-lg">
<div className="flex items-center justify-between">
<div className="text-sm font-bold text-orange-500">
Pangolin
</div>
<div className="text-sm text-gray-500">
{new Date().toLocaleDateString()}
</div>
</div>
<Heading className="text-2xl font-semibold text-gray-800 text-center">
You're invited to join a Fossorial organization
You're Invite to Join {orgName}
</Heading>
<Text className="text-base text-gray-700 mt-4">
Hi {email || "there"},
@@ -65,12 +75,12 @@ export const SendInviteLink = ({
{expiresInDays === "1" ? "day" : "days"}.
</b>
</Text>
<Section className="text-center my-6">
<Section className="text-center">
<Button
href={inviteLink}
className="rounded-lg bg-primary px-[12px] py-[9px] text-center font-semibold text-white cursor-pointer text-xl"
>
Accept invitation to {orgName}
Accept Invite to {orgName}
</Button>
</Section>

39
server/emails/templates/TwoFactorAuthNotification.tsx
View File

@@ -36,6 +36,16 @@ export const TwoFactorAuthNotification = ({ email, enabled }: Props) => {
>
<Body className="font-sans">
<Container className="bg-white border border-solid border-gray-200 p-6 max-w-lg mx-auto my-8 rounded-lg">
<div className="flex items-center justify-between">
<div className="text-sm font-bold text-orange-500">
Pangolin
</div>
<div className="text-sm text-gray-500">
{new Date().toLocaleDateString()}
</div>
</div>
<Heading className="text-2xl font-semibold text-gray-800 text-center">
Two-Factor Authentication{" "}
{enabled ? "Enabled" : "Disabled"}
@@ -48,22 +58,19 @@ export const TwoFactorAuthNotification = ({ email, enabled }: Props) => {
has been successfully{" "}
{enabled ? "enabled" : "disabled"} on your account.
</Text>
<Section className="text-center my-6">
{enabled ? (
<Text className="text-base text-gray-700">
With Two-Factor Authentication enabled, your
account is now more secure. Please ensure
you keep your authentication method safe.
</Text>
) : (
<Text className="text-base text-gray-700">
With Two-Factor Authentication disabled,
your account may be less secure. We
recommend enabling it to protect your
account.
</Text>
)}
</Section>
{enabled ? (
<Text className="text-base text-gray-700">
With Two-Factor Authentication enabled, your
account is now more secure. Please ensure you
keep your authentication method safe.
</Text>
) : (
<Text className="text-base text-gray-700">
With Two-Factor Authentication disabled, your
account may be less secure. We recommend
enabling it to protect your account.
</Text>
)}
<Text className="text-base text-gray-700 mt-2">
If you did not make this change, please contact our
support team immediately.

17
server/emails/templates/VerifyEmailCode.tsx
View File

@@ -41,17 +41,28 @@ export const VerifyEmail = ({
>
<Body className="font-sans">
<Container className="bg-white border border-solid border-gray-200 p-6 max-w-lg mx-auto my-8 rounded-lg">
<div className="flex items-center justify-between">
<div className="text-sm font-bold text-orange-500">
Pangolin
</div>
<div className="text-sm text-gray-500">
{new Date().toLocaleDateString()}
</div>
</div>
<Heading className="text-2xl font-semibold text-gray-800 text-center">
Please verify your email
Please Verify Your Email
</Heading>
<Text className="text-base text-gray-700 mt-4">
Hi {username || "there"},
</Text>
<Text className="text-base text-gray-700 mt-2">
You’ve requested to verify your email. Please use
the code below to complete the verification process upon logging in.
the code below to complete the verification process
upon logging in.
</Text>
<Section className="text-center my-6">
<Section className="text-center">
<Text className="inline-block bg-primary text-xl font-bold text-white py-2 px-4 border border-gray-300 rounded-xl">
{verificationCode}
</Text>