Added the new splash screen from the electron app

packages/apputils-extension/src/index.ts

@@ -260,8 +260,40 @@ namespace Private {
     if (!splash) {
       splash = document.createElement('div');
       splash.id = 'jupyterlab-splash';
-      let child = document.createElement('div');
-      splash.appendChild(child);
+
+      let galaxy = document.createElement('div');
+      galaxy.id = 'galaxy';
+      splash.appendChild(galaxy);
+
+      let mainLogo = document.createElement('div');
+      mainLogo.id = 'main-logo';
+
+      let planet = document.createElement('div');
+      let planet2 = document.createElement('div');
+      let planet3 = document.createElement('div');
+      planet.className = 'planet';
+      planet2.className = 'planet';
+      planet3.className = 'planet';
+
+      let moon1 = document.createElement('div');
+      moon1.id = 'moon1';
+      moon1.className = 'moon orbit';
+      moon1.appendChild(planet);
+
+      let moon2 = document.createElement('div');
+      moon2.id = 'moon2';
+      moon2.className = 'moon orbit';
+      moon2.appendChild(planet2);
+
+      let moon3 = document.createElement('div');
+      moon3.id = 'moon3';
+      moon3.className = 'moon orbit';
+      moon3.appendChild(planet3);
+
+      galaxy.appendChild(mainLogo);
+      galaxy.appendChild(moon1);
+      galaxy.appendChild(moon2);
+      galaxy.appendChild(moon3);
     }
     document.body.appendChild(splash);
     splashCount++;

packages/apputils-extension/style/splash.css

@@ -5,93 +5,149 @@
 |----------------------------------------------------------------------------*/
 
 #jupyterlab-splash {
-  position:fixed;
-  padding:0;
-  margin:0;
+  z-index: 1000;
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  background-position: center 40%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: white;
+}
 
-  top:0;
-  left:0;
+#galaxy {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
 
+#main-logo {
+  background-image: var(--jp-image-jupyter-favicon);
+  background-repeat: no-repeat;
+  background-size: 100px;
+  position: absolute;
+  background-position: center;
   width: 100%;
   height: 100%;
-  background: white;
+  z-index: 1;
+}
 
-  z-index: 1000;
+.planet {
+  background-repeat: no-repeat;
+  background-size: cover;
+  animation-iteration-count: infinite;
+  animation-name: orbit;
 }
 
+#moon1.orbit {
+  opacity: 1;
+  animation: orbit 2s ease;
+  width: 200px;
+  height: 140px;
+  margin-top: -53px;
+  margin-left: -54px;
+}
+
+#moon2.orbit {
+  opacity: 1;
+  animation: orbit 2s ease;
+  width: 132px;
+  height: 180px;
+  margin-top: -66px;
+  margin-left: -85px;
+}
 
-#jupyterlab-splash > div {
-  color: var(--md-grey-500);
-  font-size: 20px;
-  margin: 100px auto;
-  width: 1em;
-  height: 1em;
+#moon3.orbit {
+  opacity: 1;
+  display: flex;
+  align-items: flex-end;
+  animation: orbit 2s ease;
+  width: 220px;
+  height: 166px;
+  margin-top: -96px;
+  margin-left: -50px;
+}
+
+#moon1 .planet {
+  background-color: #6F7070;
+  height: 12px;
+  width: 12px;
   border-radius: 50%;
-  position: relative;
-  text-indent: -9999em;
-  -webkit-animation: loadsplash4 1.3s infinite linear;
-  animation: loadsplash4 1.3s infinite linear;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
+}
 
-  z-index: 1001;
+#moon2 .planet {
+  background-color: #767677;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  float: right;
 }
 
+#moon3 .planet {
+  background-color: #989798;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+}
 
-@-webkit-keyframes loadsplash4 {
-  0%,
-  100% {
-    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
-  }
-  12.5% {
-    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-  }
-  25% {
-    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-  }
-  37.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-  50% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-  62.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
-  }
-  75% {
-    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
-  }
-  87.5% {
-    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
-  }
+.orbit {
+  animation-iteration-count: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
 }
 
