JustaName-id · Georgetouma · Sep 13, 2024 · Sep 13, 2024 · Sep 13, 2024 · Sep 13, 2024
diff --git a/apps/vc-api/package.json b/apps/vc-api/package.json
@@ -1,39 +1,43 @@
 {
   "scripts": {
-    "start": "node main.js"
+    "start": "node main.js",
+    "dev": "email dev"
   },
   "dependencies": {
+    "@justaname.id/sdk": "^0.2.76",
     "@nestjs/axios": "^3.0.3",
     "@nestjs/common": "^10.0.2",
     "@nestjs/config": "^3.2.3",
     "@nestjs/core": "^10.0.2",
+    "@nestjs/jwt": "^10.2.0",
     "@nestjs/platform-express": "^10.0.2",
+    "@nestjs/swagger": "^7.4.0",
     "@nx/webpack": "19.7.2",
+    "@react-email/components": "0.0.15",
     "@veramo/core": "^6.0.0",
     "@veramo/credential-eip712": "^6.0.0",
+    "@veramo/credential-ld": "^6.0.0",
+    "@veramo/credential-w3c": "^6.0.0",
+    "@veramo/did-manager": "^6.0.0",
+    "@veramo/did-provider-ethr": "^6.0.0",
+    "@veramo/did-resolver": "^6.0.0",
+    "@veramo/key-manager": "^6.0.0",
+    "@veramo/kms-local": "^6.0.0",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
     "did-resolver": "4.1.0",
     "ethers": "^6.13.2",
     "ethr-did-resolver": "^10.1.10",
     "express": "4.21.0",
     "moment": "^2.30.1",
-    "@nestjs/swagger": "^7.4.0",
-    "@veramo/did-manager": "^6.0.0",
-    "@veramo/key-manager": "^6.0.0",
-    "@veramo/kms-local": "^6.0.0",
-    "@veramo/did-provider-ethr": "^6.0.0",
-    "@veramo/did-resolver": "^6.0.0",
-    "@veramo/credential-w3c": "^6.0.0",
-    "@veramo/credential-ld": "^6.0.0",
-    "@justaname.id/sdk": "^0.2.76",
-    "@nestjs/jwt": "^10.2.0",
-    "uuid": "^10.0.0",
-    "rxjs": "^7.8.0",
-    "vitest": "^1.3.1",
-    "@react-email/components": "^0.0.25",
     "react": "18.3.1",
+    "react-dom": "18.3.1",
     "resend": "^4.0.0",
-    "react-dom": "18.3.1"
+    "rxjs": "^7.8.0",
+    "uuid": "^10.0.0",
+    "vitest": "^1.3.1"
+  },
+  "devDependencies": {
+    "react-email": "3.0.1"
   }
 }
diff --git a/apps/vc-api/src/external/email-sender/components/base.tsx b/apps/vc-api/src/external/email-sender/components/base.tsx
@@ -5,8 +5,6 @@ import {
   Head,
   Html,
   Img,
-  Link,
-  Preview,
   Section,
   Text,
 } from '@react-email/components';
@@ -19,144 +17,128 @@ interface BaseEmailProps {
   preview: string;
 }
 
