Center upload on screen

web/package.json

@@ -26,7 +26,8 @@
     "build": "GENERATE_SOURCEMAP=false react-app-rewired build --max_old_space_size=4096",
     "test": "react-app-rewired test",
     "eject": "react-app-rewired eject",
-    "lint": "eslint src/**/*.ts src/**/*.tsx"
+    "lint": "eslint src/**/*.ts src/**/*.tsx",
+    "lint:fix": "eslint --fix src/**/*.ts src/**/*.tsx"
   },
   "eslintConfig": {
     "extends": [

web/src/App.tsx

@@ -3,7 +3,7 @@ import ReactHtmlParser from 'react-html-parser';
 import { lazy, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import UploadPage from './pages/Upload/UploadPage';
+import UploadPage from './pages/Upload';
 import HomePage from './pages/Home';
 
 import Footer from './components/Footer';
@@ -13,14 +13,14 @@ import GlobalStyle from './GlobalStyle';
 
 import NavigationBar from './components/NavigationBar';
 
-const TemplatePage = lazy(() => import('./pages/Templates/TemplatePage'));
-const PreSignupPage = lazy(() => import('./pages/PreSignupPage'));
+const TemplatePage = lazy(() => import('./pages/Templates'));
+const PreSignupPage = lazy(() => import('./pages/Register'));
 const SearchPage = lazy(() => import('./pages/Search'));
-const LoginPage = lazy(() => import('./pages/LoginPage'));
-const NewPasswordPage = lazy(() => import('./pages/NewPasswordPage'));
-const LearnPage = lazy(() => import('./pages/LearnPage'));
-const VerifyPage = lazy(() => import('./pages/VerifyPage'));
-const ListUploadsPage = lazy(() => import('./pages/Uploads/ListUploadsPage'));
+const LoginPage = lazy(() => import('./pages/Login'));
+const NewPasswordPage = lazy(() => import('./pages/NewPassword'));
+const LearnPage = lazy(() => import('./pages/Learn'));
+const VerifyPage = lazy(() => import('./pages/Verify'));
+const ListUploadsPage = lazy(() => import('./pages/Uploads'));
 
 const Layout = styled.div`
   display: flex;
@@ -29,11 +29,6 @@ const Layout = styled.div`
   height: 100vh;
 `;
 
-const Container = styled.div`
-  display: block;
-  flex: 1 0 auto;
-`;
-
 function App() {
   const store = useMemo(() => new CardOptionsStore(), []);
   const [errorMessage, setErrorMessage] = useState('');
@@ -50,8 +45,7 @@ function App() {
                 <NavigationBar />
               ) : null)}
             />
-            <Container>
-              {errorMessage && (
+            {errorMessage && (
               <div className="is-info notification is-light my-4">
                 <button
                   aria-label="dismiss error message"
@@ -63,40 +57,39 @@ function App() {
                   {ReactHtmlParser(errorMessage)}
                 </div>
               </div>
-              )}
-              <Switch>
-                <Route path="/uploads">
-                  <ListUploadsPage setError={setErrorMessage} />
-                </Route>
-                <Route path="/verify">
-                  <VerifyPage />
-                </Route>
-                <Route path="/learn">
-                  <LearnPage setError={setErrorMessage} />
-                </Route>
-                <Route path="/tm">
-                  <TemplatePage />
-                </Route>
-                <Route path="/upload">
-                  <UploadPage setErrorMessage={setErrorMessage} errorMessage={errorMessage} />
-                </Route>
-                <Route path="/pre-signup">
-                  <PreSignupPage />
-                </Route>
-                <Route path="/search">
-                  <SearchPage />
-                </Route>
-                <Route path="/login">
-                  <LoginPage setErrorMessage={setErrorMessage} />
-                </Route>
-                <Route path="/users/r/:id">
-                  <NewPasswordPage setErrorMessage={setErrorMessage} />
-                </Route>
-                <Route path="/">
-                  <HomePage />
-                </Route>
-              </Switch>
-            </Container>
+            )}
+            <Switch>
+              <Route path="/uploads">
+                <ListUploadsPage setError={setErrorMessage} />
+              </Route>
+              <Route path="/verify">
+                <VerifyPage />
+              </Route>
+              <Route path="/learn">
+                <LearnPage setError={setErrorMessage} />
+              </Route>
+              <Route path="/tm">
+                <TemplatePage />
+              </Route>
+              <Route path="/upload">
+                <UploadPage setErrorMessage={setErrorMessage} />
+              </Route>
+              <Route path="/pre-signup">
+                <PreSignupPage />
+              </Route>
+              <Route path="/search">
+                <SearchPage />
+              </Route>
+              <Route path="/login">
+                <LoginPage setErrorMessage={setErrorMessage} />
+              </Route>
+              <Route path="/users/r/:id">
+                <NewPasswordPage setErrorMessage={setErrorMessage} />
+              </Route>
+              <Route path="/">
+                <HomePage />
+              </Route>
+            </Switch>
             <Footer />
           </Layout>
         </Router>

web/src/components/NavigationBar.tsx

@@ -29,7 +29,6 @@ interface NavigationBarProps {
 }
 
 const Navbar = styled.nav`
-  padding: 2rem 4rem 2rem 4rem;
   background #E5E5E5;
   @media (max-width: 1024px) {
     margin: 0;
@@ -170,11 +169,14 @@ function NavigationBar({ activeWorkspace, workspaces, connectLink }: NavigationB
         )}
         {isSignedIn && (
         <div className="navbar-end">
+          <NavbarItem href="/upload" path={path}>
+            📦 Upload
+          </NavbarItem>
           <NavbarItem href="/search" path={path}>
-            Search
+            🔍 Search
           </NavbarItem>
           <NavbarItem href="/uploads/mine" path={path}>
-            Uploads
+            🗄 Uploads
           </NavbarItem>
         </div>
         )}

web/src/components/styled.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: block;
+  flex: 1 0 auto;
+  padding: 32px 64px;
+  @media (max-width: 1024px) {
+    padding: 0;
+  }
+`;
+
+export const Main = styled.main`
+  max-width: 720px;
+  margin: 0 auto;
+`;
+
+export const HomeContainer = styled(Container)`
+padding: 0;
+`;

web/src/pages/Home/index.tsx

@@ -3,15 +3,16 @@ import BenefitsSection from './components/Sections/benefits';
 import AboutSection from './components/Sections/about';
 import HeroSection from './components/Sections/hero';
 import NewsSection from './components/Sections/news/NewsSection';
+import { HomeContainer } from '../../components/styled';
 
 export default function HomePage() {
   return (
-    <>
+    <HomeContainer>
       <HeroSection />
       <AboutSection />
       <TestimonialsSection />
       <BenefitsSection />
       <NewsSection />
-    </>
+    </HomeContainer>
   );
 }

web/src/pages/Learn/Wrapper.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 80vh;
+`;
+
+export default Wrapper;

web/src/pages/LearnPage.tsx → web/src/pages/Learn/index.tsx

@@ -1,14 +1,7 @@
 import { useState, useEffect } from 'react';
-import styled from 'styled-components';
-import Backend from '../lib/Backend';
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  height: 80vh;
-`;
+import { Container } from '../../components/styled';
+import Backend from '../../lib/Backend';
+import Wrapper from './Wrapper';
 
 interface Props {
   setError: (error: string) => void;
@@ -69,44 +62,46 @@ function LearnPage({ setError }: Props) {
     return <div>insert loading screen.</div>;
   }
   return (
-    <Wrapper>
-      {page && (
-        <nav className="breadcrumb" aria-label="breadcrumbs">
-          <ul>
-            <li>
-              <a href={page.url}>{page.title}</a>
-            </li>
-          </ul>
-        </nav>
-      )}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          flexDirection: 'column',
-        }}
-      >
-        {block && (
-          <>
-            <h1 className="title">{block.id}</h1>
-            <pre>{JSON.stringify(block, null, 4)}</pre>
-            <hr />
-            <pre>{JSON.stringify(grandChild, null, 2)}</pre>
-          </>
+    <Container>
+      <Wrapper>
+        {page && (
+          <nav className="breadcrumb" aria-label="breadcrumbs">
+            <ul>
+              <li>
+                <a href={page.url}>{page.title}</a>
+              </li>
+            </ul>
+          </nav>
         )}
-        <progress
-          id="file"
-          value={location + 1}
-          max={children.length}
-        />
-        <span style={{ fontSize: '11px' }}>
-          {location + 1}
-          {' '}
-          /
-          {children.length}
-        </span>
-      </div>
-    </Wrapper>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+          }}
+        >
+          {block && (
+            <>
+              <h1 className="title">{block.id}</h1>
+              <pre>{JSON.stringify(block, null, 4)}</pre>
+              <hr />
+              <pre>{JSON.stringify(grandChild, null, 2)}</pre>
+            </>
+          )}
+          <progress
+            id="file"
+            value={location + 1}
+            max={children.length}
+          />
+          <span style={{ fontSize: '11px' }}>
+            {location + 1}
+            {' '}
+            /
+            {children.length}
+          </span>
+        </div>
+      </Wrapper>
+    </Container>
   );
 }
 

web/src/pages/Login/TopSection.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const TopSection = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  grid-gap: 1rem;
+  padding: 1rem;
+`;
+
+export default TopSection;

web/src/pages/LoginPage.tsx → web/src/pages/Login/index.tsx

@@ -1,17 +1,10 @@
 import { useState } from 'react';
-import styled from 'styled-components';
-import RegisterForm from '../components/forms/RegisterForm';
-import LoginForm from '../components/forms/LoginForm';
-import ForgotPasswordForm from '../components/forms/ForgotPassword';
-import NavButtonCTA from '../components/buttons/NavButtonCTA';
-
-const TopSection = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  grid-gap: 1rem;
-  padding: 1rem;
-`;
+import RegisterForm from '../../components/forms/RegisterForm';
+import LoginForm from '../../components/forms/LoginForm';
+import ForgotPasswordForm from '../../components/forms/ForgotPassword';
+import NavButtonCTA from '../../components/buttons/NavButtonCTA';
+import { Container } from '../../components/styled';
+import TopSection from './TopSection';
 
 interface Props {
   setErrorMessage: (message: string) => void;
@@ -32,7 +25,7 @@ function LoginPage({ setErrorMessage }: Props) {
   };
   const login = <LoginForm onForgotPassword={() => setIsForgot(true)} onError={setErrorMessage} />;
   return (
-    <>
+    <Container>
       {!isLogin && (
       <TopSection onClick={() => onClickLogin()}>
         <span className="mx-2">Already have an account?</span>
@@ -50,7 +43,7 @@ function LoginPage({ setErrorMessage }: Props) {
       {!isLogin && !isForgot && <RegisterForm setErrorMessage={setErrorMessage} />}
       {isLogin && !isForgot && login }
       {isForgot && <ForgotPasswordForm setError={setErrorMessage} />}
-    </>
+    </Container>
   );
 }
 

web/src/pages/NewPassword/index.tsx

@@ -0,0 +1,16 @@
+import NewPassordForm from '../../components/forms/NewPassword';
+import { Container } from '../../components/styled';
+
+interface Props {
+  setErrorMessage: (message: string) => void;
+}
+
+function NewPasswordPage({ setErrorMessage }: Props) {
+  return (
+    <Container>
+      <NewPassordForm setErrorMessage={setErrorMessage} />
+    </Container>
+  );
+}
+
+export default NewPasswordPage;