Use css prop

modules/client/autoIndex/App.js

@@ -3,29 +3,6 @@ import PropTypes from 'prop-types';
 
 import DirectoryListing from './DirectoryListing';
 
-const styles = {
-  wrapper: {
-    maxWidth: 900,
-    margin: '0 auto'
-  },
-  header: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
-  versionSelector: {
-    float: 'right',
-    lineHeight: '2.25em'
-  },
-  versionDropdown: {
-    fontSize: '1em'
-  },
-  address: {
-    textAlign: 'right'
-  }
-};
-
 export default class App extends React.Component {
   static defaultProps = {
     availableVersions: []
@@ -40,20 +17,27 @@ export default class App extends React.Component {
 
   render() {
     return (
-      <div style={styles.wrapper}>
-        <header style={styles.header}>
+      <div css={{ maxWidth: 900, margin: '0 auto' }}>
+        <header
+          css={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          }}
+        >
           <h1>
             Index of /{this.props.packageName}@{this.props.packageVersion}
             {this.props.filename}
           </h1>
 
-          <div style={styles.versionSelector}>
+          <div css={{ float: 'right', lineHeight: '2.25em' }}>
             Version:{' '}
             <select
               id="version"
               defaultValue={this.props.packageVersion}
               onChange={this.handleChange}
-              style={styles.versionDropdown}
+              css={{ fontSize: '1em' }}
             >
               {this.props.availableVersions.map(v => (
                 <option key={v} value={v}>
@@ -74,7 +58,7 @@ export default class App extends React.Component {
 
         <hr />
 
-        <address style={styles.address}>
+        <address css={{ textAlign: 'right' }}>
           {this.props.packageName}@{this.props.packageVersion}
         </address>
       </div>

modules/client/autoIndex/DirectoryListing.js

@@ -25,20 +25,15 @@ function getRelativeName(base, name) {
 }
 
 const styles = {
-  table: {
-    width: '100%',
-    borderCollapse: 'collapse',
-    font: '0.85em Monaco, monospace'
-  },
-  evenRow: {
-    backgroundColor: '#eee'
-  },
   tableHead: {
     textAlign: 'left',
     padding: '0.5em 1em'
   },
   tableCell: {
     padding: '0.5em 1em'
+  },
+  evenRow: {
+    backgroundColor: '#eee'
   }
 };
 
@@ -48,14 +43,14 @@ export default function DirectoryListing({ filename, entry, entries }) {
   if (filename !== '/') {
     rows.push(
       <tr key="..">
-        <td style={styles.tableCell}>
+        <td css={styles.tableCell}>
           <a title="Parent directory" href="../">
             ..
           </a>
         </td>
-        <td style={styles.tableCell}>-</td>
-        <td style={styles.tableCell}>-</td>
-        <td style={styles.tableCell}>-</td>
+        <td css={styles.tableCell}>-</td>
+        <td css={styles.tableCell}>-</td>
+        <td css={styles.tableCell}>-</td>
       </tr>
     );
   }
@@ -71,14 +66,14 @@ export default function DirectoryListing({ filename, entry, entries }) {
 
       rows.push(
         <tr key={name}>
-          <td style={styles.tableCell}>
+          <td css={styles.tableCell}>
             <a title={relName} href={href}>
               {href}
             </a>
           </td>
-          <td style={styles.tableCell}>-</td>
-          <td style={styles.tableCell}>-</td>
-          <td style={styles.tableCell}>-</td>
+          <td css={styles.tableCell}>-</td>
+          <td css={styles.tableCell}>-</td>
+          <td css={styles.tableCell}>-</td>
         </tr>
       );
     });
@@ -91,27 +86,33 @@ export default function DirectoryListing({ filename, entry, entries }) {
 
       rows.push(
         <tr key={name}>
-          <td style={styles.tableCell}>
+          <td css={styles.tableCell}>
             <a title={relName} href={relName}>
               {relName}
             </a>
           </td>
-          <td style={styles.tableCell}>{contentType}</td>
-          <td style={styles.tableCell}>{formatBytes(size)}</td>
-          <td style={styles.tableCell}>{lastModified}</td>
+          <td css={styles.tableCell}>{contentType}</td>
+          <td css={styles.tableCell}>{formatBytes(size)}</td>
+          <td css={styles.tableCell}>{lastModified}</td>
         </tr>
       );
     });
 
   return (
     <div>
-      <table style={styles.table}>
+      <table
+        css={{
+          width: '100%',
+          borderCollapse: 'collapse',
+          font: '0.85em Monaco, monospace'
+        }}
+      >
         <thead>
           <tr>
-            <th style={styles.tableHead}>Name</th>
-            <th style={styles.tableHead}>Type</th>
-            <th style={styles.tableHead}>Size</th>
-            <th style={styles.tableHead}>Last Modified</th>
+            <th css={styles.tableHead}>Name</th>
+            <th css={styles.tableHead}>Type</th>
+            <th css={styles.tableHead}>Size</th>
+            <th css={styles.tableHead}>Last Modified</th>
           </tr>
         </thead>
         <tbody>