Orlandohub · July 15, 2024 10:16
diff --git a/newUser.tsx b/newUser.tsx
 const baseUrl = process.env.BASE_URL ? `${process.env.BASE_URL}` : "";
 const assetsUrl = process.env.BASE_URL ? `${process.env.BASE_URL}/assets` : "/static";

 interface NewUserProps {
  userFirstName: string;
  password: string;
 }

 export const NewUser = ({ userFirstName, password }: NewUserProps) => {
  return (
    <Html lang="en" dir="ltr">
      <Head>
        <title>Timekeeping Solution</title>
      </Head>
      <Preview>Timekeeping Solution</Preview>
      <Body style={main}>
        <Container style={bodyContainer}>
          <Section>
            <Img
              style={signatureImage}
              src={`${assetsUrl}/logo_white.svg`}
              width="72"
              height="23"
              alt="timekeeping"
            />
          </Section>
          <Hr style={divider} />
          <Section>
            <Heading style={heading} as="h1">
              Welcome to Timekeeping Solution!
            </Heading>
            <Text style={text}>Dear {userFirstName},</Text>
            <Text style={text}>
              Welcome to{" "}
              <Link style={link} href={`${baseUrl}`}>
                Timekeeping
              </Link>
              , proprietary timekeeping solution!
            </Text>
            <Text style={text}>
              We&apos;ve created a temporary password for you to log in. Please use the following password to
              log in:
            </Text>
            <code style={code}>{password}</code>
            <Text style={text}>
              Once you log in, you will be prompted to change your password.
            </Text>
            <Button href={`${baseUrl}`} style={button}>
              Get Started
            </Button>
            <Text style={text}>
              Thank you very much for your cooperation. <br /> Best regards,
            </Text>
          </Section>
        </Container>
        <Container style={footerContainer}>
          <Section>
            <Text style={footerText}>
              <Link style={footerLink} href="">
                Contact Us
              </Link>{" "}
              |{" "}
              <Link style={footerLink} href="">
                Legal Terms
              </Link>{" "}
              |{" "}
              <Link style={footerLink} href="">
                LinkedIn
              </Link>
            </Text>
          </Section>
          <Section>
            <Text style={footerText}>All rights reserved.</Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
 };

 NewUser.PreviewProps = {
  userFirstName: "John",
  password: "secret123",
 };

 export default NewUser;

 const main = {
  marginLeft: "auto",
  marginRight: "auto",
  marginBottom: "auto",
  marginTop: "auto",
  backgroundColor: "#CACACA",
  fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
 };

 const bodyContainer = {
  backgroundColor: "#101010",
  color: "#ffffff",
  padding: "16px 24px 8px",
  marginTop: "24px",
 };

 const footerContainer = Object.assign({}, bodyContainer, {
  backgroundColor: "transparent",
  marginTop: "0",
  color: "#000000",
 });

 const logoText = {
  fontSize: "18px",
  fontWeight: 500,
  color: "#656565",
  margin: "0px",
  marginBottom: "8px",
 };

 const heading = {
  fontWeight: 400,
  marginBottom: "48px",
 };

 const bottomLogoText = Object.assign({}, logoText, {
  color: "#CACACA",
 });

 const text = {
  fontSize: "16px",
  lineHeight: "22px",
  fontWeight: 400,
 };

 const footerText = {
  fontSize: "10px",
  lineHeight: "14px",
  fontWeight: 400,
  color: "#000000",
  marginBottom: "0px",
 };

 const link = {
  color: "#ffffff",
  textDecoration: "underline",
 };

 const footerLink = Object.assign({}, link, {
  color: "#000000",
 });

 const divider = {
  borderTop: "1px solid #656565",
 };

 const signatureImage = {
  display: "inline",
 };

 const signatureCell = {
  verticalAlign: "top",
 };

 const signatureText = {
  fontSize: "14px",
  lineHeight: "18px",
  fontWeight: 400,
  marginTop: "0px",
 };

 const code = {
  display: "inline-block",
  padding: "16px 4.5%",
  width: "fit-content",
  backgroundColor: "#f4f4f4",
  borderRadius: "5px",
  border: "1px solid #eee",
  color: "#333",
 };

 const button = {
  marginBottom: "16px",
  marginTop: "16px",
  display: "inline-flex",
  paddingTop: "0.5rem",
  paddingBottom: "0.5rem",
  paddingLeft: "3rem",
  paddingRight: "3rem",
  justifyContent: "center",
  alignItems: "center",
  borderRadius: "1px",
  fontSize: "0.875rem",
  lineHeight: "1.25rem",
  fontWeight: 400,
  transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
  transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
  transitionDuration: "300ms",
  border: "1px solid #1ACA85",
  backgroundColor: "#002618",
  color: "#1ACA85",
  ":hover": {
    border: "1px solid #656565",
    backgroundColor: "#002618",
    color: "#1ACA85",
  },
  ":active": {
    border: "1px solid #002618",
    backgroundColor: "#1ACA85",
    color: "#002618",
  },
  ":disabled": {
    color: "#656565",
    border: "1px solid #656565",
    backgroundColor: "#002618",
    opacity: 1,
  },
 };
	const baseUrl = process.env.BASE_URL ? `${process.env.BASE_URL}` : "";
	const assetsUrl = process.env.BASE_URL ? `${process.env.BASE_URL}/assets` : "/static";

	interface NewUserProps {
	userFirstName: string;
	password: string;
	}

	export const NewUser = ({ userFirstName, password }: NewUserProps) => {
	return (
	<Html lang="en" dir="ltr">
	<Head>
	<title>Timekeeping Solution</title>
	</Head>
	<Preview>Timekeeping Solution</Preview>
	<Body style={main}>
	<Container style={bodyContainer}>
	<Section>
	<Img
	style={signatureImage}
	src={`${assetsUrl}/logo_white.svg`}
	width="72"
	height="23"
	alt="timekeeping"
	/>
	</Section>
	<Hr style={divider} />
	<Section>
	<Heading style={heading} as="h1">
	Welcome to Timekeeping Solution!
	</Heading>
	<Text style={text}>Dear {userFirstName},</Text>
	<Text style={text}>
	Welcome to{" "}
	<Link style={link} href={`${baseUrl}`}>
	Timekeeping
	</Link>
	, proprietary timekeeping solution!
	</Text>
	<Text style={text}>
	We've created a temporary password for you to log in. Please use the following password to
	log in:
	</Text>
	<code style={code}>{password}</code>
	<Text style={text}>
	Once you log in, you will be prompted to change your password.
	</Text>
	<Button href={`${baseUrl}`} style={button}>
	Get Started
	</Button>
	<Text style={text}>
	Thank you very much for your cooperation. <br /> Best regards,
	</Text>
	</Section>
	</Container>
	<Container style={footerContainer}>
	<Section>
	<Text style={footerText}>
	<Link style={footerLink} href="">
	Contact Us
	</Link>{" "}
	\|{" "}
	<Link style={footerLink} href="">
	Legal Terms
	</Link>{" "}
	\|{" "}
	<Link style={footerLink} href="">
	LinkedIn
	</Link>
	</Text>
	</Section>
	<Section>
	<Text style={footerText}>All rights reserved.</Text>
	</Section>
	</Container>
	</Body>
	</Html>
	);
	};

	NewUser.PreviewProps = {
	userFirstName: "John",
	password: "secret123",
	};

	export default NewUser;

	const main = {
	marginLeft: "auto",
	marginRight: "auto",
	marginBottom: "auto",
	marginTop: "auto",
	backgroundColor: "#CACACA",
	fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
	};

	const bodyContainer = {
	backgroundColor: "#101010",
	color: "#ffffff",
	padding: "16px 24px 8px",
	marginTop: "24px",
	};

	const footerContainer = Object.assign({}, bodyContainer, {
	backgroundColor: "transparent",
	marginTop: "0",
	color: "#000000",
	});

	const logoText = {
	fontSize: "18px",
	fontWeight: 500,
	color: "#656565",
	margin: "0px",
	marginBottom: "8px",
	};

	const heading = {
	fontWeight: 400,
	marginBottom: "48px",
	};

	const bottomLogoText = Object.assign({}, logoText, {
	color: "#CACACA",
	});

	const text = {
	fontSize: "16px",
	lineHeight: "22px",
	fontWeight: 400,
	};

	const footerText = {
	fontSize: "10px",
	lineHeight: "14px",
	fontWeight: 400,
	color: "#000000",
	marginBottom: "0px",
	};

	const link = {
	color: "#ffffff",
	textDecoration: "underline",
	};

	const footerLink = Object.assign({}, link, {
	color: "#000000",
	});

	const divider = {
	borderTop: "1px solid #656565",
	};

	const signatureImage = {
	display: "inline",
	};

	const signatureCell = {
	verticalAlign: "top",
	};

	const signatureText = {
	fontSize: "14px",
	lineHeight: "18px",
	fontWeight: 400,
	marginTop: "0px",
	};

	const code = {
	display: "inline-block",
	padding: "16px 4.5%",
	width: "fit-content",
	backgroundColor: "#f4f4f4",
	borderRadius: "5px",
	border: "1px solid #eee",
	color: "#333",
	};

	const button = {
	marginBottom: "16px",
	marginTop: "16px",
	display: "inline-flex",
	paddingTop: "0.5rem",
	paddingBottom: "0.5rem",
	paddingLeft: "3rem",
	paddingRight: "3rem",
	justifyContent: "center",
	alignItems: "center",
	borderRadius: "1px",
	fontSize: "0.875rem",
	lineHeight: "1.25rem",
	fontWeight: 400,
	transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
	transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
	transitionDuration: "300ms",
	border: "1px solid #1ACA85",
	backgroundColor: "#002618",
	color: "#1ACA85",
	":hover": {
	border: "1px solid #656565",
	backgroundColor: "#002618",
	color: "#1ACA85",
	},
	":active": {
	border: "1px solid #002618",
	backgroundColor: "#1ACA85",
	color: "#002618",
	},
	":disabled": {
	color: "#656565",
	border: "1px solid #656565",
	backgroundColor: "#002618",
	opacity: 1,
	},
	};