refactor: set jhlite class prefix for ThemeButton component."

jhipster · May 13, 2023 · f6ae430 · f6ae430
1 parent a358d5d
commit f6ae430
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/src/main/webapp/app/common/primary/header/Header.vue b/src/main/webapp/app/common/primary/header/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="jhlite-header">
-    <div class="jhlite-header--slot with-theme-switch">
+    <div class="jhlite-header--slot jhlite-with-theme-switch">
       <router-link class="jhlite-logo" to="/">
         <img class="jhlite-logo--icon" src="../../../../content/JHipster-Lite-neon-blue.png" alt="JHipster bow tie" width="48" />
         <span class="jhlite-logo--text">JHipster lite</span>
@@ -89,8 +89,8 @@
 
 <script lang="ts" src="./Header.component.ts"></script>
 
-<style>
-.with-theme-switch {
+<style lang="scss">
+.jhlite-with-theme-switch {
   display: flex;
   align-items: center;
   gap: 16px;

diff --git a/src/main/webapp/app/common/primary/theme-button/ThemeButton.vue b/src/main/webapp/app/common/primary/theme-button/ThemeButton.vue
@@ -1,36 +1,36 @@
 <template>
-  <div class="container">
+  <div class="jhlite-container">
     <input
       id="switch"
-      class="container_toggle"
+      class="jhlite-container_toggle"
       type="checkbox"
       name="mode"
       :checked="!isDarkTheme"
       data-selector="theme-switch-button"
       @change="toggleTheme"
     />
-    <label for="switch" class="theme-switch_label" :aria-label="theme">
+    <label for="switch" class="jhlite-theme-switch_label" :aria-label="theme">
       <span>🌙</span>
       <span>☀️</span>
-      <div class="theme-switch_toggle" :class="{ 'theme-switch_toggle-checked': theme === 'dark-theme' }"></div>
+      <div class="jhlite-theme-switch_toggle" :class="{ 'jhlite-theme-switch_toggle-checked': theme === 'dark-theme' }"></div>
     </label>
   </div>
 </template>
 
 <script lang="ts" src="./ThemeButton.component.ts"></script>
 
-<style>
-.container {
+<style lang="scss">
+.jhlite-container {
   display: flex;
 }
 
-.container_toggle {
+.jhlite-container_toggle {
   height: 0;
   width: 0;
   visibility: hidden;
 }
 
-.theme-switch_label {
+.jhlite-theme-switch_label {
   align-items: center;
   background: var(--jhlite-text-color-primary);
   border: calc(var(--jhlite-element-size) * 0.025) solid var(--jhlite-accent-color);
@@ -47,7 +47,7 @@
   z-index: 1;
 }
 
-.theme-switch_toggle {
+.jhlite-theme-switch_toggle {
   position: absolute;
   background-color: var(--jhlite-bg-color-primary);
   border-radius: 50%;
@@ -59,7 +59,7 @@
   transition: transform 0.3s ease, background-color 0.5s ease;
 }
 
-.theme-switch_toggle-checked {
+.jhlite-theme-switch_toggle-checked {
   transform: translateX(calc(var(--jhlite-element-size) * 0.6)) !important;
 }
 </style>
diff --git a/src/test/javascript/spec/common/primary/theme-button/ThemeButton.spec.ts b/src/test/javascript/spec/common/primary/theme-button/ThemeButton.spec.ts
@@ -35,7 +35,7 @@ describe('ThemeButton', () => {
     const themeRepository = stubLocalWindowThemeRepository();
     const wrapper = wrap({ themeRepository });
 
-    const checkbox = wrapper.find('.container_toggle');
+    const checkbox = wrapper.find('.jhlite-container_toggle');
     expect(themeRepository.get.calledOnce).toBe(true);
     expect(themeRepository.choose.callCount).toBe(1);