From ca38a8767669f5b56370d15710824f136b3a3815 Mon Sep 17 00:00:00 2001
From: thehighestprimenumber <thehighestprimenumber@gmail.com>
Date: Thu, 23 Jan 2025 13:52:06 -0300
Subject: [PATCH] bug: [ON-2797] fix email format

---
 .../InviteUserToMultipleCitiesTemplate.tsx    | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/app/src/lib/emails/InviteUserToMultipleCitiesTemplate.tsx b/app/src/lib/emails/InviteUserToMultipleCitiesTemplate.tsx
index 66cfebc95..49f579fce 100644
--- a/app/src/lib/emails/InviteUserToMultipleCitiesTemplate.tsx
+++ b/app/src/lib/emails/InviteUserToMultipleCitiesTemplate.tsx
@@ -65,24 +65,14 @@ export function InviteUserToMultipleCitiesTemplate({
                 <div style={cityBox} key={name}>
                   <div
                     style={{
-                      background: `url('https://flagsapi.com/${locode!.split(" ")[0]}/flat/64.png'), no-repeat`,
+                      background: `url('https://flagsapi.com/${locode!.split(" ")[0]}/flat/64.png') no-repeat center center`,
                       backgroundSize: "cover",
                       height: "32px",
                       width: "32px",
-                      backgroundOrigin: "content-box",
+                      flexShrink: 0,
                     }}
                   />
-                  <Text
-                    style={{
-                      fontSize: "14px",
-                      fontStyle: "normal",
-                      fontWeight: "500",
-                      lineHeight: "20px",
-                      letterSpacing: "0.5px",
-                    }}
-                  >
-                    {name}
-                  </Text>
+                  <div style={cityNameText}>{name}</div>
                 </div>
               ))}
             </div>
@@ -108,6 +98,7 @@ export function InviteUserToMultipleCitiesTemplate({
 }
 
 export default InviteUserToMultipleCitiesTemplate;
+
 const buttonSection = {
   marginTop: "36px",
   marginBottom: "36px",
@@ -153,16 +144,6 @@ const paragraph = {
   color: "#484848",
 };
 
-const cityBox = {
-  display: "flex",
-  padding: "16px",
-  alignItems: "center",
-  gap: "16px",
-  borderRadius: "8px",
-  border: "1px solid #E6E7FF",
-  margin: "32px",
-};
-
 const urlLink = {
   fontSize: "14px",
   padding: "16px",
@@ -179,3 +160,22 @@ const footerText = {
   fontWeight: "400",
   color: "#79797A",
 };
+
+const cityBox = {
+  display: "flex",
+  padding: "16px",
+  alignItems: "center",
+  gap: "16px",
+  borderRadius: "8px",
+  border: "1px solid #E6E7FF",
+  margin: "32px",
+};
+
+const cityNameText = {
+  fontSize: "14px",
+  fontStyle: "normal",
+  fontWeight: "500",
+  lineHeight: "32px", // Match this with the flag height
+  letterSpacing: "0.5px",
+  color: "#484848",
+};