refactor(ui): move details pages item-title class to global.css

luizhf42 · gustavosbarreto · commit 9e42c2c34734 · 2025-11-28T11:16:12.000-03:00
diff --git a/ui/admin/src/views/AnnouncementDetails.vue b/ui/admin/src/views/AnnouncementDetails.vue
@@ -155,16 +155,6 @@ defineExpose({ announcement, contentToHtml });
 </script>
 
 <style lang="scss" scoped>
-.item-title {
-  margin-top: 0.75rem;
-  // Vuetify's text-overline styles
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1666666667em;
-  line-height: 2.667;
-}
-
 :deep(.content-announcement) {
   p, span, div, h1, h2, h3, h4, h5, h6 {
     margin: .5rem;
diff --git a/ui/admin/src/views/DeviceDetails.vue b/ui/admin/src/views/DeviceDetails.vue
@@ -208,15 +208,3 @@ onMounted(async () => {
   }
 });
 </script>
-
-<style lang="scss" scoped>
-.item-title {
-  margin-top: 0.75rem;
-  // Vuetify's text-overline styles
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1666666667em;
-  line-height: 2.667;
-}
-</style>
diff --git a/ui/admin/src/views/FirewallRulesDetails.vue b/ui/admin/src/views/FirewallRulesDetails.vue
@@ -138,15 +138,3 @@ onMounted(async () => {
   }
 });
 </script>
-
-<style lang="scss" scoped>
-.item-title {
-  margin-top: 0.75rem;
-  // Vuetify's text-overline styles
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1666666667em;
-  line-height: 2.667;
-}
-</style>
diff --git a/ui/admin/src/views/NamespaceDetails.vue b/ui/admin/src/views/NamespaceDetails.vue
@@ -346,15 +346,6 @@ defineExpose({ namespace });
 </script>
 
 <style scoped>
-.item-title {
-  margin-top: 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1666666667em;
-  line-height: 2.667;
-}
-
 .unstyled-link {
   all: unset;
 }
diff --git a/ui/admin/src/views/SessionDetails.vue b/ui/admin/src/views/SessionDetails.vue
@@ -139,15 +139,3 @@ onMounted(async () => {
   }
 });
 </script>
-
-<style lang="scss" scoped>
-.item-title {
-  margin-top: 0.75rem;
-  // Vuetify's text-overline styles
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1666666667em;
-  line-height: 2.667;
-}
-</style>
diff --git a/ui/admin/src/views/UserDetails.vue b/ui/admin/src/views/UserDetails.vue
@@ -291,14 +291,3 @@ onBeforeMount(async () => {
 
 defineExpose({ user });
 </script>
-
-<style lang="scss" scoped>
-.item-title {
-  margin-top: 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1666666667em;
-  line-height: 2.667;
-}
-</style>
diff --git a/ui/src/assets/global.css b/ui/src/assets/global.css
@@ -1,3 +1,13 @@
 .full-height {
     height: 100vh;
 }
+
+.item-title {
+    margin-top: 0.75rem;
+    /* Vuetify's text-overline styles */
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.1666666667em;
+    line-height: 2.667;
+}
diff --git a/ui/src/components/Welcome/WelcomeThirdScreen.vue b/ui/src/components/Welcome/WelcomeThirdScreen.vue
@@ -150,15 +150,3 @@ onBeforeMount(async () => {
   }
 });
 </script>
-
-<style lang="scss" scoped>
-.item-title {
-  margin-top: 0.75rem;
-  // Vuetify's text-overline styles
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1666666667em;
-  line-height: 2.667;
-}
-</style>
diff --git a/ui/src/views/DetailsDevice.vue b/ui/src/views/DetailsDevice.vue
@@ -255,17 +255,4 @@ const refreshDevices = async () => {
     handleError(error);
   }
 };
-
 </script>
-
-<style lang="scss" scoped>
-.item-title {
-  margin-top: 0.75rem;
-  // Vuetify's text-overline styles
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1666666667em;
-  line-height: 2.667;
-}
-</style>
diff --git a/ui/src/views/DetailsSessions.vue b/ui/src/views/DetailsSessions.vue
@@ -237,15 +237,3 @@ onMounted(async () => {
   await getSession();
 });
 </script>