+.dot1, .dot2 {
+width: 60%;
+height: 60%;
+display: inline-block;
+position: absolute;
+top: 0;
+background-color: #333;
+border-radius: 100%;
 
-@keyframes loadsplash4 {
-  0%,
-  100% {
-    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
-  }
-  12.5% {
-    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-  }
-  25% {
-    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-  }
-  37.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-  50% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.dot2 {
+top: auto;
+bottom: 0;
+}
+
+@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
+@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
+
+@-webkit-keyframes sk-bounce {
+0%, 100% { -webkit-transform: scale(0.0) }
+50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+0%, 100% { 
+  transform: scale(0.0);
+  -webkit-transform: scale(0.0);
+} 50% { 
+  transform: scale(1.0);
+  -webkit-transform: scale(1.0);
+}
+}
+@keyframes orbit {
+  0% {
+      transform: rotateZ(0deg);
   }
-  62.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  100% {
+      transform: rotateZ(-720deg);
   }
-  75% {
-    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+}
+
+@keyframes orbit2 {
+  0% {
+      transform: rotateZ(0deg);
   }
-  87.5% {
-    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  100% {
+      transform: rotateZ(720deg);
   }
-}
+}

packages/theme-dark-extension/style/embed.css

@@ -16,6 +16,7 @@
   --jp-image-jupyter: url('./images/jupyter.svg');
   --jp-image-jupyterlab: url('./images/jupyterlab.svg');
   --jp-image-jupyterlab-workmark: url('./images/jupyterlab-wordmark.svg');
+  --jp-image-jupyter-favicon: url('./images/jupyter-favicon.svg');
   --jp-image-caretleft: url('./images/caretleft.png');
   --jp-image-caretright: url('./images/caretright.png');
   --jp-image-caretup: url('./images/caretup.png');

packages/theme-dark-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-dark-extension/style/urls.css

@@ -12,6 +12,7 @@
   --jp-image-jupyter: url('./lab/api/themes/jupyterlab-theme-dark-extension/images/jupyter-white-moons.svg');
   --jp-image-jupyterlab: url('./lab/api/themes/jupyterlab-theme-dark-extension/images/jupyterlab.svg');
   --jp-image-jupyterlab-workmark: url('./lab/api/themes/jupyterlab-theme-dark-extension/images/jupyterlab-wordmark.svg');
+  --jp-image-jupyter-favicon: url('./lab/api/themes/jupyterlab-theme-dark-extension/images/jupyter-favicon.svg');
   --jp-image-caretleft: url('./lab/api/themes/jupyterlab-theme-dark-extension/images/caretleft.png');
   --jp-image-caretright: url('./lab/api/themes/jupyterlab-theme-dark-extension/images/caretright.png');
   --jp-image-caretup: url('./lab/api/themes/jupyterlab-theme-dark-extension/images/caretup.png');

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

@@ -16,6 +16,7 @@
   --jp-image-jupyter: url('./images/jupyter.svg');
   --jp-image-jupyterlab: url('./images/jupyterlab.svg');
   --jp-image-jupyterlab-workmark: url('./images/jupyterlab-wordmark.svg');
+  --jp-image-jupyter-favicon: url('./images/jupyter-favicon.svg');
   --jp-image-caretleft: url('./images/caretleft.png');
   --jp-image-caretright: url('./images/caretright.png');
   --jp-image-caretup: url('./images/caretup.png');

packages/theme-light-extension/style/images/splash-screen/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

@@ -13,6 +13,7 @@
   --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-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');
   --jp-image-caretright: url('./lab/api/themes/jupyterlab-theme-light-extension/images/caretright.png');
   --jp-image-caretup: url('./lab/api/themes/jupyterlab-theme-light-extension/images/caretup.png');