Bug/NFTPAR 1070 horizontal paddings

packages/apps/src/AppContext.tsx

@@ -0,0 +1,30 @@
+// Copyright 2017-2021 @polkadot/apps authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { Dispatch, SetStateAction, useState } from 'react';
+
+interface IAppContext {
+  previewButtonDisplayed: boolean;
+  setPreviewButtonDisplayed: Dispatch<SetStateAction<boolean>>;
+}
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const AppCtx = React.createContext<IAppContext>({ previewButtonDisplayed: false, setPreviewButtonDisplayed: () => { } });
+
+function AppProvider({ children }: Props): React.ReactElement<Props> {
+  const [previewButtonDisplayed, setPreviewButtonDisplayed] = useState(false);
+
+
+  return (
+    <AppCtx.Provider value={{ previewButtonDisplayed, setPreviewButtonDisplayed }}>
+      {children}
+    </AppCtx.Provider>
+  );
+}
+
+export default React.memo(AppProvider);
+
+export { AppCtx };

packages/apps/src/Apps.tsx

@@ -30,6 +30,7 @@ import MobileMenu from './MobileMenu';
 import MobileMenuHeader from './MobileMenuHeader';
 import ScrollToTop from './ScrollToTop';
 import WarmUp from './WarmUp';
+import { AppCtx } from './AppContext';
 
 export const PORTAL_ID = 'portals';
 
@@ -45,7 +46,7 @@ const NOT_FOUND: Route = {
   text: 'Unknown'
 };
 
-function Apps ({ className = '' }: Props): React.ReactElement<Props> {
+function Apps({ className = '' }: Props): React.ReactElement<Props> {
   const location = useLocation();
   const { t } = useTranslation();
   const theme = useContext<ThemeDef>(ThemeContext);
@@ -54,6 +55,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
   const [account, setAccount] = useState<string>();
   const [openPanel, setOpenPanel] = useState<OpenPanelType>('tokens');
   const [isPageFound, setIsPageFound] = useState<boolean>(true);
+  const { previewButtonDisplayed } = useContext(AppCtx);
 
   const uiHighlight = useMemo(
     () => getSystemChainColor(systemChain, systemName),
@@ -76,7 +78,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
     <>
       <GlobalStyle uiHighlight={uiHighlight} />
       <ScrollToTop />
-      <div className={`app-wrapper theme--${theme.theme} ${className}`}>
+      <div className={`app-wrapper theme--${theme.theme} ${className} ${previewButtonDisplayed && openPanel !== 'menu' ? 'padding-for-button' : ''}`}>
         <Signer>
           <>
             <ErrorBoundary
@@ -96,7 +98,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
                       className='header-menu'
                       tabular
                     >
-                      { theme.logo && (
+                      {theme.logo && (
                         <Menu.Item
                           active={location.pathname === '/'}
                           as={NavLink}
@@ -123,7 +125,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
                         to='/faq'
                       />
                     </Menu>
-                    { (isApiReady && isApiConnected) && (
+                    {(isApiReady && isApiConnected) && (
                       <div className='app-user'>
                         <BalancesHeader
                           account={account}
@@ -143,22 +145,22 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
                     )}
                   </div>
                 </header>
-                { (isApiReady && isApiConnected) && openPanel === 'menu' && (
+                {(isApiReady && isApiConnected) && openPanel === 'menu' && (
                   <MobileMenu
                     account={account}
                     setOpenPanel={setOpenPanel}
                     theme={theme}
                   />
                 )}
-                { openPanel === 'accounts' && (
+                {openPanel === 'accounts' && (
                   <ManageAccounts
                     account={account}
                     setAccount={setAccount}
                     setIsMobileMenu={setOpenPanel}
                   />
                 )}
 
-                { (openPanel !== 'accounts') && (
+                {(openPanel !== 'accounts') && (
                   <Suspense fallback=''>
                     <main className={`app-main ${openPanel || ''} ${noAccounts ? 'no-accounts' : ''} ${!isPageFound ? 'page-no-found' : ''}`}>
                       <div className='app-container'>
@@ -185,12 +187,12 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
                 )}
               </>
             </ErrorBoundary>
+            <Footer />
             <Status />
           </>
         </Signer>
       </div>
       <WarmUp />
-      <Footer />
     </>
   );
 }

packages/apps/src/Footer/Footer.tsx

@@ -102,7 +102,7 @@ export default memo(styled(Footer)`
 
   .app-footer__social-links {
     display: flex;
-    grid-column-gap: calc(var(--gap)/2);
+    grid-column-gap: var(--gap);
 
     a {
       display: flex;
@@ -116,33 +116,15 @@ export default memo(styled(Footer)`
 
   @media (max-width: 1023px) {
     border-top: 1px solid var(--enum-input-border-disabled-color);
-    padding: calc(var(--gap) / 2) calc((var(--gap) / 2) * 3);
-
-    .app-footer--container {
-      align-items: flex-start;
-      flex-direction: column;
-      grid-row-gap: calc(var(--gap) / 2);
-    }
   }
 
   @media (max-width: 767px) {
-    border-top: 1px solid var(--enum-input-border-disabled-color);
-
-    .app-footer--container {
-      align-items: flex-start;
-      flex-direction: column;
-      grid-row-gap: calc(var(--gap) / 2);
-    }
-  }
-
-  @media (max-width: 320px) {
-    border-top: 1px solid var(--enum-input-border-disabled-color);
     padding: var(--gap);
 
     .app-footer--container {
       align-items: flex-start;
       flex-direction: column;
-      grid-row-gap: calc(var(--gap)/2);
+      grid-row-gap: var(--gap);
     }
   }
 `);

packages/apps/src/Root.tsx

@@ -17,14 +17,15 @@ import envConfig from '@polkadot/apps-config/envConfig';
 import Apps from './Apps';
 import { Themes, uniqueTheme } from './themes';
 import WindowDimensions from './WindowDimensions';
+import AppProvider from './AppContext';
 
 const { uniqueSubstrateApi } = envConfig;
 
 interface Props {
   store?: KeyringStore;
 }
 
-function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
+function createTheme({ uiTheme }: { uiTheme: string }): ThemeDef {
   const validTheme = Themes.find((themeElem) => {
     return (themeElem.domain && window.location.href.includes(themeElem.domain)) || (themeElem.ip && window.location.href.includes(themeElem.ip));
   });
@@ -35,7 +36,7 @@ function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
   return validTheme || uniqueTheme;
 }
 
-function Root ({ store }: Props): React.ReactElement<Props> {
+function Root({ store }: Props): React.ReactElement<Props> {
   const [theme, setTheme] = useState(() => createTheme(settings));
 
   useEffect((): void => {
@@ -54,7 +55,9 @@ function Root ({ store }: Props): React.ReactElement<Props> {
               <Events>
                 <HashRouter>
                   <WindowDimensions>
-                    <Apps />
+                    <AppProvider>
+                      <Apps />
+                    </AppProvider>
                   </WindowDimensions>
                 </HashRouter>
               </Events>