Merge pull request #168 from ConduitIO/james/light-mode-drift

fix: light mode theming for tables
ConduitIO · Feb 9, 2024 · 2c71cc9 · 2c71cc9
2 parents a3300e9 + da7ab48
commit 2c71cc9
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 30 deletions.
diff --git a/.changeset/polite-pets-switch.md b/.changeset/polite-pets-switch.md
@@ -0,0 +1,5 @@
+---
+"mx-ui-components": patch
+---
+
+fix: light mode theming for tables
diff --git a/addon/components/mox/list/header.hbs b/addon/components/mox/list/header.hbs
@@ -1,5 +1,7 @@
 <thead data-test-mox-list-header ...attributes>
-  <tr class="border-b border-gray-700 text-gray-300 align-middle">
+  <tr
+    class="border-b border-gray-300 dark:border-gray-500 text-gray-800 dark:text-gray-300 align-middle"
+  >
     {{yield}}
   </tr>
 </thead>
diff --git a/addon/components/mox/list/item.hbs b/addon/components/mox/list/item.hbs
@@ -7,7 +7,11 @@
     >
       <div
         class="inline-block mt-auto py-0.5
-          {{if @isActive 'text-white font-semibold' 'text-gray-300 font-medium'}}"
+          {{if
+            @isActive
+            'text-white font-semibold'
+            'text-gray-800 dark:text-gray-300 font-medium'
+          }}"
         data-test-mox-list-header-item-label
       >
         {{yield}}
@@ -45,7 +49,7 @@
         </div>
       </td>
     {{else}}
-      <td class="p-4 text-white" data-test-mox-list-item ...attributes>
+      <td class="p-4 text-gray-800 dark:text-gray-300" data-test-mox-list-item ...attributes>
         <div class="font-medium text-sm" data-test-mox-list-item-content>
           {{yield}}
         </div>

diff --git a/addon/components/mox/list/row.hbs b/addon/components/mox/list/row.hbs
@@ -1,3 +1,7 @@
-<tr class="border-b border-gray-800 text-white" data-test-mox-list-row ...attributes>
+<tr
+  class="border-b border-gray-300 dark:border-gray-500 text-gray-800 dark:text-white"
+  data-test-mox-list-row
+  ...attributes
+>
   {{yield}}
 </tr>
