Fixed docs and app creator views

frontend/src/AppCreator.js

@@ -35,6 +35,7 @@ const actionListStyle = {
 	marginTop: "5px",
 	backgroundColor: inputColor,
 	display: "flex", 
+	color: "white",
 }
 
 const boxStyle = {
@@ -1013,7 +1014,7 @@ const AppCreator = (props) => {
 		</Dialog>
 
 	const actionView = 
-		<div>
+		<div style={{color: "white"}}>
 			<h2>Actions</h2>
 			Actions are the tasks performed by an app. Read more about actions and apps
 			<a href="/docs/apps#actions" style={{textDecoration: "none", color: "#f85a3e"}}> here</a>.
@@ -1038,7 +1039,7 @@ const AppCreator = (props) => {
 		</div>
 
 	const testView = 
-		<div>
+		<div style={{color: "white"}}>
 			<h2>Test</h2>
 			Test an action to see whether it performs in an expected way. 
 			<a href="/docs/apps#testing" style={{textDecoration: "none", color: "#f85a3e"}}>&nbsp;Click here to learn more about testing</a>.
@@ -1087,18 +1088,18 @@ const AppCreator = (props) => {
 
 	// Random names for type & autoComplete. Didn't research :^)
 	const landingpageDataBrowser = 
-		<div style={{paddingBottom: "100px"}}>
+		<div style={{paddingBottom: 100, color: "white",}}>
 				<Paper style={boxStyle}>
-					<h2 style={{marginBottom: "10px"}}>General information</h2>
+					<h2 style={{marginBottom: "10px", color: "white"}}>General information</h2>
 					<a href="/docs/apps#create" style={{textDecoration: "none", color: "#f85a3e"}}>Click here to learn more about app creation</a>
-					<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
+					<div style={{color: "white", flex: "1", display: "flex", flexDirection: "row"}}>
 					 	<Tooltip title="Click to edit the app's image" placement="bottom">
 							<div style={{flex: "1", margin: 10, border: "1px solid #f85a3e", cursor: "pointer", backgroundColor: inputColor, maxWidth: 174, maxHeight: 174}} onClick={() => {upload.click()}}>
 								<input hidden type="file" ref={(ref) => upload = ref} onChange={editHeaderImage} />
 								{imageInfo}
 							</div>
 						</Tooltip>
-						<div style={{flex: "3"}}>
+						<div style={{flex: "3", color: "white",}}>
 							<div style={{marginTop: "10px"}}/>
 							Name	
 							<TextField
@@ -1149,8 +1150,8 @@ const AppCreator = (props) => {
 						</div>
 					</div>
 					<Divider style={{marginBottom: "10px", marginTop: "30px", height: "1px", width: "100%", backgroundColor: "grey"}}/>
-					<h3 style={{marginBottom: "10px"}}>API information</h3>
+					<h3 style={{marginBottom: "10px", color: "white",}}>API information</h3>
-					Base URL - leave empty if user changeable
+					<span style={{color: "white"}}>Base URL - leave empty if user changeable</span>
 					<TextField
 						color="primary"
 						style={{backgroundColor: inputColor, marginTop: "5px"}}
@@ -1176,7 +1177,7 @@ const AppCreator = (props) => {
 						onChange={e => setBaseUrl(e.target.value)}
 					/>
 					<FormControl style={{marginTop: "15px",}} variant="outlined">
-						<h5 style={{marginBottom: "10px"}}>Authentication</h5>
+						<h5 style={{marginBottom: "10px", color: "white",}}>Authentication</h5>
 						<Select
 							fullWidth
 							onChange={(e) => {
@@ -1213,12 +1214,8 @@ const AppCreator = (props) => {
 
 	const loadedCheck = isLoaded && isAppLoaded && !firstrequest ? 
 		<div>
-			<BrowserView>
+			<div style={bodyDivStyle}>{landingpageDataBrowser}</div>
-				<div style={bodyDivStyle}>{landingpageDataBrowser}</div>
+			{newActionModal} 
-				{newActionModal} 
-			</BrowserView>
-			<MobileView>
-			</MobileView>
 		</div>
 		:
 		<div>

frontend/src/Apps.js

@@ -79,6 +79,7 @@ const Apps = (props) => {
 		color: "#ffffff",
 		width: "100%",
 		display: "flex",
+		margin: 20, 
 	}
 
 	const paperAppStyle = {
@@ -248,9 +249,11 @@ const Apps = (props) => {
 					</Grid>
 				</Grid>
 				<Grid container style={{margin: "10px 10px 10px 10px", flex: "1"}} onClick={() => {downloadApp(data)}}>
+					{/*
 					<Tooltip title={"Download"} style={{marginTop: "28px", width: "100%"}} aria-label={data.name}>
 						<CloudDownload /> 
 					</Tooltip>
+					*/}
 				</Grid>
 			</Paper>
 		)
@@ -321,7 +324,6 @@ const Apps = (props) => {
 			
 				<div style={{marginTop: 15, marginBottom: 15}}>
 					<b>Actions</b>
-					{selectedAction.label}
 					<Select
 						fullWidth
 						value={selectedAction}
@@ -438,15 +440,15 @@ const Apps = (props) => {
 	}
 
 	const appView = isLoggedIn ? 
-		<div style={{width: 1366, margin: "auto"}}>
+		<div style={{maxWidth: 1366, margin: "auto",}}>
 			<div style={appViewStyle}>	
-				<div style={{flex: "1", marginLeft: "10px", marginRight: "10px"}}>
+				<div style={{flex: "1", marginLeft: 10, marginRight: 10}}>
 					<h2>Upload</h2>
 					<div style={{marginTop: 20}}/>
 					<UploadView />
 				</div>
 				<Divider style={{marginBottom: "10px", marginTop: "10px", height: "100%", width: "1px", backgroundColor: dividerColor}}/>
-				<div style={{flex: 1, marginLeft: "10px", marginRight: "10px"}}>
+				<div style={{flex: 1, marginLeft: 10, marginRight: 10}}>
 					<div style={{display: "flex"}}>
 						<div style={{flex: 10}}>
 							<h2>Available integrations</h2> 
@@ -499,7 +501,7 @@ const Apps = (props) => {
 					<div style={{marginTop: 15}}>
 						{apps.length > 0 ? 
 							filteredApps.length > 0 ? 
-								<div style={{maxHeight: "80vh", overflowY: "scroll"}}>
+								<div style={{maxHeight: "78vh", overflowY: "scroll"}}>
 									{filteredApps.map(app => {
 										return (
 											appPaper(app)

frontend/src/Docs.js

@@ -10,9 +10,9 @@ import MenuItem from '@material-ui/core/MenuItem';
 import {Link} from 'react-router-dom';
 
 const Body = {
-  	maxWidth: '1000px',
+  maxWidth: '1000px',
-  	minWidth: '768px',
+  minWidth: '768px',
-  	margin: 'auto',
+  margin: 'auto',
 	display: "flex",
 	heigth: "100%",
 	color: "white",
@@ -52,7 +52,7 @@ const Docs = (props) => {
 		if (firstrequest) {
 			setFirstrequest(false)
 			fetchDocList()
-			fetchDocs()
+			fetchDocs(props.match.params.key)
 			return
 		}
 
@@ -142,8 +142,8 @@ const Docs = (props) => {
 		.catch(error => {});
 	}
 
-	const fetchDocs = () => {
+	const fetchDocs = (docId) => {
-		fetch(globalUrl+"/api/v1/docs/"+props.match.params.key, {
+		fetch(globalUrl+"/api/v1/docs/"+docId, {
     	  	method: 'GET',
 				headers: {
 					'Content-Type': 'application/json',
@@ -164,6 +164,8 @@ const Docs = (props) => {
 	const markdownStyle = {
 		color: "rgba(255, 255, 255, 0.65)", 
 		flex: "1",
+		maxWidth: 750,
+		overflow: "hidden",
 	}
 
 	function OuterLink(props) {
@@ -196,12 +198,12 @@ const Docs = (props) => {
 					</li>
 					{list.map(item => {
 						const path = "/docs/"+item
-						const newname = item.charAt(0).toUpperCase()+item.substring(1)
+						const newname = item.charAt(0).toUpperCase()+item.substring(1).split("_").join(" ")
 						return (
 							<li style={{marginTop: "10px"}}>
-								<a style={hrefStyle} href={path}>
+								<Link style={hrefStyle} to={path} onClick={() => {fetchDocs(item)}}>
 									<h2>{newname}</h2>
-								</a>
+								</Link>
 							</li>
 						)
 					})}
@@ -241,7 +243,7 @@ const Docs = (props) => {
 			>
 			{list.map(item => {
 				const path = "/docs/"+item
-				const newname = item.charAt(0).toUpperCase()+item.substring(1)
+				const newname = item.charAt(0).toUpperCase()+item.substring(1).split("_").join(" ")
 				return (
 					<MenuItem onClick={() => {window.location.pathname = path}}>{newname}</MenuItem>
 				)