@openmrs/esm-implementer-tools-app 6.2.1-pre.2748 → 6.2.1-pre.2749

package/src/ui-editor/ui-editor.tsx

@@ -1,57 +1,152 @@
-import React from 'react';
-import styles from './styles.css';
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation, type TFunction } from 'react-i18next';
+import { Button } from '@carbon/react';
 import {
   CloseIcon,
   getExtensionInternalStore,
   useStore,
   useStoreWithActions,
 } from '@openmrs/esm-framework/src/internal';
-import { Button } from '@carbon/react';
-import { Portal } from './portal';
 import { ExtensionOverlay } from './extension-overlay.component';
+import { Portal } from './portal';
 import { type ImplementerToolsStore, implementerToolsStore } from '../store';
+import styles from './styles.scss';
+
+interface ExitButtonProps {
+  t: TFunction;
+}
+
+interface SlotOverlayProps {
+  extensionCount: number;
+  moduleName: string;
+  slotName: string;
+  t: TFunction;
+  colorScheme: 'blue' | 'green';
+}
 
 export default function UiEditor() {
+  const { t } = useTranslation();
   const { slots, extensions } = useStore(getExtensionInternalStore());
-  const { isOpen: implementerToolsIsOpen } = useStore(implementerToolsStore);
+  const { isOpen: areImplementerToolsOpen } = useStore(implementerToolsStore);
+
+  const getExtensionCount = (slotName: string, moduleName: string) => {
+    if (!extensions || !moduleName) return 0;
+
+    let count = 0;
+
+    const slot = slots?.[slotName];
+
+    if (slot && Array.isArray(slot.attachedIds)) {
+      return slot.attachedIds.length;
+    }
+
+    return count;
+  };
+
+  const slotElements = useMemo(() => {
+    if (!slots) {
+      return [];
+    }
+
+    return Object.entries(slots)
+      .map(([slotName, slotInfo]) => {
+        if (!slotName) {
+          return null;
+        }
+
+        return {
+          slotName,
+          slotInfo,
+          element: document.querySelector(
+            `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotInfo.moduleName}"]`,
+          ) as HTMLElement | null,
+        };
+      })
+      .filter((x): x is NonNullable<typeof x> => Boolean(x));
+  }, [slots]);
+
+  const extensionElements = useMemo(() => {
+    if (!extensions) {
+      return [];
+    }
+
+    return Object.entries(extensions).flatMap(([extensionName, extensionInfo]) =>
+      Object.entries(extensionInfo.instances).flatMap(([slotModuleName, bySlotName]) =>
+        Object.entries(bySlotName).map(([slotName, extensionInstance]) => ({
+          extensionName,
+          slotModuleName,
+          slotName,
+          extensionInstance,
+          element: document.querySelector(
+            `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotModuleName}"] *[data-extension-id="${extensionInstance.id}"]`,
+          ) as HTMLElement | null,
+        })),
+      ),
+    );
+  }, [extensions]);
 
   return (
     <>
-      {implementerToolsIsOpen ? null : <ExitButton />}
-      {slots
-        ? Object.entries(slots).map(([slotName, slotInfo]) => (
-            <Portal
-              key={`slot-overlay-${slotInfo.moduleName}-${slotName}`}
-              el={document.querySelector(
-                `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotInfo.moduleName}"]`,
-              )}
-            >
-              <SlotOverlay slotName={slotName} moduleName={slotInfo.moduleName} />
+      <ExitButton t={t} />
+      {slotElements.map(
+        ({ slotName, slotInfo, element }, index) =>
+          element && (
+            <Portal key={`slot-overlay-${slotInfo.moduleName}-${slotName}`} el={element}>
+              <SlotOverlay
+                extensionCount={getExtensionCount(slotName, slotInfo.moduleName ?? '')}
+                moduleName={slotInfo.moduleName ?? ''}
+                slotName={slotName}
+                t={t}
+                colorScheme={index % 2 === 0 ? 'blue' : 'green'}
+              />
             </Portal>
-          ))
-        : null}
-      {extensions
-        ? Object.entries(extensions).map(([extensionName, extensionInfo]) =>
-            Object.entries(extensionInfo.instances).map(([slotModuleName, bySlotName]) =>
-              Object.entries(bySlotName).map(([slotName, extensionInstance]) => (
-                <ExtensionOverlay
-                  key={slotName}
-                  extensionName={extensionName}
-                  slotModuleName={slotModuleName}
-                  slotName={slotName}
-                  domElement={document.querySelector(
-                    `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotModuleName}"] *[data-extension-id="${extensionInstance.id}"]`,
-                  )}
-                />
-              )),
-            ),
-          )
-        : null}
+          ),
+      )}
+      {extensionElements.map(
+        ({ extensionName, slotModuleName, slotName, extensionInstance, element }) =>
+          element && (
+            <ExtensionOverlay
+              domElement={element}
+              extensionName={extensionName}
+              key={`${slotName}-${extensionInstance.id}`}
+              slotModuleName={slotModuleName}
+              slotName={slotName}
+            />
+          ),
+      )}
     </>
   );
 }
 