diff --git a/tests/integration/components/mox/list-test.js b/tests/integration/components/mox/list-test.js
@@ -26,7 +26,7 @@ module('Integration | Component | mox/list', function (hooks) {
 
   test('it is accessible (dark background)', async function (assert) {
     await render(hbs`
-      <div class="bg-gray-900">
+      <div class="bg-gray-900 dark">
         <Mox::List>
           <:header>
             <Mox::List::Item @isHeader={{true}}>

diff --git a/tests/integration/components/mox/list/header-test.js b/tests/integration/components/mox/list/header-test.js
@@ -20,7 +20,7 @@ module('Integration | Component | mox/list/header', function (hooks) {
 
   test('it is accessible (dark background)', async function (assert) {
     await render(hbs`
-      <div class="bg-gray-900">
+      <div class="bg-gray-900 dark">
         <Mox::List::Header>
           header item
         </Mox::List::Header>

diff --git a/tests/integration/components/mox/list/item-test.js b/tests/integration/components/mox/list/item-test.js
@@ -18,7 +18,12 @@ module('Integration | Component | mox/list/item', function (hooks) {
         .dom(
           '[data-test-mox-list-header-item] [data-test-mox-list-header-item-label]'
         )
-        .hasClass('text-gray-300');
+        .hasClass('text-gray-800');
+      assert
+        .dom(
+          '[data-test-mox-list-header-item] [data-test-mox-list-header-item-label]'
+        )
+        .hasClass('dark:text-gray-300');
       assert.dom('[data-test-mox-list-header-sort-asc]').doesNotExist();
       assert.dom('[data-test-mox-list-header-sort-desc]').doesNotExist();
     });

diff --git a/tests/integration/components/mox/list/row-test.js b/tests/integration/components/mox/list/row-test.js
@@ -20,7 +20,7 @@ module('Integration | Component | mox/list/row', function (hooks) {
 
   test('it is accessible (dark background)', async function (assert) {
     await render(hbs`
-      <div class="bg-gray-900">
+      <div class="bg-gray-900 dark">
         <Mox::List::Row>
           list row
         </Mox::List::Row>

diff --git a/tests/integration/components/mox/toggle-test.js b/tests/integration/components/mox/toggle-test.js
@@ -69,6 +69,7 @@ module('Integration | Component | mox/toggle', function (hooks) {
       await render(
         hbs`<div class="dark bg-gray-900"><Mox::Toggle @toggleAction={{this.toggleAction}} @label={{this.label}} /></div>`
       );
+
       assert.dom('[data-test-mox-toggle]').hasClass('dark:bg-gray-400');
       assert.dom('[data-test-mox-toggle]').hasStyle({
         color: 'rgb(37, 99, 235)',
@@ -82,19 +83,12 @@ module('Integration | Component | mox/toggle', function (hooks) {
 
     test('it renders correctly (on)', async function (assert) {
       await render(
-        hbs`<div class="dark bg-gray-900"><Mox::Toggle @toggleAction={{this.toggleAction}} @label={{this.label}} /></div>`
-      );
-
-      let toggle = find('[data-test-mox-toggle]');
-      await click(toggle);
-      await waitUntil(
-        () => getComputedStyle(toggle).backgroundColor === 'rgb(6, 182, 212)'
+        hbs`<div class="dark bg-gray-900"><Mox::Toggle @toggleAction={{this.toggleAction}} @label={{this.label}} @isChecked={{true}} /></div>`
       );
 
-      assert.dom(toggle).hasClass('dark:checked:bg-cyan-500');
-      assert.dom(toggle).hasStyle({
+      assert.dom('[data-test-mox-toggle]').hasClass('dark:checked:bg-cyan-500');
+      assert.dom('[data-test-mox-toggle]').hasStyle({
         color: 'rgb(6, 182, 212)',
-        borderColor: 'rgb(6, 182, 212)',
         backgroundColor: 'rgb(6, 182, 212)',
       });
       assert.dom('[data-test-mox-toggle-label]').hasStyle({
@@ -155,20 +149,13 @@ module('Integration | Component | mox/toggle', function (hooks) {
 
     test('it renders correctly (on)', async function (assert) {
       await render(
-        hbs`<div class="bg-gray-50"><Mox::Toggle @toggleAction={{this.toggleAction}} @label={{this.label}} /></div>`
+        hbs`<div class="bg-gray-50"><Mox::Toggle @toggleAction={{this.toggleAction}} @label={{this.label}} @isChecked={{false}} /></div>`
       );
 
-      let toggle = find('[data-test-mox-toggle]');
-      await click(toggle);
-      await waitUntil(
-        () => getComputedStyle(toggle).backgroundColor === 'rgb(16, 185, 129)'
-      );
-
-      assert.dom(toggle).hasClass('dark:checked:bg-cyan-500');
-      assert.dom(toggle).hasStyle({
-        color: 'rgb(16, 185, 129)',
-        borderColor: 'rgba(209, 213, 219, 0)',
-        backgroundColor: 'rgb(16, 185, 129)',
+      assert.dom('[data-test-mox-toggle]').hasClass('dark:checked:bg-cyan-500');
+      assert.dom('[data-test-mox-toggle]').hasStyle({
+        backgroundColor: 'rgb(209, 213, 219)',
+        color: 'rgb(37, 99, 235)',
       });
       assert.dom('[data-test-mox-toggle-label]').hasStyle({
         color: 'rgb(55, 65, 81)',