From f457eca7e39b198c10308710d2529ddb3b9354ae Mon Sep 17 00:00:00 2001
From: Brandon Roberts <brandonjroberts22@gmail.com>
Date: Wed, 12 Jun 2024 02:02:08 -0500
Subject: [PATCH] More responsive design for tabs and footer

---
 frontend/src/App.css                          | 20 +++-
 frontend/src/App.js                           | 98 ++++++++++++++-----
 frontend/src/footer/PixelSelector.css         |  9 +-
 frontend/src/footer/PixelSelector.js          | 36 +++++++
 frontend/src/footer/TabsFooter.css            | 24 ++++-
 frontend/src/footer/TabsFooter.js             | 15 ++-
 frontend/src/tabs/TabPanel.js                 |  1 +
 frontend/src/tabs/canvas/ExtraPixelsPanel.css | 27 +++--
 frontend/src/tabs/canvas/ExtraPixelsPanel.js  | 20 ++--
 9 files changed, 198 insertions(+), 52 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 217e9915..56dead20 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -27,11 +27,15 @@
 }
 
 .App__panel--tablet {
-  width: max(28rem, 40%);
+  width: 40rem;
 }
 
 .App__panel--portrait {
-  width: max(30rem, 50%);
+  width: max(50rem, 60%);
+}
+
+.App__panel--mobile {
+  width: calc(100% - 1rem);
 }
 
 .App__footer {
@@ -57,3 +61,15 @@
   width: min(8rem, 15%);
   image-rendering: pixelated;
 }
+
+.ExpandTabs__button {
+  margin: 0;
+  padding: 0;
+  width: 4.5rem;
+  height: 3.5rem;
+}
+
+.ExpandTabs__icon {
+  width: 3rem;
+  height: 3rem;
+}
diff --git a/frontend/src/App.js b/frontend/src/App.js
index a5aca13b..25b9b380 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -20,6 +20,7 @@ import { fetchWrapper } from './services/apiService.js';
 import art_peace_abi from './contracts/art_peace.abi.json';
 import username_store_abi from './contracts/username_store.abi.json';
 import NotificationPanel from './tabs/NotificationPanel.js';
