fix(mox): fix layout + alignment of mox:input + mox:theme-switch comp

ConduitIO · Jul 26, 2023 · b5e7078 · b5e7078
1 parent 7903d9a
commit b5e7078
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
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">
+<div class="flex flex-col justify-center space-y-1 w-full">
   <input
     id={{@id}}
     type="text"

diff --git a/addon/styles/mx-ui-components.css b/addon/styles/mx-ui-components.css
@@ -87,7 +87,6 @@
 .mox-theme-switch input:checked::after,
 .mox-theme-switch-icon.is-checked {
   transform: translateX(15px);
-  background-color: #fff;
 }
 
 .mox-theme-switch input:checked::after {

diff --git a/stories/mox-input-light.stories.js b/stories/mox-input-light.stories.js
@@ -22,19 +22,21 @@ export default {
 
 const Template = (args) => ({
   template: hbs`
+  <div class="w-48">
   <Mox::Input
     @value={{this.value}} @onInput={{this.inputAction}}
     @placeholder={{this.placeholder}} @label={{this.label}}
     disabled={{this.isDisabled}} @isRequired={{this.isRequired}}
     readonly={{this.readOnly}}
     @isValid={{this.isValid}} @error={{this.error}} />
+  </div>
   `,
   context: args,
 });
 
 const TemplateStackedFormFields = (args) => ({
   template: hbs`
-  <div class="flex flex-col">
+  <div class="flex flex-col w-48">
     <Mox::Input
       @value={{this.value}} @onInput={{this.inputAction}}
       @placeholder={{this.placeholder}} @label={{this.label}}

diff --git a/stories/mox-input.stories.js b/stories/mox-input.stories.js
@@ -12,7 +12,7 @@ export default {
 
 const Template = (args) => ({
   template: hbs`
-  <div class="dark">
+  <div class="dark w-48">
   <Mox::Input
     @value={{this.value}} @onInput={{this.inputAction}}
     @placeholder={{this.placeholder}} @label={{this.label}}
@@ -25,7 +25,7 @@ const Template = (args) => ({
 
 const TemplateStackedFormFields = (args) => ({
   template: hbs`
-  <div class="dark flex flex-col">
+  <div class="dark flex flex-col w-48">
     <Mox::Input
       @value={{this.value}} @onInput={{this.inputAction}}
       @placeholder={{this.placeholder}} @label={{this.label}}