Provide icon rendering framework

2025-07-20 05:39:42 +02:00 · 2018-12-12 13:35:16 +00:00 · 2018-12-12 13:35:16 +00:00 · 02102f9bf3
commit 02102f9bf3
parent 6eb68f84e0
48 changed files with 851 additions and 546 deletions
--- a/gui/app/components/spaces/space-list.js
+++ b/gui/app/components/spaces/space-list.js
@ -9,51 +9,8 @@
 //
 // https://documize.com

-import NotifierMixin from '../../mixins/notifier';
 import AuthMixin from '../../mixins/auth';
 import Component from '@ember/component';

-export default Component.extend(NotifierMixin, AuthMixin, {
-	hasPublicFolders: false,
-	hasProtectedFolders: false,
-	hasPrivateFolders: false,
-
-	init() {
-		this._super(...arguments);
-		this.publicFolders = [];
-		this.protectedFolders = [];
-		this.privateFolders = [];
-	},
-
-	didReceiveAttrs() {
-		this._super(...arguments);
-
-		let constants = this.get('constants');
-		let folders = this.get('spaces');
-		let publicFolders = [];
-		let protectedFolders = [];
-		let privateFolders = [];
-
-		_.each(folders, folder => {
-			if (folder.get('spaceType') === constants.SpaceType.Public) {
-				publicFolders.pushObject(folder);
-			}
-			if (folder.get('spaceType') === constants.SpaceType.Private) {
-				privateFolders.pushObject(folder);
-			}
-			if (folder.get('spaceType') === constants.SpaceType.Protected) {
-				protectedFolders.pushObject(folder);
-			}
-		});
-
-		this.set('publicFolders', publicFolders);
-		this.set('protectedFolders', protectedFolders);
-		this.set('privateFolders', privateFolders);
-		this.set('hasPublicFolders', this.get('publicFolders.length') > 0);
-		this.set('hasPrivateFolders', this.get('privateFolders.length') > 0);
-		this.set('hasProtectedFolders', this.get('protectedFolders.length') > 0);
-	},
-
-	actions: {
-	}
+export default Component.extend(AuthMixin, {
 });
--- a/gui/app/components/ui/ui-spacer.js
+++ b/gui/app/components/ui/ui-spacer.js
@ -0,0 +1,47 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import { computed } from '@ember/object';
+import Component from '@ember/component';
+
+export default Component.extend({
+	classNames: [],
+	classNameBindings: ['calcClass'],
+
+	size: 500,
+
+	calcClass: computed(function() {
+		switch(this.size) {
+			case 100:
+				return 'spacer-100';
+
+			case 200:
+				return 'spacer-200';
+
+			case 300:
+				return 'spacer-300';
+
+			case 400:
+				return 'spacer-400';
+
+			case 500:
+				return 'spacer-500';
+
+			case 600:
+				return 'spacer-600';
+
+			case 700:
+				return 'spacer-700';
+		}
+
+		return 'spacer-100';
+	}),
+});
--- a/gui/app/constants/constants.js
+++ b/gui/app/constants/constants.js
@ -195,11 +195,30 @@ let constants = EmberObject.extend({
 	},

 	Icon: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
+		All: 'dicon-menu-8',
+		ArrowUp: 'dicon-arrow-up',
+		ArrowDown: 'dicon-arrow-down',
+		ArrowLeft: 'dicon-arrow-left',
+		ArrowRight: 'dicon-arrow-right',
+		Attachment: 'dicon-attachment',
+		BarChart: 'dicon-chart-bar-2',
+		Bookmark: 'dicon-bookmark',
 		Delete: 'dicon-bin',
+		Edit: 'dicon-pen-2',
+		Filter: 'dicon-sort-tool',
+		Grid1: 'dicon-grid-interface',
+		Index: 'dicon-align-justify',
+		ListBullet: 'dicon-list-bullet-2',
 		Print: 'dicon-print',
+		Pulse: 'dicon-pulse',
 		Plus: 'dicon-e-add',
 		Person: 'dicon-single-01',
+		People: 'dicon-multiple-19',
+		Remove: 'dicon-i-remove',
+		Search: 'dicon-magnifier',
 		Settings: 'dicon-settings-gear',
+		Tag: 'dicon-delete-key',
+		World: 'dicon-globe',
 	},

 	Color: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
--- a/gui/app/pods/auth/login/template.hbs
+++ b/gui/app/pods/auth/login/template.hbs
@ -26,7 +26,7 @@
 						{{input type="password" value=password id="authPassword" class="form-control" autocomplete="current-password"}}
 					{{/if}}
 				</div>
-				<button type="submit" class="btn btn-success font-weight-bold text-uppercase mt-4">Sign in</button>
+				<button type="submit" class="btn btn-success bold-700 text-uppercase mt-4">Sign in</button>
 				<div class="{{unless invalidCredentials "invisible"}} color-red-600 mt-3">Invalid credentials</div>
 				{{#if isAuthProviderDocumize}}
 					{{#link-to "auth.forgot"}}Forgot your password?{{/link-to}}
--- a/gui/app/pods/folders/controller.js
+++ b/gui/app/pods/folders/controller.js
@ -27,6 +27,12 @@ export default Controller.extend(AuthMixin, Modals, {
 	hasClone: notEmpty('clonedSpace.id'),
 	clonedSpace: null,

+	selectedView: 'all',
+	selectedSpaces: null,
+	publicSpaces: null,
+	protectedSpaces: null,
+	personalSpaces: null,
+
 	actions: {
 		onShowModal() {
 			this.modalOpen('#add-space-modal', {'show': true}, '#new-space-name');
@ -65,6 +71,25 @@ export default Controller.extend(AuthMixin, Modals, {
 				this.get('folderService').setCurrentFolder(sp);
 				this.transitionToRoute('folder', sp.get('id'), sp.get('slug'));
 			});
+		},
+
+		onSelect(view) {
+			this.set('selectedView', view);
+
+			switch(view) {
+				case 'all':
+					this.set('selectedSpaces', this.get('model'));
+					break;
+				case 'public':
+					this.set('selectedSpaces', this.get('publicSpaces'));
+					break;
+				case 'protected':
+					this.set('selectedSpaces', this.get('protectedSpaces'));
+					break;
+				case 'personal':
+					this.set('selectedSpaces', this.get('personalSpaces'));
+					break;
+			}
 		}
 	}
 });
--- a/gui/app/pods/folders/route.js
+++ b/gui/app/pods/folders/route.js
@ -29,6 +29,32 @@ export default Route.extend(AuthenticatedRouteMixin, {
 		return this.get('folderService').getAll();
 	},

+	setupController(controller, model) {
+		this._super(controller, model);
+		controller.set('selectedSpaces', model);
+
+		let constants = this.get('constants');
+		let publicSpaces = [];
+		let protectedSpaces = [];
+		let personalSpaces = [];
+
+		_.each(model, space => {
+			if (space.get('spaceType') === constants.SpaceType.Public) {
+				publicSpaces.pushObject(space);
+			}
+			if (space.get('spaceType') === constants.SpaceType.Private) {
+				personalSpaces.pushObject(space);
+			}
+			if (space.get('spaceType') === constants.SpaceType.Protected) {
+				protectedSpaces.pushObject(space);
+			}
+		});
+
+		controller.set('publicSpaces', publicSpaces);
+		controller.set('protectedSpaces', protectedSpaces);
+		controller.set('personalSpaces', personalSpaces);
+	},
+
 	activate() {
 		this.get('browser').setTitle('Spaces');
 	}
--- a/gui/app/pods/folders/template.hbs
+++ b/gui/app/pods/folders/template.hbs
@ -1,4 +1,33 @@
 {{#layout/master-sidebar selectedItem="spaces"}}
+
+	{{#unless session.isMobile}}
+		{{ui/ui-spacer size=300}}
+	{{/unless}}
+
+	<div class="section">
+		<div class="title">filter</div>
+		<div class="list">
+			<div class="item {{if (eq selectedView "all") "selected"}}" {{action 'onSelect' 'all'}}>
+				<i class={{concat "dicon " constants.Icon.All}} />
+				<div class="name">All ({{model.length}})</div>
+			</div>
+			<div class="item {{if (eq selectedView "public") "selected"}}" {{action 'onSelect' 'public'}}>
+				<i class={{concat "dicon " constants.Icon.World}} />
+				<div class="name">Public ({{publicSpaces.length}})</div>
+			</div>
+			{{#if session.authenticated}}
+				<div class="item {{if (eq selectedView "protected") "selected"}}" {{action 'onSelect' 'protected'}}>
+					<i class={{concat "dicon " constants.Icon.People}} />
+					<div class="name">Protected ({{protectedSpaces.length}})</div>
+				</div>
+				<div class="item {{if (eq selectedView "personal") "selected"}}" {{action 'onSelect' 'personal'}}>
+					<i class={{concat "dicon " constants.Icon.Person}} />
+					<div class="name">Personal ({{personalSpaces.length}})</div>
+				</div>
+			{{/if}}
+		</div>
+	</div>
+
 {{/layout/master-sidebar}}

 {{#layout/master-content}}
@ -7,7 +36,7 @@
 			{{layout/page-heading title=appMeta.title}}
 			{{layout/page-desc desc=appMeta.message}}
 		</div>
-		<div class="grid-cell-2">
+		<div class="grid-cell-2 grid-cell-right">
 			{{#if (or session.isEditor session.isAdmin)}}
 				{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
 					{{#if session.isEditor}}
@ -21,8 +50,9 @@
 		</div>
 	</div>

+	{{ui/ui-spacer size=400}}

-	{{spaces/space-list spaces=model}}
+	{{spaces/space-list spaces=selectedSpaces}}

 	<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
 		<div class="modal-dialog" role="document">
--- a/gui/app/styles/core/all.scss
+++ b/gui/app/styles/core/all.scss
@ -29,18 +29,21 @@
 .background-color-theme-200 { background-color: $theme-200; }
 .background-color-theme-100 { background-color: $theme-100; }

+@import "reset.scss";
@import "font.scss";
@import "icon.scss";
@import "mixins.scss";
-@import "base.scss";
+@import "layout/all.scss";
+@import "util.scss";
+@import "text.scss";
@import "bootstrap.scss";

+
@import "view/common.scss";
@import "widget/widget.scss";
@import "ui/all.scss";
@import "view/toolbar.scss";
@import "view/views.scss";
-@import "layout/all.scss";

@import "vendor/all.scss";
@import "print.scss";
--- a/gui/app/styles/core/base.scss
+++ b/gui/app/styles/core/base.scss
@ -1,196 +0,0 @@
-// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
-//
-// This software (Documize Community Edition) is licensed under
-// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
-//
-// You can operate outside the AGPL restrictions by purchasing
-// Documize Enterprise Edition and obtaining a commercial license
-// by contacting <sales@documize.com>.
-//
-// https://documize.com
-
-html {
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-	text-rendering: optimizeLegibility;
-	height: 100%;
-	width: 100%;
-	overflow-y: scroll;
-	font-size: 0.875rem;
-}
-
-body {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	// height: 100vh;
-}
-
-a {
-	// @include ease-in();
-	color: $color-link;
-	text-decoration: none;
-	cursor: pointer;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-
-	a:focus,
-	a:hover {
-		text-decoration: none;
-	}
-}
-
-a.admin-link {
-	text-decoration: none;
-	font-weight: bold;
-
-	a:focus,
-	a:hover {
-		text-decoration: none;
-	}
-}
-
-a.broken-link {
-	color: map-get($red-shades, 600);
-	text-decoration: line-through;
-}
-
-.no-outline {
-	outline: none !important;
-	border: none !important;
-	box-shadow: none !important;
-
-	&:active,
-	&:focus {
-		border: none !important;
-		box-shadow: none !important;
-	}
-}
-
-.no-select {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	-o-user-select: none;
-	user-select: none;
-}
-
-ul {
-	margin: 0;
-	padding: 0;
-
-	li {
-		list-style: none;
-		list-style-type: none;
-	}
-}
-
-.cursor-pointer {
-	cursor: pointer;
-}
-
-.cursor-auto {
-	cursor: auto !important;
-}
-
-.no-width {
-	white-space: nowrap;
-	width: 1%;
-}
-
-.absolute-center {
-	margin: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-}
-
-input:-webkit-autofill {
-	-webkit-box-shadow: 0 0 0 1000px white inset;
-	box-shadow: 0 0 0 1000px white inset;
-}
-
-.bordered {
-	border: 1px solid map-get($gray-shades, 300);
-}
-
-.text-truncate {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-::-webkit-scrollbar {
-    width: 7px;
-}
-::-webkit-scrollbar-track {
-    background: map-get($gray-shades, 100);
-}
-::-webkit-scrollbar-thumb {
-	background: map-get($gray-shades, 300);
-
-	&:hover {
-		background: map-get($gray-shades, 600);
-	}
-}
-
-$i: 150;
-@while $i > 0 {
-	.margin-#{$i} {
-		margin: #{$i}px;
-	}
-
-	.margin-top-#{$i} {
-		margin-top: #{$i}px;
-	}
-
-	.margin-bottom-#{$i} {
-		margin-bottom: #{$i}px;
-	}
-
-	.margin-right-#{$i} {
-		margin-right: #{$i}px;
-	}
-
-	.margin-left-#{$i} {
-		margin-left: #{$i}px;
-	}
-	$i: $i - 5;
-}
-
-$i: 150;
-@while $i > 0 {
-	.padding-#{$i} {
-		padding: #{$i}px;
-	}
-
-	.padding-top-#{$i} {
-		padding-top: #{$i}px;
-	}
-
-	.padding-bottom-#{$i} {
-		padding-bottom: #{$i}px;
-	}
-
-	.padding-right-#{$i} {
-		padding-right: #{$i}px;
-	}
-
-	.padding-left-#{$i} {
-		padding-left: #{$i}px;
-	}
-	$i: $i - 5;
-}
-
-$i: 100;
-@while $i > 0 {
-	.width-#{$i} {
-		width: #{$i}#{"%"} !important;
-	}
-	$i: $i - 1;
-}
--- a/gui/app/styles/core/icon.scss
+++ b/gui/app/styles/core/icon.scss
@ -187,30 +187,10 @@ icons
 	content: "\ea08";
  }

-  .dicon-edit-to-check::before {
-	content: "\ea0a";
-  }
-
  .dicon-settings-gear::before {
 	content: "\ea0c";
  }

-  .dicon-arrow-down::before {
-	content: "\ea0d";
-  }
-
-  .dicon-arrow-left::before {
-	content: "\ea0e";
-  }
-
-  .dicon-arrow-right::before {
-	content: "\ea0f";
-  }
-
-  .dicon-arrow-up::before {
-	content: "\ea10";
-  }
-
  .dicon-small-down::before {
 	content: "\ea11";
  }
@ -375,14 +355,6 @@ icons
 	content: "\ea3a";
  }

-  .dicon-menu-to-arrow-left-3::before {
-	content: "\ea3b";
-  }
-
-  .dicon-grid-to-list::before {
-	content: "\ea3c";
-  }
-
  .dicon-ctrl-down::before {
 	content: "\ea3d";
  }
@ -415,4 +387,10 @@ icons
 	content: "\ea45";
  }

+  .dicon-bookmark-2::before {
+	content: "\ea46";
+  }

+  .dicon-menu-8::before {
+	content: "\ea48";
+  }
--- a/gui/app/styles/core/layout/all.scss
+++ b/gui/app/styles/core/layout/all.scss
@ -1,8 +1,12 @@
+@import "grid.scss";
+@import "spacing.scss";
+@import "headings.scss";
+@import "master-internal.scss";
+@import "sidebar.scss";
+
@import "layout-master.scss";
@import "layout-topbar.scss";
@import "layout-sidebar.scss";
@import "layout-footer.scss";
@import "layout-content.scss";

-@import "common.scss";
-@import "master-internal.scss";
--- a/gui/app/styles/core/layout/common.scss
+++ b/gui/app/styles/core/layout/common.scss
@ -1,25 +1,10 @@
-// Styles that apply to all pages using master layout
-
-
 $display-break-1: 700px;
 $display-break-2: 900px;
 $display-break-3: 1200px;
 $display-break-4: 1600px;
 $display-break-5: 1800px;

-.master-page-heading {
-	font-size: 2rem;
-	font-weight: 700;
-	color: map-get($gray-shades, 800);
-}
-
-.master-page-desc {
-	font-size: 1.2rem;
-	font-weight: 400;
-	color: map-get($gray-shades, 700);
-}
-
-.grid-container-8-2 {
+%grid-base {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 2fr;
@ -40,6 +25,32 @@ $display-break-5: 1800px;
 		justify-self: self-start;
 	}

+	// X- axis alignment
+	.grid-cell-left {
+		justify-self: self-end;
+	}
+	.grid-cell-right {
+		justify-self: self-end;
+	}
+	.grid-cell-center {
+		justify-self: center;
+	}
+
+	// Y axis alignment
+	.grid-cell-top {
+		align-self: self-start;
+	}
+	.grid-cell-middle {
+		align-self: center;
+	}
+	.grid-cell-bottom {
+		align-self: self-end;
+	}
+}
+
+.grid-container-8-2 {
+	@extend %grid-base;
+
 	@media (min-width: $display-break-2) {
 		grid-template-columns: 8fr 2fr;
 		grid-template-rows: 1fr;
@ -50,6 +61,27 @@ $display-break-5: 1800px;
 			padding: 0;
 		}

+		.grid-cell-2 {
+			grid-column-start: 2;
+			grid-row-start: 1;
+			padding: 0;
+		}
+	}
+}
+
+.grid-container-6-4 {
+	@extend %grid-base;
+
+	@media (min-width: $display-break-2) {
+		grid-template-columns: 6fr 4fr;
+		grid-template-rows: 1fr;
+
+		.grid-cell-1 {
+			grid-column-start: 1;
+			grid-row-start: 1;
+			padding: 0;
+		}
+
 		.grid-cell-2 {
 			grid-column-start: 2;
 			grid-row-start: 1;
--- a/gui/app/styles/core/layout/headings.scss
+++ b/gui/app/styles/core/layout/headings.scss
@ -0,0 +1,12 @@
+// Headings
+.master-page-heading {
+	font-size: 2rem;
+	font-weight: 700;
+	color: map-get($gray-shades, 900);
+}
+
+.master-page-desc {
+	font-size: 1.2rem;
+	font-weight: 400;
+	color: map-get($gray-shades, 800);
+}
--- a/gui/app/styles/core/layout/sidebar.scss
+++ b/gui/app/styles/core/layout/sidebar.scss
@ -0,0 +1,59 @@
+.sidebar-content {
+	display: block;
+	position: relative;
+
+	> .section {
+		margin: 0;
+		padding: 0 7px;
+
+		> .title {
+			text-transform: uppercase;
+			font-size: 1rem;
+			font-weight: 600;
+			color: map-get($gray-shades, 700);
+		}
+
+		> .list {
+			margin: 10px 0;
+
+			> .item {
+				padding: 3px 0;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				cursor: pointer;
+
+				> .dicon {
+					font-size: 16px;
+					font-weight: bold;
+					color: map-get($gray-shades, 500);
+				}
+
+				> .name {
+					display: inline-block;
+					padding: 0 0 0 8px;
+					font-size: 1rem;
+					font-weight: 500;
+					color: $color-black-light-3;
+				}
+
+				&:hover {
+					> .dicon {
+						color: map-get($gray-shades, 600);
+					}
+
+					> .name {
+						color: $color-black-light-1;
+					}
+				}
+			}
+
+			> .selected {
+				> .dicon, > .name, &:hover {
+					color: $theme-500 !important;
+					font-weight: 600 !important;
+				}
+			}
+		}
+	}
+}
--- a/gui/app/styles/core/layout/spacing.scss
+++ b/gui/app/styles/core/layout/spacing.scss
@ -0,0 +1,71 @@
+.spacer-100 { height: 10px; }
+.spacer-200 { height: 20px; }
+.spacer-300 { height: 30px; }
+.spacer-400 { height: 40px; }
+.spacer-500 { height: 70px; }
+.spacer-600 { height: 100px; }
+.spacer-700 { height: 120px; }
+.spacer-800 { height: 150px; }
+.spacer-900 { height: 200px; }
+
+@media (max-width: $display-break-1) {
+	div[class^="spacer-"] {
+		height: 1px;
+	}
+}
+
+$i: 150;
+@while $i > 0 {
+	.margin-#{$i} {
+		margin: #{$i}px;
+	}
+
+	.margin-top-#{$i} {
+		margin-top: #{$i}px;
+	}
+
+	.margin-bottom-#{$i} {
+		margin-bottom: #{$i}px;
+	}
+
+	.margin-right-#{$i} {
+		margin-right: #{$i}px;
+	}
+
+	.margin-left-#{$i} {
+		margin-left: #{$i}px;
+	}
+	$i: $i - 5;
+}
+
+$i: 150;
+@while $i > 0 {
+	.padding-#{$i} {
+		padding: #{$i}px;
+	}
+
+	.padding-top-#{$i} {
+		padding-top: #{$i}px;
+	}
+
+	.padding-bottom-#{$i} {
+		padding-bottom: #{$i}px;
+	}
+
+	.padding-right-#{$i} {
+		padding-right: #{$i}px;
+	}
+
+	.padding-left-#{$i} {
+		padding-left: #{$i}px;
+	}
+	$i: $i - 5;
+}
+
+$i: 100;
+@while $i > 0 {
+	.width-#{$i} {
+		width: #{$i}#{"%"} !important;
+	}
+	$i: $i - 1;
+}
--- a/gui/app/styles/core/mixins.scss
+++ b/gui/app/styles/core/mixins.scss
@ -40,11 +40,11 @@

