From b16fba03f4c21ec0969ac444c654d27e957b6cda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Diego=20Garc=C3=ADa?= <juandgoc@gmail.com>
Date: Fri, 9 Apr 2021 16:36:14 -0500
Subject: [PATCH] Mobile design fixes (#58)

* fixed navbar and overall  mobile css for home page

* fixed menu witdh

* fixed mobile css on transfer page

* fix: padding on settings button
---
 packages/bridge/src/App.less                  |   4 -
 .../bridge/src/components/AppBar/index.less   |  74 ++++-
 .../bridge/src/components/AppBar/index.tsx    |  79 +++++-
 .../bridge/src/components/Layout/index.tsx    |  27 +-
 .../RecentTransactionsTable/index.tsx         |   1 +
 .../bridge/src/components/Transfer/index.tsx  | 265 +++++++++---------
 .../bridge/src/components/Transfer/style.less |  49 +++-
 packages/bridge/src/index.css                 |   7 -
 packages/bridge/src/views/home/index.less     |  57 +++-
 packages/bridge/src/views/home/index.tsx      |   3 +-
 10 files changed, 362 insertions(+), 204 deletions(-)

diff --git a/packages/bridge/src/App.less b/packages/bridge/src/App.less
index ee32476..86561c5 100644
--- a/packages/bridge/src/App.less
+++ b/packages/bridge/src/App.less
@@ -140,10 +140,6 @@ em {
   padding: 6px 16px !important;
 }
 
-.ant-table {
-  margin: 0px 30px;
-}
-
 .ant-menu-inline-collapsed > .ant-menu-item {
   padding-left: 16px !important;
 }
diff --git a/packages/bridge/src/components/AppBar/index.less b/packages/bridge/src/components/AppBar/index.less
index 7888594..0d8ac1c 100644
--- a/packages/bridge/src/components/AppBar/index.less
+++ b/packages/bridge/src/components/AppBar/index.less
@@ -1,5 +1,22 @@
 @import "_colors";
-.app-left {
+
+
+header.ant-layout-header.App-Bar {
+  position: absolute;
+  width: 100%;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  height: 80px;
+
+  .nav-burger {
+    cursor: pointer;
+    display: none;
+  }
+
+}
+
+.app-bar-item.logo {
   position: absolute;
   left: 10%;
 }
@@ -12,6 +29,7 @@
   min-width: 50%;
   justify-content: center;
   height: auto;
+  align-items: center;
   .app-bar-item {
     cursor: pointer;
     padding: 0 30px;
@@ -25,3 +43,57 @@
     }
   }
 }
+
+@media screen and (min-width: 901px) {
+   header.ant-layout-header.App-Bar  {
+     width: 100% !important;
+   }
+}
+@media screen and (max-width: 1200px) {
+
+  .app-bar-item.logo {
+    position: relative;
+    left: 0;
+  }
+  .app-bar-item.app-right{
+    position: relative;
+    left: 0;
+    padding: 0;
+  }
+}
+@media screen and (max-width: 900px) {
+  header.ant-layout-header.App-Bar  {
+    position: fixed;
+    transition: ease-in-out 0.5s;
+    width: 0;
+    max-width: 240px;
+    height: 100%;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 0;
+    .nav-burger {
+      display: inline-block;
+      left: 30px;
+      position: relative;
+      transition: ease-in-out 0.5s;
+      z-index: 10;
+    }
+    .app-bar-inner {
+      //opacity: 0;
+      left: -100px;
+      position: relative;
+      transition: ease-in-out 0.5s;
+      flex-direction: column;
+    }
+    background: #06101a;
+    & > .nav-burger.mobile-active {
+      width: 30px;
+      position: relative;
+      left: 0;
+    }
+
+    .app-bar-inner.mobile-active {
+      left: 0px;
+    }
+  }
+}
diff --git a/packages/bridge/src/components/AppBar/index.tsx b/packages/bridge/src/components/AppBar/index.tsx
index f34ff3c..51174b9 100644
--- a/packages/bridge/src/components/AppBar/index.tsx
+++ b/packages/bridge/src/components/AppBar/index.tsx
@@ -1,8 +1,17 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import './index.less';
 import { Link, useLocation } from 'react-router-dom';
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import { Button, Popover } from 'antd';
+import { LABELS } from '../../constants';
+import { Settings } from '@oyster/common';
 
