Improve footer's layout since some email clients not correctly stack images and place them on a row

This commit is contained in:
ErickSkrauch 2020-07-16 01:28:30 +03:00
parent 6bb21fd5d3
commit 5e5c10ade0
2 changed files with 22 additions and 6 deletions

View File

@ -11,7 +11,7 @@ export default function Footer() {
return ( return (
<Table style={styles.footer}> <Table style={styles.footer}>
<tr> <tr>
<td style={styles.footerText}> <td rowSpan={2} style={styles.footerText}>
<Message {...messages.footer} values={{ <Message {...messages.footer} values={{
serviceLink: ( serviceLink: (
<a href="https://account.ely.by" style={styles.footerLink}> <a href="https://account.ely.by" style={styles.footerLink}>
@ -22,7 +22,13 @@ export default function Footer() {
</td> </td>
<td style={styles.footerLogo}> <td style={styles.footerLogo}>
<a href="http://ely.by"> <a href="http://ely.by">
<img src={logoImg} alt="Ely.by" width="128" height="58" style={{verticalAlign: 'middle'}} /> <img src={logoImg} alt="Ely.by" width="128" height="58" />
</a>
</td>
</tr>
<tr>
<td style={styles.footerLogoSubtitle}>
<a href="http://ely.by">
<HTMLMessage {...messages.alternativeMinecraftServices} /> <HTMLMessage {...messages.alternativeMinecraftServices} />
</a> </a>
</td> </td>

View File

@ -1,7 +1,13 @@
import { green } from 'components/ui/colors';
import { CSSProperties } from 'react'; import { CSSProperties } from 'react';
const styles: { [key: string]: CSSProperties } = { import { green } from 'components/ui/colors';
const footerLogoBaseStyles: CSSProperties = {
padding: '0 30px',
textAlign: 'center',
};
const styles: Record<string, CSSProperties> = {
footer: { footer: {
borderTop: `10px solid ${green.base}`, borderTop: `10px solid ${green.base}`,
background: '#DDD8CE', background: '#DDD8CE',
@ -19,8 +25,12 @@ const styles: { [key: string]: CSSProperties } = {
borderBottom: '1px dashed #7A7A7A', borderBottom: '1px dashed #7A7A7A',
}, },
footerLogo: { footerLogo: {
padding: '0 30px', ...footerLogoBaseStyles,
textAlign: 'center', verticalAlign: 'bottom',
},
footerLogoSubtitle: {
...footerLogoBaseStyles,
verticalAlign: 'top',
}, },
}; };