From 5e5c10ade0b00aa6457016518e5d162bbf9b43f1 Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Thu, 16 Jul 2020 01:28:30 +0300
Subject: [PATCH] Improve footer's layout since some email clients not
 correctly stack images and place them on a row

---
 src/components/layout/footer/Footer.tsx | 10 ++++++++--
 src/components/layout/footer/styles.ts  | 18 ++++++++++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
index ce1eb86..58ecc12 100644
--- a/src/components/layout/footer/Footer.tsx
+++ b/src/components/layout/footer/Footer.tsx
@@ -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>
diff --git a/src/components/layout/footer/styles.ts b/src/components/layout/footer/styles.ts
index 3936132..fbc652d 100644
--- a/src/components/layout/footer/styles.ts
+++ b/src/components/layout/footer/styles.ts
@@ -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',
     },
 };