-
-<style lang="scss" scoped>
-.item-title {
-  margin-top: 0.75rem;
-  // Vuetify's text-overline styles
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1666666667em;
-  line-height: 2.667;
-}
-</style>
diff --git a/ui/tests/components/Welcome/__snapshots__/WelcomeThirdScreen.spec.ts.snap b/ui/tests/components/Welcome/__snapshots__/WelcomeThirdScreen.spec.ts.snap
@@ -1,37 +1,37 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Welcome Third Screen > Renders the component 1`] = `
-"<div data-v-9fa0b2b1="" class="pa-6">
-  <div data-v-9fa0b2b1="" class="text-center mb-6">
-    <div data-v-9fa0b2b1="" class="v-avatar v-theme--light bg-success v-avatar--density-default v-avatar--variant-flat mb-4" style="width: 64px; height: 64px;"><i data-v-9fa0b2b1="" class="mdi-check-circle mdi v-icon notranslate v-theme--light text-white" style="font-size: 32px; height: 32px; width: 32px;" aria-hidden="true"></i>
+"<div class="pa-6">
+  <div class="text-center mb-6">
+    <div class="v-avatar v-theme--light bg-success v-avatar--density-default v-avatar--variant-flat mb-4" style="width: 64px; height: 64px;"><i class="mdi-check-circle mdi v-icon notranslate v-theme--light text-white" style="font-size: 32px; height: 32px; width: 32px;" aria-hidden="true"></i>
       <!----><span class="v-avatar__underlay"></span>
     </div>
-    <h2 data-v-9fa0b2b1="" class="text-h4 mb-2"> Device Detected! </h2>
-    <p data-v-9fa0b2b1="" class="text-subtitle-1 text-medium-emphasis"> Confirm this device to add it to your account </p>
+    <h2 class="text-h4 mb-2"> Device Detected! </h2>
+    <p class="text-subtitle-1 text-medium-emphasis"> Confirm this device to add it to your account </p>
   </div>
-  <div data-v-9fa0b2b1="" class="v-alert v-theme--light text-success v-alert--density-default v-alert--variant-tonal mb-4" role="alert" data-test="welcome-third-screen-name">
+  <div class="v-alert v-theme--light text-success v-alert--density-default v-alert--variant-tonal mb-4" role="alert" data-test="welcome-third-screen-name">
     <!----><span class="v-alert__underlay"></span>
     <!---->
     <div class="v-alert__prepend"><i class="mdi-lan-connect mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" density="default"></i></div>
     <div class="v-alert__content">
       <div class="v-alert-title">Connection Successful</div>
       <!---->
-      <p data-v-9fa0b2b1="" class="mb-0" data-test="welcome-third-screen-text"> A device has been detected and is ready for enrollment. Please verify the device information below and confirm it belongs to you. </p>
+      <p class="mb-0" data-test="welcome-third-screen-text"> A device has been detected and is ready for enrollment. Please verify the device information below and confirm it belongs to you. </p>
     </div>
     <!---->
     <!---->
   </div>
-  <div data-v-9fa0b2b1="" class="v-expansion-panels v-theme--light v-expansion-panels--variant-default">
-    <div data-v-9fa0b2b1="" class="v-expansion-panel border bg-background rounded">
+  <div class="v-expansion-panels v-theme--light v-expansion-panels--variant-default">
+    <div class="v-expansion-panel border bg-background rounded">
       <div class="v-expansion-panel__shadow"></div>
       <!---->
-      <!----><button data-v-9fa0b2b1="" class="v-expansion-panel-title text-white bg-v-theme-surface border-b d-flex align-center" type="button" aria-expanded="false"><span class="v-expansion-panel-title__overlay"></span><i data-v-9fa0b2b1="" data-test="device-icon" class="fl-linuxmint mr-1 mr-3" style="font-size: 20px;" size="32"></i>
-        <div data-v-9fa0b2b1="">
-          <div data-v-9fa0b2b1="" class="text-h6" data-test="device-field">39-5e-2a</div>
-          <div data-v-9fa0b2b1="" class="text-body-2 text-white" data-test="device-pretty-name-field">Linux Mint 19.3</div>
+      <!----><button class="v-expansion-panel-title text-white bg-v-theme-surface border-b d-flex align-center" type="button" aria-expanded="false"><span class="v-expansion-panel-title__overlay"></span><i data-test="device-icon" class="fl-linuxmint mr-1 mr-3" style="font-size: 20px;" size="32"></i>
+        <div>
+          <div class="text-h6" data-test="device-field">39-5e-2a</div>
+          <div class="text-body-2 text-white" data-test="device-pretty-name-field">Linux Mint 19.3</div>
         </div><span class="v-expansion-panel-title__icon"><i class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
       </button>
-      <transition-stub data-v-9fa0b2b1="" name="expand-transition" appear="false" persisted="false" css="true">
+      <transition-stub name="expand-transition" appear="false" persisted="false" css="true">
         <div class="v-expansion-panel-text pt-2" style="display: none;">
           <!---->
         </div>
diff --git a/ui/tests/views/__snapshots__/DetailsDevice.spec.ts.snap b/ui/tests/views/__snapshots__/DetailsDevice.spec.ts.snap
diff --git a/ui/tests/views/__snapshots__/DetailsSessions.spec.ts.snap b/ui/tests/views/__snapshots__/DetailsSessions.spec.ts.snap