-export const BaseEmail: React.FC<BaseEmailProps> = ({
-  title,
-  children,
-  email,
-  preview,
-}) => (
-  <Html
-    style={{
-      backgroundColor: '#D2C1FF',
-      padding: '50px 0',
-    }}
-  >
-    <Head>
-      <Font
-        fontFamily="Poppins"
-        fallbackFontFamily="Verdana"
-        fontWeight={900}
-        webFont={{
-          url: 'https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2',
-          format: 'woff2',
-        }}
-        fontStyle="normal"
-      />
-      <Font
-        fontFamily="Poppins"
-        fallbackFontFamily="Verdana"
-        fontWeight={400}
-        webFont={{
-          url: 'https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2',
-          format: 'woff2',
-        }}
-        fontStyle="normal"
-      />
-    </Head>
-    <Preview>{preview}</Preview>
-    <Body style={main}>
-      <Container style={container}>
-        {title}
-
-        <Section
-          style={{
-            padding: '20px 40px',
-            borderRadius: '20px',
-            marginTop: '20px',
-            border: '1px solid #8517E3',
-            background: '#F7FAFF',
-          }}
-        >
-          {children ?? null}
-        </Section>
-
-        <Text
-          style={{
-            textAlign: 'center',
-            marginTop: '40px',
-            color: '#5E577F',
-          }}
-        >
-          This email was sent to{' '}
-          <strong
-            style={{
-              color: '#8517E3',
-              textDecoration: 'underline',
-            }}
-          >
-            {email}
-          </strong>
-        </Text>
-
-        <Img
-          src={"https://cdn.justaname.id/avatar/justahead.png"}
-          alt="JustaName"
-          style={logo}
+export const BaseEmail: React.FC<BaseEmailProps> = ({ title, children }) => {
+  return (
+    <Html style={styles.html}>
+      <Head>
+        <Font
+          fontFamily="Poppins"
+          fallbackFontFamily="sans-serif"
+          fontWeight={900}
+          fontStyle="normal"
         />
-        <Text style={paragraph}>Not expecting this email?</Text>
-
-        <Text style={paragraph}>
-          Contact{' '}
-          <Link
-            href="mailto:[email protected]"
-            style={{
-              color: '#8517E3',
-              textDecoration: 'underline',
-              fontWeight: 'bold',
-            }}
-          >
-            [email protected]
-          </Link>{' '}
-          if you did not request this code.
-        </Text>
+        <Font
+          fontFamily="Poppins"
+          fallbackFontFamily="sans-serif"
+          fontWeight={400}
+          fontStyle="normal"
+        />
+      </Head>
 
-        <Text
-          style={{
-            color: '#9B92FF',
-            textAlign: 'center',
-            fontSize: '15px',
-            margin: 0,
-            marginTop: '20px',
-            fontStyle: 'italic',
-            fontWeight: '900',
-            lineHeight: '20px',
-          }}
-        >
-          Securely powered by JustaName.
-        </Text>
-      </Container>
-    </Body>
-  </Html>
-);
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Section style={styles.section}>
+            <div>{title}</div>
+            {children}
+          </Section>
 
-const main = {
-  backgroundColor: '#D2C1FF',
-  fontFamily: 'Poppins,Verdana,Arial,sans-serif',
-  padding: '0px',
-};
+          <div style={styles.footer}>
+            <div style={styles.contactInfo}>
+              <Text style={styles.contactText}>
+                Contact <strong style={styles.supportEmail}>[email protected]</strong> if you did not request this code.
+              </Text>
+              <strong style={styles.unsubscribeText}>Unsubscribe</strong>
+            </div>
 
-const container = {
-  borderRadius: '20px',
-  border: '2px solid #5E577F',
-  background: '#FFF',
-  boxShadow: '-10px 10px 0px 0px #5E577F',
-  width: '100%',
-  minWidth: '600px',
-  padding: '40px',
+            <div style={styles.logoContainer}>
+              <Img
+                src="https://justaname-bucket.s3.eu-central-1.amazonaws.com/email-templates/jan-logo.svg"
+                alt="JustaName"
+                style={styles.logo}
+              />
+              <Text style={styles.poweredByText}>
+                Securely powered by JustaName.
+              </Text>
+            </div>
+          </div>
+        </Container>
+      </Body>
+    </Html>
+  );
 };
 
-const logo = {
-  margin: '20px auto',
-  width: '150px',
+const styles = {
+  html: {
+    backgroundColor: '#FFF',
+    padding: '20px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+  },
+  body: {
+    backgroundColor: '#FFF',
+    fontFamily: 'Poppins, Verdana, Arial, sans-serif',
+    padding: '0',
+  },
+  container: {
+    borderRadius: '5px',
+    border: '0.5px solid #5E577F',
+    background: '#FFF',
+    width: '100%',
+    maxWidth: '550px',
+    padding: '20px',
+  },
+  section: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'flex-start' as const,
+    gap: '10px',
+    alignSelf: 'stretch',
+    textAlign: 'center',
+  },
+  footer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: '10px',
+    marginTop: '20px',
+  },
+  contactInfo: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'flex-start',
+  },
+  contactText: {
+    textAlign: 'center',
+    color: '#5E577F',
+    fontSize: '8px',
+    fontWeight: '700',
+    margin: '0',
+    lineHeight: '10px',
+  },
+  supportEmail: {
+    color: '#3280F4',
+  },
+  unsubscribeText: {
+    color: '#3280F4',
+    fontSize: '8px',
+  },
+  logoContainer: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'flex-end',
+  },
+  logo: {
+    width: '62px',
+  },
+  poweredByText: {
+    color: '#3280F4',
+    fontSize: '8px',
+    fontWeight: '900',
+    margin: '0',
+    lineHeight: '10px',
+  },
 };
 
-const paragraph = {
-  color: '#444',
-  fontSize: '15px',
-  fontFamily: 'Poppins,Verdana,Arial,sans-serif',
-  letterSpacing: '0',
-  lineHeight: '23px',
-  padding: '0 40px',
-  margin: '0',
-  textAlign: 'center' as const,
-};
+export default BaseEmail;