mirror of
https://github.com/elyby/emails-renderer.git
synced 2024-11-09 15:02:07 +05:30
Improve footer's layout since some email clients not correctly stack images and place them on a row
This commit is contained in:
parent
6bb21fd5d3
commit
5e5c10ade0
@ -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>
|
||||||
|
@ -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',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user