move About window styling into a CSS file

.gitattributes

@@ -7,6 +7,7 @@
 # File types which we know are binary
 
 # Prefer LF for most file types
+*.css text eol=lf
 *.htm text eol=lf
 *.html text eol=lf
 *.js text eol=lf

src/renderer/about.css

@@ -0,0 +1,26 @@
+html, body {
+    color: white;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: bolder;
+}
+
+.aboutBox {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.aboutLogo {
+    max-width: 10rem;
+    max-height: 10rem;
+}
+
+.aboutText {
+    margin: 1.5rem;
+}
+
+.aboutDetails {
+    font-size: x-small;
+}

src/renderer/about.jsx

@@ -3,33 +3,20 @@ import ReactDOM from 'react-dom';
 import {productName, version} from '../../package.json';
 
 import logo from '../icon/ScratchDesktop.svg';
+import styles from './about.css';
 
 // TODO: localization?
 const AboutElement = () => (
-    <div
+    <div className={styles.aboutBox}>
-        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={{
+            className={styles.aboutLogo}
-                maxWidth: '10rem',
-                maxHeight: '10rem'
-            }}
         /></div>
-        <div style={{margin: '1.5rem'}}>
+        <div className={styles.aboutText}>
             <h2>{productName}</h2>
             <div>Version {version}</div>
-            <table style={{fontSize: 'x-small'}}>
+            <table className={styles.aboutDetails}>
                 {
                     ['Electron', 'Chrome'].map(component => {
                         const componentVersion = process.versions[component.toLowerCase()];