Merge pull request #387 from SylvainCorlay/running_styling

Styling Running Widget

src/running/index.ts

@@ -36,11 +36,6 @@ const RUNNING_CLASS = 'jp-RunningSessions';
  */
 const HEADER_CLASS = 'jp-RunningSessions-header';
 
-/**
- * The class name added to a running widget header title.
- */
-const TITLE_CLASS = 'jp-RunningSessions-headerTitle';
-
 /**
  * The class name added to a running widget header refresh button.
  */
@@ -139,12 +134,7 @@ class RunningSessions extends Widget {
     let sessions = document.createElement('div');
     sessions.className = `${SECTION_CLASS} ${SESSIONS_CLASS}`;
 
-    let title = document.createElement('span');
-    title.textContent = 'Currently Running Jupyter Processes';
-    title.className = TITLE_CLASS;
-    header.appendChild(title);
-
-    let refresh = document.createElement('span');
+    let refresh = document.createElement('button');
     refresh.className = REFRESH_CLASS;
     header.appendChild(refresh);
 

src/running/theme.css

@@ -5,14 +5,14 @@
 
 .jp-RunningSessions {
   min-width: 300px;
-  color: #333;
-  background-color: #fff;
+  color: #757575;
+  background: #FAFAFA;
   font-size: 13px;
 }
 
 
 .jp-RunningSessions-header {
-  background: white;
+  border-bottom: 1px solid #E0E0E0;
 }
 
 
@@ -24,11 +24,16 @@
 
 
 .jp-RunningSessions-headerRefresh {
-  margin: 2px;
-  padding: 1px 5px;
-  border-radius: 1px;
-  border: 1px solid #ccc;
-  line-height: 1.5;
+  flex: 1 1 auto;
+  max-width: 100px;
+  padding: 4px 6px;
+  background: #FAFAFA;
+  color: #757575;
+  border: none;
+  font-size: 14px;
+  outline: 0;
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 
@@ -47,22 +52,21 @@
 
 
 .jp-RunningSessions-sectionHeader {
-  background: #EEE;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  padding-left: 7px;
-  padding-right: 7px;
-  line-height: 22px;
+  margin: 4px 0px;
+  padding: 4px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  border-bottom: 1px solid #E0E0E0;
+  letter-spacing: 2px;
 }
 
 
 .jp-RunningSessions-item {
-  color: #337ab7;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  padding-left: 7px;
-  padding-right: 7px;
-  line-height: 22px;
+  padding: 3px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #757575;
 }
 
 
@@ -72,42 +76,43 @@
 
 
 .jp-RunningSessions-itemIcon {
+  padding: 1px 4px;
   font-size: 14px;
   font-family: FontAwesome;
   color: #5e5e5e;
   margin-right: 7px;
   margin-left: 7px;
-  line-height: 22px;
   vertical-align: baseline;
 }
 
 .jp-RunningSessions-itemIcon.jp-mod-notebook:before {
-  content: '\f02d'; 
+  content: '\f02d';
 }
 
 
 .jp-RunningSessions-itemIcon.jp-mod-file:before {
-  content: '\f016'; 
+  content: '\f016';
 }
 
 
 .jp-RunningSessions-itemIcon.jp-mod-terminal:before {
-  content: '\f120'; 
+  content: '\f120';
 }
 
+.jp-RunningSessions-itemLabel {
+  padding: 1px;
+}
 
 .jp-RunningSessions-itemKernelName {
+  padding: 1px;
   margin-right: 7px;
 }
 
 
 .jp-RunningSessions-itemShutdown {
-  padding: 4px;
+  padding: 1px 4px;
   color: #ffffff;
   background: #f0ad4e;
-  padding: 2px 5px;
-  font-size: 12px;
-  line-height: 1.5;
   border-radius: 1px;
   cursor: pointer;
 }