Add a Jupyter Logo that takes you back home

jupyterhub · Feb 3, 2024 · 0d9747e · 0d9747e
1 parent b47a85d
commit 0d9747e
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 8 deletions.
diff --git a/js/index.css b/js/index.css
@@ -24,15 +24,31 @@ body {
 }
 
 #top-bar {
-  background-color: var(--jupyter-main-brand-color);
+  background-color: var(--jupyter-dark-grey);
   color: white;
-  font: bold 12px Helvetica;
+  font: 12px Helvetica;
   border-bottom: 1px white;
   display: flex;
   align-items: center;
   height: var(--topbar-height);
 }
 
+#logo {
+  padding: 0 32px;
+}
+
+#logo img {
+  height: 24px;
+}
+
+#menu {
+  display: flex;
+  font-weight: bold;
+}
+
+#menu li {
+}
+
 #status {
   text-align: center;
   flex-grow: 1;
@@ -57,7 +73,6 @@ body {
 }
 
 #clipboard-button {
-  border: 1px outset;
   cursor: pointer;
 }
 

diff --git a/js/index.js b/js/index.js
@@ -46,6 +46,9 @@ rfb.addEventListener("disconnect", disconnectedFromServer);
 // Scale our viewport so the user doesn't have to scroll
 rfb.scaleViewport = true;
 
+// Use a CSS variable to set background color
+rfb.background = "var(--jupyter-medium-dark-grey)";
+
 // Clipboard
 function toggleClipboardPanel() {
   document.getElementById("clipboard-area").classList.toggle("hidden");

diff --git a/jupyter_remote_desktop_proxy/static/index.html b/jupyter_remote_desktop_proxy/static/index.html
@@ -18,11 +18,15 @@
 
   <body>
     <div id="top-bar">
-      <div id="clipboard-button">
-        <img src="./clipboard.svg" />
-        <span class="label">Clipboard</span>
-      </div>
-      <div id="status">Loading...</div>
+      <a href=".." id="logo">
+        <img src="./jupyter-logo.svg" />
+      </a>
+      <span id="status">Connecting...</span>
+      <ul id="menu">
+        <li id="clipboard-button">
+          <span class="label">Clipboard</span>
+        </li>
+      </ul>
     </div>
     <div id="screen">
       <!-- This is where the remote screen will appear -->

diff --git a/jupyter_remote_desktop_proxy/static/jupyter-logo.svg b/jupyter_remote_desktop_proxy/static/jupyter-logo.svg