@mixin ease-in()
 {
-	-webkit-transition: all 0.30s ease-in-out;
-	-moz-transition: all 0.30s ease-in-out;
-	-ms-transition: all 0.30s ease-in-out;
-	-o-transition: all 0.30s ease-in-out;
-	transition: all 0.30s ease-in-out;
+	// -webkit-transition: all 0.30s ease-in-out;
+	// -moz-transition: all 0.30s ease-in-out;
+	// -ms-transition: all 0.30s ease-in-out;
+	// -o-transition: all 0.30s ease-in-out;
+	// transition: all 0.30s ease-in-out;
 }

@mixin content-container($pad-tb: 25px, $pad-lr: 50px) {
@ -59,8 +59,7 @@
 	box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);

 	&:hover {
-		background-color: darken($color-card, 5%);
-		color: $color-link;
+		background-color: map-get($gray-shades, 100);
 	}
 }

--- a/gui/app/styles/core/reset.scss
+++ b/gui/app/styles/core/reset.scss
@ -0,0 +1,57 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+html {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+	text-rendering: optimizeLegibility;
+	height: 100%;
+	width: 100%;
+	overflow-y: scroll;
+	font-size: 0.875rem;
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	// height: 100vh;
+}
+
+ul {
+	margin: 0;
+	padding: 0;
+
+	li {
+		list-style: none;
+		list-style-type: none;
+	}
+}
+
+input:-webkit-autofill {
+	-webkit-box-shadow: 0 0 0 1000px white inset;
+	box-shadow: 0 0 0 1000px white inset;
+}
+
+::-webkit-scrollbar {
+    width: 7px;
+}
+::-webkit-scrollbar-track {
+    background: map-get($gray-shades, 100);
+}
+::-webkit-scrollbar-thumb {
+	background: map-get($gray-shades, 300);
+
+	&:hover {
+		background: map-get($gray-shades, 600);
+	}
+}
--- a/gui/app/styles/core/text.scss
+++ b/gui/app/styles/core/text.scss
@ -0,0 +1,42 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+.text-truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.text-left {
+	text-align: left;
+}
+
+.text-right {
+	text-align: right;
+}
+
+.text-upper {
+	text-transform: uppercase;
+}
+
+.bold-100 { font-weight: 100; }
+.bold-200 { font-weight: 200; }
+.bold-300 { font-weight: 300; }
+.bold-400 { font-weight: 400; }
+.bold-500 { font-weight: 500; }
+.bold-600 { font-weight: 600; }
+.bold-700 { font-weight: 700; }
+.bold-800 { font-weight: 800; }
+.bold-900 { font-weight: 900; }
--- a/gui/app/styles/core/util.scss
+++ b/gui/app/styles/core/util.scss
@ -0,0 +1,88 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+a {
+	// @include ease-in();
+	color: $color-link;
+	text-decoration: none;
+	cursor: pointer;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	a:focus,
+	a:hover {
+		text-decoration: none;
+	}
+}
+
+a.admin-link {
+	text-decoration: none;
+	font-weight: bold;
+
+	a:focus,
+	a:hover {
+		text-decoration: none;
+	}
+}
+
+a.broken-link {
+	color: map-get($red-shades, 600);
+	text-decoration: line-through;
+}
+
+.no-outline {
+	outline: none !important;
+	border: none !important;
+	box-shadow: none !important;
+
+	&:active,
+	&:focus {
+		border: none !important;
+		box-shadow: none !important;
+	}
+}
+
+.no-select {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+}
+
+.cursor-pointer {
+	cursor: pointer;
+}
+
+.cursor-auto {
+	cursor: auto !important;
+}
+
+.no-width {
+	white-space: nowrap;
+	width: 1%;
+}
+
+.absolute-center {
+	margin: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+}
+
+.bordered {
+	border: 1px solid map-get($gray-shades, 300);
+}
+
--- a/gui/app/styles/core/view/spaces.scss
+++ b/gui/app/styles/core/view/spaces.scss
@ -1,44 +1,101 @@
 .view-spaces {
-	> .heading {
-		font-size: 1.3rem;
-		font-weight: bold;
-		color: map-get($gray-shades, 800);
-		text-transform: uppercase;
-
-		> .counter {
-			font-size: 0.9rem;
-			font-weight: normal;
-			color: map-get($gray-shades, 600);
-			display: inline-block;
-			margin-left: 10px;
-		}
-	}
-
-	> .empty {
-		font-size: 1.2rem;
-		color: map-get($gray-shades, 600);
-		font-weight: normal;
-		margin: 20px 0 50px 0;
-	}
-
 	> .list {
-		margin: 30px 0;
+		margin: 0;
 		padding: 0;

 		> a {
-			color: $color-black;
-
 			> .item {
 				@include card();
-				@include ease-in();
 				list-style-type: none;
-				float: left;
-				margin: 0 20px 20px 0;
-				padding: 10px;
-				width: 250px;
-				height: 100px;
+				margin: 0 0 2rem 0;
+				padding: 15px 20px;
+				width: 100%;
+				display: grid;
+				grid-template-columns: 1fr;
+				grid-template-rows: 2fr;
+
+				> .info {
+					grid-column-start: 1;
+					grid-row-start: 1;
+					padding: 0;
+					align-self: self-start;
+					justify-self: self-start;
+
+					> .name {
+						font-size: 1.3rem;
+						font-weight: 700;
+						color: map-get($gray-shades, 800);
+					}
+
+					> .desc {
 						font-size: 1.1rem;
-				overflow: hidden;
+						font-weight: 400;
+						margin-top: 0.4rem;
+						color: $color-black-light-3;
+					}
+
+					> .meta {
+						padding: 25px 0 0 0;
+
+						> .dicon {
+							color: map-get($gray-shades, 600);
+							font-size: 20px;
+						}
+					}
+				}
+
+				> .stats {
+					grid-column-start: 1;
+					grid-row-start: 2;
+					padding: 0;
+					align-self: self-start;
+					justify-self: self-start;
+
+					> .stat {
+						text-align: center;
+						display: inline-block;
+						margin: 5px 30px 5px 0;
+
+						> .number {
+							font-size: 1.7rem;
+							font-weight: 700;
+							color: map-get($gray-shades, 600);
+						}
+
+						> .label {
+							font-size: 0.9rem;
+							font-weight: 500;
+							color: map-get($gray-shades, 600);
+							text-transform: uppercase;
+						}
+					}
+				}
+
+				@media (min-width: $display-break-2) {
+					grid-template-columns: 8fr 2fr;
+					grid-template-rows: 1fr;
+
+					> .info {
+						grid-column-start: 1;
+						grid-row-start: 1;
+						padding: 0;
+					}
+
+					> .stats {
+						grid-column-start: 2;
+						grid-row-start: 1;
+						padding: 0;
+						justify-self: self-end;
+
+						> .stat, > .number, > .label {
+							display: block;
+						}
+
+						> .stat {
+							margin: 5px 0;
+						}
+					}
+				}
 			}
 		}
 	}
--- a/gui/app/templates/components/customize/change-log.hbs
+++ b/gui/app/templates/components/customize/change-log.hbs
@ -21,15 +21,15 @@
 		{{/if}}
 		<p>
 			<span class="color-black-light-2">Community Edition {{appMeta.communityLatest}}</span>&nbsp;&nbsp;&nbsp;
-			<a href="https://storage.googleapis.com/documize/downloads/documize-community-windows-amd64.exe" class="font-weight-bold">Windows</a>&nbsp;&middot;
-			<a href="https://storage.googleapis.com/documize/downloads/documize-community-linux-amd64" class="font-weight-bold">Linux</a>&nbsp;&middot;
-			<a href="https://storage.googleapis.com/documize/downloads/documize-community-darwin-amd64" class="font-weight-bold">macOS</a>&nbsp;
+			<a href="https://storage.googleapis.com/documize/downloads/documize-community-windows-amd64.exe" class="bold-700">Windows</a>&nbsp;&middot;
+			<a href="https://storage.googleapis.com/documize/downloads/documize-community-linux-amd64" class="bold-700">Linux</a>&nbsp;&middot;
+			<a href="https://storage.googleapis.com/documize/downloads/documize-community-darwin-amd64" class="bold-700">macOS</a>&nbsp;
 		</p>
 		<p>
 			<span class="color-black-light-2">Enterprise Edition {{appMeta.enterpriseLatest}}</span>&nbsp;&nbsp;&nbsp;
-			<a href="https://storage.googleapis.com/documize/downloads/documize-enterprise-windows-amd64.exe" class="font-weight-bold color-gray-700">Windows</a>&nbsp;&middot;
-			<a href="https://storage.googleapis.com/documize/downloads/documize-enterprise-linux-amd64" class="font-weight-bold color-gray-700">Linux</a>&nbsp;&middot;
-			<a href="https://storage.googleapis.com/documize/downloads/documize-enterprise-darwin-amd64" class="font-weight-bold color-gray-700">macOS</a>&nbsp;
+			<a href="https://storage.googleapis.com/documize/downloads/documize-enterprise-windows-amd64.exe" class="bold-700 color-gray-700">Windows</a>&nbsp;&middot;
+			<a href="https://storage.googleapis.com/documize/downloads/documize-enterprise-linux-amd64" class="bold-700 color-gray-700">Linux</a>&nbsp;&middot;
+			<a href="https://storage.googleapis.com/documize/downloads/documize-enterprise-darwin-amd64" class="bold-700 color-gray-700">macOS</a>&nbsp;
 		</p>
 		<div class="my-5" />
 		{{{changelog}}}
--- a/gui/app/templates/components/customize/general-settings.hbs
+++ b/gui/app/templates/components/customize/general-settings.hbs
@ -68,6 +68,6 @@
 			</div>
 		</div>

-		<div class="btn btn-success font-weight-bold text-uppercase mt-4" {{action "save"}}>Save</div>
+		<div class="btn btn-success bold-700 text-uppercase mt-4" {{action "save"}}>Save</div>
 	</form>
 </div>
--- a/gui/app/templates/components/customize/integration-settings.hbs
+++ b/gui/app/templates/components/customize/integration-settings.hbs
@ -46,7 +46,7 @@
 			</div>
 		{{/if}}

-		<div class="btn btn-success font-weight-bold text-uppercase mt-4" {{action "onSave"}}>Save</div>
+		<div class="btn btn-success bold-700 text-uppercase mt-4" {{action "onSave"}}>Save</div>

 	</form>
 </div>
--- a/gui/app/templates/components/customize/license-key.hbs
+++ b/gui/app/templates/components/customize/license-key.hbs
@ -139,7 +139,7 @@
 				<div class="view-customize">
 					<div class="deactivation-zone">
 						<p>Let us know if you would like to close your account or cancel your subscription.</p>
-						<p><span class="font-weight-bold">WARNING: </span>All data will be deleted so please download a complete backup of all your data.</p>
+						<p><span class="bold-700">WARNING: </span>All data will be deleted so please download a complete backup of all your data.</p>
 						<p>Requests can take up to 24 hours to process.</p>
 						{{#link-to "customize.backup" class="btn btn-success"}}PERFORM BACKUP{{/link-to}}
 						<div class="button-gap" />
--- a/gui/app/templates/components/customize/user-list.hbs
+++ b/gui/app/templates/components/customize/user-list.hbs
@ -15,23 +15,24 @@
 	{{/if}}

 	<div class="my-2">
-		<span class="font-weight-bold">Spaces</span>
+		<span class="bold-700">Spaces</span>
 		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can add spaces, both personal and shared with others</span>
 	</div>
 	<div class="my-2">
-		<span class="font-weight-bold">Visible</span>
-		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can see names of users and groups, can disable for external users like customers/partners</span>
+		<span class="bold-700">Visible</span>
+		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can see names of users and groups, can disable for external users
+			like customers/partners</span>
 	</div>
 	<div class="my-2">
-		<span class="font-weight-bold">Admin</span>
+		<span class="bold-700">Admin</span>
 		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can manage all aspects of Documize, like this screen</span>
 	</div>
 	<div class="my-2">
-		<span class="font-weight-bold">Analytics</span>
+		<span class="bold-700">Analytics</span>
 		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can view analytical reports</span>
 	</div>
 	<div class="mt-2 mb-4">
-		<span class="font-weight-bold">Active</span>
+		<span class="bold-700">Active</span>
 		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can login and use Documize</span>
 	</div>

@ -78,7 +79,8 @@
 			<tr>
 				<th class="text-muted">
 					{{#if hasSelectedUsers}}
-						<button id="bulk-delete-users" type="button" class="btn btn-danger" data-toggle="modal" data-target="#admin-user-delete-modal" data-backdrop="static">Delete selected users</button>
+					<button id="bulk-delete-users" type="button" class="btn btn-danger" data-toggle="modal" data-target="#admin-user-delete-modal"
+					 data-backdrop="static">Delete selected users</button>
 					{{/if}}
 				</th>
 				<th class="no-width">Spaces</th>
@ -104,7 +106,8 @@
 						{{/if}}
 					</div>
 					<div class="d-inline-block">
-							<div class="name" {{action "onShowEdit" user.id}}>{{user.fullname}}<div class="email">&nbsp;&nbsp;({{user.email}})</div></div>
+						<div class="name" {{action "onShowEdit" user.id}}>{{user.fullname}}<div class="email">&nbsp;&nbsp;({{user.email}})</div>
+						</div>
 						<div class="groups" {{action "onShowGroupsModal" user.id}}>
 							{{#each user.groups as |group|}}
 							<span class="group">
@ -156,13 +159,15 @@
 					{{/if}}
 				</td>
 				<td class="no-width text-center">
-						<div class="user-button-{{user.id}} button-icon-gray button-icon-small" title="Edit" {{action "onShowEdit" user.id}}>
+					<div class="user-button-{{user.id}} button-icon-gray button-icon-small" title="Edit"
+					 {{action "onShowEdit" user.id}}>
 						<i class="material-icons">mode_edit</i>
 						{{#attach-tooltip showDelay=1000}}Edit user{{/attach-tooltip}}
 					</div>
 					{{#unless user.me}}
 					<div class="button-icon-gap" />
-							<div class="delete-button-{{user.id}} button-icon-red button-icon-small" title="Delete" {{action "onShowDelete" user.id}}>
+					<div class="delete-button-{{user.id}} button-icon-red button-icon-small" title="Delete"
+					 {{action "onShowDelete" user.id}}>
 						<i class="material-icons">delete</i>
 						{{#attach-tooltip showDelay=1000}}Delete user{{/attach-tooltip}}
 					</div>
@ -220,8 +225,9 @@
 	</div>
 </div>

-{{#ui/ui-dialog title="Delete User" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteDialog onAction=(action "onDelete")}}
-	<p>Are you sure you want to delete {{deleteUser.fullname}}?</p>
+{{#ui/ui-dialog title="Delete User" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteDialog
+onAction=(action "onDelete")}}
+<p>Are you sure you want to delete {{deleteUser.fullname}}?</p>
 {{/ui/ui-dialog}}

 <div id="admin-user-delete-modal" class="modal" tabindex="-1" role="dialog">
--- a/gui/app/templates/components/document/settings-general.hbs
+++ b/gui/app/templates/components/document/settings-general.hbs
@ -15,7 +15,7 @@
 			<small class="form-text text-muted">Optional description explaining content</small>
 		</div>

-		<button type="submit" class="btn btn-success text-uppercase font-weight-bold mt-5" {{action "onSave"}}>Save</button>
+		<button type="submit" class="btn btn-success text-uppercase bold-700 mt-5" {{action "onSave"}}>Save</button>
 	</form>
 </div>

--- a/gui/app/templates/components/document/settings-meta.hbs
+++ b/gui/app/templates/components/document/settings-meta.hbs
@ -25,6 +25,6 @@
 		<p class="text-danger">This space has no categories defined yet.</p>
 	{{/unless}}

-	<button type="submit" class="btn btn-success text-uppercase font-weight-bold mt-5" {{action "onSave"}}>Save</button>
+	<button type="submit" class="btn btn-success text-uppercase bold-700 mt-5" {{action "onSave"}}>Save</button>
 </div>

--- a/gui/app/templates/components/document/view-attachment.hbs
+++ b/gui/app/templates/components/document/view-attachment.hbs
@ -1,7 +1,7 @@
 <div class="view-attachment d-print-none">
 	{{#if canEdit}}
 		<div class="upload-document-files">
-			<div id="upload-document-files" class="btn btn-secondary text-uppercase font-weight-bold">+ Attachments</div>
+			<div id="upload-document-files" class="btn btn-secondary text-uppercase bold-700">+ Attachments</div>
 		</div>
 	{{else}}
 		<div class="margin-top-50" />
--- a/gui/app/templates/components/document/view-content.hbs
+++ b/gui/app/templates/components/document/view-content.hbs
@ -47,8 +47,8 @@
 					{{folder.likes}}
 				</div>
 				<div class="buttons">
-					<button type="button" class="btn btn-outline-success font-weight-bold" {{action "onVote" 1}}>Yes, thanks!</button>&nbsp;&nbsp;
-					<button type="button" class="btn btn-outline-secondary font-weight-bold" {{action "onVote" 2}}>Not really</button>
+					<button type="button" class="btn btn-outline-success bold-700" {{action "onVote" 1}}>Yes, thanks!</button>&nbsp;&nbsp;
+					<button type="button" class="btn btn-outline-secondary bold-700" {{action "onVote" 2}}>Not really</button>
 				</div>
 				{{else}}
 				<div class="ack">Thanks for the feedback!</div>
--- a/gui/app/templates/components/folder/documents-list.hbs
+++ b/gui/app/templates/components/folder/documents-list.hbs
@ -8,7 +8,7 @@
 					<div class="snippet">{{ document.excerpt }}</div>
 					{{folder/document-tags documentTags=document.tags}}
 					{{#if (not-eq document.lifecycle constants.Lifecycle.Live)}}
-						<button type="button" class="mt-3 btn btn-warning text-uppercase font-weight-bold">{{document.lifecycleLabel}}</button>
+						<button type="button" class="mt-3 btn btn-warning text-uppercase bold-700">{{document.lifecycleLabel}}</button>
 					{{/if}}
 				{{/link-to}}

--- a/gui/app/templates/components/folder/settings-category.hbs
+++ b/gui/app/templates/components/folder/settings-category.hbs
@ -5,7 +5,7 @@
 		<div class="form-group mr-3">
 			{{focus-input id="new-category-name" type="text" class="form-control mousetrap" placeholder="Category name" value=newCategory}}
 		</div>
-		<button type="button" class="btn btn-success font-weight-bold" onclick={{action "onAdd"}}>Add</button>
+		<button type="button" class="btn btn-success bold-700" onclick={{action "onAdd"}}>Add</button>
 	</form>

 	<div class="space-admin">
--- a/gui/app/templates/components/folder/settings-permissions.hbs
+++ b/gui/app/templates/components/folder/settings-permissions.hbs
@ -4,9 +4,9 @@

 <div class="container-fluid my-3">
 	<div class="row justify-content-center">
-		<button type="button" class="btn btn-info font-weight-bold text-uppercase my-3" onclick={{action "onShowAddModal"}}>Add existing users</button>
+		<button type="button" class="btn btn-info bold-700 text-uppercase my-3" onclick={{action "onShowAddModal"}}>Add existing users</button>
 		&nbsp;&nbsp;
-		<button type="button" class="btn btn-info font-weight-bold text-uppercase my-3" onclick={{action "onShowInviteModal"}}>Invite new users</button>
+		<button type="button" class="btn btn-info bold-700 text-uppercase my-3" onclick={{action "onShowInviteModal"}}>Invite new users</button>
 	</div>
 </div>

@ -88,7 +88,7 @@
 	</table>
 </div>

-<button type="button" class="btn btn-success font-weight-bold text-uppercase my-3" onclick={{action "onSave"}}>SAVE</button>
+<button type="button" class="btn btn-success bold-700 text-uppercase my-3" onclick={{action "onSave"}}>SAVE</button>

 <div class="row my-3">
 	<div class="col-12 col-md-6">
--- a/gui/app/templates/components/folder/space-view.hbs
+++ b/gui/app/templates/components/folder/space-view.hbs
@ -29,7 +29,7 @@

 	{{#if spaceSettings}}
 		<div class="text-center {{if (gt categories.length 0) "mt-4"}}">
-			{{#link-to "folder.settings" space.id space.slug (query-params tab="categories") class="btn btn-secondary font-weight-bold"}}{{categoryLinkName}}{{/link-to}}
+			{{#link-to "folder.settings" space.id space.slug (query-params tab="categories") class="btn btn-secondary bold-700"}}{{categoryLinkName}}{{/link-to}}
 		</div>
 	{{/if}}
 </div>
--- a/gui/app/templates/components/layout/master-sidebar.hbs
+++ b/gui/app/templates/components/layout/master-sidebar.hbs
@ -2,29 +2,29 @@
 	<div class="nav-content">
 		<div class="nav-options">
 			{{#link-to "folders" class=(if (eq selectedItem "spaces") "option selected" "option")}}
-				<i class="dicon dicon-grid-interface"></i>
+				<i class={{concat "dicon " constants.Icon.Grid1}}></i>
 				<div class="name">spaces</div>
 			{{/link-to}}
 			{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
 				{{#if session.viewDashboard}}
 					{{#link-to "dashboard" class=(if (eq selectedItem "actions") "option selected" "option")}}
-						<i class="dicon dicon-list-bullet-2"></i>
+						<i class={{concat "dicon " constants.Icon.ListBullet}}></i>
 						<div class="name">actions</div>
 					{{/link-to}}
 					{{#link-to "activity" class=(if (eq selectedItem "activity") "option selected" "option")}}
-						<i class="dicon dicon-pulse"></i>
+						<i class={{concat "dicon " constants.Icon.Pulse}}></i>
 						<div class="name">activity</div>
 					{{/link-to}}
 				{{/if}}
 				{{#if session.viewAnalytics}}
 					{{#link-to "analytics" class=(if (eq selectedItem "analytics") "option selected" "option")}}
-						<i class="dicon dicon-chart-bar-33"></i>
+						<i class={{concat "dicon " constants.Icon.BarChart}}></i>
 						<div class="name">reports</div>
 					{{/link-to}}
 				{{/if}}
 			{{/if}}
 			{{#link-to "search" class=(if (eq selectedItem "spaces") "option selected" "option")}}
-				<i class="dicon dicon-magnifier"></i>
+				<i class={{concat "dicon " constants.Icon.Search}}></i>
 				<div class="name">search</div>
 			{{/link-to}}
 		</div>
@ -33,7 +33,7 @@
 			{{#if session.authenticated}}
 				{{#if hasPins}}
 					<div class="bookmarks" id="user-pins-button">
-						<i class="dicon dicon-bookmark"></i>
+						<i class={{concat "dicon " constants.Icon.Bookmark}}></i>
 						{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
 							<div class="menu">
 								{{#if hasSpacePins}}
@ -165,5 +165,7 @@
 	{{/if}}
 </div>
 <div class="master-sidebar">
+	<div class="sidebar-content">
 		{{yield}}
+	</div>
 </div>
--- a/gui/app/templates/components/layout/top-bar.hbs
+++ b/gui/app/templates/components/layout/top-bar.hbs
@ -110,7 +110,7 @@
 								{{#if session.isAdmin}}
 									{{#link-to "customize.general" class="dropdown-item"}}Settings{{/link-to}}
 									{{#unless appMeta.valid}}
-										{{#link-to "customize.billing" class="dropdown-item font-weight-bold color-red-600"}}Update Billing{{/link-to}}
+										{{#link-to "customize.billing" class="dropdown-item bold-700 color-red-600"}}Update Billing{{/link-to}}
 									{{/unless}}
 									<div class="dropdown-divider"></div>
 								{{/if}}
@ -118,10 +118,10 @@
 								<div class="dropdown-divider"></div>
 								{{#if session.isGlobalAdmin}}
 									{{#if appMeta.updateAvailable}}
-										{{#link-to "customize.product" class="dropdown-item font-weight-bold color-yellow-600"}}Update available{{/link-to}}
+										{{#link-to "customize.product" class="dropdown-item bold-700 color-yellow-600"}}Update available{{/link-to}}
 									{{/if}}
 								{{/if}}
-								<a href="#" class="dropdown-item {{if hasWhatsNew "color-red-600 font-weight-bold"}}" {{action "onShowWhatsNewModal"}}>What's New</a>
+								<a href="#" class="dropdown-item {{if hasWhatsNew "color-red-600 bold-700"}}" {{action "onShowWhatsNewModal"}}>What's New</a>
 								<a href="https://docs.documize.com" target="_blank" class="dropdown-item">Help</a>
 								<a href="#" class="dropdown-item" data-toggle="modal" data-target="#about-documize-modal" data-backdrop="static">About</a>
 								{{#if enableLogout}}
--- a/gui/app/templates/components/search/search-results.hbs
+++ b/gui/app/templates/components/search/search-results.hbs
@ -14,7 +14,7 @@
 					<div class="snippet">{{result.excerpt}}</div>
 					{{folder/document-tags documentTags=result.tags}}
 					{{#if result.template}}
-						<button type="button" class="mt-3 btn btn-warning text-uppercase font-weight-bold">TEMPLATE</button>
+						<button type="button" class="mt-3 btn btn-warning text-uppercase bold-700">TEMPLATE</button>
 					{{/if}}
 				{{/link-to}}
 			</li>
--- a/gui/app/templates/components/section/jira/type-editor.hbs
+++ b/gui/app/templates/components/section/jira/type-editor.hbs
@ -3,7 +3,7 @@
 <div class="row">
 	<div class="col-12 mb-5">
 		{{#if session.isAdmin}}
-			{{#link-to "customize.integrations" class="btn btn-outline-secondary font-weight-bold"}}
+			{{#link-to "customize.integrations" class="btn btn-outline-secondary bold-700"}}
 				Configure Jira Connector
 			{{/link-to}}
 		{{else}}
@ -22,7 +22,7 @@
 					<label for="gemini-url">Jira Query Language</label>
 					{{focus-input id="jira-jql" type="text" value=config.jql class="form-control" placeholder="e.g. (status = resolved AND project = SysAdmin) OR assignee = bobsmith"}}
 				</div>
-				<button type="submit" class="btn btn-secondary font-weight-bold">Preview</button>
+				<button type="submit" class="btn btn-secondary bold-700">Preview</button>
 			</form>
 		</div>
 	</div>
--- a/gui/app/templates/components/section/trello/type-editor.hbs
+++ b/gui/app/templates/components/section/trello/type-editor.hbs
@ -34,7 +34,7 @@
 		{{/if}}
 	{{else}}
 		{{#if session.isGlobalAdmin}}
-			{{#link-to "customize.integrations" class="btn btn-outline-secondary font-weight-bold"}}
+			{{#link-to "customize.integrations" class="btn btn-outline-secondary bold-700"}}
 				Configure Trello Connector
 			{{/link-to}}
 		{{else}}
--- a/gui/app/templates/components/spaces/space-list.hbs
+++ b/gui/app/templates/components/spaces/space-list.hbs
@ -1,39 +1,41 @@
 <div class="view-spaces">
-	<div class="heading">EVERYONE <div class="counter">({{publicFolders.length}})</div></div>
-	{{#unless hasPublicFolders}}
-		<p class="empty">No global spaces</p>
-	{{/unless}}
-	<ul class="list clearfix">
-		{{#each publicFolders as |folder|}}
-			{{#link-to "folder.index" folder.id folder.slug}}
-				<li class="item">{{ folder.name }}</li>
-			{{/link-to}}
-		{{/each}}
-	</ul>
-
-	{{#if session.authenticated}}
-		<div class="heading">TEAM <div class="counter">({{protectedFolders.length}})</div></div>
-		{{#unless hasProtectedFolders}}
-			<p class="empty">No team spaces</p>
-		{{/unless}}
-		<ul class="list clearfix">
-			{{#each protectedFolders as |folder|}}
-				{{#link-to "folder.index" folder.id folder.slug}}
-					<li class="item">{{ folder.name }}</li>
-				{{/link-to}}
-			{{/each}}
-		</ul>
-
-		<div class="heading">PERSONAL <div class="counter">({{privateFolders.length}})</div></div>
-		{{#unless hasPrivateFolders}}
-			<p class="empty">No personal spaces</p>
-		{{/unless}}
-		<ul class="list clearfix">
-			{{#each privateFolders as |folder|}}
-				{{#link-to "folder.index" folder.id folder.slug}}
-					<li class="item">{{ folder.name }}</li>
-				{{/link-to}}
-			{{/each}}
-		</ul>
+	<ul class="list">
+		{{#each spaces as |space|}}
+			{{#link-to "folder.index" space.id space.slug}}
+				<li class="item">
+					<div class="info">
+						<div class="name">{{space.name}}</div>
+						<div class="desc">Some description that is to be wired up to the backend</div>
+						<div class="meta">
+							{{#if (eq space.spaceType constants.SpaceType.Public)}}
+								<i class={{concat "dicon " constants.Icon.World}}>
+									{{#attach-tooltip showDelay=1000}}Public space{{/attach-tooltip}}
+								</i>
 							{{/if}}
+							{{#if (eq space.spaceType constants.SpaceType.Protected)}}
+								<i class={{concat "dicon " constants.Icon.People}}>
+									{{#attach-tooltip showDelay=1000}}Protected space{{/attach-tooltip}}
+								</i>
+							{{/if}}
+							{{#if (eq space.spaceType constants.SpaceType.Private)}}
+								<i class={{concat "dicon " constants.Icon.Person}}>
+									{{#attach-tooltip showDelay=1000}}Personal space{{/attach-tooltip}}
+								</i>
+							{{/if}}
+						</div>
+					</div>
+					<div class="stats">
+						<div class="stat">
+							<div class="number">18</div>
+							<div class="label">items</div>
+						</div>
+						<div class="stat">
+							<div class="number">5</div>
+							<div class="label">categories</div>
+						</div>
+					</div>
+				</li>
+			{{/link-to}}
+		{{/each}}
+	</ul>
 </div>
--- a/gui/app/templates/components/toolbar/for-space.hbs
+++ b/gui/app/templates/components/toolbar/for-space.hbs
@ -3,7 +3,7 @@
 	<div class="col-6">
 		{{#if permissions.documentAdd}}
 			<div class="btn-group" role="group">
-				<button id="btnGroupDocument" type="button" class="btn btn-success font-weight-bold dropdown-toggle">
+				<button id="btnGroupDocument" type="button" class="btn btn-success bold-700 dropdown-toggle">
 					+ CONTENT
 					{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
 						<div class="menu">
--- a/gui/app/templates/components/ui/ui-spacer.hbs
+++ b/gui/app/templates/components/ui/ui-spacer.hbs
--- a/gui/app/templates/components/user/forgot-password.hbs
+++ b/gui/app/templates/components/user/forgot-password.hbs
@ -7,7 +7,7 @@
            {{focus-input type="email" value=email id="email" class=(if hasEmptyEmailError "form-control is-invalid" "form-control")}}
        </div>
        <div class="mt-4">
-            <button type="submit" class="btn btn-success font-weight-bold text-uppercase">Reset</button>
+            <button type="submit" class="btn btn-success bold-700 text-uppercase">Reset</button>
        </div>
    {{/if}}
 	<div class="mt-5">
--- a/gui/app/templates/components/user/password-reset.hbs
+++ b/gui/app/templates/components/user/password-reset.hbs
@ -11,7 +11,7 @@
            <small class="form-text text-muted">Please type your new password again</small>
        </div>
        <div class="margin-top-10 margin-bottom-20">
-            <button type="submit" class="btn btn-success font-weight-bold text-uppercase">Reset</button>
+            <button type="submit" class="btn btn-success bold-700 text-uppercase">Reset</button>
            <span class="{{unless mustMatch "d-none"}} color-red-600 margin-left-20">Passwords must match</span>
        </div>
    </form>
--- a/gui/public/assets/font/dmzui.eot
+++ b/gui/public/assets/font/dmzui.eot
--- a/gui/public/assets/font/dmzui.svg
+++ b/gui/public/assets/font/dmzui.svg
@ -28,24 +28,9 @@
    <glyph glyph-name="pen-2"
      unicode="&#xEA08;"
      horiz-adv-x="256" d="M182.885 246.681C180.897 245.937 177.972 244.385 176.385 243.231C174.798 242.077 139.941 207.466 98.924 166.317L24.348 91.5L16.019 53.46C8.323 18.313 7.797 15.197 9.097 12.483C11.724 7.001 12.465 7.065 54.002 16.344L92.422 24.927L167.275 99.714C209.499 141.901 243.298 176.462 244.813 179C247.055 182.755 247.496 184.658 247.474 190.5C247.455 195.322 246.875 198.589 245.606 201C243.024 205.909 206.34 242.723 201.572 245.19C196.614 247.755 187.664 248.469 182.885 246.681M212.297 213.422C222.309 203.204 230.893 194.008 231.374 192.986C231.855 191.964 231.981 190.086 231.654 188.814C231.327 187.541 197.858 153.329 157.279 112.786L83.5 39.071L55.7 32.919C40.41 29.535 27.661 27.005 27.37 27.297C27.078 27.588 29.642 40.423 33.066 55.818L39.292 83.81L113.412 157.905C181.449 225.92 187.801 232 190.813 232C193.751 232 196.002 230.054 212.297 213.422" />
-    <glyph glyph-name="edit-to-check"
-      unicode="&#xEA0A;"
-      horiz-adv-x="256" d="M110.765 178.25L41.001 108.5L32.5 78.776C27.825 62.428 24 48.12 24 46.981C24 44.204 28.347 40 31.219 40C32.489 40 46.765 43.787 62.943 48.416L92.358 56.832L162.179 126.695C227.587 192.142 232 196.776 232 200.004C232 203.163 230.141 205.31 209.725 225.725C189.275 246.175 187.167 248 183.99 248C180.743 248 176.234 243.705 110.765 178.25M198.505 213.995L212.484 199.989L148.096 135.596L83.708 71.202L64.169 65.62C53.422 62.549 44.467 60.2 44.269 60.398C44.07 60.596 46.406 69.475 49.459 80.129L55.01 99.5L119.252 163.75C154.585 199.088 183.727 228 184.01 228C184.294 228 190.817 221.698 198.505 213.995M2.455 13.545C-0.734 10.357 -0.735 6.085 2.452 2.646L4.905 0L128 0L251.095 0L253.548 2.646C256.735 6.085 256.734 10.357 253.545 13.545L251.091 16L128 16L4.909 16L2.455 13.545" />
    <glyph glyph-name="settings-gear"
      unicode="&#xEA0C;"
      horiz-adv-x="256" d="M99.832 254.471C96.618 252.726 96.208 251.122 94.093 232.004L92.489 217.507L84.994 213.482C80.872 211.267 75.475 208.062 73 206.359L68.5 203.262L53 210.098C44.475 213.858 36.773 216.949 35.885 216.967C34.997 216.985 33.13 216.104 31.737 215.008C28.999 212.854 5.538 172.991 4.444 168.635C3.42 164.555 5.834 161.873 19.787 151.582L32.5 142.206L32.394 127.862L32.287 113.519L20.394 104.807C5.981 94.248 3.604 91.729 4.384 87.831C5.219 83.656 28.772 43.324 31.737 40.992C33.13 39.896 34.938 39 35.755 39C36.572 39 44.295 42.079 52.917 45.842L68.595 52.683L71.743 50.255C73.475 48.92 78.853 45.728 83.693 43.163L92.494 38.5L94.095 24C96.114 5.721 96.663 3.349 99.302 1.501C102.478 -0.724 153.522 -0.724 156.698 1.501C159.336 3.349 159.885 5.718 161.906 23.981L163.508 38.462L172.504 43.316C177.452 45.986 182.829 49.185 184.453 50.426L187.405 52.683L203.083 45.842C211.705 42.079 219.428 39 220.245 39C221.062 39 222.866 39.893 224.254 40.985C226.962 43.115 250.487 83.109 251.57 87.423C252.57 91.409 250.241 93.984 236.267 104.34L223.5 113.801L223.606 128.074L223.713 142.348L236.324 151.66C250.121 161.847 252.575 164.571 251.57 168.577C250.487 172.891 226.962 212.885 224.254 215.015C222.866 216.107 221.003 216.985 220.115 216.967C219.227 216.949 211.525 213.858 203 210.098L187.5 203.262L183 206.359C180.525 208.062 175.128 211.267 171.006 213.482L163.511 217.507L161.907 232.004C159.76 251.41 159.41 252.737 155.966 254.517C151.822 256.661 103.791 256.621 99.832 254.471M145 238.452C145 232.473 148.406 209.093 149.532 207.346C150.295 206.162 155.55 202.965 161.21 200.242C166.869 197.52 174.166 193.201 177.425 190.646C180.683 188.091 184.369 186 185.616 186C186.862 186 194.047 188.7 201.582 192C209.117 195.3 215.623 198 216.039 198C216.718 198 233 170.776 233 169.641C233 169.383 227.206 164.878 220.124 159.63C213.042 154.381 206.971 149.367 206.633 148.487C206.296 147.607 206.556 142.637 207.212 137.443C208.139 130.103 208.136 125.872 207.198 118.443C206.403 112.153 206.322 108.267 206.961 107.073C207.494 106.076 213.571 101.122 220.465 96.065C227.359 91.007 233 86.649 233 86.38C233 85.145 216.699 58 215.957 58C215.496 58 208.953 60.7 201.418 64C193.883 67.3 186.859 70 185.81 70C184.761 70 179.897 67.123 175 63.608C170.104 60.092 162.892 55.957 158.974 54.42C155.056 52.883 151.044 50.6 150.059 49.347C148.228 47.02 147.939 45.452 145.899 26.75L144.726 16L128 16L111.274 16L110.101 26.75C108.061 45.452 107.772 47.02 105.941 49.347C104.956 50.6 100.944 52.883 97.026 54.42C93.108 55.957 85.896 60.092 81 63.608C76.103 67.123 71.239 70 70.19 70C69.141 70 62.117 67.3 54.582 64C47.047 60.7 40.492 58 40.016 58C39.251 58 23 85.09 23 86.365C23 86.642 28.641 91.007 35.535 96.065C42.429 101.122 48.506 106.076 49.039 107.073C49.678 108.267 49.597 112.153 48.802 118.443C47.86 125.907 47.86 130.093 48.802 137.557C49.59 143.795 49.675 147.738 49.048 148.911C48.519 149.9 42.657 154.658 36.021 159.484C29.386 164.311 23.719 168.645 23.429 169.115C22.818 170.103 38.759 198 39.934 198C40.365 198 46.883 195.3 54.418 192C61.953 188.7 69.128 186 70.362 186C71.595 186 75.506 188.202 79.052 190.894C85.248 195.597 93.403 200.186 101.172 203.341C103.192 204.162 105.522 205.883 106.35 207.166C107.582 209.076 111 232.073 111 238.452C111 239.789 113.322 240 128 240C142.678 240 145 239.789 145 238.452M119.932 167.043C109.359 165.133 97.135 155.712 92.15 145.633C86.935 135.088 86.935 120.946 92.15 110.339C95.165 104.206 104.206 95.165 110.339 92.15C120.946 86.935 135.054 86.935 145.661 92.15C151.794 95.165 160.835 104.206 163.85 110.339C169.065 120.946 169.065 135.088 163.85 145.633C160.362 152.686 152.195 160.552 144.815 163.965C137.804 167.208 127.737 168.454 119.932 167.043M138.622 149.177C146.993 144.873 151.434 137.53 151.429 128C151.419 106.942 126.711 96.144 111.812 110.685C98.256 123.917 103.589 145.098 121.994 151.124C125.845 152.385 134.311 151.394 138.622 149.177" />
-    <glyph glyph-name="arrow-down"
-      unicode="&#xEA0D;"
-      horiz-adv-x="256" d="M122.455 245.545L120 243.091L120 139.317L120 35.544L89.712 65.772C62.405 93.025 59.104 96 56.167 96C51.799 96 48 92.201 48 87.835C48 84.884 51.587 80.988 86.253 46.289C122.002 10.506 124.734 8 128 8C131.266 8 133.998 10.506 169.747 46.289C204.413 80.988 208 84.884 208 87.835C208 92.201 204.201 96 199.833 96C196.896 96 193.595 93.025 166.288 65.772L136 35.544L136 139.317L136 243.091L133.545 245.545C131.998 247.093 129.948 248 128 248C126.052 248 124.002 247.093 122.455 245.545" />
-    <glyph glyph-name="arrow-left"
-      unicode="&#xEA0E;"
-      horiz-adv-x="256" d="M46.265 169.735C10.611 134.082 8 131.234 8 128C8 124.766 10.611 121.918 46.265 86.265C81.078 51.451 84.825 48 87.812 48C92.034 48 96 52.048 96 56.358C96 59.044 92.251 63.18 65.772 89.712L35.544 120L139.32 120L243.095 120L245.548 122.646C248.735 126.085 248.734 130.357 245.545 133.545L243.091 136L139.332 136L35.574 136L65.787 166.319C92.897 193.524 96 196.969 96 199.864C96 204.212 92.186 208 87.81 208C84.826 208 81.067 204.538 46.265 169.735" />
-    <glyph glyph-name="arrow-right"
-      unicode="&#xEA0F;"
-      horiz-adv-x="256" d="M162.455 205.545C160.863 203.954 160 201.957 160 199.864C160 196.969 163.103 193.524 190.213 166.319L220.426 136L116.668 136L12.909 136L10.455 133.545C7.266 130.357 7.265 126.085 10.452 122.646L12.905 120L116.68 120L220.456 120L190.228 89.712C163.749 63.18 160 59.044 160 56.358C160 52.048 163.966 48 168.188 48C171.175 48 174.922 51.451 209.735 86.265C245.389 121.918 248 124.766 248 128C248 131.234 245.389 134.082 209.735 169.735C174.933 204.538 171.174 208 168.19 208C166.04 208 164.063 207.154 162.455 205.545" />
-    <glyph glyph-name="arrow-up"
-      unicode="&#xEA10;"
-      horiz-adv-x="256" d="M86.265 209.735C52.426 175.897 48 171.114 48 168.382C48 164.06 51.955 160 56.164 160C59.104 160 62.397 162.967 89.712 190.228L120 220.456L120 116.874L120 13.292L122.452 10.646C125.744 7.094 130.256 7.094 133.548 10.646L136 13.292L136 116.874L136 220.456L166.288 190.228C193.603 162.967 196.896 160 199.836 160C204.045 160 208 164.06 208 168.382C208 171.114 203.574 175.897 169.735 209.735C134.082 245.389 131.234 248 128 248C124.766 248 121.918 245.389 86.265 209.735" />
    <glyph glyph-name="small-down"
      unicode="&#xEA11;"
      horiz-adv-x="256" d="M74.455 157.545C72.859 155.95 72 153.958 72 151.852C72 148.949 74.732 145.875 98.255 122.306C122.577 97.936 124.766 96 128 96C131.234 96 133.423 97.936 157.745 122.306C181.268 145.875 184 148.949 184 151.852C184 156.194 180.192 160 175.846 160C172.953 160 170.185 157.592 150.301 137.779L128 115.559L105.699 137.779C85.815 157.592 83.047 160 80.154 160C78.042 160 76.052 159.143 74.455 157.545" />
@ -169,12 +154,6 @@
    <glyph glyph-name="button-2"
      unicode="&#xEA3A;"
      horiz-adv-x="256" d="M2.455 253.545L0 251.091L0 180.191L0 109.292L2.452 106.646L4.905 104L40.875 104L76.846 104L86.673 74.399C96.622 44.43 98.736 40 103.089 40C108.59 40 109.788 41.725 124.146 70.327L138.179 98.281L171.374 65.14C201.392 35.172 204.881 32 207.832 32C212.035 32 216 36.059 216 40.361C216 43.058 211.971 47.466 182.849 76.636L149.698 109.842L176.782 123.391C191.679 130.843 204.797 137.939 205.933 139.159C209.94 143.459 207.84 148.981 201.12 151.812C192.758 155.334 57.468 200 55.16 200C52.383 200 48 195.463 48 192.588C48 191.422 53.175 174.957 59.5 156C65.825 137.043 71 121.188 71 120.766C71 120.345 58.625 120 43.5 120L16 120L16 180L16 240L128 240L240 240L240 180L240 120L222.455 120C205.159 120 204.874 119.965 202.455 117.545C199.266 114.357 199.265 110.085 202.452 106.646L204.905 104L228 104L251.095 104L253.548 106.646L256 109.292L256 180.191L256 251.091L253.545 253.545L251.091 256L128 256L4.909 256L2.455 253.545M125.254 160.401L179.007 142.512L154.506 130.253L130.005 117.995L117.747 93.494L105.488 68.993L87.599 122.746C77.759 152.311 69.471 177.141 69.181 177.924C68.838 178.849 69.151 179.162 70.076 178.819C70.859 178.529 95.689 170.241 125.254 160.401" />
-    <glyph glyph-name="menu-to-arrow-left-3"
-      unicode="&#xEA3B;"
-      horiz-adv-x="256" d="M10.455 213.545C7.266 210.357 7.265 206.085 10.452 202.646L12.905 200L128 200L243.095 200L245.548 202.646C248.735 206.085 248.734 210.357 245.545 213.545L243.091 216L128 216L12.909 216L10.455 213.545M10.455 133.545C7.266 130.357 7.265 126.085 10.452 122.646L12.905 120L128 120L243.095 120L245.548 122.646C248.735 126.085 248.734 130.357 245.545 133.545L243.091 136L128 136L12.909 136L10.455 133.545M10.455 53.545C7.266 50.357 7.265 46.085 10.452 42.646L12.905 40L128 40L243.095 40L245.548 42.646C248.735 46.085 248.734 50.357 245.545 53.545L243.091 56L128 56L12.909 56L10.455 53.545" />
-    <glyph glyph-name="grid-to-list"
-      unicode="&#xEA3C;"
-      horiz-adv-x="256" d="M2.455 253.545L0 251.091L0 224.191L0 197.292L2.452 194.646L4.905 192L32 192L59.095 192L61.548 194.646L64 197.292L64 224.191L64 251.091L61.545 253.545L59.091 256L32 256L4.909 256L2.455 253.545M98.455 253.545L96 251.091L96 224.191L96 197.292L98.452 194.646L100.905 192L128 192L155.095 192L157.548 194.646L160 197.292L160 224.191L160 251.091L157.545 253.545L155.091 256L128 256L100.909 256L98.455 253.545M194.455 253.545L192 251.091L192 224.191L192 197.292L194.452 194.646L196.905 192L224 192L251.095 192L253.548 194.646L256 197.292L256 224.191L256 251.091L253.545 253.545L251.091 256L224 256L196.909 256L194.455 253.545M48 224L48 208L32 208L16 208L16 224L16 240L32 240L48 240L48 224M144 224L144 208L128 208L112 208L112 224L112 240L128 240L144 240L144 224M240 224L240 208L224 208L208 208L208 224L208 240L224 240L240 240L240 224M2.455 157.545L0 155.091L0 128.191L0 101.292L2.452 98.646L4.905 96L32 96L59.095 96L61.548 98.646L64 101.292L64 128.191L64 155.091L61.545 157.545L59.091 160L32 160L4.909 160L2.455 157.545M98.455 157.545L96 155.091L96 128.191L96 101.292L98.452 98.646L100.905 96L128 96L155.095 96L157.548 98.646L160 101.292L160 128.191L160 155.091L157.545 157.545L155.091 160L128 160L100.909 160L98.455 157.545M194.455 157.545L192 155.091L192 128.191L192 101.292L194.452 98.646L196.905 96L224 96L251.095 96L253.548 98.646L256 101.292L256 128.191L256 155.091L253.545 157.545L251.091 160L224 160L196.909 160L194.455 157.545M48 128L48 112L32 112L16 112L16 128L16 144L32 144L48 144L48 128M144 128L144 112L128 112L112 112L112 128L112 144L128 144L144 144L144 128M240 128L240 112L224 112L208 112L208 128L208 144L224 144L240 144L240 128M2.455 61.545L0 59.091L0 32.191L0 5.292L2.452 2.646L4.905 0L32 0L59.095 0L61.548 2.646L64 5.292L64 32.191L64 59.091L61.545 61.545L59.091 64L32 64L4.909 64L2.455 61.545M98.455 61.545L96 59.091L96 32.191L96 5.292L98.452 2.646L100.905 0L128 0L155.095 0L157.548 2.646L160 5.292L160 32.191L160 59.091L157.545 61.545L155.091 64L128 64L100.909 64L98.455 61.545M194.455 61.545L192 59.091L192 32.191L192 5.292L194.452 2.646L196.905 0L224 0L251.095 0L253.548 2.646L256 5.292L256 32.191L256 59.091L253.545 61.545L251.091 64L224 64L196.909 64L194.455 61.545M48 32L48 16L32 16L16 16L16 32L16 48L32 48L48 48L48 32M144 32L144 16L128 16L112 16L112 32L112 48L128 48L144 48L144 32M240 32L240 16L224 16L208 16L208 32L208 48L224 48L240 48L240 32" />
    <glyph glyph-name="ctrl-down"
      unicode="&#xEA3D;"
      horiz-adv-x="256" d="M10.573 173.664C7.793 170.883 7.363 167.77 9.285 164.319C11.22 160.845 125.043 80 128 80C130.957 80 244.78 160.845 246.715 164.319C248.637 167.77 248.207 170.883 245.427 173.664C243.383 175.708 242.183 176.129 239.6 175.71C237.418 175.356 218.52 162.448 182.174 136.486L128 97.79L73.826 136.486C37.48 162.448 18.582 175.356 16.4 175.71C13.817 176.129 12.617 175.708 10.573 173.664" />
@ -199,6 +178,12 @@
    <glyph glyph-name="list-numbers"
      unicode="&#xEA45;"
      horiz-adv-x="256" d="M15.394 234.584C15.095 233.806 14.997 231.893 15.175 230.334C15.455 227.889 16.084 227.377 19.75 226.608L24 225.716L24 207.465C24 187.304 24.237 188 17.358 188C13.95 188 13.886 187.924 14.19 184.25L14.5 180.5L31.25 180.226L48 179.952L48 183.976C48 187.755 47.823 188 45.082 188C38.748 188 39 186.979 39 212.607L39 236L27.469 236C18.447 236 15.819 235.692 15.394 234.584M90.455 213.545C87.266 210.357 87.265 206.085 90.452 202.646L92.905 200L172 200L251.095 200L253.548 202.646C256.735 206.085 256.734 210.357 253.545 213.545L251.091 216L172 216L92.909 216L90.455 213.545M17.97 153.75C12.678 151.077 9 145.993 9 141.352L9 138L14.5 138C17.525 138 20.305 137.888 20.678 137.75C21.051 137.612 21.717 138.849 22.158 140.499C23.582 145.822 29.123 147.703 33.777 144.443C39.217 140.633 35.066 133.046 19.474 118.3C9.413 108.784 9 108.228 9 104.197L9 100L31.5 100L54 100L54 109.052L54 118.105L48.777 117.802L43.555 117.5L42.718 113.25L41.882 109L34.257 109L26.631 109L36.624 118.75C50.233 132.028 53.074 138.523 49.151 147.391C46.345 153.735 41.53 155.948 30.462 155.978C24.082 155.995 21.505 155.536 17.97 153.75M90.455 133.545C87.266 130.357 87.265 126.085 90.452 122.646L92.905 120L172 120L251.095 120L253.548 122.646C256.735 126.085 256.734 130.357 253.545 133.545L251.091 136L172 136L92.909 136L90.455 133.545M20.059 77.818C14.563 74.95 12.02 71.567 11.295 66.163L10.737 62L15.787 62C18.564 62 21.493 61.748 22.296 61.44C23.345 61.037 23.942 61.876 24.42 64.428C25.152 68.328 27.35 70 31.743 70C36.396 70 38.487 67.802 38.362 63.041C38.227 57.893 35.11 54.271 30.09 53.428C23.072 52.25 23 52.189 23 47.433L23 43L29.461 43C34.82 43 36.27 42.627 37.961 40.811C40.829 37.733 40.639 32.548 37.545 29.455C33.409 25.318 22.883 26.414 16.944 31.6C15.595 32.778 14.9 32.374 11.701 28.547L8.013 24.135L10.59 22.108C17.801 16.436 34.457 14.075 42.768 17.548C51.608 21.241 55.865 29.205 53.833 38.248C52.682 43.372 49.905 46.546 45.221 48.092L41.737 49.242L45.376 51.322C50.461 54.228 53.461 60.622 52.619 66.76C51.326 76.198 46.925 79.19 33.5 79.757C25.592 80.091 23.961 79.856 20.059 77.818M90.455 53.545C87.266 50.357 87.265 46.085 90.452 42.646L92.905 40L172 40L251.095 40L253.548 42.646C256.735 46.085 256.734 50.357 253.545 53.545L251.091 56L172 56L92.909 56L90.455 53.545" />
+    <glyph glyph-name="bookmark-2"
+      unicode="&#xEA46;"
+      horiz-adv-x="256" d="M200 256H56A32 32 0 0 1 24 224V0L128 64L232 0V224A32 32 0 0 1 200 256z" />
+    <glyph glyph-name="menu-8"
+      unicode="&#xEA48;"
+      horiz-adv-x="256" d="M10.455 205.545C7.266 202.357 7.265 198.085 10.452 194.646L12.905 192L128 192L243.095 192L245.548 194.646C248.735 198.085 248.734 202.357 245.545 205.545L243.091 208L128 208L12.909 208L10.455 205.545M10.455 133.545C7.266 130.357 7.265 126.085 10.452 122.646L12.905 120L128 120L243.095 120L245.548 122.646C248.735 126.085 248.734 130.357 245.545 133.545L243.091 136L128 136L12.909 136L10.455 133.545M10.455 61.545C7.266 58.357 7.265 54.085 10.452 50.646L12.905 48L128 48L243.095 48L245.548 50.646C248.735 54.085 248.734 58.357 245.545 61.545L243.091 64L128 64L12.909 64L10.455 61.545" />
  </font>
 </defs>
 </svg>
--- a/gui/public/assets/font/dmzui.ttf
+++ b/gui/public/assets/font/dmzui.ttf
--- a/gui/public/assets/font/dmzui.woff
+++ b/gui/public/assets/font/dmzui.woff
--- a/gui/public/assets/font/dmzui.woff2
+++ b/gui/public/assets/font/dmzui.woff2