fix: emails colors

apps/app/.env.example

@@ -26,7 +26,7 @@ SMTP_PASSWORD=secret
 SMTP_FROM_NAME=FromName
 SMTP_FROM_EMAIL=[email protected]
 NEXT_PUBLIC_ENABLE_MAILING_SERVICE=false
-SUPPORT_EMAIL=support@example.com
+SUPPORT_EMAIL=louis@huort.com
 S3_REGION=fr-par
 NEXT_PUBLIC_S3_BUCKET_NAME=secret
 S3_ACCESS_KEY_ID=secret

apps/app/src/constants/medias.ts

@@ -1 +1,2 @@
-export const logoUrl = "https://upload.wikimedia.org/wikipedia/commons/5/5e/Vercel_logo_black.svg"
+export const logoUrl =
+  "https://imgs.search.brave.com/I_nW-x21BB6_TTk_xXuYVy5pZlaMfv0h4q35oqhrxvc/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9zZWVr/bG9nby5jb20vaW1h/Z2VzL04vbmV4dC1q/cy1pY29uLWxvZ28t/RUUzMDJENURCRC1z/ZWVrbG9nby5jb20u/cG5n"

packages/emails/components/body.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react"
 
 import { Body as OBody, BodyProps } from "@react-email/components"
 
-import { background, foreground } from "../contants"
+import { background, foreground } from "../constants"
 
 export const Body = ({
   children,

packages/emails/components/button.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react"
 
 import { Button as OButton, ButtonProps } from "@react-email/components"
 
-import { foreground, primary } from "../contants"
+import { foreground, primary } from "../constants"
 
 export const Button = ({
   children,

packages/emails/components/card.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react"
 
 import { Section as OSection, SectionProps } from "@react-email/components"
 
-import { content1 } from "../contants"
+import { content1 } from "../constants"
 
 export const Card = ({
   children,

packages/emails/components/footer.tsx

@@ -2,7 +2,7 @@ import React from "react"
 
 import { Container, Hr, Img, Text } from "@react-email/components"
 
-import { mutedForeground } from "../contants"
+import { mutedForeground } from "../constants"
 
 import { Link } from "./link"
 
@@ -32,7 +32,7 @@ export const Footer = ({
         </Link>
       </Text>
       <Hr style={hrStyle} />
-      <Img src={logoUrl} width="82" height="32" alt="Next boilerplate" style={imgStyle} />
+      <Img src={logoUrl} width="32" height="32" alt="Next boilerplate" style={imgStyle} />
       <Text style={subFooterTextStyle}>© {curYear} Next boilerplate - All rights reserved</Text>
     </Container>
   )

packages/emails/components/header.tsx

@@ -1,9 +1,11 @@
+import React from "react"
+
 import { Img, Text } from "@react-email/components"
 
 export const Header = ({ logoUrl, titleText }: { logoUrl: string; titleText: string }) => {
   return (
     <>
-      <Img src={logoUrl} width="82" height="32" alt="Next boilerplate" />
+      <Img src={logoUrl} width="32" height="32" alt="Next boilerplate" />
       <Text style={title}>{titleText}</Text>
     </>
   )

packages/emails/components/link.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react"
 
 import { Link as OLink, LinkProps } from "@react-email/components"
 
-import { primary } from "../contants"
+import { primary } from "../constants"
 
 export const Link = ({
   children,

packages/emails/contants.ts → packages/emails/constants.ts

@@ -1,5 +1,5 @@
 export const primary = "#006FEE"
-export const background = "#FFFFFF"
+export const background = "#f4f4f5"
 export const content1 = "#FFFFFF"
 export const content2 = "#f4f4f5"
 export const content3 = "#e4e4e7"

packages/emails/emails/change-email-otp.tsx

@@ -1,4 +1,3 @@
-import { Header } from "components/header"
 import * as React from "react"
 
 import { CodeInline, Container as OContainer, Head, Html, Preview, Text } from "@react-email/components"
@@ -7,7 +6,8 @@ import { Body } from "../components/body"
 import { Card } from "../components/card"
 import { Container } from "../components/container"
 import { Footer } from "../components/footer"
-import { muted } from "../contants"
+import { Header } from "../components/header"
+import { muted } from "../constants"
 
 interface ChangeEmailProps {
   previewText: string
@@ -54,7 +54,8 @@ export const ChangeEmail = ({
 )
 
 export const previewProps: ChangeEmailProps = {
-  logoUrl: "https://upload.wikimedia.org/wikipedia/commons/5/5e/Vercel_logo_black.svg",
+  logoUrl:
+    "https://imgs.search.brave.com/I_nW-x21BB6_TTk_xXuYVy5pZlaMfv0h4q35oqhrxvc/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9zZWVr/bG9nby5jb20vaW1h/Z2VzL04vbmV4dC1q/cy1pY29uLWxvZ28t/RUUzMDJENURCRC1z/ZWVrbG9nby5jb20u/cG5n",
   name: "John Doe",
   previewText: "Confirm your new email",
   supportEmail: "[email protected]",

packages/emails/emails/reset-password.tsx

@@ -1,4 +1,3 @@
-import { Header } from "components/header"
 import * as React from "react"
 
 import { Head, Html, Preview, Text } from "@react-email/components"
@@ -8,6 +7,7 @@ import { Button } from "../components/button"
 import { Card } from "../components/card"
 import { Container } from "../components/container"
 import { Footer } from "../components/footer"
+import { Header } from "../components/header"
 
 interface ResetPasswordProps {
   resetLink: string
@@ -54,7 +54,8 @@ export const ResetPassword = ({
 )
 
 export const previewProps: ResetPasswordProps = {
-  logoUrl: "https://upload.wikimedia.org/wikipedia/commons/5/5e/Vercel_logo_black.svg",
+  logoUrl:
+    "https://imgs.search.brave.com/I_nW-x21BB6_TTk_xXuYVy5pZlaMfv0h4q35oqhrxvc/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9zZWVr/bG9nby5jb20vaW1h/Z2VzL04vbmV4dC1q/cy1pY29uLWxvZ28t/RUUzMDJENURCRC1z/ZWVrbG9nby5jb20u/cG5n",
   name: "John Doe",
   previewText: "Reset password request.",
   supportEmail: "[email protected]",

packages/emails/emails/verify-email.tsx

@@ -1,4 +1,3 @@
-import { Header } from "components/header"
 import * as React from "react"
 
 import { Head, Html, Preview, Text } from "@react-email/components"
@@ -8,6 +7,7 @@ import { Button } from "../components/button"
 import { Card } from "../components/card"
 import { Container } from "../components/container"
 import { Footer } from "../components/footer"
+import { Header } from "../components/header"
 
 interface VerifyEmailProps {
   verificationLink: string
@@ -54,7 +54,8 @@ export const VerifyEmail = ({
 )
 
 export const previewProps: VerifyEmailProps = {
-  logoUrl: "https://upload.wikimedia.org/wikipedia/commons/5/5e/Vercel_logo_black.svg",
+  logoUrl:
+    "https://imgs.search.brave.com/I_nW-x21BB6_TTk_xXuYVy5pZlaMfv0h4q35oqhrxvc/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9zZWVr/bG9nby5jb20vaW1h/Z2VzL04vbmV4dC1q/cy1pY29uLWxvZ28t/RUUzMDJENURCRC1z/ZWVrbG9nby5jb20u/cG5n",
   name: "John Doe",
   previewText: "Verify your email address to complete your registration.",
   supportEmail: "[email protected]",