From 00655da2263b0957092afebe8d7ba077fd86b831 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 10 Dec 2019 18:53:48 +0700
Subject: [PATCH] Small layout tweaks

---
 client/layouts/DetailsLayout.tsx |   2 +-
 client/layouts/Footer.tsx        | 299 ++++++++++++++++---------------
 client/pages/ExplorePage.tsx     |   2 +-
 client/pages/HomePage.tsx        |   2 +-
 4 files changed, 157 insertions(+), 148 deletions(-)

diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
index c7820eb..6ff5809 100644
--- a/client/layouts/DetailsLayout.tsx
+++ b/client/layouts/DetailsLayout.tsx
@@ -21,7 +21,7 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
                 style={{
                     alignItems: 'center',
                     backgroundColor: '#00449E',
-                    borderRadius: '9999px',
+                    borderRadius: '4px',
                     color: '#FFF',
                     display: 'inline-flex',
                     margin: '32px 0',
diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx
index f1fc5de..2af6525 100644
--- a/client/layouts/Footer.tsx
+++ b/client/layouts/Footer.tsx
@@ -4,171 +4,180 @@ import SubscribeForm from './SubscribeForm';
 
 const Footer: React.FC<{}> = () => {
     return (
-        <div
-            style={{
-                border: '1px solid rgba(0, 0, 0, 0.2)',
-                display: 'flex',
-            }}
-        >
+        <>
             <div
                 style={{
+                    borderLeft: '1px solid rgba(0, 0, 0, 0.2)',
                     borderRight: '1px solid rgba(0, 0, 0, 0.2)',
-                    display: 'flex',
-                    flex: 1,
-                    fontSize: '16px',
-                    lineHeight: 1.5,
-                    padding: '24px',
+                    padding: '32px',
+                    textAlign: 'center',
                 }}
             >
-                <ul
-                    style={{
-                        fontWeight: 500,
-                        lineHeight: 1.5,
-                        listStyleType: 'none',
-                        margin: 0,
-                        padding: 0,
-                        width: '100%',
-                    }}
-                >
-                    <li style={{ alignItems: 'center', display: 'flex' }}>
-                        <h3
-                            style={{
-                                fontSize: '20px',
-                                fontWeight: 700,
-                                margin: 0,
-                                padding: '0 8px 0 0',
-                            }}
-                        >
-                            .my-products
-                        </h3>
-                        &#123;
-                    </li>
-                    <ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
-                        <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-                            <div>css-layout,</div>
-                            <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
-                                /&#42; You are here &#42;/
-                            </div>
-                        </li>
-                        <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-                            <a
-                                href="https://formvalidation.io"
-                                style={{ textDecoration: 'none' }}
-                                target="_blank"
-                                title="FormValidation ~ best validation library for JavaScript"
-                            >
-                                form-validation,
-                            </a>
-                            <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
-                                /&#42; A JS validation library &#42;/
-                            </div>
-                        </li>
-                        <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-                            <a
-                                href="https://blur.page"
-                                style={{ textDecoration: 'none' }}
-                                target="_blank"
-                                title="BlurPage ~ a browser extension to hide sensitive element on page"
-                            >
-                                blur-page,
-                            </a>
-                            <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
-                                /&#42; Chrome and Firefox extensions &#42;/
-                            </div>
-                        </li>
-                        <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-                            <a
-                                href="https://react-pdf-viewer.dev"
-                                style={{ textDecoration: 'none' }}
-                                target="_blank"
-                                title="React PDF Viewer ~ a PDF viewer made for React"
-                            >
-                                react-pdf-viewer,
-                            </a>
-                            <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
-                                /&#42; A React component &#42;/
-                            </div>
-                        </li>
-                    </ul>
-                    <li>&#125;</li>
-                </ul>
+                <div style={{ lineHeight: 1.5, marginBottom: '12px' }}>
+                    Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!
+                </div>
+                <SubscribeForm />
             </div>
             <div
                 style={{
-                    flex: 1,
-                    fontSize: '16px',
-                    lineHeight: 1.5,
-                    padding: '24px',
+                    border: '1px solid rgba(0, 0, 0, 0.2)',
+                    display: 'flex',
                 }}
             >
-                <ul
+                <div
                     style={{
-                        fontWeight: 500,
+                        borderRight: '1px solid rgba(0, 0, 0, 0.2)',
+                        display: 'flex',
+                        flex: 1,
+                        fontSize: '16px',
                         lineHeight: 1.5,
-                        listStyleType: 'none',
-                        margin: '0 0 16px 0',
-                        padding: 0,
-                        width: '100%',
+                        padding: '24px',
                     }}
                 >
-                    <li style={{ alignItems: 'center', display: 'flex' }}>
-                        <h3
-                            style={{
-                                fontSize: '20px',
-                                fontWeight: 700,
-                                margin: 0,
-                                padding: '0 8px 0 0',
-                            }}
-                        >
-                            .about
-                        </h3>
-                        &#123;
-                    </li>
-                    <ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
+                    <ul
+                        style={{
+                            fontWeight: 500,
+                            lineHeight: 1.5,
+                            listStyleType: 'none',
+                            margin: 0,
+                            padding: 0,
+                            width: '100%',
+                        }}
+                    >
                         <li style={{ alignItems: 'center', display: 'flex' }}>
-                            <div>twitter:</div>
-                            <a
-                                href="https://twitter.com/nghuuphuoc"
-                                style={{ marginLeft: 'auto', textDecoration: 'none' }}
-                                target="_blank"
+                            <h3
+                                style={{
+                                    fontSize: '20px',
+                                    fontWeight: 700,
+                                    margin: 0,
+                                    padding: '0 8px 0 0',
+                                }}
                             >
-                                @nghuuphuoc
-                            </a>
-                            <div>;</div>
-                        </li>
-                        <li style={{ alignItems: 'center', display: 'flex' }}>
-                            <div>email:</div>
-                            <a
-                                href="mailto: me@phuoc.ng"
-                                style={{ marginLeft: 'auto', textDecoration: 'none' }}
-                                target="_blank"
-                            >
-                                me@phuoc.ng
-                            </a>
-                            <div>;</div>
-                        </li>
-                        <li style={{ alignItems: 'center', display: 'flex' }}>
-                            <div>github:</div>
-                            <a
-                                href="https://github.com/phuoc-ng/csslayout"
-                                style={{ marginLeft: 'auto', textDecoration: 'none' }}
-                                target="_blank"
-                            >
-                                github.com/phuoc-ng/csslayout
-                            </a>
-                            <div>;</div>
+                                .my-products
+                            </h3>
+                            &#123;
                         </li>
+                        <ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
+                            <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
+                                <div>css-layout,</div>
+                                <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
+                                    /&#42; You are here &#42;/
+                                </div>
+                            </li>
+                            <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
+                                <a
+                                    href="https://formvalidation.io"
+                                    style={{ textDecoration: 'none' }}
+                                    target="_blank"
+                                    title="FormValidation ~ best validation library for JavaScript"
+                                >
+                                    form-validation,
+                                </a>
+                                <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
+                                    /&#42; A JS validation library &#42;/
+                                </div>
+                            </li>
+                            <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
+                                <a
+                                    href="https://blur.page"
+                                    style={{ textDecoration: 'none' }}
+                                    target="_blank"
+                                    title="BlurPage ~ a browser extension to hide sensitive element on page"
+                                >
+                                    blur-page,
+                                </a>
+                                <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
+                                    /&#42; Chrome and Firefox extensions &#42;/
+                                </div>
+                            </li>
+                            <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
+                                <a
+                                    href="https://react-pdf-viewer.dev"
+                                    style={{ textDecoration: 'none' }}
+                                    target="_blank"
+                                    title="React PDF Viewer ~ a PDF viewer made for React"
+                                >
+                                    react-pdf-viewer,
+                                </a>
+                                <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
+                                    /&#42; A React component &#42;/
+                                </div>
+                            </li>
+                        </ul>
+                        <li>&#125;</li>
+                    </ul>
+                </div>
+                <div
+                    style={{
+                        flex: 1,
+                        fontSize: '16px',
+                        lineHeight: 1.5,
+                        padding: '24px',
+                    }}
+                >
+                    <ul
+                        style={{
+                            fontWeight: 500,
+                            lineHeight: 1.5,
+                            listStyleType: 'none',
+                            margin: '0 0 16px 0',
+                            padding: 0,
+                            width: '100%',
+                        }}
+                    >
+                        <li style={{ alignItems: 'center', display: 'flex' }}>
+                            <h3
+                                style={{
+                                    fontSize: '20px',
+                                    fontWeight: 700,
+                                    margin: 0,
+                                    padding: '0 8px 0 0',
+                                }}
+                            >
+                                .about
+                            </h3>
+                            &#123;
+                        </li>
+                        <ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
+                            <li style={{ alignItems: 'center', display: 'flex' }}>
+                                <div>twitter:</div>
+                                <a
+                                    href="https://twitter.com/nghuuphuoc"
+                                    style={{ marginLeft: 'auto', textDecoration: 'none' }}
+                                    target="_blank"
+                                >
+                                    @nghuuphuoc
+                                </a>
+                                <div>;</div>
+                            </li>
+                            <li style={{ alignItems: 'center', display: 'flex' }}>
+                                <div>email:</div>
+                                <a
+                                    href="mailto: me@phuoc.ng"
+                                    style={{ marginLeft: 'auto', textDecoration: 'none' }}
+                                    target="_blank"
+                                >
+                                    me@phuoc.ng
+                                </a>
+                                <div>;</div>
+                            </li>
+                            <li style={{ alignItems: 'center', display: 'flex' }}>
+                                <div>github:</div>
+                                <a
+                                    href="https://github.com/phuoc-ng/csslayout"
+                                    style={{ marginLeft: 'auto', textDecoration: 'none' }}
+                                    target="_blank"
+                                >
+                                    github.com/phuoc-ng/csslayout
+                                </a>
+                                <div>;</div>
+                            </li>
+                        </ul>
+                        <li>&#125;</li>
                     </ul>
-                    <li>&#125;</li>
-                </ul>
-                <div>
-                    <div style={{ lineHeight: 1.5, marginBottom: '12px' }}>
-                        Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!
-                    </div>
-                    <SubscribeForm />
                 </div>
             </div>
-        </div>
+        </>
     );
 };
 
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 6f71849..c8267a3 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -18,7 +18,7 @@ const ExplorePage = () => {
                     to="/"
                     style={{
                         backgroundColor: '#00449E',
-                        borderRadius: '9999px',
+                        borderRadius: '4px',
                         color: '#FFF',
                         padding: '8px 16px',
                         textDecoration: 'none',
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 0481f92..66cf8e0 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -26,7 +26,7 @@ const HomePage = () => {
                     <h1
                         style={{
                             backgroundColor: '#00449E',
-                            borderRadius: '9999px',
+                            borderRadius: '4px',
                             color: '#FFF',
                             fontSize: '36px',
                             fontWeight: 600,