style and positioning improvements

Author: ShMcK

web-app/src/components/Workspace/index.tsx

@@ -5,8 +5,8 @@ interface Props {
 }
 
 const resize = () => ({
-	width: window.innerWidth - 20,
-	height: window.innerHeight - 20,
+	width: window.innerWidth,
+	height: window.innerHeight,
 })
 
 const Workspace = ({ children }: Props) => {
@@ -20,6 +20,7 @@ const Workspace = ({ children }: Props) => {
 	const styles = {
 		page: {
 			display: 'flex' as 'flex',
+			position: 'relative' as 'relative',
 			margin: 0,
 			backgroundColor: 'white',
 		},

web-app/src/containers/Tutorial/LevelPage/Level.tsx

@@ -9,10 +9,13 @@ import ProcessEvents from '../../../components/ProcessEvents'
 
 const styles = {
 	page: {
+		backgroundColor: 'white',
 		position: 'relative' as 'relative',
 		display: 'flex' as 'flex',
 		flexDirection: 'column' as 'column',
 		padding: 0,
+		paddingBottom: '36px',
+		height: 'auto',
 		width: '100%',
 	},
 	header: {
@@ -26,9 +29,6 @@ const styles = {
 		padding: '0rem 1rem',
 		paddingBottom: '1rem',
 	},
-	options: {
-		padding: '0rem 1rem',
-	},
 	tasks: {
 		paddingBottom: '5rem',
 	},
@@ -46,15 +46,20 @@ const styles = {
 		bottom: '36px',
 	},
 	footer: {
+		display: 'flex' as 'flex',
+		flexDirection: 'row' as 'row',
+		justifyContent: 'space-between',
+		alignItems: 'center',
 		height: '36px',
 		backgroundColor: 'black',
 		fontSize: '16px',
 		lineHeight: '16px',
 		padding: '10px 1rem',
-		position: 'absolute' as 'absolute',
+		position: 'fixed' as 'fixed',
 		bottom: 0,
+		left: 0,
+		right: 0,
 		color: 'white',
-		width: '100%',
 	},
 }
 
@@ -72,14 +77,12 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
 
 	return (
 		<div style={styles.page}>
-			<div>
-				<div style={styles.header}>
-					<span>Learn</span>
-				</div>
-				<div style={styles.content}>
-					<h2 style={styles.title}>{level.title}</h2>
-					<Markdown>{level.content || ''}</Markdown>
-				</div>
+			<div style={styles.header}>
+				<span>Learn</span>
+			</div>
+			<div style={styles.content}>
+				<h2 style={styles.title}>{level.title}</h2>
+				<Markdown>{level.content || ''}</Markdown>
 			</div>
 
 			<div style={styles.tasks}>
@@ -102,27 +105,24 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
 				</div>
 			</div>
 
-			<div>
-				{level.status === 'COMPLETE' && (
-					<div style={styles.options}>
-						<Button onClick={onContinue}>Continue</Button>
-					</div>
-				)}
-
-				{processes.length > 0 && (
-					<div style={styles.processes}>
-						<ProcessEvents processes={processes} />
-					</div>
-				)}
-
-				<div>
-					<div style={styles.footer}>
-						<span>
-							{typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
-							{level.title}
-						</span>
-					</div>
+			{processes.length > 0 && (
+				<div style={styles.processes}>
+					<ProcessEvents processes={processes} />
 				</div>
+			)}
+
+			<div style={styles.footer}>
+				<span>
+					{typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
+					{level.title}
+				</span>
+				<span>
+					{level.status === 'COMPLETE' && (
+						<Button type="primary" onClick={onContinue}>
+							Continue
+						</Button>
+					)}
+				</span>
 			</div>
 		</div>
 	)

web-app/src/styles/index.css

@@ -10,10 +10,12 @@ body {
 	height: 100%;
 	width: 100%;
 	margin: 0;
+	padding: 0;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
 		'Droid Sans', 'Helvetica Neue', sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	background-color: white;
 }
 
 code {

web-app/stories/Level.stories.tsx

@@ -94,31 +94,31 @@ storiesOf('Level', module)
 						commands: ['npm install'],
 						files: ['package.json'],
 					},
-					status: 'ACTIVE',
+					status: 'COMPLETE',
 				},
 				{
 					id: 'L1:S2',
 					content: 'Should support markdown test\n ```ts\nvar a = 1\n```\nwhew it works!',
 					setup: { commits: ['8a8a5cb'], commands: [], files: ['src/main.ts'] },
 					solution: { commits: ['c2f7973'], commands: [], files: ['src/main.ts'] },
-					status: 'INCOMPLETE',
+					status: 'COMPLETE',
 				},
 				{
 					id: 'L1:S3',
 					content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
 					setup: { commits: ['992bcb1'], commands: [], files: ['src/main.ts'] },
 					solution: { commits: ['1b92779'], commands: [], files: ['src/main.ts'] },
-					status: 'INCOMPLETE',
+					status: 'COMPLETE',
 				},
 				{
 					id: 'L1:S4',
 					content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
 					setup: { commits: ['be32adb'], commands: [], files: ['src/main.ts'] },
 					solution: { commits: ['7fe26cb'], commands: [], files: ['src/main.ts'] },
-					status: 'INCOMPLETE',
+					status: 'COMPLETE',
 				},
 			],
-			status: 'ACTIVE',
+			status: 'COMPLETE',
 		}
 		return (
 			<Level

web-app/stories/utils/SideBarDecorator.tsx

@@ -9,6 +9,7 @@ const styles = {
 		borderRight: '2px solid black',
 		width: '50rem',
 		height: window.innerHeight,
+		backgroundColor: 'yellow',
 	},
 }