Web: Login: added GlobalStyle, refactoring server

packages/login/src/client/components/GlobalStyle.tsx

@@ -0,0 +1,34 @@
+import { createGlobalStyle } from "styled-components";
+
+interface IGlobalStyleProps {
+  fonts?: string;
+}
+
+const GlobalStyle = createGlobalStyle`
+  html,
+  body {
+    height: 100%;
+    ${(props: IGlobalStyleProps) => props?.fonts}
+    font-family: 'Open Sans', sans-serif, Arial;
+    font-size: 13px;
+  }
+
+  #root {
+    min-height: 100%;
+
+    .pageLoader {
+      position: fixed;
+      left: calc(50% - 20px);
+      top: 35%;
+    }
+  }
+  body {
+    margin: 0;
+  }
+
+  body.loading * {
+    cursor: wait !important;
+  }
+`;
+
+export default GlobalStyle;

packages/login/src/server/index.ts

@@ -7,9 +7,7 @@ import fs from "fs";
 import logger from "morgan";
 import winston, { stream } from "./lib/logger";
 import { getAssets } from "./lib/helpers";
-import { renderToString } from "react-dom/server";
-import React from "react";
-import App from "../client/App";
+import renderApp, { getStyleTags } from "./lib/helpers/render-app";
 
 interface IParsedConfig extends Object {
   PORT?: number;
@@ -24,10 +22,6 @@ if (parsedConfig?.PORT) {
   port = parsedConfig.PORT;
 }
 
-const renderApp = () => {
-  return renderToString(<App />);
-};
-
 const app = express();
 app.use(compression());
 app.use("/login", express.static(path.resolve(path.join(__dirname, "client"))));
@@ -49,11 +43,11 @@ if (IS_DEVELOPMENT) {
     }
 
     const appComponent = renderApp();
-
+    const styleTags = getStyleTags();
     const htmlString = template(
       {},
       appComponent,
-      "styleTags",
+      styleTags,
       {},
       "userLng",
       assets

packages/login/src/server/lib/helpers/render-app.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ServerStyleSheet } from "styled-components";
+import GlobalStyle from "../../../client/components/GlobalStyle";
+import App from "../../../client/App";
+import { renderToString } from "react-dom/server";
+
+const sheet = new ServerStyleSheet();
+
+const renderApp = () => {
+  return renderToString(
+    sheet.collectStyles(
+      <>
+        <GlobalStyle />
+        <App />
+      </>
+    )
+  );
+};
+
+export default renderApp;
+
+export const getStyleTags = sheet.getStyleTags;

packages/login/webpack/webpack.server.js

@@ -10,7 +10,7 @@ const serverConfig = {
   target: "node",
   name: "server",
   entry: {
-    server: "./src/server/index.tsx",
+    server: "./src/server/index.ts",
   },
 
   output: {