diff --git a/apps/demo/emails/newsletters/stack-overflow-tips.tsx b/apps/demo/emails/newsletters/stack-overflow-tips.tsx index f7819747ea..465cd8c278 100644 --- a/apps/demo/emails/newsletters/stack-overflow-tips.tsx +++ b/apps/demo/emails/newsletters/stack-overflow-tips.tsx @@ -11,8 +11,10 @@ import { Preview, Row, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface StackOverflowTipsEmailProps { tips?: { id: number; description: string }[]; @@ -47,107 +49,143 @@ export const StackOverflowTipsEmail = ({ }: StackOverflowTipsEmailProps) => ( - - Stack overflow tips for searching - -
- -
- -
- - - - Find what you want, faster - - - Tips and tricks for searching on Stack Overflow - - - - - - -
+ + + Stack overflow tips for searching + +
+ +
-
- - Searching for solutions - - - With more than 18 million questions, it's possible that someone has - already provided a solution to the problem you're facing.{' '} - +
+ + + + Find what you want, faster + + + Tips and tricks for searching on Stack Overflow + + + + + + +
-
+
+ + Searching for solutions + + + With more than 18 million questions, it's possible that someone + has already provided a solution to the problem you're facing.{' '} + + +
+ + + Use the search bar at the top of the page to find what you need + + + Here are a few simple search tips to get you started: + +
    + {tips.map((tip) => ( +
  • + + {tip.description} + +
    • + ))} +
+ + + The more information you can put in the search bar, the more + likely you will be to either find the answer you need or feel + confident that no one else has asked the question before. + + +
+ + + Take a break and read about the worst coder in the world + + +
+ + I need a break + +
+
+ - - Use the search bar at the top of the page to find what you need - - - Here are a few simple search tips to get you started: +
+ + You're receiving this email because your Stack Overflow activity + triggered this tip or reminder. -
    - {tips.map((tip) => ( -
  • - {tip.description} -
    • - ))} -
- - The more information you can put in the search bar, the more likely - you will be to either find the answer you need or feel confident - that no one else has asked the question before. + + Unsubscribe from emails like this{' '} + + + Edit email settings{' '} + + + Contact us + + + Privacy + + +
+ + + + Stack Overflow, 110 William Street, 28th Floor, New + York, NY 10038 + + + {'<3'} - -
- - - Take a break and read about the worst coder in the world - - -
- - I need a break - -
- - -
- - You're receiving this email because your Stack Overflow activity - triggered this tip or reminder. - - - - Unsubscribe from emails like this{' '} - - - Edit email settings{' '} - - - Contact us - - - Privacy - - -
- - - - Stack Overflow, 110 William Street, 28th Floor, New - York, NY 10038 - - {'<3'} -
- + + ); @@ -156,136 +194,3 @@ StackOverflowTipsEmail.PreviewProps = { } as StackOverflowTipsEmailProps; export default StackOverflowTipsEmail; - -const main = { - backgroundColor: '#f3f3f5', - fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif', -}; - -const headerContent = { padding: '20px 30px 15px' }; - -const headerContentTitle = { - color: '#fff', - fontSize: '27px', - fontWeight: 'bold', - lineHeight: '27px', -}; - -const headerContentSubtitle = { - color: '#fff', - fontSize: '17px', -}; - -const headerImageContainer = { - padding: '30px 10px', -}; - -const headerImage = { - maxWidth: '100%', -}; - -const title = { - margin: '0 0 15px', - fontWeight: 'bold', - fontSize: '21px', - lineHeight: '21px', - color: '#0c0d0e', -}; - -const paragraph = { - fontSize: '15px', - lineHeight: '21px', - color: '#3c3f44', -}; - -const divider = { - margin: '30px 0', -}; - -const container = { - width: '680px', - maxWidth: '100%', - margin: '0 auto', - backgroundColor: '#ffffff', -}; - -const footer = { - width: '680px', - maxWidth: '100%', - margin: '32px auto 0 auto', - padding: '0 30px', -}; - -const content = { - padding: '30px 30px 40px 30px', -}; - -const logo = { - display: 'flex', - background: '#f3f3f5', - padding: '20px 30px', -}; - -const header = { - borderRadius: '5px 5px 0 0', - display: 'flex', - flexDireciont: 'column', - backgroundColor: '#2b2d6e', -}; - -const buttonContainer = { - marginTop: '24px', - display: 'block', -}; - -const button = { - backgroundColor: '#0095ff', - border: '1px solid #0077cc', - fontSize: '17px', - lineHeight: '17px', - padding: '13px 17px', - borderRadius: '4px', - maxWidth: '120px', - color: '#fff', -}; - -const footerDivider = { - ...divider, - borderColor: '#d6d8db', -}; - -const footerText = { - fontSize: '12px', - lineHeight: '15px', - color: '#9199a1', - margin: '0', -}; - -const footerLink = { - display: 'inline-block', - color: '#9199a1', - textDecoration: 'underline', - fontSize: '12px', - marginRight: '10px', - marginBottom: '0', - marginTop: '8px', -}; - -const footerAddress = { - margin: '4px 0', - fontSize: '12px', - lineHeight: '15px', - color: '#9199a1', -}; - -const footerHeart = { - borderRadius: '1px', - border: '1px solid #d6d9dc', - padding: '4px 6px 3px 6px', - fontSize: '11px', - lineHeight: '11px', - fontFamily: 'Consolas,monospace', - color: '#e06c77', - maxWidth: 'min-content', - margin: '0 0 32px 0', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 60a8dd0bf2..4f97c110b2 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -5,6 +5,8 @@ export default { theme: { fontFamily: { amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'], + 'stack-overflow': ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'], + 'stack-overflow-mono': 'Consolas,monospace', github: '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"', yelp: [