+import Hamburger from './resources/icons/Hamburger.png';
 
 function App() {
   // Window management
@@ -34,7 +35,11 @@ function App() {
   const isPortrait = useMediaQuery({ query: '(orientation: portrait)' });
   const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' });
   const isMobile = useMediaQuery({ query: '(max-width: 768px)' });
+  const isFooterSplit = useMediaQuery({ query: '(max-width: 52rem)' });
   // TODO: height checks ?
+  // TODO: Animate logo exit on mobile
+
+  const [footerExpanded, setFooterExpanded] = useState(false);
 
   const getDeviceTypeInfo = () => {
     return {
@@ -507,12 +512,15 @@ function App() {
         clearExtraPixel={clearExtraPixel}
         setLastPlacedTime={setLastPlacedTime}
       />
-      <img src={logo} alt='logo' className='App__logo--mobile' />
+      {(!isMobile || activeTab === tabs[0]) && (
+        <img src={logo} alt='logo' className='App__logo--mobile' />
+      )}
       <div
         className={
           'App__panel ' +
           (isTabletOrMobile ? 'App__panel--tablet ' : ' ') +
-          (isPortrait ? 'App__panel--portrait ' : ' ')
+          (isPortrait ? 'App__panel--portrait ' : ' ') +
+          (isMobile ? 'App__panel--mobile ' : ' ')
         }
       >
         <TabPanel
@@ -584,30 +592,68 @@ function App() {
         />
       </div>
       <div className='App__footer'>
-        <PixelSelector
-          colors={colors}
-          selectedColorId={selectedColorId}
-          setSelectedColorId={setSelectedColorId}
-          getDeviceTypeInfo={getDeviceTypeInfo}
-          extraPixels={extraPixels}
-          selectorMode={selectorMode}
-          setSelectorMode={setSelectorMode}
-          setIsEraserMode={setIsEraserMode}
-          availablePixels={availablePixels}
-          availablePixelsUsed={availablePixelsUsed}
-          basePixelUp={basePixelUp}
-          setBasePixelUp={setBasePixelUp}
-          lastPlacedTime={lastPlacedTime}
-          basePixelTimer={basePixelTimer}
-          queryAddress={queryAddress}
-          setActiveTab={setActiveTab}
-        />
-        <TabsFooter
-          tabs={tabs}
-          activeTab={activeTab}
-          setActiveTab={setActiveTab}
-          getDeviceTypeInfo={getDeviceTypeInfo}
-        />
+        <div
+          style={{
+            width: '100%',
+            display: 'flex',
+            justifyContent: `${footerExpanded && isFooterSplit ? 'space-between' : 'center'}`,
+            alignItems: `${footerExpanded && isFooterSplit ? 'flex-end' : 'center'}`
+          }}
+        >
+          <PixelSelector
+            colors={colors}
+            selectedColorId={selectedColorId}
+            setSelectedColorId={setSelectedColorId}
+            getDeviceTypeInfo={getDeviceTypeInfo}
+            extraPixels={extraPixels}
+            selectorMode={selectorMode}
+            setSelectorMode={setSelectorMode}
+            setIsEraserMode={setIsEraserMode}
+            availablePixels={availablePixels}
+            availablePixelsUsed={availablePixelsUsed}
+            basePixelUp={basePixelUp}
+            setBasePixelUp={setBasePixelUp}
+            lastPlacedTime={lastPlacedTime}
+            basePixelTimer={basePixelTimer}
+            queryAddress={queryAddress}
+            setActiveTab={setActiveTab}
+            isEraserMode={isEraserMode}
+            setIsEraseMode={setIsEraserMode}
+            isPortrait={isPortrait}
+            isMobile={isMobile}
+          />
+          {isFooterSplit && !footerExpanded && (
+            <div
+              className='Button__primary ExpandTabs__button'
+              onClick={() => {
+                setActiveTab(tabs[0]);
+                setFooterExpanded(!footerExpanded);
+              }}
+            >
+              <img src={Hamburger} alt='Tabs' className='ExpandTabs__icon' />
+            </div>
+          )}
+          {isFooterSplit && footerExpanded && (
+            <TabsFooter
+              tabs={tabs}
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+              getDeviceTypeInfo={getDeviceTypeInfo}
+              isFooterSplit={isFooterSplit}
+              setFooterExpanded={setFooterExpanded}
+            />
+          )}
+        </div>
+        {!isFooterSplit && (
+          <TabsFooter
+            tabs={tabs}
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            getDeviceTypeInfo={getDeviceTypeInfo}
+            isFooterSplit={isFooterSplit}
+            setFooterExpanded={setFooterExpanded}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/frontend/src/footer/PixelSelector.css b/frontend/src/footer/PixelSelector.css
index 301f5ce2..3743e417 100644
--- a/frontend/src/footer/PixelSelector.css
+++ b/frontend/src/footer/PixelSelector.css
@@ -1,5 +1,5 @@
 .PixelSelector {
-  margin: 0;
+  margin: 1rem;
   padding: 0;
 }
 
@@ -21,7 +21,7 @@
 
 .PixelSelector__text {
   margin: 0;
-  padding: 0;
+  padding: 0.25rem;
 }
 
 .PixelSelector__extras {
@@ -38,6 +38,11 @@
   margin: 0 0.5rem;
   box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.4);
   border: 0.1rem solid rgba(0, 0, 0, 0.3);
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 .PixelSelector__selector {
diff --git a/frontend/src/footer/PixelSelector.js b/frontend/src/footer/PixelSelector.js
index 06f98e00..89d19114 100644
--- a/frontend/src/footer/PixelSelector.js
+++ b/frontend/src/footer/PixelSelector.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import './PixelSelector.css';
 import '../utils/Styles.css';
+import EraserIcon from '../resources/icons/Eraser.png';
 
 const PixelSelector = (props) => {
   // Track when a placement is available
@@ -60,6 +61,7 @@ const PixelSelector = (props) => {
   const cancelSelector = () => {
     props.setSelectedColorId(-1);
     props.setSelectorMode(false);
+    props.setIsEraserMode(false);
   };
 
   return (
@@ -135,6 +137,40 @@ const PixelSelector = (props) => {
               </div>
             </div>
           )}
+          {props.isEraserMode && (
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'center',
+                margin: '0 0 0 0.5rem'
+              }}
+            >
+              <div
+                className='PixelSelector__color'
+                style={{
+                  backgroundColor: '#FFFFFF'
+                }}
+              >
+                <img
+                  src={EraserIcon}
+                  alt='Eraser'
+                  style={{
+                    width: '2rem',
+                    height: '2rem'
+                  }}
+                />
+              </div>
+              <div
+                className='Button__close'
+                style={{ marginLeft: '1rem' }}
+                onClick={() => cancelSelector()}
+              >
+                x
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/frontend/src/footer/TabsFooter.css b/frontend/src/footer/TabsFooter.css
index 771c14cd..c98c4e50 100644
--- a/frontend/src/footer/TabsFooter.css
+++ b/frontend/src/footer/TabsFooter.css
@@ -1,7 +1,7 @@
 .TabsFooter {
   width: min(100vw, 100rem);
   height: max(3.4rem, 10%);
-  margin: min(1rem, 3%) 0;
+  margin: 0rem 1rem 1rem 1rem;
   padding: 0;
 
   display: flex;
@@ -11,9 +11,31 @@
   align-items: center;
 }
 
+.TabsFooter__split {
+  margin: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
 .TabsFooter__tab--active {
   font-size: 1.8rem;
   font-weight: bold;
   text-shadow: 0 0.2rem 0.5rem rgba(255, 255, 255, 0.9);
   transform: scale(1.1);
 }
+
+.TabsFooter__close {
+  background-color: rgba(255, 255, 255, 0.9);
+  width: 3.5rem;
+  height: 3.5rem;
+  align-self: center;
+  margin: 0.5rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
+}
diff --git a/frontend/src/footer/TabsFooter.js b/frontend/src/footer/TabsFooter.js
index 44fbfa58..3ea554a3 100644
--- a/frontend/src/footer/TabsFooter.js
+++ b/frontend/src/footer/TabsFooter.js
@@ -5,11 +5,22 @@ import '../utils/Styles.css';
 const TabsFooter = (props) => {
   // TODO: Icons for each tab
   return (
-    <div className='TabsFooter'>
+    <div className={props.isFooterSplit ? 'TabsFooter__split' : 'TabsFooter'}>
+      {props.isFooterSplit && (
+        <div
+          className='Button__close Text__large TabsFooter__close'
+          onClick={() => props.setFooterExpanded(false)}
+        >
+          X
+        </div>
+      )}
       {props.tabs.slice(0, props.tabs.length).map((type) => (
         <div
           key={type}
-          onClick={() => props.setActiveTab(type)}
+          onClick={() => {
+            props.setActiveTab(type);
+            props.setFooterExpanded(false);
+          }}
           className={
             'Button__primary Text__large ' +
             (props.activeTab === type ? 'TabsFooter__tab--active ' : ' ')
diff --git a/frontend/src/tabs/TabPanel.js b/frontend/src/tabs/TabPanel.js
index 8da6b3b2..31077aa1 100644
--- a/frontend/src/tabs/TabPanel.js
+++ b/frontend/src/tabs/TabPanel.js
@@ -188,6 +188,7 @@ const TabPanel = (props) => {
                   chain={props.chain}
                   connectWallet={props.connectWallet}
                   connectors={props.connectors}
+                  isMobile={props.isMobile}
                 />
               </div>
             )}
diff --git a/frontend/src/tabs/canvas/ExtraPixelsPanel.css b/frontend/src/tabs/canvas/ExtraPixelsPanel.css
index 6e8040ff..baa92477 100644
--- a/frontend/src/tabs/canvas/ExtraPixelsPanel.css
+++ b/frontend/src/tabs/canvas/ExtraPixelsPanel.css
@@ -40,25 +40,25 @@
 }
 
 .ExtraPixelsPanel__body {
+  position: relative;
   margin: 0;
   padding: 0 0.5rem;
   width: 100%;
-  height: 100%;
 
-  display: grid;
-  grid-template-columns: 2fr 3fr;
-  gap: 1rem;
+  display: flex;
+  flex-direction: row;
   overflow: hidden;
 }
 
-.ExtraPixelPanel__info {
+.ExtraPixelsPanel__info {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  /* TODO: Fix scrolling */
+  justify-content: flex-start;
+  height: 100%;
+  width: 100%;
+  padding: 0 0.5rem;
   overflow-y: scroll;
+  scrollbar-width: none;
 }
 
 /* TODO: Always scroll to bottom when adding new pixel */
@@ -72,9 +72,9 @@
   grid-auto-rows: 4.25rem;
   gap: 1rem;
 
-  /* TODO: Fix scrolling */
   overflow-y: scroll;
   border-left: 2px solid rgba(0, 0, 0, 0.4);
+  scrollbar-width: none;
 }
 
 .ExtraPixelsPanel__item {
@@ -189,6 +189,13 @@
   margin-top: 0.5rem;
 }
 
+.ExtraPixelsPanel__faction__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-wrap: none;
+}
+
 .ExtraPixelsPanel__info__item__expand__item {
   background: linear-gradient(
     to bottom right,
diff --git a/frontend/src/tabs/canvas/ExtraPixelsPanel.js b/frontend/src/tabs/canvas/ExtraPixelsPanel.js
index 801df02b..d6f6507b 100644
--- a/frontend/src/tabs/canvas/ExtraPixelsPanel.js
+++ b/frontend/src/tabs/canvas/ExtraPixelsPanel.js
@@ -189,14 +189,16 @@ const ExtraPixelsPanel = (props) => {
       </p>
       <div className='ExtraPixelsPanel__header'>
         <p className='Text__medium Heading__sub'>Extra Pixels</p>
-        <div
-          className={`Button__primary ${props.isEraserMode ? 'Eraser__button--selected' : ''}`}
-          onClick={() => eraserMode()}
-        >
-          <img className='Eraser__icon' src={EraserIcon} alt='eraser' />
-        </div>
-        <div className='Button__primary' onClick={() => submit()}>
-          Submit
+        <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <div
+            className={`Button__primary ${props.isEraserMode ? 'Eraser__button--selected' : ''}`}
+            onClick={() => eraserMode()}
+          >
+            <img className='Eraser__icon' src={EraserIcon} alt='eraser' />
+          </div>
+          <div className='Button__primary' onClick={() => submit()}>
+            Submit
+          </div>
         </div>
       </div>
       <div className='ExtraPixelsPanel__body'>
@@ -236,7 +238,7 @@ const ExtraPixelsPanel = (props) => {
                         key={index}
                       >
                         <p
-                          className='Text__xsmall'
+                          className='Text__xsmall ExtraPixelsPanel__faction__name'
                           style={{
                             margin: '0.5rem 0',
                             padding: '0 0.5rem',