Most of visual styling

app/components/file-table-item.js

@@ -6,6 +6,8 @@ const defaultSelectedFilePaths = [];
 
 export default Component.extend({
   tagName: 'tr',
+  classNames: ['file-table-item'],
+  classNameBindings: ['isSelected'],
   attributeBindings: ['data-test-id', 'data-test-action'],
 
   'data-test-id': 'file-table-item',

app/styles/app.css

@@ -0,0 +1,69 @@
+body {
+  font-family: sans-serif;
+}
+
+.file-table-action {
+  font-size: 1.25em;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: .5em;
+}
+
+.file-table {
+  width: 100%;
+  border: 1px solid #eee;
+  border-collapse: collapse;
+}
+
+.file-table-head tr {
+  border-bottom: 1px solid #eee;
+}
+
+.file-table-head th {
+  text-align: left;
+  font-weight: normal;
+  font-size: 1.1em;
+  padding: 1em 0 .5em;
+}
+
+.file-table-item:hover {
+  background: #eee;
+  cursor: pointer;
+}
+
+.file-table-item.is-selected {
+  background: #ddd;
+}
+
+
+.file-table-item:active {
+  background: #ccc;
+}
+
+.file-table-item > :first-child {
+  padding-left: .5em;
+}
+
+.file-table-item > :last-child {
+  padding-right: 3em;
+}
+
+.file-table-item td {
+  padding: .5em 0;
+}
+
+.file-table-item-status {
+  text-transform: capitalize;
+}
+
+.file-table-item-status-icon {
+  display: block;
+  width: 1em;
+  height: 1em;
+  border-radius: 100%;
+}
+
+.file-table-item-status-icon.-available {
+  background: #77ce2d;
+}

app/templates/components/file-table-item.hbs

@@ -12,12 +12,15 @@
 </td>
 <td>
   <i
-    class="file-table-item-status-{{file.status}}"
+    class="file-table-item-status-icon -{{file.status}}"
     data-test-id="file-table-status-icon"
   >
     &nbsp;
   </i>
 </td>
-<td data-test-id="file-table-item-status">
+<td
+  class="file-table-item-status"
+  data-test-id="file-table-item-status"
+>
   {{file.status}}
 </td>

app/templates/components/file-table.hbs

@@ -19,6 +19,7 @@
 
 <header data-test-id="file-table-action-bar">
   <button
+    class="file-table-action"
     data-test-action="file-table-select-all"
     {{action "toggleSelectAll"}}
   >
@@ -31,6 +32,7 @@
     Selected {{selectedFilePaths.length}}
   </button>
   <button
+    class="file-table-action"
     data-test-action="file-table-download-selected"
     {{action "downloadSelected"}}
   >
@@ -38,14 +40,19 @@
   </button>
 </header>
 
-<table>
-  <thead data-test-id="file-table-header">
-    <th>&nbsp;</th>
-    <th>Name</th>
-    <th>Device</th>
-    <th>Path</th>
-    <th>&nbsp;</th>
-    <th>Status</th>
+<table class="file-table">
+  <thead
+    class="file-table-head"
+    data-test-id="file-table-header"
+  >
+    <tr>
+      <th>&nbsp;</th>
+      <th>Name</th>
+      <th>Device</th>
+      <th>Path</th>
+      <th>&nbsp;</th>
+      <th>Status</th>
+    </tr>
   </thead>
   <tbody>
     {{#each files as | file |}}

tests/integration/components/file-table-item-test.js

@@ -38,11 +38,11 @@ module('Integration | Component | file-table-item', function(hooks) {
     await render(hbs`{{file-table-item file=file}}`);
 
     assert.equal(find('[data-test-id=file-table-item-status]').textContent.trim(), 'scheduled', 'Renders correct status text');
-    assert.equal(find('[data-test-id=file-table-status-icon]').classList.contains('file-table-item-status-scheduled'), true, 'Status icon has expected class');
+    assert.equal(find('[data-test-id=file-table-status-icon]').classList.contains('-scheduled'), true, 'Status icon has expected class');
 
     this.set('file', genericFile());
     assert.equal(find('[data-test-id=file-table-item-status]').textContent.trim(), 'available', 'Renders correct status text');
-    assert.equal(find('[data-test-id=file-table-status-icon]').classList.contains('file-table-item-status-available'), true, 'Status icon has expected class');
+    assert.equal(find('[data-test-id=file-table-status-icon]').classList.contains('-available'), true, 'Status icon has expected class');
   });
 
   test('it handles toggling selected status based on incoming selectedFilePaths', async function(assert) {