Merge pull request #166 from ConduitIO/james/tweakin

feat: dark/light consistency across mox components
ConduitIO · Nov 28, 2023 · 87c401f · 87c401f
2 parents 571f007 + b704a42
commit 87c401f
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 165 deletions.
diff --git a/.changeset/flat-shirts-battle.md b/.changeset/flat-shirts-battle.md
@@ -0,0 +1,5 @@
+---
+"mx-ui-components": minor
+---
+
+feat: dark/light consistency across mox components
diff --git a/addon/components/mox/article.hbs b/addon/components/mox/article.hbs
@@ -1,7 +1,7 @@
 <article
- class="w-full p-8 bg-white dark:bg-gray-800 rounded-lg border-solid border-2 border-white dark:border-gray-800 transition text-gray-700 dark:text-white shadow-lg shadow-gray-800/20"
+ class="w-full p-8 bg-white dark:bg-gray-800 rounded-lg border-solid border-2 border-white dark:border-gray-800 transition text-gray-700 dark:text-white drop-shadow shadow-gray-800/20"
  data-test-mox-article
  ...attributes
 >
  {{yield}}
-</article>
+</article>
diff --git a/addon/components/mox/card.hbs b/addon/components/mox/card.hbs
@@ -1,5 +1,5 @@
 <article
- class="w-full bg-white dark:bg-gray-800 rounded-lg border-solid border-2 border-white dark:border-gray-800 transition hover:border-cyan-500 focus-within:border-cyan-700 text-gray-700 dark:text-white shadow-lg shadow-gray-800/20"
+ class="w-full bg-white dark:bg-gray-800 rounded-lg border-solid border-2 border-white dark:border-gray-800 transition hover:border-cyan-500 focus-within:border-cyan-700 text-gray-700 dark:text-white drop-shadow"
  data-test-mox-card
  ...attributes
 >
