From 9746fc1dee1c209fdf9381ae6e13eba1d445d2a1 Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <cwillisf@media.mit.edu>
Date: Sun, 28 Jul 2019 17:32:14 -0700
Subject: [PATCH] add content to "about" window

---
 src/renderer/about.jsx | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/renderer/about.jsx b/src/renderer/about.jsx
index 1b66706..6abe151 100644
--- a/src/renderer/about.jsx
+++ b/src/renderer/about.jsx
@@ -1,8 +1,42 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {author, productName, version} from '../../package.json';
 
+import logo from '../icon/ScratchDesktop.svg';
+
+// TODO: localization?
 const AboutElement = () => (
-    <h1>About</h1>
+    <div
+        style={{
+            color: 'white',
+            fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontWeight: 'bolder',
+            margin: 0,
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)'
+        }}
+    >
+        <div><img
+            alt={`${productName} icon`}
+            src={logo}
+            style={{
+                maxWidth: '10rem',
+                maxHeight: '10rem'
+            }}
+        /></div>
+        <h2>{productName}</h2>
+        <div>Version {version}</div>
+        <table style={{fontSize: 'x-small'}}>
+            {
+                ['Electron', 'Chrome'].map(component => {
+                    const componentVersion = process.versions[component.toLowerCase()];
+                    return <tr key={component}><td>{component}</td><td>{componentVersion}</td></tr>;
+                })
+            }
+        </table>
+    </div>
 );
 
 const appTarget = document.getElementById('app');