Styling fixes to allow for printing of pages.

client/src/components/chat-affix/chat-affix.container.jsx

@@ -1,17 +1,15 @@
 import { useSubscription } from "@apollo/client";
 import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries";
+import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import ChatAffixComponent from "./chat-affix.component";
-import { Affix } from "antd";
 import "./chat-affix.styles.scss";
 
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   chatVisible: selectChatVisible,
@@ -31,22 +29,20 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 
   return (
-    <Affix className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
+    <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      <div>
+      {bodyshop && bodyshop.messagingservicesid ? (
-        {bodyshop && bodyshop.messagingservicesid ? (
+        <ChatAffixComponent
-          <ChatAffixComponent
+          conversationList={(data && data.conversations) || []}
-            conversationList={(data && data.conversations) || []}
+          unreadCount={
-            unreadCount={
+            (data &&
-              (data &&
+              data.conversations.reduce((acc, val) => {
-                data.conversations.reduce((acc, val) => {
+                return (acc = acc + val.messages_aggregate.aggregate.count);
-                  return (acc = acc + val.messages_aggregate.aggregate.count);
+              }, 0)) ||
-                }, 0)) ||
+            0
-              0
+          }
-            }
+        />
-          />
+      ) : null}
-        ) : null}
+    </div>
-      </div>
-    </Affix>
   );
 }
 export default connect(mapStateToProps, null)(ChatAffixContainer);

client/src/components/chat-affix/chat-affix.styles.scss

@@ -1,6 +1,11 @@
 .chat-affix {
-  position: absolute;
+  position: fixed;
+  left: 2vw;
   bottom: 2vh;
+  z-index: 999;
+  -webkit-box-shadow: 0px 0px 2px 0px rgba(69, 69, 69, 1);
+  -moz-box-shadow: 0px 0px 2px 0px rgba(69, 69, 69, 1);
+  box-shadow: 0px 0px 2px 0px rgba(69, 69, 69, 1);
 }
 
 .chat-affix-open {

client/src/components/header/header.component.jsx

@@ -1,5 +1,4 @@
 import Icon, {
-  FileAddOutlined,
   BankFilled,
   BarChartOutlined,
   CarFilled,
@@ -9,6 +8,7 @@ import Icon, {
   ExportOutlined,
   FieldTimeOutlined,
   FileAddFilled,
+  FileAddOutlined,
   FileFilled,
   GlobalOutlined,
   HomeFilled,
@@ -85,7 +85,6 @@ function Header({
         mode="horizontal"
         //theme="light"
         theme={"dark"}
-        style={{ flex: "auto" }}
         selectedKeys={[selectedHeader]}
         onClick={handleMenuClick}
         subMenuCloseDelay={0.3}
@@ -263,7 +262,6 @@ function Header({
             {t("menus.header.temporarydocs")}
           </Link>
         </Menu.Item>
-
         <Menu.SubMenu
           key="shopsubmenu"
           title={t("menus.header.shop")}
@@ -300,7 +298,6 @@ function Header({
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
-          style={{ float: "right" }}
           key="user"
           title={
             currentUser.displayName ||
@@ -354,12 +351,7 @@ function Header({
             </Menu.Item>
           </Menu.SubMenu>
         </Menu.SubMenu>
-
+        <Menu.SubMenu key="recent" title={<ClockCircleFilled />}>
-        <Menu.SubMenu
-          key="recent"
-          style={{ float: "right" }}
-          title={<ClockCircleFilled />}
-        >
           {recentItems.map((i, idx) => (
             <Menu.Item key={idx}>
               <Link to={i.url}>{i.label}</Link>

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

@@ -378,41 +378,43 @@ export function Manage({ match, conflict, bodyshop }) {
   else PageContent = AppRouteTable;
 
   return (
-    <Layout className="layout-container">
+    <>
-      <HeaderContainer />
+      <ChatAffixContainer />
+      <Layout className="layout-container">
+        <HeaderContainer />
 
-      <Content className="content-container">
+        <Content className="content-container">
-        <FcmNotification />
+          <FcmNotification />
-        <PartnerPingComponent />
+          <PartnerPingComponent />
-        <ErrorBoundary>{PageContent}</ErrorBoundary>
+          <ErrorBoundary>{PageContent}</ErrorBoundary>
-        <ChatAffixContainer />
+          <BackTop />
-        <BackTop />
+          <Footer>
-        <Footer>
+            <div
-          <div
+              style={{
-            style={{
+                display: "flex",
-              display: "flex",
+                flexDirection: "column",
-              flexDirection: "column",
+                justifyContent: "center",
-              justifyContent: "center",
+                alignItems: "center",
-              alignItems: "center",
+                margin: "1rem 0rem",
-              margin: "1rem 0rem",
+              }}
-            }}
+            >
-          >
+              <div style={{ display: "flex" }}>
-            <div style={{ display: "flex" }}>
+                <div>
-              <div>
+                  {`ImEX Online ${
-                {`ImEX Online ${
+                    process.env.REACT_APP_GIT_SHA
-                  process.env.REACT_APP_GIT_SHA
+                  } - ${preval`module.exports = new Date().toLocaleString("en-US", {timeZone: "America/Los_Angeles"});`}`}
-                } - ${preval`module.exports = new Date().toLocaleString("en-US", {timeZone: "America/Los_Angeles"});`}`}
+                </div>
+                <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
               </div>
-              <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
+              <Link to="/about" target="_blank" style={{ color: "#ccc" }}>
+                Disclaimer & Notices
+              </Link>
+              <JiraSupportComponent />
             </div>
-            <Link to="/about" target="_blank" style={{ color: "#ccc" }}>
+          </Footer>
-              Disclaimer
+        </Content>
-            </Link>
+      </Layout>
-            <JiraSupportComponent />
+    </>
-          </div>
-        </Footer>
-      </Content>
-    </Layout>
   );
 }
 export default connect(mapStateToProps, null)(Manage);

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

@@ -3,6 +3,6 @@
 }
 
 .layout-container {
-  height: 100vh;
+  // height: 100vh;
-  overflow-y: auto;
+  // overflow-y: auto;
 }