rev 1 ui facelift: update side/topbar to new design

css/general.css

@@ -15,6 +15,15 @@
 	display: none;
 }
 
+@font-face {
+	font-family: Montserrat-Regular;
+	src: url('../assets/Montserrat-Regular.ttf');
+}
+@font-face {
+	font-family: Montserrat-Medium;
+	src: url('../assets/Montserrat-Medium.ttf');
+}
+
 html,body {
 	position: relative;
 
@@ -50,12 +59,12 @@ html,body {
 	height: 80px;
 	width: 100%;
 
-	background-color: #313133;
-	background: linear-gradient(to left, #313133 15%, #0b0e16 85%);
+	background-color: #191919;
 }
 .logo {
-	padding-left: 20px;
-	padding-top: 14px;
+	padding-left: 53px;
+	padding-top: 22px;
+	height: 35px;
 	pointer-events: none;
 }
 .logo-container:hover {
@@ -108,44 +117,46 @@ html,body {
 #sidebar {
 	position: relative;
 
-	background-color: #D5D3D5;
-	width: 160px;
+	background-color: #212121;
+	width: 180px;
 	z-index: 5;
 	height: 100%;
 
 	-webkit-box-sizing:border-box;
 	border-left: 0 solid #F5F5F5;
-	border-right: 1px solid #B5B5B5;
 }
 .button {
 	display: flex;
 	font-size: 16px;
 	align-items: center;
 	position: relative;
-	height: 60px;
+	height: 63px;
 
 	transition: all .25s;
 	-webkit-animation: fadein .4s;
 	-webkit-box-sizing:border-box;
 
-	color: #606060;
+	color: #999999;
+	padding-left: 20px;
 }
 .button:hover {
 	cursor: pointer;
-	background-color: #C5C3C5;
-	color: #F5F5F5;
+	background-color: #333333;
+	color: #ffffff;
 }
 .button:active {
 	background-color: ;
 }
 .button.current {
 	transition: all .25s;
 	cursor: default;
-	background-color: #00CBA0;
-	color: #F5F5F5;
-}
-.button.current .icon, .button:hover .icon {
-	-webkit-filter: invert(100%);
+	background-color: #333333;
+	color: #ffffff;
+	background-position: left;
+	background-origin: padding-box;
+	background-size: 3px 63px;
+	background-repeat: no-repeat;
+	background-image: url('../assets/selectionbar.svg');
 }
 @keyframes fadeout {
 	from { opacity: default; }
@@ -156,12 +167,15 @@ html,body {
 	to   { opacity: default; }
 }
 .button .icon {
-	max-height: 30%;
-	padding-left: 16px;
+	padding-left: 10px;
+	width: 18px;
+	height: 18px;
 }
 .button .text {
 	padding: 4px;
 	padding-left: 8px;
+	text-transform: uppercase;
+	font-family: "Montserrat-Medium";
 }
 
 /* Mainbar */
@@ -179,7 +193,7 @@ html,body {
 .webview {
 	position: absolute;
 	height: 100%;
-	min-width: calc(100% - 160px);
+	min-width: calc(100% - 180px);
 	right: 0;
 	opacity: 0;
 	z-index: -1;
@@ -299,3 +313,18 @@ html,body {
 .centered p {
 	margin: 0;
 }
+.bottom-logo {
+	position: absolute;
+	bottom: 25px;
+	width: 180px;
+	z-index: 5;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.bottom-logo > img {
+	width: 40px;
+}
+.bottom-logo > p {
+	color: #333333;
+}

doc/PluginTutorial.md

@@ -34,7 +34,7 @@ The plugin directory should now be:
 ```diff
  Sia-UI/plugins/Overview/
  └── assets/
-     └── button.png
+     └── button.svg
 ```
 
 The Overview uses the 'bars' [font awesome icon in png form](http://fa2png.io/).
@@ -99,7 +99,7 @@ The plugin directory should now be:
  Sia-UI/plugins/Overview/
 +├── index.html
  └── assets/
-     └── button.png
+     └── button.svg
 ```
 Loading up Sia-UI again, we'll see: ![Impressive plugin ain't it?](/doc/assets/basic-overview.png)
 
@@ -296,7 +296,7 @@ The plugin directory should reflect our css files:
  Sia-UI/plugins/Overview/
  ├── index.html
  ├── assets/
- │   └── button.png
+ │   └── button.svg
 +└── css/
 +    └── overview.css
 ```
@@ -572,7 +572,7 @@ function stop() {
  Sia-UI/plugins/Overview/
  ├── index.html
  ├── assets/
- │   └── button.png
+ │   └── button.svg
  ├── css/
  │   └── overview.css
 +└── js/

doc/Structure.md

@@ -53,7 +53,7 @@ Contains css, both imported and developed in house.
 </div>
 ```
 resulting in a button like this: ![This button is shown when the UI detects
-that it's out of date](/doc/assets/update-button.png).
+that it's out of date](/doc/assets/update-button.svg).
 * `roboto-condensed-min.css` - Most of the UI uses this font. It's minimalist
   and easy to read when small but not bulky when large
 

index.html

@@ -21,7 +21,7 @@
 		<!-- Header for UI -->
 		<div class='pure-g header'>
 			<div class='pure-u-1-5 logo-container'>
-				<img src='assets/siaLogo.svg' height='50' class='logo'>
+				<img src='assets/siaLogo.svg' height='35' class='logo'>
 			</div>
 			<div id="statusbar" class='pure-u-4-5'>
 			</div>
@@ -47,6 +47,11 @@
 			</div>
 		</div>
 
+		<div class="bottom-logo">
+			<img src="assets/bottomLogo.svg"></img>
+			<p>Nebulous Inc</p>
+		</div>
+
 		<!-- Javascript -->
 		<script src="./dist/manifest.js"></script>
 		<script src="./dist/vendor.js"></script>

js/mainjs/index.js

@@ -28,6 +28,7 @@ if (shouldQuit) {
 app.on('ready', () => {
 	// Load mainWindow
 	mainWindow = initWindow(config)
+	mainWindow.toggleDevTools()
 })
 
 // Quit once all windows have been closed.

js/rendererjs/plugins.js

@@ -92,7 +92,7 @@ export const getPluginName = (pluginPath) => Path.basename(pluginPath)
 export const loadPlugin = (pluginPath, hidden = false, shortcut) => {
 	const name = getPluginName(pluginPath)
 	const markupPath = Path.join(pluginPath, 'index.html')
-	const iconPath = Path.join(pluginPath, 'assets', 'button.png')
+	const iconPath = Path.join(pluginPath, 'assets', 'button.svg')
 
 	const viewElement = createPluginElement(markupPath, name)
 	const buttonElement = createPluginButtonElement(iconPath, name)