Fixed up general layout of manage page + root + styled login page.

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

@@ -1,10 +1,12 @@
 import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
 import { BackTop, Layout } from "antd";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Route, Switch } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { client } from "../../App/App.container";
 import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
 import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
 import ConflictComponent from "../../components/conflict/conflict.component";
@@ -15,14 +17,9 @@ import FooterComponent from "../../components/footer/footer.component";
 import HeaderContainer from "../../components/header/header.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
-import {
-  selectInstanceConflict,
-  selectBodyshop,
-} from "../../redux/user/user.selectors";
-import "./manage.page.styles.scss";
-import { loadStripe } from "@stripe/stripe-js";
-import { client } from "../../App/App.container";
 import { QUERY_STRIPE_ID } from "../../graphql/bodyshop.queries";
+import { selectInstanceConflict } from "../../redux/user/user.selectors";
+import "./manage.page.styles.scss";
 
 const ManageRootPage = lazy(() =>
   import("../manage-root/manage-root.page.container")
@@ -113,7 +110,7 @@ const ShopCsiPageContainer = lazy(() =>
   import("../shop-csi/shop-csi.container.page")
 );
 
-const { Header, Content, Footer } = Layout;
+const { Content, Footer } = Layout;
 
 const stripePromise = new Promise((resolve, reject) => {
   client.query({ query: QUERY_STRIPE_ID }).then((resp) => {
@@ -137,10 +134,11 @@ export function Manage({ match, conflict }) {
   }, [t]);
 
   return (
-    <Layout style={{ minHeight: "100vh" }}>
+    <Layout className='layout-container'>
       <HeaderContainer />
+      <BreadCrumbs />
 
-      <Content className='content-container' style={{ padding: "0em 4em 4em" }}>
+      <Content className='content-container'>
         <FcmNotification />
         <ErrorBoundary>
           {conflict ? (
@@ -150,7 +148,6 @@ export function Manage({ match, conflict }) {
               fallback={
                 <LoadingSpinner message={t("general.labels.loadingapp")} />
               }>
-              <BreadCrumbs />
               <EnterInvoiceModalContainer />
               <EmailOverlayContainer />
               <TimeTicketModalContainer />
@@ -302,13 +299,15 @@ export function Manage({ match, conflict }) {
             </Suspense>
           )}
         </ErrorBoundary>
+        <ChatAffixContainer />
+        <BackTop />
       </Content>
 
-      <Footer>
-        <FooterComponent />
-      </Footer>
-      <ChatAffixContainer />
-      <BackTop />
+      {
+        //   <Footer>
+        //   <FooterComponent />
+        // </Footer>
+      }
     </Layout>
   );
 }

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

@@ -1 +1,10 @@
-.content-container { overflow-y : scroll; }
+.content-container {
+  overflow-y: auto;
+  margin: 0.5rem 1.5rem;
+  padding: 1.5rem;
+  background: #fff;
+}
+
+.layout-container {
+  height: 100vh;
+}

client/src/pages/sign-in/sign-in.page.jsx

@@ -3,14 +3,7 @@ import SignIn from "../../components/sign-in-form/sign-in-form.component";
 
 export default () => {
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "middle",
-        padding: "4em",
-      }}
-    >
+    <div>
       <SignIn />
     </div>
   );