-export const AppBar = () => {
+export const AppBar = (props: { isRoot?: boolean }) => {
+  const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);
   const location = useLocation();
 
   const isActiveClass = useCallback(
@@ -12,20 +21,60 @@ export const AppBar = () => {
     [location],
   );
 
+  useEffect(() => {
+    const header = document.getElementById('app-header');
+    if (header) {
+      header.style.width = showMobileMenu ? '100%' : '0';
+    }
+  }, [showMobileMenu, document.body.offsetWidth]);
+
   return (
-    <div className={'app-bar-inner'}>
-      <div className={`app-bar-item ${isActiveClass('move')}`}>
-        <Link to="/move">Bridge</Link>
+    <>
+      <span
+        className={`nav-burger ${showMobileMenu ? 'mobile-active' : ''}`}
+        onClick={() => setShowMobileMenu(!showMobileMenu)}
+      >
+        {showMobileMenu ? (
+          <MenuFoldOutlined style={{ fontSize: '25px' }} />
+        ) : (
+          <MenuUnfoldOutlined style={{ fontSize: '25px' }} />
+        )}
+      </span>
+      <div className={`app-bar-inner ${showMobileMenu ? 'mobile-active' : ''}`}>
+        {!props.isRoot && (
+          <div className={`app-bar-item logo root-mobile`}>
+            <img alt="logo-bar" src={'/appbar/logo.svg'} />
+          </div>
+        )}
+        <div className={`app-bar-item ${isActiveClass('move')}`}>
+          <Link to="/move">Bridge</Link>
+        </div>
+        <div className={`app-bar-item ${isActiveClass('faq')}`}>
+          <Link to="/faq">FAQ</Link>
+        </div>
+        <div className={`app-bar-item ${isActiveClass('proof-of-assets')}`}>
+          <Link to="/proof-of-assets">Proof-of-Assets</Link>
+        </div>
+        <div className={`app-bar-item ${isActiveClass('help')}`}>
+          <Link to="/help">Help</Link>
+        </div>
+        {!props.isRoot && (
+          <Popover
+            placement="topRight"
+            title={LABELS.SETTINGS_TOOLTIP}
+            content={<Settings />}
+            trigger="click"
+          >
+            <Button
+              className={'app-right app-bar-item'}
+              shape="circle"
+              size="large"
+              type="text"
+              icon={<SettingOutlined />}
+            />
+          </Popover>
+        )}
       </div>
-      <div className={`app-bar-item ${isActiveClass('faq')}`}>
-        <Link to="/faq">FAQ</Link>
-      </div>
-      <div className={`app-bar-item ${isActiveClass('proof-of-assets')}`}>
-        <Link to="/proof-of-assets">Proof-of-Assets</Link>
-      </div>
-      <div className={`app-bar-item ${isActiveClass('help')}`}>
-        <Link to="/help">Help</Link>
-      </div>
-    </div>
+    </>
   );
 };
diff --git a/packages/bridge/src/components/Layout/index.tsx b/packages/bridge/src/components/Layout/index.tsx
index df0e19f..4745cf9 100644
--- a/packages/bridge/src/components/Layout/index.tsx
+++ b/packages/bridge/src/components/Layout/index.tsx
@@ -33,31 +33,8 @@ export const AppLayout = React.memo((props: any) => {
     <>
       <div className={`App`}>
         <Layout title={LABELS.APP_TITLE}>
-          <Header className="App-Bar">
-            {!isRoot && (
-              <div className="app-title app-left">
-                <Link to="/">
-                  <img alt="logo-bar" src={'/appbar/logo.svg'} />
-                </Link>
-              </div>
-            )}
-            <AppBar />
-            {!isRoot && (
-              <Popover
-                placement="topRight"
-                title={LABELS.SETTINGS_TOOLTIP}
-                content={<Settings />}
-                trigger="click"
-              >
-                <Button
-                  className={'app-right'}
-                  shape="circle"
-                  size="large"
-                  type="text"
-                  icon={<SettingOutlined />}
-                />
-              </Popover>
-            )}
+          <Header className="App-Bar" id={'app-header'}>
+            <AppBar isRoot={isRoot} />
           </Header>
           <Content style={{ flexDirection: 'column' }}>
             {props.children}
diff --git a/packages/bridge/src/components/RecentTransactionsTable/index.tsx b/packages/bridge/src/components/RecentTransactionsTable/index.tsx
index ea75aef..0c29740 100644
--- a/packages/bridge/src/components/RecentTransactionsTable/index.tsx
+++ b/packages/bridge/src/components/RecentTransactionsTable/index.tsx
@@ -117,6 +117,7 @@ export const RecentTransactionsTable = () => {
       <Table
         scroll={{
           scrollToFirstRowOnChange: false,
+          x: 900,
         }}
         dataSource={externalAssets.filter(a => a.name)}
         columns={columns}
diff --git a/packages/bridge/src/components/Transfer/index.tsx b/packages/bridge/src/components/Transfer/index.tsx
index 30032d6..46ad5d9 100644
--- a/packages/bridge/src/components/Transfer/index.tsx
+++ b/packages/bridge/src/components/Transfer/index.tsx
@@ -127,7 +127,7 @@ export const Transfer = () => {
             }
           }}
         >
-          ⇆
+          <span></span>
         </Button>
         <Input
           title={`To`}
@@ -147,151 +147,152 @@ export const Transfer = () => {
           }}
           className={'right'}
         />
-        <Button
-          className={'transfer-button'}
-          type="primary"
-          size="large"
-          disabled={!(A.amount && B.amount) || !connected || !provider}
-          onClick={async () => {
-            if (!wallet || !provider) {
-              return;
-            }
+      </div>
 
-            const token = tokenMap.get(request.asset?.toLowerCase() || '');
-            const NotificationContent = () => {
-              const [activeSteps, setActiveSteps] = useState<ProgressUpdate[]>(
-                [],
-              );
-              useEffect(() => {
-                (async () => {
-                  let steps: ProgressUpdate[] = [];
-                  try {
-                    if (request.from === ASSET_CHAIN.Solana) {
-                      await fromSolana(
-                        connection,
-                        wallet,
-                        request,
-                        provider,
-                        update => {
-                          if (update.replace) {
-                            steps.pop();
-                            steps = [...steps, update];
-                          } else {
-                            steps = [...steps, update];
-                          }
+      <Button
+        className={'transfer-button'}
+        type="primary"
+        size="large"
+        disabled={!(A.amount && B.amount) || !connected || !provider}
+        onClick={async () => {
+          if (!wallet || !provider) {
+            return;
+          }
 
-                          setActiveSteps(steps);
-                        },
-                      );
-                    }
+          const token = tokenMap.get(request.asset?.toLowerCase() || '');
+          const NotificationContent = () => {
+            const [activeSteps, setActiveSteps] = useState<ProgressUpdate[]>(
+              [],
+            );
+            useEffect(() => {
+              (async () => {
+                let steps: ProgressUpdate[] = [];
+                try {
+                  if (request.from === ASSET_CHAIN.Solana) {
+                    await fromSolana(
+                      connection,
+                      wallet,
+                      request,
+                      provider,
+                      update => {
+                        if (update.replace) {
+                          steps.pop();
+                          steps = [...steps, update];
+                        } else {
+                          steps = [...steps, update];
+                        }
 
-                    if (request.to === ASSET_CHAIN.Solana) {
-                      await toSolana(
-                        connection,
-                        wallet,
-                        request,
-                        provider,
-                        update => {
-                          if (update.replace) {
-                            steps.pop();
-                            steps = [...steps, update];
-                          } else {
-                            steps = [...steps, update];
-                          }
-
-                          setActiveSteps(steps);
-                        },
-                      );
-                    }
-                  } catch (err) {
-                    // TODO...
-                    console.log(err);
+                        setActiveSteps(steps);
+                      },
+                    );
                   }
-                })();
-              }, [setActiveSteps]);
 
-              return (
-                <div>
-                  <div style={{ display: 'flex' }}>
-                    <div>
-                      <h5>{`${chainToName(
-                        request.from,
-                      )} Mainnet -> ${chainToName(request.to)} Mainnet`}</h5>
-                      <h2>
-                        {request.amount?.toString()} {request.info?.name}
-                      </h2>
-                    </div>
-                    <div
-                      style={{
-                        display: 'flex',
-                        marginLeft: 'auto',
-                        marginRight: 10,
-                      }}
-                    >
-                      <TokenDisplay
-                        asset={request.asset}
-                        chain={request.from}
-                        token={token}
-                      />
-                      <span style={{ margin: 15 }}>{'➔'}</span>
-                      <TokenDisplay
-                        asset={request.asset}
-                        chain={request.to}
-                        token={token}
-                      />
-                    </div>
+                  if (request.to === ASSET_CHAIN.Solana) {
+                    await toSolana(
+                      connection,
+                      wallet,
+                      request,
+                      provider,
+                      update => {
+                        if (update.replace) {
+                          steps.pop();
+                          steps = [...steps, update];
+                        } else {
+                          steps = [...steps, update];
+                        }
+
+                        setActiveSteps(steps);
+                      },
+                    );
+                  }
+                } catch (err) {
+                  // TODO...
+                  console.log(err);
+                }
+              })();
+            }, [setActiveSteps]);
+
+            return (
+              <div>
+                <div style={{ display: 'flex' }}>
+                  <div>
+                    <h5>{`${chainToName(request.from)} Mainnet -> ${chainToName(
+                      request.to,
+                    )} Mainnet`}</h5>
+                    <h2>
+                      {request.amount?.toString()} {request.info?.name}
+                    </h2>
                   </div>
                   <div
                     style={{
-                      textAlign: 'left',
                       display: 'flex',
-                      flexDirection: 'column',
+                      marginLeft: 'auto',
+                      marginRight: 10,
                     }}
                   >
-                    {(() => {
-                      let group = '';
-                      return activeSteps.map((step, i) => {
-                        let prevGroup = group;
-                        group = step.group;
-                        let newGroup = prevGroup !== group;
-                        return (
-                          <>
-                            {newGroup && <span>{group}</span>}
-                            <span style={{ marginLeft: 15 }}>
-                              {typeToIcon(
-                                step.type,
-                                activeSteps.length - 1 === i,
-                              )}{' '}
-                              {step.message}
-                            </span>
-                          </>
-                        );
-                      });
-                    })()}
+                    <TokenDisplay
+                      asset={request.asset}
+                      chain={request.from}
+                      token={token}
+                    />
+                    <span style={{ margin: 15 }}>{'➔'}</span>
+                    <TokenDisplay
+                      asset={request.asset}
+                      chain={request.to}
+                      token={token}
+                    />
                   </div>
                 </div>
-              );
-            };
+                <div
+                  style={{
+                    textAlign: 'left',
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}
+                >
+                  {(() => {
+                    let group = '';
+                    return activeSteps.map((step, i) => {
+                      let prevGroup = group;
+                      group = step.group;
+                      let newGroup = prevGroup !== group;
+                      return (
+                        <>
+                          {newGroup && <span>{group}</span>}
+                          <span style={{ marginLeft: 15 }}>
+                            {typeToIcon(
+                              step.type,
+                              activeSteps.length - 1 === i,
+                            )}{' '}
+                            {step.message}
+                          </span>
+                        </>
+                      );
+                    });
+                  })()}
+                </div>
+              </div>
+            );
+          };
 
-            notification.open({
-              message: '',
-              duration: 0,
-              placement: 'bottomLeft',
-              description: <NotificationContent />,
-              className: 'custom-class',
-              style: {
-                width: 500,
-              },
-            });
-          }}
-        >
-          {hasCorrespondingNetworks
-            ? !(A.amount && B.amount)
-              ? LABELS.ENTER_AMOUNT
-              : LABELS.TRANSFER
-            : LABELS.SET_CORRECT_WALLET_NETWORK}
-        </Button>
-      </div>
+          notification.open({
+            message: '',
+            duration: 0,
+            placement: 'bottomLeft',
+            description: <NotificationContent />,
+            className: 'custom-class',
+            style: {
+              width: 500,
+            },
+          });
+        }}
+      >
+        {hasCorrespondingNetworks
+          ? !(A.amount && B.amount)
+            ? LABELS.ENTER_AMOUNT
+            : LABELS.TRANSFER
+          : LABELS.SET_CORRECT_WALLET_NETWORK}
+      </Button>
       <RecentTransactionsTable />
     </>
   );
diff --git a/packages/bridge/src/components/Transfer/style.less b/packages/bridge/src/components/Transfer/style.less
index 880576e..0324ff0 100644
--- a/packages/bridge/src/components/Transfer/style.less
+++ b/packages/bridge/src/components/Transfer/style.less
@@ -14,6 +14,10 @@
   font-size: 19px;
   top: 253px;
   color: black;
+  & > span:after {
+    content: '⇆';
+    padding-left: 0;
+  }
 }
 
 .exchange-card {
@@ -32,7 +36,7 @@
   width: 240px;
   height: 64px;
   left: calc(50% - 240px/2);
-  top: 335px;
+  top: 555px;
 
   border-radius: 12px;
   border: none;
@@ -52,9 +56,42 @@
     color: #193650;
   }
 }
