Finished styling, faux checkboxes in interest of time

app/components/file-table-item.js

@@ -19,4 +19,8 @@ export default Component.extend({
   isSelected: computed('file.path', 'selectedFilePaths.[]', function() {
     return this.selectedFilePaths.includes(this.file.path);
   }),
+
+  checkboxClass: computed('isSelected', function() {
+    return this.isSelected ? 'on' : 'off';
+  }),
 });

app/components/file-table.js

@@ -11,8 +11,8 @@ export default Component.extend({
 
   selectAllStatus: computed('selectedFilePaths.[]', 'files.[]', function() {
     if (this.selectedFilePaths.length === this.files.length) {
-      return 'all';
+      return 'on';
-    } else return this.selectedFilePaths.length === 0 ? 'none' : 'some';
+    } else return this.selectedFilePaths.length === 0 ? 'off' : 'some';
   }),
 
   selectedFileDownloads: computed('selectedFilePaths.[]', 'files.@each.{status,path}', function() {

app/styles/app.css

@@ -2,6 +2,25 @@ body {
   font-family: sans-serif;
 }
 
+.faux-checkbox {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  background: white;
+  border: 2px solid #999;
+  border-radius: 2px;
+}
+
+.faux-checkbox.-on {
+  background: #428add;
+  border-color: #428add;
+}
+
+.faux-checkbox.-some {
+  background: #c2c2c2;
+  border-color: #c2c2c2;
+}
+
 .file-table-action {
   font-size: 1.25em;
   background: none;

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

@@ -1,5 +1,10 @@
 <td data-test-id="file-table-item-selected">
-  {{if isSelected "Selected"}}
+  <i
+    class="faux-checkbox -{{checkboxClass}}"
+    data-test-id="file-table-item-selected-icon"
+  >
+    &nbsp;
+  </i>
 </td>
 <td data-test-id="file-table-item-name">
   {{file.name}}

app/templates/components/file-table.hbs

@@ -24,11 +24,12 @@
     {{action "toggleSelectAll"}}
   >
     <i
-      class="file-table-select-status-{{selectAllStatus}}"
+      class="faux-checkbox -{{selectAllStatus}}"
       data-test-id="file-table-select-status-icon"
     >
       &nbsp;
     </i>
+
     Selected {{selectedFilePaths.length}}
   </button>
   <button

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

@@ -50,12 +50,12 @@ module('Integration | Component | file-table-item', function(hooks) {
     this.set('selectedFilePaths', []);
     await render(hbs`{{file-table-item file=file selectedFilePaths=selectedFilePaths}}`);
 
-    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Not selected by default');
+    assert.equal(find('[data-test-id=file-table-item-selected-icon]').classList.contains('-off'), true, 'Not selected by default');
 
     this.set('selectedFilePaths', [this.file.path]);
-    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), 'Selected', 'Not selected by default');
+    assert.equal(find('[data-test-id=file-table-item-selected-icon]').classList.contains('-on'), true, 'Not selected by default');
 
     this.set('selectedFilePaths', []);
-    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'No longer selected');
+    assert.equal(find('[data-test-id=file-table-item-selected-icon]').classList.contains('-off'), true, 'No longer selected');
   });
 });

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

@@ -38,15 +38,15 @@ module('Integration | Component | file-table', function(hooks) {
     this.set('files', [genericFile(), genericFile()]);
     await render(hbs`{{file-table files=files}}`);
     assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 0');
-    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Not selected by default');
+    assert.equal(find('[data-test-id=file-table-item]').classList.contains('is-selected'), false, 'Not selected by default');
 
     await click('[data-test-action=file-table-item-toggle]');
     assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 1');
-    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), 'Selected', 'Selected after click');
+    assert.equal(find('[data-test-id=file-table-item]').classList.contains('is-selected'), true, 'Selected after click');
 
     await click('[data-test-action=file-table-item-toggle]');
     assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 0');
-    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Unselected after second click');
+    assert.equal(find('[data-test-id=file-table-item]').classList.contains('is-selected'), false, 'Unselected after second click');
   });
 
   test('select all, with none selected', async function(assert) {
@@ -79,13 +79,13 @@ module('Integration | Component | file-table', function(hooks) {
     this.set('files', [genericFile(), genericFile()]);
     this.set('selectedFilePaths', [this.files[0].path]);
     await render(hbs`{{file-table files=files selectedFilePaths=selectedFilePaths}}`);
-    assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-some'), true, 'Shows SOME checkbox status icon');
+    assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('-some'), true, 'Shows SOME checkbox status icon');
 
     await click('[data-test-action=file-table-select-all]');
-    assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-all'), true, 'Shows ALL checkbox status icon');
+    assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('-on'), true, 'Shows ALL checkbox status icon');
 
     await click('[data-test-action=file-table-select-all]');
-    assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-none'), true, 'Shows NONE checkbox status icon');
+    assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('-off'), true, 'Shows NONE checkbox status icon');
   });
 
   test('it handles showing download device/path for selected available files', async function(assert) {