Merge pull request singnet#11 from raamb/master

UI Clean up
ramongduraes · Jan 13, 2019 · 3acab8d · 3acab8d
2 parents 72361d4 + 03bd125
commit 3acab8d
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 206 deletions.
diff --git a/dist/bundle.a3b84296.js b/dist/bundle.a3b84296.js
diff --git a/dist/bundle.a3b84296.js.gzip b/dist/bundle.a3b84296.js.gzip
diff --git a/dist/bundle.a3b84296.js.map b/dist/bundle.a3b84296.js.map
diff --git a/dist/bundle.a3b84296.js.map.gzip b/dist/bundle.a3b84296.js.map.gzip
diff --git a/dist/css/style.css b/dist/css/style.css
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="icon" href="/img/favicon.png" type="image/png"/><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://fonts.googleapis.com/css?family=Maitree:400,500,600&amp;subset=latin-ext,thai,vietnamese" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"><link href="css/icomoon.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><link href="css/background.css" rel="stylesheet"><link rel="stylesheet" href="css/profile.css"/><title>SingularityNET Beta Dapp</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-107763881-5"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-107763881-5")</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="react-root"></div><script type="text/javascript" src="bundle.1e4742de.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="icon" href="/img/favicon.png" type="image/png"/><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://fonts.googleapis.com/css?family=Maitree:400,500,600&amp;subset=latin-ext,thai,vietnamese" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"><link href="css/icomoon.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><link href="css/background.css" rel="stylesheet"><link rel="stylesheet" href="css/profile.css"/><title>SingularityNET Beta Dapp</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-107763881-5"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-107763881-5")</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="react-root"></div><script type="text/javascript" src="bundle.4bc95ccb.js"></script></body></html>
diff --git a/src/App.js b/src/App.js
@@ -14,6 +14,21 @@ export default class App extends React.Component {
     return (
       <React.Fragment>
             <div className="inner">
+                <div id="roadmap-row" data-midnight="light" data-bg-mobile-hidden="" className="wpb_row vc_row-fluid vc_row full-width-section standard_section" style={{ visibility: "visible"}} data-top-percent="4%" data-bottom-percent="4%">
+                    <div className="row-bg-wrap instance-2">
+                    <div className="inner-wrap"> 
+                        <div className="row-bg" data-color_overlay="#40ceff" data-color_overlay_2="#5a2ff1" data-gradient_direction="left_to_right" data-overlay_strength="1" data-enable_gradient="true"></div>
+                    </div> 
+                </div>
+                <div className="nectar-shape-divider-wrap no-color" data-front="" data-style="mountains" data-position="bottom">
+                    <svg className="nectar-shape-divider" fill="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">  
+                    <path d="M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z"></path>   
+                    <path d="M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z"></path>  
+                    <path d="M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z"></path>  
+                    <path d="M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z"></path>  
+                    <path d="M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z"></path> 
+                    </svg>
+                </div>            
               <div className="header">
                   <div className="col-xs-6 col-sm-4 col-md-6 col-lg-6 logo">
                       {(typeof web3 !== 'undefined')?
@@ -38,6 +53,7 @@ export default class App extends React.Component {
                   </div>
               </div>
           </div>
+          </div>
           {this.props.children}
       </React.Fragment>              
     );

diff --git a/src/components/ConnectWallet.js b/src/components/ConnectWallet.js
@@ -4,47 +4,35 @@ import { Link } from 'react-router-dom';
 export default class ConnectWallet extends React.Component {
 	constructor() {
 		super(props)
-
 	}
 
 	render() {
 		return (
 			<React.Fragment>
 				<div className="inner">
-					<div className="overview-header">
-						<div className="col-xs-6 col-sm-4 col-md-6 col-lg-6 logo">
-							<h1><a href="index.html" title="SingularityNET"><img src="./img/singularity-logo.png" alt="SingularityNET" /></a></h1>
+					<span className="gradientnav"/>
+					<div id="roadmap-row" data-midnight="light" data-bg-mobile-hidden="" className="wpb_row vc_row-fluid vc_row full-width-section standard_section" style={{visibility: "visible"}} data-top-percent="4%" data-bottom-percent="4%">
+						<div className="header">
+							<div className="col-xs-6 col-sm-4 col-md-6 col-lg-6 logo">
+								<h1><a href="index.html" title="SingularityNET"><img src="./img/singularity-logo.png" alt="SingularityNET"/></a></h1>
+							</div>
 						</div>
-					</div>
-				</div>
-				<div role="content">
-					<div className="overview col-xs-12 col-sm-12 col-md-12 col-lg-12">
-						<div className="container">
-							<div className="step-guide">Step Guide</div>
-							<div className="col-md-2 col-lg-2">&nbsp;</div>
-							<div className="col-xs-12 col-sm-6 col-md-4 col-lg-4">
-								<div className="step-guide-boxes">
-									<div className="enable-disable"><img src="img/enable-tick.png" alt="" /></div>
-									<div className="overview-box-title">Overview</div>
-									<div className="install-link"><Link to="/SampleServices">Go to Services</Link></div>
+						<main role="content">
+						<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+								<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+									<div className="welcome-to">Welcome to SingularityNET</div>
+								</div>
+								<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 overview-text">SingularityNET is an open and decentralized network of AI services made accessible through blockchain. <br/>AI developers publish their services onto the SingularityNET network where they can be used by anyone with <br/>an internet connection. This Dapp is a front-end for exploring available AI services and interacting with them <br/>through a web-UI<br/><br/>
+								<Link to="/SampleServices"><button className="let-get-started-btn">View Services</button></Link>
+								</div>
+								<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
+								<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 overview-text">
+									This Dapp allows you to browse the list of SingularityNET Agents from the SingularityNET Registry. You need a Metamask wallet to invoke a service.<br/><br/>
+									<a target="_blank" href="https://metamask.io/"><button className="let-get-started-btn">Install Metamask</button></a>
 								</div>
-							</div>
-							<div className="col-xs-12 col-sm-6 col-md-4 col-lg-4">
-								<div className="step-guide-boxes">
-									<div className="enable-disable"><img src="img/enable-tick.png" alt="" /></div>
-									<div className="overview-box-title">Connect Wallet</div>
-									<div className="install-link">Connect to Wallet</div>
 								</div>
-							</div>
-							<div className="col-md-2 col-lg-2">&nbsp;</div>
-							<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 mt-100">
-
-
-								<div className="col-sm-12 col-md-12 col-lg-12 text-center"><div className="btn btn-primary">Metamask</div></div>
-							</div>
-							<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 connect-wallet-text"><p>This Dapp allows you to browse the list of SingularityNET Agents from the SingularityNET Registry. You need a Metamask wallet to invoke a service.Please follow the link above to install it.</p>
-							</div>
 						</div>
+						</main>
 					</div>
 				</div>
 			</React.Fragment>

diff --git a/src/components/JobDetails.js b/src/components/JobDetails.js
@@ -11,7 +11,6 @@ import { AGI, hasOwnDefinedProperty,FORMAT_UTILS,ERROR_UTILS,DEFAULT_GAS_PRICE,D
 import {TabContainer, ModalStylesAlertWait, ModalStylesAlert} from './ReactStyles.js';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import 'react-perfect-scrollbar/dist/css/styles.css';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ServiceMappings from "./service/ServiceMappings.js"
 import ChannelHelper from './ChannelHelper.js';
 import CircularProgress from '@material-ui/core/CircularProgress'
@@ -489,9 +488,9 @@ export  class Jobdetails extends React.Component {
               <Slide style={{width : this.state.sliderWidth}} direction="left" in={this.state.jobDetailsSliderOpen} mountOnEnter unmountOnExit>
                 <div className="sidebar">
                     <div style={{fontSize: "50px",textAlign: "right"}}>
-                      <i className="fas fa-window-minimize" onClick={this.onMinimizeJobDetailsSlider} style={{color: "black",fontSize: "20px",border: "none",cursor: "pointer"}}></i>
-                      <i className="fas fa-window-maximize" onClick={this.onMaximizeJobDetailsSlider} style={{color: "black",fontSize: "20px",border: "none",cursor: "pointer"}}></i>
-                      <i className="fas fa-window-close" onClick={this.onCloseJobDetailsSlider} style={{color: "black",fontSize: "20px",border: "none",cursor: "pointer"}}></i>
+                      <i className="fas fa-window-minimize" onClick={this.onMinimizeJobDetailsSlider} style={{color: "black",fontSize: "10px",border: "none",cursor: "pointer"}}></i>
+                      <i className="fas fa-window-maximize" onClick={this.onMaximizeJobDetailsSlider} style={{color: "black",fontSize: "10px",border: "none",cursor: "pointer"}}></i>
+                      <i className="fas fa-window-close" onClick={this.onCloseJobDetailsSlider} style={{color: "black",fontSize: "10px",border: "none",cursor: "pointer"}}></i>
                     </div>
                     <Typography component={ 'div'}>
                         <div className="right-panel agentdetails-sec p-3 pb-5">
@@ -580,17 +579,13 @@ export  class Jobdetails extends React.Component {
                                 </div>
                             </div>
                             <div className="col-xs-12 col-sm-12 col-md-12 address no-padding">
-                                <h3>User address</h3>
-                                <div className="row">
-                                    <div className="col-xs-6 col-sm-6 col-md-6 mtb-20 text-center" style={{fontSize: "14px"}}>
-                                        <a target="_blank" href={ 'https://kovan.etherscan.io/address/' + ((typeof web3 !=='undefined' )?web3.eth.coinbase: '')}>
-                        {(typeof window.web3 !== 'undefined')?
-                          (web3.eth.coinbase !== null)?FORMAT_UTILS.toHumanFriendlyAddressPreview(web3.eth.coinbase):null:null}
-                            </a>
-                                    </div>
-                                    <div className="col-xs-6 col-sm-6 col-md-6 mtb-20 text-center border-left-1">
-                                        <p style={{fontSize: "14px"}}>{this.serviceState["org_id"]}</p>
-                                    </div>
+                                <div className="col-xs-12 col-sm-12 col-md-12 no-padding" style={{fontSize: "14px"}}>
+                                      This is a brief write up about the service which discusses details of the service. We expect a short description of the service here and details on how to contact the author.
+                                </div>
+                            </div>
+                            <div className="col-xs-12 col-sm-12 col-md-12 address no-padding">
+                                <div className="col-xs-12 col-sm-12 col-md-12 no-padding" style={{fontSize: "14px"}}>
+                                      URL: <a target="_blank" href={'https://singularitynet.io'}/>
                                 </div>
                             </div>
                             <div className="col-xs-12 col-sm-12 col-md-12 vote no-padding">

diff --git a/src/components/Landing.js b/src/components/Landing.js
@@ -1,6 +1,6 @@
 import React, { props } from 'react';
 import SampleServices from './Services';
-import Homepage from './ProviderSelection.js';
+import Homepage from './ConnectWallet.js';
 import BlockchainHelper from "./BlockchainHelper.js"
 
 export default class Landing extends React.Component {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="icon" href="/img/favicon.png" type="image/png"/><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://fonts.googleapis.com/css?family=Maitree:400,500,600&subset=latin-ext,thai,vietnamese" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"><link href="css/icomoon.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><link href="css/background.css" rel="stylesheet"><link rel="stylesheet" href="css/profile.css"/><title>SingularityNET Beta Dapp</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-107763881-5"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer\|\|[],gtag("js",new Date),gtag("config","UA-107763881-5")</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="react-root"></div><script type="text/javascript" src="bundle.1e4742de.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="icon" href="/img/favicon.png" type="image/png"/><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://fonts.googleapis.com/css?family=Maitree:400,500,600&subset=latin-ext,thai,vietnamese" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"><link href="css/icomoon.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><link href="css/background.css" rel="stylesheet"><link rel="stylesheet" href="css/profile.css"/><title>SingularityNET Beta Dapp</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-107763881-5"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer\|\|[],gtag("js",new Date),gtag("config","UA-107763881-5")</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="react-root"></div><script type="text/javascript" src="bundle.4bc95ccb.js"></script></body></html>