button styling

2 files changed, 105 insertions, 63 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index a1960a8..0387246 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -27,6 +27,10 @@ import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
 import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded';
 import { mdiCursorDefault } from '@mdi/js';
 
+import CodeRoundedIcon from '@material-ui/icons/CodeRounded';
+import GetAppRoundedIcon from '@material-ui/icons/GetAppRounded';
+import VideoLabelRoundedIcon from '@material-ui/icons/VideoLabelRounded';
+
 var keyframeInAnimations: { [key: string]: { x: number; y: number; }; } = {};
 var slideAPIs: { [key: string]: any; }[] = [];
 
@@ -670,69 +674,80 @@ export default function Index() {
 				</Toolbar>
 			</AppBar>
 			<div className='settings'>
-				<input
-					type='file'
-					id='vidUpload'
-					accept='video/*'
-					className='dispnone'
-					onChange={event => {
-						var file = event.target.files[0];
-						if (!file) return;
-						var reader = new FileReader();
-						reader.addEventListener('load', ev => {
-							player.loadVideo(ev.target.result as string);
-
-							player.player.addEventListener('play', () => setPlaying(true));
-							player.player.addEventListener('pause', () => setPlaying(false));
-						});
-						reader.readAsDataURL(file);
-					}}
-				/>
-				<Button
-					variant='contained'
-					color='default'
-					children='Load video'
-					onClick={() => document.getElementById('vidUpload').click()}
-				/>
-				<input
-					type='file'
-					id='jsonUpload'
-					accept='application/json'
-					className='dispnone'
-					onChange={event => {
-						var file = event.target.files[0];
-						if (!file) return;
-						var reader = new FileReader();
-						reader.addEventListener('load', ev => {
-							player.loadSlides(ev.target.result as string);
-							setWorkingTimeline(player.timeline.slides);
-							rerender();
-						});
-						reader.readAsText(file);
-					}}
-				/>
-				<Button
-					variant='contained'
-					color='default'
-					children='Load json'
-					onClick={() => document.getElementById('jsonUpload').click()}
-				/>
-				<Button
-					variant='contained'
-					color='default'
-					children='Download json'
-					onClick={() => {
-						var timeline = Object({ ...(player.timeline) });
-						var data = JSON.stringify(timeline);
-						var blob = new Blob([data], { type: 'application/json' });
-						var a = document.createElement('a');
-						a.href = URL.createObjectURL(blob);
-						a.download = player.timeline.name
-							.toLowerCase()
-							.replace(/\s/g, '-');
-						a.click();
-					}}
-				/>
+				<div className='inner posrel'>
+					<h2 className='title posabs h0 t0'>Presentation settings</h2>
+					<div className='scroll posabs h0 b0'>
+						<div className='section'>
+							<span className='title'>Cool temporary buttons</span>
+							<input
+								type='file'
+								id='vidUpload'
+								accept='video/*'
+								className='dispnone'
+								onChange={event => {
+									var file = event.target.files[0];
+									if (!file) return;
+									var reader = new FileReader();
+									reader.addEventListener('load', ev => {
+										player.loadVideo(ev.target.result as string);
+
+										player.player.addEventListener('play', () => setPlaying(true));
+										player.player.addEventListener('pause', () => setPlaying(false));
+									});
+									reader.readAsDataURL(file);
+								}}
+							/>
+							<Button
+								variant='contained'
+								color='default'
+								children='Load video'
+								onClick={() => document.getElementById('vidUpload').click()}
+								startIcon={<VideoLabelRoundedIcon />}
+							/>
+							<input
+								type='file'
+								id='jsonUpload'
+								accept='application/json'
+								className='dispnone'
+								onChange={event => {
+									var file = event.target.files[0];
+									if (!file) return;
+									var reader = new FileReader();
+									reader.addEventListener('load', ev => {
+										player.loadSlides(ev.target.result as string);
+										setWorkingTimeline(player.timeline.slides);
+										rerender();
+									});
+									reader.readAsText(file);
+								}}
+							/>
+							<Button
+								variant='contained'
+								color='default'
+								children='Load json'
+								onClick={() => document.getElementById('jsonUpload').click()}
+								startIcon={<CodeRoundedIcon />}
+							/>
+							<Button
+								variant='contained'
+								color='default'
+								children='Download json'
+								onClick={() => {
+									var timeline = Object({ ...(player.timeline) });
+									var data = JSON.stringify(timeline);
+									var blob = new Blob([data], { type: 'application/json' });
+									var a = document.createElement('a');
+									a.href = URL.createObjectURL(blob);
+									a.download = player.timeline.name
+										.toLowerCase()
+										.replace(/\s/g, '-');
+									a.click();
+								}}
+								startIcon={<GetAppRoundedIcon />}
+							/>
+						</div>
+					</div>
+				</div>
 			</div>
 			<div className='viewer'>
 				<div className='player posrel'>
diff --git a/styles/editor.css b/styles/editor.css
index 881f82c..210ffbc 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -22,6 +22,33 @@
 	background-color: var(--c400);
 }
 
+.appGrid .settings .inner {
+	margin: 16px;
+}
+
+.settings .inner .title {
+	font-size: 1em;
+	font-weight: 500;
+	color: var(--mint);
+}
+
+.settings .inner .section {
+	margin-top: 16px;
+}
+
+.settings .inner .section .title {
+	color: var(--c800);
+	display: block;
+}
+
+.settings .inner .section > * { margin-bottom: 8px; }
+.settings .inner .scroll { top: 32px; }
+.settings .inner button {
+	width: 100%;
+	background-color: var(--piss);
+	color: var(--bg);
+}
+
 .appGrid .viewer {
 	grid-column: 2;
 	grid-row: 2;