Finished implementation of the Jupyter splash screen

packages/application/style/images.css

@@ -14,6 +14,11 @@
 }
 
 
+.jp-ImageJupyter-favicon {
+  background-image: var(--jp-image-jupyter-favicon);
+}
+
+
 .jp-JupyterIcon {
   background-image: var(--jp-image-jupyter);
   background-size: 16px;

packages/apputils-extension/src/index.ts

@@ -161,7 +161,9 @@ const themePlugin: JupyterLabPlugin<IThemeManager> = {
     let manager = new ThemeManager({ baseUrl,  settingRegistry, host, when });
     let disposable = splash.show();
     manager.ready.then(() => {
-      disposable.dispose();
+      setTimeout(() => {
+        disposable.dispose();
+      }, 2500);
     }, () => {
       disposable.dispose();
     });

packages/apputils-extension/style/images/jupyter-favicon.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="152px" height="165px" viewBox="0 0 152 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo" fill="#F37726">
+            <g id="logo.svg">
+                <g id="Canvas">
+                    <g id="logo">
+                        <g id="g">
+                            <g id="path" transform="translate(0.000000, 109.804878)">
+                                <g id="path8-fill">
+                                    <g id="path1_fill-link" transform="translate(0.078947, 0.778049)">
+                                        <path d="M75.9422842,29.5804561 C43.3023947,29.5804561 14.7967832,17.6534634 0,0 C5.51083211,15.8406829 15.7815389,29.5667732 29.3904947,39.2784171 C42.9997,48.9898537 59.2737,54.2067805 75.9605789,54.2067805 C92.6474579,54.2067805 108.921458,48.9898537 122.530663,39.2784171 C136.139453,29.5667732 146.410284,15.8406829 151.921158,0 C137.087868,17.6534634 108.582589,29.5804561 75.9422842,29.5804561 L75.9422842,29.5804561 Z" id="path1_fill"></path>
+                                    </g>
+                                </g>
+                            </g>
+                            <g id="path">
+                                <g id="path9-fill">
+                                    <g id="path2_fill-link" transform="translate(0.037368, 0.704878)">
+                                        <path d="M75.9784579,24.6264073 C108.618763,24.6264073 137.124458,36.5534415 151.921158,54.2067805 C146.410284,38.366222 136.139453,24.6401317 122.530663,14.9284878 C108.921458,5.2168439 92.6474579,0 75.9605789,0 C59.2737,0 42.9997,5.2168439 29.3904947,14.9284878 C15.7815389,24.6401317 5.51083211,38.366222 0,54.2067805 C14.8330816,36.5899293 43.3385684,24.6264073 75.9784579,24.6264073 L75.9784579,24.6264073 Z" id="path2_fill"></path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

packages/apputils-extension/style/splash.css

@@ -14,6 +14,7 @@
   background-repeat: no-repeat;
   background-size: cover;
   background-color: white;
+  animation: .5s fade-out 2s forwards;
 }
 
 #galaxy {
@@ -23,7 +24,7 @@
 }
 
 #main-logo {
-  background-image: var(--jp-image-jupyter-favicon);
+  background-image: url('./images/jupyter-favicon.svg');
   background-repeat: no-repeat;
   background-size: 100px;
   position: absolute;
@@ -31,6 +32,7 @@
   width: 100%;
   height: 100%;
   z-index: 1;
+  animation: 1.5s fade-in linear forwards;
 }
 
 .planet {
@@ -150,4 +152,22 @@ bottom: 0;
   100% {
       transform: rotateZ(720deg);
   }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }

packages/theme-light-extension/style/images/jupyter-favicon.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="152px" height="165px" viewBox="0 0 152 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo" fill="#F37726">
+            <g id="logo.svg">
+                <g id="Canvas">
+                    <g id="logo">
+                        <g id="g">
+                            <g id="path" transform="translate(0.000000, 109.804878)">
+                                <g id="path8-fill">
+                                    <g id="path1_fill-link" transform="translate(0.078947, 0.778049)">
+                                        <path d="M75.9422842,29.5804561 C43.3023947,29.5804561 14.7967832,17.6534634 0,0 C5.51083211,15.8406829 15.7815389,29.5667732 29.3904947,39.2784171 C42.9997,48.9898537 59.2737,54.2067805 75.9605789,54.2067805 C92.6474579,54.2067805 108.921458,48.9898537 122.530663,39.2784171 C136.139453,29.5667732 146.410284,15.8406829 151.921158,0 C137.087868,17.6534634 108.582589,29.5804561 75.9422842,29.5804561 L75.9422842,29.5804561 Z" id="path1_fill"></path>
+                                    </g>
+                                </g>
+                            </g>
+                            <g id="path">
+                                <g id="path9-fill">
+                                    <g id="path2_fill-link" transform="translate(0.037368, 0.704878)">
+                                        <path d="M75.9784579,24.6264073 C108.618763,24.6264073 137.124458,36.5534415 151.921158,54.2067805 C146.410284,38.366222 136.139453,24.6401317 122.530663,14.9284878 C108.921458,5.2168439 92.6474579,0 75.9605789,0 C59.2737,0 42.9997,5.2168439 29.3904947,14.9284878 C15.7815389,24.6401317 5.51083211,38.366222 0,54.2067805 C14.8330816,36.5899293 43.3385684,24.6264073 75.9784579,24.6264073 L75.9784579,24.6264073 Z" id="path2_fill"></path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

packages/theme-light-extension/style/urls.css

@@ -11,7 +11,7 @@
   These images are included with JupyterLab for showing the Project Jupyter logo
   */
   --jp-image-jupyter: url('./lab/api/themes/jupyterlab-theme-light-extension/images/jupyter.svg');
-  --jp-image-jupyterlab: url('.//lab/api/themes/jupyterlab-theme-light-extension/images/jupyterlab.svg');
+  --jp-image-jupyterlab: url('./lab/api/themes/jupyterlab-theme-light-extension/images/jupyterlab.svg');
   --jp-image-jupyterlab-workmark: url('./lab/api/themes/jupyterlab-theme-light-extension/images/jupyterlab-wordmark.svg');
   --jp-image-jupyter-favicon: url('./lab/api/themes/jupyterlab-theme-light-extension/images/jupyter-favicon.svg');
   --jp-image-caretleft: url('./lab/api/themes/jupyterlab-theme-light-extension/images/caretleft.png');