wip: zen

packages/console/core/src/user.ts

@@ -134,7 +134,7 @@ export namespace User {
         const { InviteEmail } = await import("@opencode-ai/console-mail/InviteEmail.jsx")
         await AWS.sendEmail({
           to: email,
-          subject: `You've been invited to join the ${emailInfo.workspaceName} workspace on OpenCode Console`,
+          subject: `You've been invited to join the ${emailInfo.workspaceName} workspace on OpenCode`,
           body: render(
             // @ts-ignore
             InviteEmail({

packages/console/mail/emails/components.tsx

@@ -1,26 +1,10 @@
 // @ts-nocheck
 import React from "react"
-import { Font, Hr as JEHr, Text as JEText, type HrProps, type TextProps } from "@jsx-email/all"
-import { DIVIDER_COLOR, SURFACE_DIVIDER_COLOR, textColor } from "./styles"
+import { Font, Text as JEText, type TextProps } from "@jsx-email/all"
+import { baseText } from "./styles"
 
 export function Text(props: TextProps) {
-  return <JEText {...props} style={{ ...textColor, ...props.style }} />
-}
-
-export function Hr(props: HrProps) {
-  return <JEHr {...props} style={{ borderTop: `1px solid ${DIVIDER_COLOR}`, ...props.style }} />
-}
-
-export function SurfaceHr(props: HrProps) {
-  return (
-    <JEHr
-      {...props}
-      style={{
-        borderTop: `1px solid ${SURFACE_DIVIDER_COLOR}`,
-        ...props.style,
-      }}
-    />
-  )
+  return <JEText {...props} style={{ ...baseText, ...props.style }} />
 }
 
 export function Title({ children }: TitleProps) {

packages/console/mail/emails/styles.ts

@@ -1,110 +1,90 @@
-export const unit = 16;
-
-export const GREY_COLOR = [
-  "#1A1A2E", //0
-  "#2F2F41", //1
-  "#444454", //2
-  "#585867", //3
-  "#6D6D7A", //4
-  "#82828D", //5
-  "#9797A0", //6
-  "#ACACB3", //7
-  "#C1C1C6", //8
-  "#D5D5D9", //9
-  "#EAEAEC", //10
-  "#FFFFFF", //11
-];
-
-export const BLUE_COLOR = "#395C6B";
-export const DANGER_COLOR = "#ED322C";
-export const TEXT_COLOR = GREY_COLOR[0];
-export const SECONDARY_COLOR = GREY_COLOR[5];
-export const DIMMED_COLOR = GREY_COLOR[7];
-export const DIVIDER_COLOR = GREY_COLOR[10];
-export const BACKGROUND_COLOR = "#F0F0F1";
-export const SURFACE_COLOR = DIVIDER_COLOR;
-export const SURFACE_DIVIDER_COLOR = GREY_COLOR[9];
+export const unit = 12
+export const PRIMARY_COLOR = "#211E1E"
+export const TEXT_COLOR = "#656363"
+export const LINK_COLOR = "#007AFF"
+export const LINK_BACKGROUND_COLOR = "#F9F8F8"
+export const BACKGROUND_COLOR = "#F0F0F1"
+export const SURFACE_DIVIDER_COLOR = "#D5D5D9"
 
 export const body = {
   background: BACKGROUND_COLOR,
-};
+}
 
 export const container = {
   minWidth: "600px",
-};
-
-export const medium = {
-  fontWeight: 500,
-};
-
-export const danger = {
-  color: DANGER_COLOR,
-};
+  padding: "64px 0px",
+}
 
 export const frame = {
-  padding: `${unit * 1.5}px`,
+  padding: `${unit * 2}px`,
   border: `1px solid ${SURFACE_DIVIDER_COLOR}`,
   background: "#FFF",
   borderRadius: "6px",
   boxShadow: `0 1px 2px rgba(0,0,0,0.03),
               0 2px 4px rgba(0,0,0,0.03),
               0 2px 6px rgba(0,0,0,0.03)`,
-};
+}
 
-export const textColor = {
-  color: TEXT_COLOR,
-};
-
-export const code = {
-  fontFamily: "IBM Plex Mono, monospace",
-};
-
-export const headingHr = {
-  margin: `${unit}px 0`,
-};
+export const baseText = {
+  fontFamily: "JetBrains Mono, monospace",
+}
 
-export const buttonPrimary = {
-  ...code,
-  padding: "12px 18px",
-  color: "#FFF",
-  borderRadius: "4px",
-  background: BLUE_COLOR,
-  fontSize: "12px",
+export const headingText = {
+  color: PRIMARY_COLOR,
+  fontSize: "16px",
+  fontStyle: "normal",
   fontWeight: 500,
-};
-
-export const compactText = {
-  margin: "0 0 2px",
-};
+  lineHeight: "normal",
+}
 
-export const breadcrumb = {
+export const contentText = {
+  color: TEXT_COLOR,
   fontSize: "14px",
-  color: SECONDARY_COLOR,
-};
-
-export const breadcrumbColonSeparator = {
-  padding: " 0 4px",
-  color: DIMMED_COLOR,
-};
-
-export const breadcrumbSeparator = {
-  color: DIVIDER_COLOR,
-};
-
-export const heading = {
-  fontSize: "22px",
+  fontStyle: "normal",
+  fontWeight: 400,
+  lineHeight: "180%",
+}
+
+export const buttonText = {
+  color: "#FDFCFC",
+  fontSize: "16px",
   fontWeight: 500,
-};
-
-export const sectionLabel = {
-  ...code,
-  ...compactText,
-  letterSpacing: "0.5px",
-  fontSize: "13px",
-  fontWeight: 500,
-  color: DIMMED_COLOR,
-};
-
-export const footerLink = {
+  margin: 0,
+  padding: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "8px",
+}
+
+export const linkText = {
+  color: LINK_COLOR,
   fontSize: "14px",
-};
+  fontStyle: "normal",
+  fontWeight: 400,
+  lineHeight: "150%",
+  textDecorationLine: "underline",
+  textDecorationStyle: "solid" as const,
+  textDecorationSkipInk: "auto" as const,
+  textDecorationThickness: "auto",
+  textUnderlineOffset: "auto",
+  textUnderlinePosition: "from-font",
+  borderRadius: "4px",
+  background: LINK_BACKGROUND_COLOR,
+  padding: "8px 12px",
+  textAlign: "center" as const,
+}
+
+export const contentHighlightText = {
+  color: PRIMARY_COLOR,
+}
+
+export const button = {
+  display: "inline-grid",
+  padding: "8px 12px 8px 20px",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "8px",
+  flexShrink: "0",
+  borderRadius: "4px",
+  backgroundColor: PRIMARY_COLOR,
+}

packages/console/mail/emails/templates/InviteEmail.tsx

@@ -1,26 +1,20 @@
-// @ts-nocheck
 import React from "react"
 import { Img, Row, Html, Link, Body, Head, Button, Column, Preview, Section, Container } from "@jsx-email/all"
-import { Hr, Text, Fonts, SplitString, Title, A, Span, B } from "../components"
+import { Text, Fonts, Title, A, Span } from "../components"
 import {
   unit,
   body,
-  code,
   frame,
-  medium,
-  heading,
+  headingText,
   container,
-  headingHr,
-  footerLink,
-  breadcrumb,
-  compactText,
-  buttonPrimary,
-  breadcrumbColonSeparator,
+  contentText,
+  button,
+  contentHighlightText,
+  linkText,
+  buttonText,
 } from "../styles"
 
-const LOCAL_ASSETS_URL = "/static"
 const CONSOLE_URL = "https://opencode.ai/"
-const DOC_URL = "https://opencode.ai/docs/zen"
 
 interface InviteEmailProps {
   inviter: string
@@ -32,9 +26,8 @@ export const InviteEmail = ({
   inviter = "[email protected]",
   workspaceID = "wrk_01K6XFY7V53T8XN0A7X8G9BTN3",
   workspaceName = "anomaly",
-  assetsUrl = LOCAL_ASSETS_URL,
+  assetsUrl = `${CONSOLE_URL}email`,
 }: InviteEmailProps) => {
-  const subject = `You've been invited to join the ${workspaceName} workspace on OpenCode Console`
   const messagePlain = `${inviter} invited you to join the ${workspaceName} workspace.`
   const url = `${CONSOLE_URL}workspace/${workspaceID}`
   return (
@@ -55,50 +48,36 @@ export const InviteEmail = ({
               </Column>
             </Row>
 
-            <Row style={headingHr}>
-              <Column>
-                <Hr />
-              </Column>
-            </Row>
-
-            <Section style={{ padding: `${unit}px 0 0 0` }}>
-              <Text style={{ ...compactText }}>
-                <B>{inviter}</B> invited you to join the{" "}
-                <Link style={medium} href={url}>
-                  <B>{workspaceName}</B>
-                </Link>{" "}
-                workspace in the{" "}
-                <Link style={medium} href={`${CONSOLE_URL}zen`}>
-                  OpenCode Console
-                </Link>
-                .
+            <Section style={{ padding: `${unit * 2}px 0 0 0` }}>
+              <Text style={headingText}>Join your team's OpenCode workspace</Text>
+              <Text style={contentText}>
+                You have been invited by <Span style={contentHighlightText}>{inviter}</Span> to join the{" "}
+                <Span style={contentHighlightText}>{workspaceName}</Span> workspace on OpenCode.
               </Text>
             </Section>
 
             <Section style={{ padding: `${unit}px 0 0 0` }}>
-              <Button style={buttonPrimary} href={url}>
-                <Span style={code}>Join Workspace</Span>
+              <Button style={button} href={url}>
+                <Text style={buttonText}>
+                  Join workspace
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                    <path
+                      d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"
+                      stroke="#FDFCFC"
+                      strokeWidth="1.5"
+                      strokeLinecap="square"
+                    />
+                  </svg>
+                </Text>
               </Button>
             </Section>
 
-            <Row style={headingHr}>
-              <Column>
-                <Hr />
-              </Column>
-            </Row>
-
-            <Row>
-              <Column>
-                <Link href={`${CONSOLE_URL}zen`} style={footerLink}>
-                  Console
-                </Link>
-              </Column>
-              <Column align="right">
-                <Link style={footerLink} href={DOC_URL}>
-                  About
-                </Link>
-              </Column>
-            </Row>
+            <Section style={{ padding: `${unit}px 0 0 0` }}>
+              <Text style={contentText}>Button not working? Copy the following link...</Text>
+              <Link href={url}>
+                <Text style={linkText}>{url}</Text>
+              </Link>
+            </Section>
           </Section>
         </Container>
       </Body>