From f6ae430348a774603d3b6fddeb6f0a3f5ce91917 Mon Sep 17 00:00:00 2001
From: Yadong Zhang <zhyd007@gmail.com>
Date: Sat, 13 May 2023 14:32:02 +0800
Subject: [PATCH] refactor: set jhlite class prefix for ThemeButton component."

---
 .../app/common/primary/header/Header.vue      |  6 +++---
 .../primary/theme-button/ThemeButton.vue      | 20 +++++++++----------
 .../primary/theme-button/ThemeButton.spec.ts  |  2 +-
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/main/webapp/app/common/primary/header/Header.vue b/src/main/webapp/app/common/primary/header/Header.vue
index 5f98510e3fd..13cad37bd05 100644
--- 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
index e8bd4386ff7..f6eb79263a4 100644
--- 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
index bef29ce78cd..5bbfc15c651 100644
--- 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);