-export function SlotOverlay({ slotName, moduleName }) {
+export function SlotOverlay({ slotName, moduleName, extensionCount = 0, colorScheme }: SlotOverlayProps) {
+  const { slots } = useStore(getExtensionInternalStore());
+  const [isHovering, setIsHovering] = useState(false);
+
+  const overlayClass = classNames(styles.slotOverlay, {
+    [styles.blueScheme]: colorScheme === 'blue',
+    [styles.greenScheme]: colorScheme === 'green',
+    [styles.slotOverlayHover]: isHovering,
+  });
+
+  const buttonClass = classNames(styles.slotName, {
+    [styles.blueScheme]: colorScheme === 'blue',
+    [styles.greenScheme]: colorScheme === 'green',
+  });
+
+  const getTooltipContent = () => {
+    let content = `Slot: ${slotName}\nModule: ${moduleName}`;
+
+    if (extensionCount > 0) {
+      const slot = slots?.[slotName];
+      if (slot?.attachedIds?.length) {
+        content += `\nExtensions (${extensionCount}):\n- ${slot.attachedIds.join('\n- ')}`;
+      }
+    }
+
+    return content;
+  };
+
   const setActiveExtensionSlot = (moduleName: string, slotName: string) => {
     if (!implementerToolsStore.getState().configPathBeingEdited) {
       implementerToolsStore.setState({
@@ -60,40 +155,47 @@ export function SlotOverlay({ slotName, moduleName }) {
       });
     }
   };
+
   return (
     <>
-      <div className={styles.slotOverlay}></div>
+      <div className={overlayClass}></div>
       <button
+        className={buttonClass}
         onClick={(event) => {
           event.preventDefault();
-          setActiveExtensionSlot(moduleName, slotName);
+          if (moduleName && slotName) {
+            setActiveExtensionSlot(moduleName, slotName);
+          }
         }}
-        className={styles.slotName}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+        title={getTooltipContent()}
       >
-        Slot: {slotName}
+        {slotName}
       </button>
     </>
   );
 }
 
-const actions = {
-  toggleIsUIEditorEnabled({ isUIEditorEnabled }: ImplementerToolsStore) {
-    return { isUIEditorEnabled: !isUIEditorEnabled };
-  },
-};
-
-export function ExitButton() {
+export function ExitButton({ t }: ExitButtonProps) {
   const { toggleIsUIEditorEnabled } = useStoreWithActions(implementerToolsStore, actions);
   return (
     <Button
       className={styles.exitButton}
+      hasIconOnly
+      iconDescription={t('exitUIEditor', 'Exit UI Editor')}
       kind="danger"
-      size="sm"
+      onClick={toggleIsUIEditorEnabled}
       renderIcon={(props) => <CloseIcon {...props} size={16} />}
-      iconDescription="Exit UI Editor"
+      size="sm"
       tooltipPosition="left"
-      onClick={toggleIsUIEditorEnabled}
-      hasIconOnly
+      wrapperClasses={styles.popover}
     />
   );
 }
+
+const actions = {
+  toggleIsUIEditorEnabled({ isUIEditorEnabled }: ImplementerToolsStore) {
+    return { isUIEditorEnabled: !isUIEditorEnabled };
+  },
+};

package/dist/587.js

@@ -1 +0,0 @@
-"use strict";(globalThis.webpackChunk_openmrs_esm_implementer_tools_app=globalThis.webpackChunk_openmrs_esm_implementer_tools_app||[]).push([[587],{3539:(e,n,t)=>{t.d(n,{Z:()=>s});var o=t(9233),r=t.n(o),l=t(361),i=t.n(l)()(r());i.push([e.id,".-esm-implementer-tools__styles__slotOverlay___0dSua {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(43, 43, 185, 0.1);\n  border: 1px solid rgba(43, 43, 185, 0.4);\n  pointer-events: none;\n}\n\n.-esm-implementer-tools__styles__slotName___gwNsi {\n  background-color: rgb(255, 255, 255, 0.85);\n  border: 1px solid rgba(43, 43, 185, 0.4);\n  color: #393939;\n  cursor: pointer;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  padding: 0.5em 0.5em 0.5em 0.5em;\n  z-index: 99999;\n}\n\n.-esm-implementer-tools__styles__extensionOverlay___EKzCd {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: none;\n  border: none;\n}\n\n.-esm-implementer-tools__styles__extensionOverlay___EKzCd:hover {\n  background-color: rgba(43, 43, 185, 0.1);\n}\n\n/* Show the tooltip text when you mouse over the tooltip container */\n.-esm-implementer-tools__styles__extensionOverlay___EKzCd:focus .-esm-implementer-tools__styles__extensionTooltip___QVban,\n.-esm-implementer-tools__styles__extensionOverlay___EKzCd:hover .-esm-implementer-tools__styles__extensionTooltip___QVban {\n  visibility: visible;\n  opacity: 1;\n}\n\n.-esm-implementer-tools__styles__extensionTooltip___QVban {\n  visibility: hidden;\n  width: auto;\n  background-color: rgb(255, 255, 255, 0.85);\n  text-align: center;\n  padding: 0.5em 0.5em 0.5em 0.5em;\n  border: 1px solid rgba(43, 43, 185, 0.4);\n\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.-esm-implementer-tools__styles__exitButton___VWj92 {\n  position: fixed !important;\n  bottom: 0;\n  right: 0;\n  z-index: 999999;\n}\n","",{version:3,sources:["webpack://./src/ui-editor/styles.css"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,wCAAwC;EACxC,wCAAwC;EACxC,oBAAoB;AACtB;;AAEA;EACE,0CAA0C;EAC1C,wCAAwC;EACxC,cAAc;EACd,eAAe;EACf,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,gCAAgC;EAChC,cAAc;AAChB;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,gBAAgB;EAChB,YAAY;AACd;;AAEA;EACE,wCAAwC;AAC1C;;AAEA,oEAAoE;AACpE;;EAEE,mBAAmB;EACnB,UAAU;AACZ;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,0CAA0C;EAC1C,kBAAkB;EAClB,gCAAgC;EAChC,wCAAwC;;EAExC,kBAAkB;EAClB,MAAM;EACN,OAAO;AACT;;AAEA;EACE,0BAA0B;EAC1B,SAAS;EACT,QAAQ;EACR,eAAe;AACjB",sourcesContent:[".slotOverlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(43, 43, 185, 0.1);\n  border: 1px solid rgba(43, 43, 185, 0.4);\n  pointer-events: none;\n}\n\n.slotName {\n  background-color: rgb(255, 255, 255, 0.85);\n  border: 1px solid rgba(43, 43, 185, 0.4);\n  color: #393939;\n  cursor: pointer;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  padding: 0.5em 0.5em 0.5em 0.5em;\n  z-index: 99999;\n}\n\n.extensionOverlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: none;\n  border: none;\n}\n\n.extensionOverlay:hover {\n  background-color: rgba(43, 43, 185, 0.1);\n}\n\n/* Show the tooltip text when you mouse over the tooltip container */\n.extensionOverlay:focus .extensionTooltip,\n.extensionOverlay:hover .extensionTooltip {\n  visibility: visible;\n  opacity: 1;\n}\n\n.extensionTooltip {\n  visibility: hidden;\n  width: auto;\n  background-color: rgb(255, 255, 255, 0.85);\n  text-align: center;\n  padding: 0.5em 0.5em 0.5em 0.5em;\n  border: 1px solid rgba(43, 43, 185, 0.4);\n\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.exitButton {\n  position: fixed !important;\n  bottom: 0;\n  right: 0;\n  z-index: 999999;\n}\n"],sourceRoot:""}]),i.locals={slotOverlay:"-esm-implementer-tools__styles__slotOverlay___0dSua",slotName:"-esm-implementer-tools__styles__slotName___gwNsi",extensionOverlay:"-esm-implementer-tools__styles__extensionOverlay___EKzCd",extensionTooltip:"-esm-implementer-tools__styles__extensionTooltip___QVban",exitButton:"-esm-implementer-tools__styles__exitButton___VWj92"};const s=i},587:(e,n,t)=>{t.r(n),t.d(n,{ExitButton:()=>P,SlotOverlay:()=>T,default:()=>j});var o=t(5776),r=t.n(o),l=t(487),i=t.n(l),s=t(631),a=t.n(s),c=t(2052),u=t.n(c),A=t(4010),m=t.n(A),d=t(1469),p=t.n(d),_=t(9329),b=t.n(_),y=t(3539),E={};E.styleTagTransform=b(),E.setAttributes=m(),E.insert=u().bind(null,"head"),E.domAPI=a(),E.insertStyleElement=p(),i()(y.Z,E);const f=y.Z&&y.Z.locals?y.Z.locals:void 0;var C=t(8478),g=t(4313),v=t(6551);function h(e){var n=e.el,t=e.children;return n?(0,v.createPortal)(t,n):null}function x(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,o=new Array(n);t<n;t++)o[t]=e[t];return o}function O(e){var n,t,l=e.extensionName,i=e.slotModuleName,s=e.slotName,a=e.domElement,c=(n=(0,o.useState)(),t=2,function(e){if(Array.isArray(e))return e}(n)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var o,r,l=[],i=!0,s=!1;try{for(t=t.call(e);!(i=(o=t.next()).done)&&(l.push(o.value),!n||l.length!==n);i=!0);}catch(e){s=!0,r=e}finally{try{i||null==t.return||t.return()}finally{if(s)throw r}}return l}}(n,t)||function(e,n){if(e){if("string"==typeof e)return x(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(t):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?x(e,n):void 0}}(n,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),u=c[0],A=c[1];return(0,o.useEffect)((function(){if(a){var e,n=document.createElement("div");null===(e=a.parentElement)||void 0===e||e.appendChild(n),A(n)}}),[a]),u?r().createElement(h,{key:"extension-overlay-".concat(i,"-").concat(s,"-").concat(l),el:u},r().createElement(w,{extensionId:l})):null}function w(e){var n=e.extensionId;return r().createElement("button",{className:f.extensionOverlay},r().createElement("span",{className:f.extensionTooltip},n))}var B=t(1004);function S(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,o=new Array(n);t<n;t++)o[t]=e[t];return o}function k(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function N(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var o,r,l=[],i=!0,s=!1;try{for(t=t.call(e);!(i=(o=t.next()).done)&&(l.push(o.value),!n||l.length!==n);i=!0);}catch(e){s=!0,r=e}finally{try{i||null==t.return||t.return()}finally{if(s)throw r}}return l}}(e,n)||function(e,n){if(e){if("string"==typeof e)return S(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(t):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?S(e,n):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function j(){var e=(0,C.useStore)((0,C.getExtensionInternalStore)()),n=e.slots,t=e.extensions,o=(0,C.useStore)(B.wT).isOpen;return r().createElement(r().Fragment,null,o?null:r().createElement(P,null),n?Object.entries(n).map((function(e){var n=N(e,2),t=n[0],o=n[1];return r().createElement(h,{key:"slot-overlay-".concat(o.moduleName,"-").concat(t),el:document.querySelector('*[data-extension-slot-name="'.concat(t,'"][data-extension-slot-module-name="').concat(o.moduleName,'"]'))},r().createElement(T,{slotName:t,moduleName:o.moduleName}))})):null,t?Object.entries(t).map((function(e){var n=N(e,2),t=n[0],o=n[1];return Object.entries(o.instances).map((function(e){var n=N(e,2),o=n[0],l=n[1];return Object.entries(l).map((function(e){var n=N(e,2),l=n[0],i=n[1];return r().createElement(O,{key:l,extensionName:t,slotModuleName:o,slotName:l,domElement:document.querySelector('*[data-extension-slot-name="'.concat(l,'"][data-extension-slot-module-name="').concat(o,'"] *[data-extension-id="').concat(i.id,'"]'))})}))}))})):null)}function T(e){var n=e.slotName,t=e.moduleName;return r().createElement(r().Fragment,null,r().createElement("div",{className:f.slotOverlay}),r().createElement("button",{onClick:function(e){e.preventDefault(),function(e,n){B.wT.getState().configPathBeingEdited||B.wT.setState({uiSelectedPath:[e,"extensionSlots",n],isOpen:!0})}(t,n)},className:f.slotName},"Slot: ",n))}var I={toggleIsUIEditorEnabled:function(e){return{isUIEditorEnabled:!e.isUIEditorEnabled}}};function P(){var e=(0,C.useStoreWithActions)(B.wT,I).toggleIsUIEditorEnabled;return r().createElement(g.Button,{className:f.exitButton,kind:"danger",size:"sm",renderIcon:function(e){return r().createElement(C.CloseIcon,(n=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(n){k(e,n,t[n])}))}return e}({},e),t=null!=(t={size:16})?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))})),n));var n,t},iconDescription:"Exit UI Editor",tooltipPosition:"left",onClick:e,hasIconOnly:!0})}}}]);

package/dist/587.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"587.js","mappings":"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","sources":["webpack://@openmrs/esm-implementer-tools-app/./src/ui-editor/styles.css","webpack://@openmrs/esm-implementer-tools-app/./src/ui-editor/styles.css?545d","webpack://@openmrs/esm-implementer-tools-app/./src/ui-editor/portal.tsx","webpack://@openmrs/esm-implementer-tools-app/./src/ui-editor/extension-overlay.component.tsx","webpack://@openmrs/esm-implementer-tools-app/./src/ui-editor/ui-editor.tsx"],"names":["___CSS_LOADER_EXPORT___","push","module","id","locals","options","styleTagTransform","setAttributes","insert","domAPI","insertStyleElement","undefined","Portal","el","children","createPortal","ExtensionOverlay","extensionName","slotModuleName","slotName","domElement","useState","overlayDomElement","setOverlayDomElement","useEffect","newOverlayDomElement","document","createElement","parentElement","appendChild","key","Content","extensionId","button","className","styles","extensionOverlay","span","extensionTooltip","UiEditor","useStore","getExtensionInternalStore","slots","extensions","isOpen","implementerToolsStore","implementerToolsIsOpen","ExitButton","Object","entries","map","slotInfo","moduleName","querySelector","SlotOverlay","extensionInfo","instances","bySlotName","extensionInstance","div","slotOverlay","onClick","event","preventDefault","getState","configPathBeingEdited","setState","uiSelectedPath","setActiveExtensionSlot","actions","toggleIsUIEditorEnabled","isUIEditorEnabled","useStoreWithActions","Button","exitButton","kind","size","renderIcon","props","CloseIcon","iconDescription","tooltipPosition","hasIconOnly"],"sourceRoot":""}

package/src/ui-editor/styles.css

@@ -1,63 +0,0 @@
-.slotOverlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(43, 43, 185, 0.1);
-  border: 1px solid rgba(43, 43, 185, 0.4);
-  pointer-events: none;
-}
-
-.slotName {
-  background-color: rgb(255, 255, 255, 0.85);
-  border: 1px solid rgba(43, 43, 185, 0.4);
-  color: #393939;
-  cursor: pointer;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  padding: 0.5em 0.5em 0.5em 0.5em;
-  z-index: 99999;
-}
-
-.extensionOverlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: none;
-  border: none;
-}
-
-.extensionOverlay:hover {
-  background-color: rgba(43, 43, 185, 0.1);
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.extensionOverlay:focus .extensionTooltip,
-.extensionOverlay:hover .extensionTooltip {
-  visibility: visible;
-  opacity: 1;
-}
-
-.extensionTooltip {
-  visibility: hidden;
-  width: auto;
-  background-color: rgb(255, 255, 255, 0.85);
-  text-align: center;
-  padding: 0.5em 0.5em 0.5em 0.5em;
-  border: 1px solid rgba(43, 43, 185, 0.4);
-
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.exitButton {
-  position: fixed !important;
-  bottom: 0;
-  right: 0;
-  z-index: 999999;
-}