From 396aa8d46fddecc20c0a200b06ce8a3cfcea3de7 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Tue, 5 Mar 2019 13:32:26 +0100
Subject: [PATCH] add thanks to translators

---
 src/components/Footer/index.js          | 121 ++++++++++++++++--------
 src/components/Footer/index.messages.js |   9 ++
 2 files changed, 90 insertions(+), 40 deletions(-)

diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 87ea347b..7b0374fe 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -4,13 +4,12 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Link from 'components/Link';
-import { getYear } from 'date-fns';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
 import colors from 'config/colors';
-import { FONT_SIZE } from 'config/variables';
+import { FONT_SIZE, SCREEN_SIZE } from 'config/variables';
 import * as LogActions from 'actions/LogActions';
 import l10nMessages from './index.messages';
 
@@ -33,7 +32,7 @@ const Wrapper = styled.div`
     justify-content: space-between;
     border-top: 1px solid ${colors.BACKGROUND};
 
-    @media all and (max-width: 850px) {
+    @media all and (max-width: ${SCREEN_SIZE.MD}) {
         justify-content: center;
     }
 `;
@@ -41,52 +40,94 @@ const Wrapper = styled.div`
 const StyledLink = styled(Link)`
     margin: 0 10px;
     white-space: nowrap;
-`;
 
-const Copy = styled.div`
-    white-space: nowrap;
-    margin-right: 10px;
+    &:first-child {
+        margin-left: 0;
+    }
 `;
 
 const Left = styled.div`
     display: flex;
+    margin-right: 10px;
+
+    @media all and (max-width: ${SCREEN_SIZE.XS}) {
+        margin: 0;
+    }
 `;
 
-const Right = styled.div`
-    white-space: nowrap;
-    margin: 0 10px;
+const Right = styled.div``;
+
+const RatesLeft = styled.div`
+    @media all and (max-width: ${SCREEN_SIZE.XS}) {
+        display: none;
+    }
 `;
 
-const Footer = ({ opened, toggle, isLanding }: Props) => (
-    <Wrapper>
-        <Left>
-            <Copy>&copy; {getYear(new Date())}</Copy>
-            <StyledLink href="http://satoshilabs.com" isGreen>
-                SatoshiLabs
-            </StyledLink>
-            <StyledLink href="https://trezor.io/static/pdf/tos.pdf" isGreen>
-                <FormattedMessage {...l10nMessages.TR_TERMS} />
-            </StyledLink>
-            <StyledLink onClick={toggle} isGreen>
-                {opened ? 'Hide Log' : 'Show Log'}
-            </StyledLink>
-        </Left>
-        {!isLanding && (
-            <Right>
-                <FormattedMessage
-                    {...l10nMessages.TR_EXCHANGE_RATES_BY}
-                    values={{
-                        service: (
-                            <Link href="https://www.coingecko.com" isGreen>
-                                Coingecko
-                            </Link>
-                        ),
-                    }}
-                />
-            </Right>
-        )}
-    </Wrapper>
-);
+const TranslatorsRight = styled.div`
+    @media all and (max-width: ${SCREEN_SIZE.XS}) {
+        display: none;
+    }
+`;
+
+const RatesRight = styled.div`
+    display: none;
+
+    @media all and (max-width: ${SCREEN_SIZE.XS}) {
+        display: block;
+        width: 100%;
+    }
+`;
+
+const Footer = ({ opened, toggle, isLanding }: Props) => {
+    const exchangeRates = (
+        <FormattedMessage
+            {...l10nMessages.TR_EXCHANGE_RATES_BY}
+            values={{
+                service: (
+                    <Link href="https://www.coingecko.com" isGreen>
+                        Coingecko
+                    </Link>
+                ),
+            }}
+        />
+    );
+    return (
+        <Wrapper>
+            <Left>
+                <StyledLink href="http://satoshilabs.com" isGreen>
+                    SatoshiLabs
+                </StyledLink>
+                <StyledLink href="https://trezor.io/static/pdf/tos.pdf" isGreen>
+                    <FormattedMessage {...l10nMessages.TR_TERMS} />
+                </StyledLink>
+                <StyledLink onClick={toggle} isGreen>
+                    {opened ? 'Hide Log' : 'Show Log'}
+                </StyledLink>
+                <RatesLeft>{exchangeRates}</RatesLeft>
+            </Left>
+            {!isLanding && (
+                <Right>
+                    <TranslatorsRight>
+                        <FormattedMessage
+                            {...l10nMessages.TR_WE_THANK_OUR_TRANSLATORS}
+                            values={{
+                                TR_CONTRIBUTION: (
+                                    <Link
+                                        href="https://wiki.trezor.io/CrowdIn.com_-_A_tool_for_translation"
+                                        isGreen
+                                    >
+                                        <FormattedMessage {...l10nMessages.TR_CONTRIBUTION} />
+                                    </Link>
+                                ),
+                            }}
+                        />
+                    </TranslatorsRight>
+                    <RatesRight>{exchangeRates}</RatesRight>
+                </Right>
+            )}
+        </Wrapper>
+    );
+};
 
 Footer.propTypes = {
     opened: PropTypes.bool.isRequired,
diff --git a/src/components/Footer/index.messages.js b/src/components/Footer/index.messages.js
index 74b84241..f5e1efb8 100644
--- a/src/components/Footer/index.messages.js
+++ b/src/components/Footer/index.messages.js
@@ -12,6 +12,15 @@ const definedMessages: Messages = defineMessages({
         id: 'TR_EXCHANGE_RATES_BY',
         defaultMessage: 'Exchange rates by {service}',
     },
+    TR_WE_THANK_OUR_TRANSLATORS: {
+        id: 'TR_WE_THANK_OUR_TRANSLATORS',
+        defaultMessage: 'We thank our translators for their {TR_CONTRIBUTION}',
+    },
+    TR_CONTRIBUTION: {
+        id: 'TR_CONTRIBUTION',
+        defaultMessage: 'contribution',
+        description: 'Part of the sentence: We thank our translators for their contribution',
+    },
 });
 
 export default definedMessages;