feat(mocks): update mocks addon styles to support dark mode

modernweb-dev · May 29, 2024 · f977f5c · f977f5c
1 parent 47a0748
commit f977f5c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/.changeset/plenty-llamas-cross.md b/.changeset/plenty-llamas-cross.md
@@ -0,0 +1,5 @@
+---
+'@web/mocks': patch
+---
+
+Update mocks addon styles to support dark mode
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mocks/storybook/addon/register-addon.js b/packages/mocks/storybook/addon/register-addon.js
@@ -18,16 +18,22 @@ export function registerAddon(addons, React, createAddon) {
     static styles = css`
       table {
         width: 100%;
+        margin-bottom: 10px;
         border-collapse: collapse;
       }
 
+      tr {
+        border-bottom: 1px solid hsla(203, 50%, 30%, 0.2);
+      }
+
       thead {
-        background-color: #f2f2f2;
+        background-color: hsla(203, 50%, 30%, 0.1);
       }
 
       tr th:first-child {
         width: 9ch;
       }
+
       tr th:nth-child(2) {
         width: 9ch;
       }
@@ -37,13 +43,14 @@ export function registerAddon(addons, React, createAddon) {
         text-align: left;
       }
 
-      tbody tr:nth-child(0) {
-        background-color: #e8e8e8;
-      }
-
       tbody td {
         padding: 10px;
-        border-top: 1px solid #ddd;
+      }
+
+      .message {
+        padding: 30px;
+        text-align: center;
+        font-weight: bold;
       }
     `;
 
@@ -67,11 +74,11 @@ export function registerAddon(addons, React, createAddon) {
 
     render() {
       if (this.state === 'PENDING') {
-        return html`Loading...`;
+        return html`<div class="message">Loading...</div>`;
       }
 
       if (!this.mocks.length) {
-        return html`No mocks configured.`;
+        return html`<div class="message">No mocks configured.</div>`;
       }
 
       return html`