Merge pull request #2 from consensus-ai/reskin

Reskin

css/avenir-next.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: "Avenir Next";
+  src:url(../assets/AvenirNext-Regular.ttf) format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Avenir Next";
+  src:url(../assets/AvenirNext-DemiBold.ttf) format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Avenir Next";
+  src:url(../assets/AvenirNext-Medium.ttf) format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}

css/general.css

@@ -1,15 +1,3 @@
-/*  Style Guide:
- *    Transparent: 70% Opacity
- *
- *    White:      #FFFFFF
- *    Grey-White: #F5F5F5
- *    Faint-Grey: #ECECEC
- *    Light-Grey: #DDDDDD
- *    Grey:       #C5C5C5
- *    Grey-Black: #4A4A4A
- *    Black:      #000000
- *    Neon-Green: #00CBA0
- */
 /* Overall rules */
 .blueprint {
 	display: none;
@@ -25,127 +13,112 @@ html,body {
 	height: 100%;
 	width: 100%;
 
-	font-family: 'Roboto Condensed', sans-serif;
-	font-weight: 300;
-	font-size: 18px;
+	font-family: 'Avenir Next';
+	font-weight: normal;
+	font-size: 16px;
 
 	-webkit-user-select: none;
 }
 .pure-g [class*="pure-u"] {
-	font-family: 'Roboto Condensed', sans-serif;
-	font-weight: 300;
+	font-family: 'Avenir Next';
+	font-weight: normal;
 }
-::-webkit-scrollbar { 
-	display: none; 
+::-webkit-scrollbar {
+	display: none;
 }
 .body {
 	position: relative;
 
-	height: -webkit-calc(100% - 80px);
-	-webkit-box-sizing:border-box;
-}
-
-/* UI Header */
-.header {
-	height: 80px;
-	width: 100%;
-
-	background-color: #313133;
-	background: linear-gradient(to left, #313133 15%, #0b0e16 85%);
-}
-.logo {
-	padding-left: 20px;
-	padding-top: 14px;
-	pointer-events: none;
-}
-.logo-container:hover {
-	cursor: pointer;
-}
-.status-bar div {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 75%;
-	margin-left: 5px;
-	margin-right: 5px;
-}
-.status-bar i {
-	margin-right: 10px;
-	margin-left: 10px;
-}
-.status-bar-unsynced {
-	color: #E0000B;
-}
-.status-bar-synced {
-	color: #00CBA0;
-}
-.status-bar {
 	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding-right: 25px;
-	cursor: default;
-}
-.status-bar-blockheight {
-	color: #f5f5f5;
-}
-
-/* Header Buttons */
-.header-button {
-	float: right;
-	display: none;
-	padding: 30px;
-	font-size: 16px;
-	color: #AAAAAA;
-}
-.header-button:hover {
-	color: #00CBA0;
-	cursor: pointer;
+	/*-webkit-box-sizing:border-box;*/
+	width: 100%;
 }
 
 /* Sidebar */
-#sidebar {
+.sidebar-container {
 	position: relative;
 
-	background-color: #D5D3D5;
-	width: 160px;
+	background-color: #FFFFFF;
+	width: 275px;
 	z-index: 5;
 	height: 100%;
 
 	-webkit-box-sizing:border-box;
-	border-left: 0 solid #F5F5F5;
-	border-right: 1px solid #B5B5B5;
+	border-right: 0.5px solid rgba(0,0,0,0.07);
+	box-shadow: 1px 1px 20px rgba(0,0,0,.04)
+}
+.sidebar {
+	margin-top: 6px;
+}
+.status-container {
+	padding: 0 17px;
+}
+.progress-container {
+	margin-bottom: 4px;
+}
+.logo-container {
+	padding: 30px 0 30px 40px;
+}
+.logo {
+	width: 160px;
+	display: block;
+	margin: 0;
+}
+.statusbar {
+	position: absolute;
+	bottom: 17px;
+	width: 100%;
 }
-.button {
+.sidebar-button {
 	display: flex;
 	font-size: 16px;
 	align-items: center;
 	position: relative;
-	height: 60px;
+	height: 56px;
 
-	transition: all .25s;
-	-webkit-animation: fadein .4s;
 	-webkit-box-sizing:border-box;
 
-	color: #606060;
+	color: #3D4B66;
+	margin-left: 3px;
+	padding-left: 16px;
 }
-.button:hover {
+.sidebar-button:hover {
 	cursor: pointer;
-	background-color: #C5C3C5;
-	color: #F5F5F5;
 }
-.button:active {
-	background-color: ;
+.sidebar-button:active {
 }
-.button.current {
-	transition: all .25s;
+.sidebar-button.current {
 	cursor: default;
-	background-color: #00CBA0;
-	color: #F5F5F5;
+	border-left: 3px solid #0043A4;
+	margin-left: 0;
 }
-.button.current .icon, .button:hover .icon {
-	-webkit-filter: invert(100%);
+
+.plugin-button-image {
+	background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-color: #fff;
+  padding-left: 16px;
+}
+.wallet-button-image {
+	background-image: url('../plugins/Wallet/assets/button-inactive.png');
+	width: 55px;
+  height: 21px;
+}
+.about-button-image {
+	background-image: url('../plugins/About/assets/button-inactive.png');
+	width: 55px;
+  height: 21px;
+}
+.button.current .wallet-button-image, .button:hover .wallet-button-image {
+	background-image: url('../plugins/Wallet/assets/button-active.png');
+	width: 55px;
+  height: 55px;
+}
+.button.current .about-button-image, .button:hover .about-button-image {
+	background-image: url('../plugins/About/assets/button-active.png');
+	width: 55px;
+  height: 55px;
 }
 @keyframes fadeout {
 	from { opacity: default; }
@@ -161,7 +134,6 @@ html,body {
 }
 .button .text {
 	padding: 4px;
-	padding-left: 8px;
 }
 
 /* Mainbar */
@@ -171,6 +143,7 @@ html,body {
 	flex-grow: 1;
 	height: 100%;
 	background-color: #ffffff;
+	position: relative;
 }
 #mainbar.transition {
 	transition: all .25s;
@@ -179,7 +152,7 @@ html,body {
 .webview {
 	position: absolute;
 	height: 100%;
-	min-width: calc(100% - 160px);
+	width: 100%;
 	right: 0;
 	opacity: 0;
 	z-index: -1;
@@ -299,3 +272,7 @@ html,body {
 .centered p {
 	margin: 0;
 }
+
+.button:active {
+	transform: translateX(2px) translateY(2px);
+}

css/plugin-standard.css

@@ -1,6 +1,6 @@
-/*  Style Guide: 
+/*  Style Guide:
  *    Transparent: 70% Opacity
- *    
+ *
  *    White:      #FFFFFF
  *    Grey-White: #F5F5F5
  *    Faint-Grey: #ECECEC
@@ -23,9 +23,9 @@ select, input, html, body {
 	margin: 0;
 	padding: 0;
 	border-spacing: 0;
-	font-family: 'Roboto Condensed', sans-serif;
-	font-weight: 300;
-	font-size: 18px;
+	font-family: 'Avenir Next';
+	font-weight: normal;
+	font-size: 16px;
 }
 html, body {
 	height: 100%;

index.html

@@ -6,7 +6,7 @@
 		<link rel='stylesheet' href='css/font-awesome.min.css'>
 		<link rel='stylesheet' href='css/pure-min.css'>
 		<link rel='stylesheet' href='css/grids-responsive-min.css'>
-		<link rel='stylesheet' href='css/roboto-condensed-min.css'>
+		<link rel='stylesheet' href='css/avenir-next.css'>
 		<link rel='stylesheet' href='css/general.css'>
 	</head>
 
@@ -18,26 +18,35 @@
 				<i id="loading-spinner" class='fa fa-spinner fa-pulse'></i>
 			</div>
 		</div>
-		<!-- Header for UI -->
-		<div class='pure-g header'>
-			<div class='pure-u-1-5 logo-container'>
-				<img src='assets/senLogo.svg' height='50' class='logo'>
-			</div>
-			<div id="statusbar" class='pure-u-4-5'>
-			</div>
-		</div>
 
-		<!-- Full body of UI -->
 		<div class='pure-g body'>
-			<!-- Sidebar -->
-			<div class='pure-u-1-5' id='sidebar'>
+			<div class='sidebar-container pure-u'>
+				<div class='logo-container'>
+					<img src='assets/senLogo.svg' height='50' class='logo'>
+				</div>
+
+				<div class='sidebar' id='sidebar'>
+					<div id="Wallet-button" class="pure-u-1-1 button sidebar-button current">
+						<div class="pure-u plugin-button-image wallet-button-image"></div>
+						<div class="pure-u text">Wallet</div>
+					</div>
+
+					<div id="About-button" class="pure-u-1-1 button sidebar-button">
+						<div class="pure-u plugin-button-image about-button-image"></div>
+						<div class="pure-u text">About</div>
+					</div>
+				</div>
+
+				<div class='statusbar' id='statusbar'>
+				</div>
 			</div>
 
-			<!-- Mainbar -->
 			<div class='pure-u' id='mainbar'>
 			</div>
 		</div>
+
 		<span id='tooltip'>Tooltip</span>
+
 		<div class='notification-container'>
 			<div class='blueprint notification'>
 				<div class='icon'>
@@ -47,7 +56,6 @@
 			</div>
 		</div>
 
-		<!-- Javascript -->
 		<script src="./dist/manifest.js"></script>
 		<script src="./dist/vendor.js"></script>
 		<script>

js/mainjs/initWindow.js

@@ -4,6 +4,8 @@ import appTray from './trayMenu.js'
 import Path from 'path'
 import { version, releaseName } from '../../package.json'
 
+require('electron-debug')();
+
 // Save window position and bounds every time the window is moved or resized.
 const onBoundsChange = (mainWindow, config) => () => {
 	const bounds = mainWindow.getBounds()
@@ -51,7 +53,7 @@ export default function(config) {
 		app.setAboutPanelOptions({
 			applicationName: 'Sentient-UI',
 			applicationVersion: version,
-			copyright: 'Nebulous Inc.',
+			copyright: 'Consensus Foundation.',
 			version: releaseName,
 		})
 	}