fix: selected item colors

histoire-dev · Mar 10, 2022 · c99eea0 · c99eea0
1 parent cba01f1
commit c99eea0
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/packages/histoire/src/client/app/components/story/StoryVariantSingleView.vue b/packages/histoire/src/client/app/components/story/StoryVariantSingleView.vue
@@ -92,10 +92,12 @@ const settings = usePreviewSettings()
  <button
  v-for="(preset, index) in histoireConfig.responsivePresets"
  :key="index"
- class="htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700 htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-gap-4"
- :class="{
- 'htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black': settings.responsiveWidth === preset.width && settings.responsiveHeight === preset.height,
- }"
+ class="htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-gap-4"
+ :class="[
+ settings.responsiveWidth === preset.width && settings.responsiveHeight === preset.height
+ ? 'htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black'
+ : 'htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700',
+ ]"
  @click="settings.responsiveWidth = preset.width;settings.responsiveHeight = preset.height;hide()"
  >
  {{ preset.label }}
@@ -140,10 +142,12 @@ const settings = usePreviewSettings()
  <button
  v-for="(option, index) in histoireConfig.backgroundPresets"
  :key="index"
- class="htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700 htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-gap-4"
- :class="{
- 'htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black': settings.backgroundColor === option.color,
- }"
+ class="htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-gap-4"
+ :class="[
+ settings.backgroundColor === option.color
+ ? 'htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black'
+ : 'htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700',
+ ]"
  @click="settings.backgroundColor = option.color;hide()"
  >
  <span class="htw-mr-auto">{{ option.label }}</span>