Improve toolbar styling (#57)

* Remove most masks from SVGs

* Add svgo, compress icons

* Improve toolbar styling

* Revert "Add svgo, compress icons"

This reverts commit 00e9b34.

* Fix refresh icon

* Improve icon

* Also add title to competitions page, add font

* Update Playwright Snapshots

* Trigger CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: krassowski

src/pages/competitions.tsx

@@ -2,6 +2,7 @@ import { JupyterFrontEndPlugin, JupyterFrontEnd } from '@jupyterlab/application'
 import { MainAreaWidget, ReactWidget } from '@jupyterlab/apputils';
 import { Commands } from '../commands';
 import { SidebarIcon } from '../ui-components/SidebarIcon';
+import { PageTitle } from '../ui-components/PageTitle';
 import { EverywhereIcons } from '../icons';
 import React from 'react';
 
@@ -25,6 +26,11 @@ export const competitions: JupyterFrontEndPlugin<void> = {
       widget.title.label = 'Competitions';
       widget.title.closable = true;
       widget.title.icon = EverywhereIcons.competition;
+      const toolbarTitle = new PageTitle({
+        label: 'Competitions',
+        icon: EverywhereIcons.competition
+      });
+      widget.toolbar.addItem('title', toolbarTitle);
       return widget;
     };
     let widget = newWidget();

src/pages/files.tsx

@@ -2,6 +2,7 @@ import { JupyterFrontEndPlugin, JupyterFrontEnd } from '@jupyterlab/application'
 import { MainAreaWidget, ReactWidget } from '@jupyterlab/apputils';
 import { Commands } from '../commands';
 import { SidebarIcon } from '../ui-components/SidebarIcon';
+import { PageTitle } from '../ui-components/PageTitle';
 import { EverywhereIcons } from '../icons';
 import React from 'react';
 import { LabIcon } from '@jupyterlab/ui-components';
@@ -17,7 +18,7 @@ function Tile(props: { icon: LabIcon; label: string }) {
   );
 }
 
-export class Files extends ReactWidget {
+class Files extends ReactWidget {
   constructor() {
     super();
     this.addClass('je-Files');
@@ -30,6 +31,7 @@ export class Files extends ReactWidget {
     );
   }
 }
+
 export const files: JupyterFrontEndPlugin<void> = {
   id: 'jupytereverywhere:files',
   autoStart: true,
@@ -41,6 +43,11 @@ export const files: JupyterFrontEndPlugin<void> = {
       widget.title.label = 'Files';
       widget.title.closable = true;
       widget.title.icon = EverywhereIcons.folder;
+      const toolbarTitle = new PageTitle({
+        label: 'Files',
+        icon: EverywhereIcons.folder
+      });
+      widget.toolbar.addItem('title', toolbarTitle);
       return widget;
     };
     let widget = newWidget();

src/ui-components/PageTitle.tsx

@@ -0,0 +1,18 @@
+import { ReactWidget } from '@jupyterlab/apputils';
+import { LabIcon } from '@jupyterlab/ui-components';
+import React from 'react';
+
+export class PageTitle extends ReactWidget {
+  constructor(protected props: { label: string; icon: LabIcon }) {
+    super();
+    this.addClass('je-PageTitle');
+  }
+  protected render() {
+    return (
+      <>
+        <this.props.icon.react height="24px" />
+        {this.props.label}
+      </>
+    );
+  }
+}

style/base.css

@@ -3,6 +3,9 @@
 
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
 #jp-menu-panel,
 #jp-top-bar,
 #jp-top-panel,
@@ -15,6 +18,8 @@
 
 :root {
   --je-slate-blue: #412c88;
+  --je-round-corners: 12px;
+  --je-font-family: 'Inter', sans-serif;
 }
 
 .je-Tile {
@@ -36,18 +41,43 @@
   cursor: pointer;
 }
 
+.je-PageTitle {
+  font-weight: 600;
+  font-family: var(--je-font-family);
+}
+
+.jp-SideBar {
+  /* Override colors in sidebar */
+  --jp-layout-color1: #e6e6e6;
+  --jp-layout-color2: #fff;
+  --jp-border-width: 0px;
+}
+
+.jp-Toolbar {
+  --jp-ui-font-color1: #412c88;
+  --jp-ui-font-family: var(--je-font-family);
+}
+
+.jp-ToolbarButtonComponent-label {
+  font-weight: 600;
+}
+
 #jp-main-dock-panel[data-mode='single-document'] {
   padding: 25px !important;
   background: #d8b8dc;
 }
 
 #jp-main-dock-panel[data-mode='single-document'] .jp-MainAreaWidget {
-  border-radius: 15px;
+  border-radius: var(--je-round-corners);
+  background: transparent;
 }
 
-.jp-SideBar {
-  /* Override colors in sidebar */
-  --jp-layout-color1: #e6e6e6;
-  --jp-layout-color2: #fff;
-  --jp-border-width: 0px;
+.jp-MainAreaWidget > .jp-Toolbar {
+  border-radius: var(--je-round-corners);
+}
+
+.jp-MainAreaWidget > :not(.jp-Toolbar) {
+  border-radius: var(--je-round-corners);
+  margin-top: 10px;
+  background: white;
 }