WIP Styling Changes

client/src/pages/manage/manage.page.component.jsx

@@ -12,15 +12,14 @@ import ChatAffixContainer from "../../components/chat-affix/chat-affix.container
 import ConflictComponent from "../../components/conflict/conflict.component";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
-import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
 //import FooterComponent from "../../components/footer/footer.component";
 //Component Imports
-
 import HeaderContainer from "../../components/header/header.container";
 import JiraSupportComponent from "../../components/jira-support-widget/jira-support-widget.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
+import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
 import TestComponent from "../../components/_test/test.component";
 import { QUERY_STRIPE_ID } from "../../graphql/bodyshop.queries";
 import {
@@ -34,6 +33,7 @@ const ManageRootPage = lazy(() =>
   import("../manage-root/manage-root.page.container")
 );
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
+
 const JobsDetailPage = lazy(() =>
   import("../jobs-detail/jobs-detail.page.container")
 );
@@ -154,7 +154,7 @@ const EmailTest = lazy(() =>
   import("../../components/email-test/email-test-component")
 );
 
-const { Content, Header } = Layout;
+const { Content, Footer } = Layout;
 
 const stripePromise = new Promise((resolve, reject) => {
   client.query({ query: QUERY_STRIPE_ID }).then((resp) => {
@@ -197,7 +197,6 @@ export function Manage({ match, conflict, bodyshop }) {
       <PrintCenterModalContainer />
       <Route exact path={`${match.path}/_test`} component={TestComponent} />
       <Route exact path={`${match.path}`} component={ManageRootPage} />
-
       <Route exact path={`${match.path}/jobs`} component={JobsPage} />
       <Switch>
         <Route
@@ -365,27 +364,27 @@ export function Manage({ match, conflict, bodyshop }) {
 
   return (
     <Layout className="layout-container">
-      <Header>
-        <HeaderContainer />
-      </Header>
+      <HeaderContainer />
+
       <Content className="content-container">
         <FcmNotification />
         <PartnerPingComponent />
         <ErrorBoundary>{PageContent}</ErrorBoundary>
         <ChatAffixContainer />
-
         <BackTop />
-        <div style={{ textAlign: "center", margin: "1rem 0rem" }}>
-          <div>
-            {`ImEX Online V.${process.env.NODE_ENV} - ${
-              process.env.REACT_APP_GIT_SHA
-            } - ${preval`module.exports = new Date().toLocaleString();`}`}
+        <Footer>
+          <div style={{ textAlign: "center", margin: "1rem 0rem" }}>
+            <div>
+              {`ImEX Online V.${process.env.NODE_ENV} - ${
+                process.env.REACT_APP_GIT_SHA
+              } - ${preval`module.exports = new Date().toLocaleString();`}`}
+            </div>
+            <Link to="/about" target="_blank" style={{ color: "#ccc" }}>
+              Disclaimer
+            </Link>
+            <JiraSupportComponent />
           </div>
-          <Link to="/about" target="_blank" style={{ color: "#ccc" }}>
-            Disclaimer
-          </Link>
-          <JiraSupportComponent />
-        </div>
+        </Footer>
       </Content>
     </Layout>
   );

client/src/pages/manage/manage.page.container.jsx

@@ -2,21 +2,17 @@ import { useQuery } from "@apollo/client";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { setBodyshop } from "../../redux/user/user.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import ManagePage from "./manage.page.component";
 
-const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop });
-
 const mapDispatchToProps = (dispatch) => ({
   setBodyshop: (bs) => dispatch(setBodyshop(bs)),
 });
 
-function ManagePageContainer({ match, setBodyshop, bodyshop }) {
+function ManagePageContainer({ match, setBodyshop }) {
   const { loading, error, data } = useQuery(QUERY_BODYSHOP, {
     fetchPolicy: "network-only",
   });
@@ -34,7 +30,4 @@ function ManagePageContainer({ match, setBodyshop, bodyshop }) {
   return <ManagePage match={match} />;
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ManagePageContainer);
+export default connect(null, mapDispatchToProps)(ManagePageContainer);

client/src/pages/manage/manage.page.styles.scss

@@ -1,12 +1,8 @@
 .content-container {
-  overflow-y: auto;
-  margin: 1rem 1rem 0rem 1rem;
-  padding: 0.25rem 2.5rem 1rem 2.5rem;
-  border-radius: 4px;
-  background: #fff;
-  padding-bottom: 3rem;
+  padding: 1rem;
 }
 
 .layout-container {
   height: 100vh;
+  overflow-y: auto;
 }