CARTAvis · veggiesaurus · Jul 20, 2021 · Jul 4, 2021 · Jul 5, 2021 · Jul 5, 2021
diff --git a/src/static/carta_logo.png → public/carta_logo.png b/src/static/carta_logo.png → public/carta_logo.png
diff --git a/public/index.html b/public/index.html
@@ -7,11 +7,140 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/carta_icon_128px.png">
     <title>CARTA</title>
+    <style>
+        .static-text {
+            font-size: 14px;
+            font-weight: 400;
+            letter-spacing: 0;
+            line-height: 1.28581;
+            text-transform: none;
+            color: #182026;
+            font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", "Icons16", sans-serif;
+        }
+
+        .static-pre {
+            color: #182026;
+            font-size: 14px;
+            white-space: pre-line;
+        }
+
+        .static-overlay {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+            height: 400px;
+            width: 650px;
+        }
+
+        .loading-div {
+            width: 650px;
+            height: 400px;
+            background: #f5f8fa;
+            text-align: center;
+            padding: 15px;
+            box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.1), 0 18px 46px 6px rgba(16, 22, 26, 0.1);
+            border-radius: 6px;
+            border: 2px solid #5480b7;
+            box-sizing: border-box;
+        }
+
+        .static-spinner {
+            align-items: center;
+            display: flex;
+            justify-content: center;
+            vertical-align: middle;
+            margin: 20px;
+        }
+
+        .static-spinner-animation {
+            width: 30px;
+            height: 30px;
+            animation: static-spinner-animation .5s linear infinite;
+        }
+
+        @keyframes static-spinner-animation {
+            from {
+                -webkit-transform: rotate(0deg);
+                transform: rotate(0deg);
+            }
+            to {
+                -webkit-transform: rotate(360deg);
+                transform: rotate(360deg);
+            }
+        }
+
+        .static-spinner-track {
+            fill-opacity: 0;
+            stroke: rgba(92, 112, 128, .2);
+            stroke-width: 8px;
+        }
+
+        .static-spinner-head {
+            fill-opacity: 0;
+            stroke: rgba(43, 149, 214, .8);
+            stroke-width: 13px;
+        }
+
+        .loading-text {
+            animation: cssAnimation 5s forwards;
+            opacity: 0;
+        }
+
+        @keyframes cssAnimation {
+            0% {
+                opacity: 0;
+            }
+            90% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+    </style>
 </head>
 <body>
 <noscript>
     You need to enable JavaScript to run this app.
 </noscript>
-<div id="root"></div>
+<div id="root">
+    <div class="static-overlay">
+        <div class="loading-div">
+            <img src="carta_logo.png" width="150" height="175" alt="CARTA">
+            <div class="static-spinner">
+                <div class="static-spinner-animation">
+                    <svg width="30" height="30" viewBox="-1.67 -1.67 103.33 103.33">
+                        <path
+                                class="static-spinner-track"
+                                d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
+                        />
+                        <path
+                                class="static-spinner-head"
+                                d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
+                                pathLength="280"
+                                stroke-dasharray="280 280"
+                                stroke-dashoffset="210"
+                        />
+                    </svg>
+                </div>
+            </div>
+            <div class="loading-text">
+                <p class="static-text">
+                    Loading CARTA. If this message does not disappear, please
+                    <a href="https://refreshyourcache.com/en/cache/">hard-reload</a>
+                    this site in your browser using the shortcut below:
+                </p>
+                <pre class="static-pre">
+                MacOS: Cmd + R
+                Linux: Ctrl + Shift + R
+                Windows: Ctrl + F5
+            </pre>
+            </div>
+        </div>
+    </div>
+</div>
 </body>
 </html>
diff --git a/src/App.scss b/src/App.scss
@@ -1,4 +1,4 @@
-@import "../node_modules/@blueprintjs/core/lib/scss/variables.scss";
+@import "~@blueprintjs/core/lib/scss/variables.scss";
 
 .bp3-dark {
     background-color: $dark-gray4;
@@ -38,17 +38,25 @@ body {
 }
 
 .bp3-overlay {
-    z-index: 999 !important;
+    z-index: 995 !important;
 }
 
 .bp3-popover {
-    z-index: 999 !important;
+    z-index: 995 !important;
 }
 
 .bp3-transition-container {
+    z-index: 995 !important;
+}
+
+.bp3-dialog.bp3-alert {
     z-index: 999 !important;
 }
 
+.dialog-portal {
+    z-index: 990 !important;
+}
+
 // Workaround for BlueprintJS bug
 .bp3-dark .bp3-button-group:not(.bp3-minimal) > .bp3-popover-wrapper:not(:last-child) .bp3-button,
 .bp3-dark .bp3-button-group:not(.bp3-minimal) > .bp3-button:not(:last-child) {

diff --git a/src/HotkeyWrapper.tsx b/src/HotkeyWrapper.tsx
@@ -16,7 +16,7 @@ export class HotkeyContainer extends React.Component {
         }
 
         return (
-            <Dialog isOpen={appStore.dialogStore.hotkeyDialogVisible} className={className} canEscapeKeyClose={true} canOutsideClickClose={true} onClose={appStore.dialogStore.hideHotkeyDialog}>
+            <Dialog portalClassName="dialog-portal" isOpen={appStore.dialogStore.hotkeyDialogVisible} className={className} canEscapeKeyClose={true} canOutsideClickClose={true} onClose={appStore.dialogStore.hideHotkeyDialog}>
                 <div className={Classes.DIALOG_BODY}>{HotkeyContainer.RenderHotkeys()}</div>
             </Dialog>
         );

diff --git a/src/components/App/UIControllerComponent.tsx b/src/components/App/UIControllerComponent.tsx
@@ -9,7 +9,7 @@ import {
     SaveLayoutDialogComponent,
     FileInfoDialogComponent,
     ContourDialogComponent,
-    DebugExecutionDialogComponent,
+    CodeSnippetDialogComponent,
     ExternalPageDialogComponent,
     StokesDialogComponent
 } from "components/Dialogs";
@@ -26,7 +26,7 @@ export class UIControllerComponent extends React.Component {
                 <FileBrowserDialogComponent />
                 <PreferenceDialogComponent />
                 <SaveLayoutDialogComponent />
-                <DebugExecutionDialogComponent />
+                <CodeSnippetDialogComponent />
                 <AboutDialogComponent />
                 <ExternalPageDialogComponent />
                 <HelpDrawerComponent />

diff --git a/src/components/Dialogs/AboutDialog/AboutDialogComponent.tsx b/src/components/Dialogs/AboutDialog/AboutDialogComponent.tsx
@@ -5,7 +5,6 @@ import {DraggableDialogComponent} from "components/Dialogs";
 import {DialogStore} from "stores";
 import {CARTA_INFO} from "models";
 import "./AboutDialogComponent.scss";
-import logoPng from "static/carta_logo.png";
 
 @observer
 export class AboutDialogComponent extends React.Component {
@@ -28,7 +27,7 @@ export class AboutDialogComponent extends React.Component {
             <DraggableDialogComponent dialogProps={dialogProps} defaultWidth={620} defaultHeight={700} enableResizing={false}>
                 <div className={Classes.DIALOG_BODY}>
                     <div className={"image-div"}>
-                        <img src={logoPng} width={80} />
+                        <img src="carta_logo.png" width={80} />
                         <h3>
                             {CARTA_INFO.acronym} {CARTA_INFO.version} ({CARTA_INFO.date})
                         </h3>

diff --git a/src/components/Dialogs/CodeSnippetDialog/AdditionalSyntaxStyling.scss b/src/components/Dialogs/CodeSnippetDialog/AdditionalSyntaxStyling.scss
@@ -0,0 +1,7 @@
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    background: none;
+}
diff --git a/...Dialog/DebugExecutionDialogComponent.scss → ...petDialog/CodeSnippetDialogComponent.scss b/...Dialog/DebugExecutionDialogComponent.scss → ...petDialog/CodeSnippetDialogComponent.scss
@@ -1,12 +1,20 @@
 @import "~@blueprintjs/core/lib/scss/variables.scss";
 
-.debug-execution-dialog {
+.code-snippet-dialog {
     user-select: none;
 
     .bp3-dialog-body {
         background: $white;
     }
 
+    .bp3-dialog-footer {
+        display: flex;
+
+        .spacer {
+            flex-grow: 1;
+        }
+    }
+
     &.bp3-dark {
         .bp3-dialog-body {
             background: $dark-gray1;
@@ -29,19 +37,19 @@
 
         #codeArea {
             outline: none;
-            padding-left: 60px !important;
+            padding-left: 40px !important;
         }
 
         pre {
-            padding-left: 60px !important;
+            padding-left: 40px !important;
         }
 
         .editor-line-number {
             position: absolute;
             left: 0;
             color: #cccccc;
             text-align: right;
-            width: 40px;
+            width: 30px;
             font-weight: 100;
         }
     }