@@ -8,16 +8,25 @@
  <Mox::Card::Main @route={{@route}} @model={{@model}} @onClick={{@onClick}}>
 
  {{#if (has-block "icon")}}
- <div class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white rounded p-3" data-test-mox-card-icon>
+ <div
+ class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white rounded p-3"
+ data-test-mox-card-icon
+ >
  {{yield to="icon"}}
  </div>
  {{/if}}
 
  <div class="overflow-hidden">
- <h3 class="text-xl font-semibold normal-case text-left overflow-hidden truncate flex gap-x-2 text-gray-800 dark:text-white items-center" data-test-mox-card-title>
+ <h3
+ class="text-xl font-semibold normal-case text-left overflow-hidden truncate flex gap-x-2 text-gray-800 dark:text-white items-center"
+ data-test-mox-card-title
+ >
  {{yield to="title"}}
  </h3>
- <p class="text-gray-500 dark:text-gray-300 text-xs truncate text-left" data-test-mox-card-subtitle>
+ <p
+ class="text-gray-500 dark:text-gray-300 text-xs truncate text-left"
+ data-test-mox-card-subtitle
+ >
  {{yield to="subtitle"}}
  </p>
  </div>
@@ -36,7 +45,6 @@
  </Mox::Card::Aside>
  {{/if}}
 
-
  {{#if (has-block "menu")}}
  <div
  class="flex items-center justify-center p-4 cursor-pointer h-full text-gray-500 dark:text-white"

diff --git a/addon/components/mox/input.hbs b/addon/components/mox/input.hbs
@@ -1,7 +1,7 @@
 {{#if @label}}
  <Mox::Label for={{@id}} @isRequired={{@isRequired}}>{{@label}}</Mox::Label>
 {{/if}}
-<div class="flex flex-col justify-center space-y-1 w-full">
+<div class="flex flex-col justify-center w-full space-y-1">
  <input
  id={{@id}}
  type="text"

diff --git a/addon/components/mox/link-button.hbs b/addon/components/mox/link-button.hbs
@@ -1,16 +1,20 @@
 {{#if @route}}
- <Mox::LinkTo @route={{@route}} @model={{@model}}
- class="mox-link-button cursor-pointer block w-fit rounded-md font-semibold px-4 py-2 text-gray-800 hover:text-gray-900 hover:bg-gray-300 dark:text-gray-300 transition duration-300"
- data-test-mox-link={{@route}} ...attributes>
+ <Mox::LinkTo
+ @route={{@route}}
+ @model={{@model}}
+ class="mox-link-button cursor-pointer block w-fit rounded-md font-semibold px-4 py-2 text-gray-800 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-300 transition duration-300"
+ data-test-mox-link={{@route}}
+ ...attributes
+ >
  {{yield}}
  </Mox::LinkTo>
 {{else}}
  <a
  href={{@externalUrl}}
  target="_blank"
- class="mox-link-button cursor-pointer block w-fit rounded-md font-semibold px-4 py-2 text-gray-800 hover:text-gray-900 hover:bg-gray-300 dark:text-gray-300 transition duration-300"
+ class="mox-link-button cursor-pointer block w-fit rounded-md font-semibold px-4 py-2 text-gray-800 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-300 transition duration-300"
  data-test-mox-link
  rel="noopener noreferrer"
  ...attributes
  >{{yield}}</a>
-{{/if}}
+{{/if}}
diff --git a/addon/components/mox/modal.hbs b/addon/components/mox/modal.hbs
@@ -1,5 +1,5 @@
 <div
- class="fixed z-10 inset-0 overflow-y-auto text-gray-700 dark:text-white shadow-lg shadow-gray-800/20"
+ class="fixed z-10 inset-0 overflow-y-auto text-gray-700 dark:text-white drop-shadow"
  data-test-modal
 >
  <div

diff --git a/addon/components/mox/section.hbs b/addon/components/mox/section.hbs
@@ -1,5 +1,5 @@
 <section
- class="w-full bg-white dark:bg-gray-800 rounded-lg border-solid border-2 border-white dark:border-gray-800 transition hover:border-cyan-500 focus-within:border-cyan-700 text-gray-700 dark:text-white shadow-lg p-8"
+ class="w-full bg-white dark:bg-gray-800 rounded-lg border border-transparent dark:border-gray-700 focus-within:border-cyan-700 text-gray-700 dark:text-white drop-shadow p-8"
  ...attributes
 >
 

diff --git a/addon/components/mox/select.hbs b/addon/components/mox/select.hbs
@@ -36,7 +36,7 @@
  </button>
  {{#if this.isShowingOptions}}
  <div
- class="absolute mt-1 min-w-min w-full rounded-md bg-gray-50 dark:bg-gray-800 shadow-lg z-10"
+ class="absolute mt-1 min-w-min w-full rounded-md bg-gray-50 dark:bg-gray-800 drop-shadow z-10"
  {{on-click-outside (fn (mut this.isShowingOptions) false) "document" capture=true}}
  >
  <ul
@@ -65,4 +65,4 @@
  {{/if}}
  </div>
  <Mox::FormError @error={{@error}} id={{concat @id "-error-message"}} data-test-mox-select-error />
-</div>
+</div>
diff --git a/addon/components/mox/theme-switch.hbs b/addon/components/mox/theme-switch.hbs
@@ -1,18 +1,20 @@
 <div class="mox-theme-switch" ...attributes>
- <div class="flex items-center space-x-2 relative {{if this.isChecked "text-gray-800"}}">
- {{!-- template-lint-disable require-input-label --}}
+ <div class="flex items-center space-x-2 relative {{if this.isChecked 'text-gray-800'}}">
+ {{! template-lint-disable require-input-label }}
  <input
  id={{this.fieldId}}
  aria-label={{this.label}}
  type="checkbox"
- class="transform appearance-none outline-none
- flex items-center rounded-full p-1 cursor-pointer transition"
+ class="flex items-center w-10 h-6 p-1 transition transform bg-gray-200 border-none rounded-full outline-none appearance-none cursor-pointer checked:bg-none after:h-[18px] after:w-[18px] after:absolute after:left-[3px] after:right-auto after:block after:rounded-2xl after:outline-none after:translate-x-0 after:transition-transform after:ease-in-out after:bg-white checked:bg-gray-600 checked:text-gray-600 focus:outline focus:outline-2 focus:outline-cyan-500 focus:shadow-none focus:outline-offset-0 after:top-[3px] checked:after:translate-x-[15px] checked:after:bg-gray-800 checked:transition checked:after:transition"
  checked={{this.isChecked}}
- {{on 'change' (fn this.switchTheme this.otherTheme)}}
+ {{on "change" (fn this.switchTheme this.otherTheme)}}
  data-test-mox-theme-switch
  />
- {{!-- template-lint-disable require-input-label --}}
- <div class="mox-theme-switch-icon pointer-events-none {{if this.isChecked "is-checked"}}">
+ {{! template-lint-disable require-input-label }}
+ <div
+ class="mox-theme-switch-icon pointer-events-none absolute top-1 -left-1 right-auto block outline-none translate-x-0 transition-transform ease-in-out
+ {{if this.isChecked 'translate-x-[15px]'}}"
+ >
  {{#if (eq this.currentTheme "dark")}}
  <div class="text-white" data-test-mox-theme-switch-current="dark">
  {{yield to="dark-icon"}}

diff --git a/addon/components/mox/toggle.hbs b/addon/components/mox/toggle.hbs
@@ -7,6 +7,7 @@
  checked={{this.isChecked}}
  {{on "change" this.toggleAction}}
  data-test-mox-toggle
+ disabled={{@isDisabled}}
  />
  {{#if @label}}
  <label
@@ -18,4 +19,4 @@
  </label>
  {{/if}}
  </div>
-</div>
+</div>
diff --git a/addon/components/mxa/select.hbs b/addon/components/mxa/select.hbs
@@ -6,22 +6,23 @@
  aria-expanded="true"
  aria-labelledby="listbox-label"
  class="relative w-full
- {{if @isDisabled 'bg-gray-100 border-gray-100 text-gray-500' 'bg-white border-gray-300 focus:border-purple-600 focus:ring-purple-600 focus:ring-1'}}
- border rounded shadow-sm pl-3 pr-10 py-2 text-left cursor-default
- focus:outline-none sm:text-sm"
+ {{if
+ @isDisabled
+ 'bg-gray-100 border-gray-100 text-gray-500'
+ 'bg-white border-gray-300 focus:border-purple-600 focus:ring-purple-600 focus:ring-1'
+ }}
+ border rounded shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none sm:text-sm"
  data-test-select-button
  ...attributes
- {{on 'click' this.toggleOptions}}
+ {{on "click" this.toggleOptions}}
  >
  <span class="flex items-center">
  <span class="ml-1 block truncate" data-test-select-display-selected>
  {{this.selectedOptionName}}
  </span>
  </span>
- <span
- class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
- >
- {{!-- Heroicon name: selector --}}
+ <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+ {{! Heroicon name: selector }}
  <svg
  class="h-5 w-5 text-gray-400"
  xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +38,7 @@
  </svg>
  </span>
  </button>
- {{!--
+ {{!
  Select popover, show/hide based on select state.
 
  Entering: ""
@@ -46,15 +47,11 @@
  Leaving: "transition ease-in duration-100"
  From: "opacity-100"
  To: "opacity-0"
- --}}
+ }}
  {{#if this.isShowingOptions}}
  <div
- class="absolute mt-1 min-w-min w-full rounded-md bg-white shadow-lg z-10"
- {{on-click-outside
- (fn (mut this.isShowingOptions) false)
- 'document'
- capture=true
- }}
+ class="absolute mt-1 min-w-min w-full rounded-md bg-white drop-shadow z-10"
+ {{on-click-outside (fn (mut this.isShowingOptions) false) "document" capture=true}}
  >
  <ul
  tabindex="0"
@@ -76,11 +73,11 @@
  />
  {{/each}}
  {{/if}}
- {{!--
+ {{!
  Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
  Highlighted: "text-white bg-indigo-600", Not Highlighted: "text-gray-900"
- --}}
+ }}
  </ul>
  </div>
  {{/if}}

diff --git a/addon/components/mxa/tags-input.hbs b/addon/components/mxa/tags-input.hbs
@@ -20,15 +20,15 @@
  data-test-tags-selected={{tag}}
  >
  <span class="mr-1">{{tag}}</span>
- {{!-- template-lint-disable no-invalid-interactive --}}
+ {{! template-lint-disable no-invalid-interactive }}
  <svg
  class="text-slate-100 fill-current h-3 w-3 pt-0.5"
  {{on "click" (fn this.removeTag tag)}}
  data-test-tags-remove-button
  >
  <use xlink:href={{root-url "/svg-defs.svg#close-16"}}></use>
  </svg>
- {{!-- template-lint-enable no-invalid-interactive --}}
+ {{! template-lint-enable no-invalid-interactive }}
  </div>
  {{/each}}
  </div>
@@ -45,7 +45,7 @@
  </div>
 
  {{#if this.foundTags}}
- <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg z-10">
+ <div class="absolute mt-1 w-full rounded-md bg-white drop-shadow z-10">
  <ul
  tabindex="0"
  role="listbox"