-
-#recent-tx-container{
-  width: 100%;
-  max-width: calc(100% - 388px);
-  margin: auto;
+div:not(.home-container) {
+  & > #recent-tx-container{
+    width: 100%;
+    max-width: calc(100% - 388px);
+    margin: auto;
+  }
+}
+
+@media screen and (max-width: 1200px){
+  .exchange-card {
+    height: 770px;
+    width: 100%;
+    margin: 97px auto 0 auto;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+  }
+  .transfer-button {
+    display: flex;
+    position: relative;
+    width: 240px;
+    height: 64px;
+    left: calc(50% - 240px/2);
+    top: 30px;
+    margin-bottom: 100px;
+  }
+  .swap-button {
+    top: 0;
+  }
+  div:not(.home-container) > #recent-tx-container {
+    max-width: calc(100% - 100px);
+  }
+
+  .swap-button {
+    & > span:after {
+      content: "⇅";
+    }
+  }
 }
diff --git a/packages/bridge/src/index.css b/packages/bridge/src/index.css
index efdfa3a..1cbfcbe 100644
--- a/packages/bridge/src/index.css
+++ b/packages/bridge/src/index.css
@@ -31,10 +31,3 @@ code {
   height: auto;
   top: 0;
 }
-
-.wormhole-bg {
-  background-image: url('/home/background.svg');
-  background-size: 100% auto;
-  background-color: #06101a;
-  background-repeat: no-repeat;
-}
diff --git a/packages/bridge/src/views/home/index.less b/packages/bridge/src/views/home/index.less
index 8635840..5f59027 100644
--- a/packages/bridge/src/views/home/index.less
+++ b/packages/bridge/src/views/home/index.less
@@ -8,15 +8,6 @@ section.ant-layout {
   margin: auto;
   position: relative;
 }
