Added a sticker to the top left, so that I can highlight a deployment edition (save confusion if there's multiple windows open in browser from different deployments)

.env

@@ -1,4 +1,5 @@
 NODE_ENV=development
 API_URL=http://localhost:3001/api/
 EXTERNAL_LOGIN=true
-CKEDITOR_LICENSE_KEY=GPL
+CKEDITOR_LICENSE_KEY=GPL
+STICKER_TEXT=Source

.env.example

@@ -1,3 +0,0 @@
-NODE_ENV=development
-API_URL=http://localhost:3001/api/
-EXTERNAL_LOGIN=true

public/runtime-env.js

@@ -1 +1 @@
-window.__RUNTIME_CONFIG__ = {"NODE_ENV":"development","API_URL":"http://localhost:3001/api/","EXTERNAL_LOGIN":"true","CKEDITOR_LICENSE_KEY":"GPL"};
+window.__RUNTIME_CONFIG__ = {"NODE_ENV":"development","API_URL":"http://localhost:3001/api/","EXTERNAL_LOGIN":"true","CKEDITOR_LICENSE_KEY":"GPL","STICKER_TEXT":"Source"};

src/Sass/_frame.scss

@@ -1,22 +1,45 @@
-@import './_esuiteVariables.scss';
+@import "./_esuiteVariables.scss";
 
 .frame {
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+
+  .sticker {
+    position: fixed;
+    top: 30px;
+    left: -60px;
+    padding: 4px 0;
+    width: 200px;
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 0.875em;
+    line-height: 1em;
+    background: #fffe4e;
+    color: #333;
+    border-top: 2px solid #c9c353;
+    border-bottom: 2px solid #c9c353;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    z-index: 2;
+  }
 }
 
 .frame-row {
-    display: flex;
+  display: flex;
 }
 
-.frame-leftMenu {    
-    height: auto;
+.frame-leftMenu {
+  height: auto;
 }
 
 .frame-workArea {
-    height:  calc(100vh - 76px);
-    width: 100%;
-    overflow: auto;
-    padding: $frameWorkAreaPadding;
-}
+  height: calc(100vh - 76px);
+  width: 100%;
+  overflow: auto;
+  padding: $frameWorkAreaPadding;
+}

src/modules/frame/components/Mainframe.tsx

@@ -3,6 +3,7 @@ import TopMenu from "./TopMenu";
 import LeftMenu from "./LeftMenu";
 
 import "../../../Sass/_frame.scss";
+import Sticker from "./Sticker";
 
 type MainFrameProps = {
   title?: string | null;
@@ -19,6 +20,7 @@ const Mainframe: React.FC<MainFrameProps> = ({ title, children }) => {
         </div>
         <div className="frame-workArea">{children}</div>
       </div>
+      <Sticker />
     </div>
   );
 };

src/modules/frame/components/Sticker.tsx

@@ -0,0 +1,14 @@
+const isBlank = (value: string | null | undefined) =>
+  !value || value.trim().length === 0;
+
+const Sticker: React.FC = () => {
+  if (isBlank(window.__RUNTIME_CONFIG__.STICKER_TEXT)) {
+    return null;
+  }
+
+  return (
+    <span className="sticker">{window.__RUNTIME_CONFIG__.STICKER_TEXT}</span>
+  );
+};
+
+export default Sticker;

src/modules/frame/components/loginFrame.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import "../../../Sass/login.scss";
 
 import Logo from "../../../img/logo";
+import Sticker from "./Sticker";
 
 interface LoginFrameProps {
   children?: JSX.Element;
@@ -10,7 +11,7 @@ interface LoginFrameProps {
 
 const LoginFrame: React.FC<LoginFrameProps> = ({ children }) => {
   return (
-    <div className="container-fluid vh-100">
+    <div className="frame">
       <div className="col-md-2">
         <div className="loginFormContainer">
           <div className="col-12 logo">
@@ -21,6 +22,7 @@ const LoginFrame: React.FC<LoginFrameProps> = ({ children }) => {
       </div>
 
       <div className="col-md-8"></div>
+      <Sticker />
     </div>
   );
 };

src/modules/homepage/Env.tsx

@@ -22,6 +22,10 @@ const EnvPage: React.FC = () => {
           ? "GPL"
           : "hidden"}
       </p>
+      <p>
+        window.__RUNTIME_CONFIG__.STICKER_TEXT ={" "}
+        {window.__RUNTIME_CONFIG__.STICKER_TEXT}
+      </p>
     </>
   );
 };

src/types/globals.ts

@@ -7,6 +7,7 @@ declare global {
       API_URL: string;
       EXTERNAL_LOGIN: boolean;
       CKEDITOR_LICENSE_KEY?: string;
+      STICKER_TEXT: string;
     };
   }
 }