import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { c } from 'ttag';
import { VpnLogo, Title, Href } from 'react-components';

const SignInLayout = ({ children, title }) => {
    useEffect(() => {
        document.title = `${title} - ProtonVPN`;
    }, []);

    return (
        <>
            <header className="flex flex-nowrap flex-spacebetween">
                <Href url="https://protonvpn.com" target="_self">{c('Link').t`Back to protonvpn.com`}</Href>
                <Link className="pv-button-greenborder" to="/signup">{c('Link').t`Sign up for free`}</Link>
            </header>
            <div className="aligncenter">
                <VpnLogo />
                <Title>{title}</Title>
            </div>
            <div className="mauto w400e mw100 p2 bg-white flex-item-noshrink">{children}</div>
            <div className="aligncenter">
                <Link className="pm-button--link bold" to="/signup">{c('Link')
                    .t`Don't have an account yet? Sign up for free!`}</Link>
            </div>
            <footer className="aligncenter">{c('Footer')
                .t`2019 ProtonVPN.com - Made globally, hosted in Switzerland.`}</footer>
        </>
    );
};

SignInLayout.propTypes = {
    children: PropTypes.node.isRequired,
    title: PropTypes.string.isRequired
};

export default SignInLayout;

@@ -391,105 +391,425 @@
 flex
- flex-nowrap flex-spacebetween%22%3E%0A                %3CHref url=%22https://protonvpn.com%22 target=%22_self%22
+-item-noshrink flex flex-items-center noprint mb2%22%3E%0A                %3Cdiv className=%22nomobile flex-item-fluid%22%3E%0A                    %3Cspan className=%22opacity-50%22%3E%7Bc('Label').t%60Back to:%60%7D%3C/span%3E%7B' '%7D%0A                    %3CHref%0A                        url=%22https://protonvpn.com%22%0A                        className=%22inbl color-white nodecoration hover-same-color%22%0A                        target=%22_self%22%0A                    
 %3E%7Bc(
@@ -822,16 +822,8 @@
 ).t%60
-Back to 
 prot
@@ -841,16 +841,240 @@
 %3C/Href%3E%0A
+                %3C/div%3E%0A                %3Cdiv className=%22w150p center%22%3E%0A                    %3CVpnLogo className=%22fill-primary%22 /%3E%0A                %3C/div%3E%0A                %3Cdiv className=%22nomobile flex-item-fluid alignright%22%3E%0A    
         
@@ -1119,16 +1119,21 @@
 enborder
+-dark
 %22 to=%22/s
@@ -1170,32 +1170,55 @@
 r free%60%7D%3C/Link%3E%0A
+                %3C/div%3E%0A
             %3C/he
@@ -1228,35 +1228,37 @@
 r%3E%0A            %3C
-div
+Title
  className=%22alig
@@ -1257,87 +1257,244 @@
 me=%22
-aligncenter%22%3E%0A                %3CVpnLogo /%3E%0A                %3CTitle%3E%7Btitle%7D%3C/Title
+flex-item-noshrink aligncenter color-primary%22%3E%7Btitle%7D%3C/Title%3E%0A            %3Cdiv className=%22flex-item-fluid flex-item-noshrink flex flex-column flex-nowrap%22%3E%0A                %3Cdiv className=%22flex flex-column flex-nowrap flex-item-noshrink%22
 %3E%0A  
@@ -1495,35 +1495,24 @@
 k%22%3E%0A        
-    %3C/div%3E%0A
             
@@ -1531,21 +1531,52 @@
 me=%22
-mauto 
+center bg-white color-global-grey mt2 m
 w40
-0
 e 
-m
 w100
@@ -1580,23 +1580,33 @@
 100 p2 b
-g-white
+ordered-container
  flex-it
@@ -1622,25 +1622,78 @@
 nk%22%3E
-%7Bchildren%7D%3C/div%3E%0A
+%0A                        %7Bchildren%7D%0A                    %3C/div%3E%0A       
     
@@ -1692,36 +1692,35 @@
                 
-%3Cdiv
+ %3Cp
  className=%22alig
@@ -1722,27 +1722,54 @@
 %22aligncenter
-%22%3E%0A
+ flex-item-noshrink%22%3E%0A        
             
@@ -1793,28 +1793,38 @@
 me=%22
-pm-button--link bold
+bold nodecoration primary-link
 %22 to
@@ -1865,16 +1865,24 @@
         
+    
+    
 .t%60Don't
@@ -1922,32 +1922,61 @@
  free!%60%7D%3C/Link%3E%0A
+                    %3C/p%3E%0A    
             %3C/di
@@ -1990,16 +1990,20 @@
         
+ 
+   
 %3Cfooter 
@@ -2005,32 +2005,69 @@
 oter className=%22
+opacity-50 mtauto flex-item-noshrink 
 aligncenter%22%3E%7Bc(
@@ -2061,16 +2061,20 @@
 gncenter
+ pb1
 %22%3E%7Bc('Fo
@@ -2080,16 +2080,20 @@
 ooter')%0A
+    
         
@@ -2169,24 +2169,43 @@
 %60%7D%3C/footer%3E%0A
+            %3C/div%3E%0A
         %3C/%3E%0A

Update login design with @nico3333fr