-header.ant-layout-header.App-Bar {
-  position: absolute;
-  width: 100%;
-  background: transparent;
-  display: flex;
-  justify-content: center;
-  height: 80px;
-
-}
 
 .get-started {
   background: url("/home/get-started.svg") center  center no-repeat;
@@ -64,9 +55,11 @@ header.ant-layout-header.App-Bar {
       display: flex;
       flex-direction: row;
       justify-content: space-evenly;
+      max-width: 90%;
+      margin: auto;
 
       .home-description-item {
-        padding: 0 100px 0 100px;
+        padding: 0 30px 0 30px;
         .description-title {
           font-size: 20px;
           line-height: 160%;
@@ -81,6 +74,8 @@ header.ant-layout-header.App-Bar {
   }
 
   #recent-tx-container {
+    max-width: 70%;
+    margin: auto;
     padding-bottom: 70px;
     .description-text {
       color: @tungsten-60
@@ -89,7 +84,6 @@ header.ant-layout-header.App-Bar {
       margin: 16px 100px;
     }
     .ant-table {
-      margin: 0 100px;
       thead {
         tr > th.ant-table-cell {
           background-color: @tungsten-100;
@@ -114,12 +108,16 @@ header.ant-layout-header.App-Bar {
   align-items: center;
   justify-content: flex-end;
   min-height: 802px;
-
+  .main-logo {
+    & > img {
+      max-width: 100%;
+    }
+  }
   & > div {
     font-size: 16px;
     line-height: 160%;
     width: auto;
-    margin: 3px 0 30px 0;
+    margin: 3px 20px 30px 20px;
   }
   & > div:first-child {
     margin-bottom: 120px;
@@ -139,3 +137,36 @@ footer.ant-layout-footer {
   width: 100%;
   background-color: @tungsten-100;
 }
+
+.wormhole-bg {
+  background-image: url('/home/background.svg');
+  background-size: 100% auto;
+  background-color: #06101a;
+  background-repeat: no-repeat;
+}
+
+
+@media screen and (max-width: 900px) {
+  .justify-bottom-container {
+    min-height: 640px;
+  }
+  .home-container {
+    #recent-tx-container {
+      max-width: 100%;
+    }
+    #how-it-works-container {
+      .home-description {
+        flex-direction: column;
+      }
+    }
+  }
+}
+
+
+@media screen and (max-width: 1200px) {
+  .home-container {
+    #recent-tx-container {
+      max-width: 90%;
+    }
+  }
+}
diff --git a/packages/bridge/src/views/home/index.tsx b/packages/bridge/src/views/home/index.tsx
index 9adf479..36ceeef 100644
--- a/packages/bridge/src/views/home/index.tsx
+++ b/packages/bridge/src/views/home/index.tsx
@@ -129,7 +129,7 @@ export const HomeView = () => {
     <>
       <div className="flexColumn home-container wormhole-bg">
         <div className={'justify-bottom-container'}>
-          <div>
+          <div className={'main-logo'}>
             <img src={'/home/main-logo.svg'} />
           </div>
           <div>
@@ -196,6 +196,7 @@ export const HomeView = () => {
           <Table
             scroll={{
               scrollToFirstRowOnChange: false,
+              x: 900,
             }}
             dataSource={externalAssets.filter(a => a.name)}
             columns={columns}