mirror of
https://github.com/elyby/emails-renderer.git
synced 2024-12-21 20:59:44 +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 (
|
||||
<Table style={styles.footer}>
|
||||
<tr>
|
||||
<td style={styles.footerText}>
|
||||
<td rowSpan={2} style={styles.footerText}>
|
||||
<Message {...messages.footer} values={{
|
||||
serviceLink: (
|
||||
<a href="https://account.ely.by" style={styles.footerLink}>
|
||||
@ -22,7 +22,13 @@ export default function Footer() {
|
||||
</td>
|
||||
<td style={styles.footerLogo}>
|
||||
<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} />
|
||||
</a>
|
||||
</td>
|
||||
|
@ -1,7 +1,13 @@
|
||||
import { green } from 'components/ui/colors';
|
||||
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: {
|
||||
borderTop: `10px solid ${green.base}`,
|
||||
background: '#DDD8CE',
|
||||
@ -19,8 +25,12 @@ const styles: { [key: string]: CSSProperties } = {
|
||||
borderBottom: '1px dashed #7A7A7A',
|
||||
},
|
||||
footerLogo: {
|
||||
padding: '0 30px',
|
||||
textAlign: 'center',
|
||||
...footerLogoBaseStyles,
|
||||
verticalAlign: 'bottom',
|
||||
},
|
||||
footerLogoSubtitle: {
|
||||
...footerLogoBaseStyles,
|
||||
verticalAlign: 'top',
|
||||
},
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user