Follow up 68712c10 - Feature: Desktop view - Support warning notes for creating articles

app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleBubble/ArticleBubbleBody.vue

@@ -152,7 +152,7 @@ onMounted(() => {
     />
     <CommonLink
       v-if="hasShowMore"
-      class="mb-1 inline-block! outline-transparent! focus-visible:outline-blue-800!"
+      class="mb-1 inline-block! outline-transparent! hover:underline! focus-visible:outline-blue-800!"
       role="button"
       link="#"
       size="medium"

app/frontend/apps/desktop/styles/main.css

@@ -49,7 +49,7 @@
   }
 
   a {
-    @apply text-blue-800 focus-visible:rounded-xs focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800;
+    @apply text-blue-800 hover:text-blue-850 hover:underline focus-visible:rounded-xs focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 hover:dark:text-blue-600;
   }
 
   @keyframes onAutoFillStart {
@@ -232,10 +232,6 @@
       @apply mt-2 mb-1 text-sm font-bold;
     }
 
-    a {
-      @apply text-blue-800 hover:text-blue-850 hover:underline hover:dark:text-blue-600;
-    }
-
     [dir='rtl'] {
       text-align: right;
     }

app/frontend/apps/mobile/initializer/initializeGlobalComponentStyles.ts

@@ -18,14 +18,17 @@ export const initializeGlobalComponentStyles = () => {
     internal: '',
   })
 
+  // Adding .Alert on mobile to be able to style links inside alerts
+  /* eslint-disable zammad/zammad-detect-translatable-string */
   initializeAlertClasses({
-    base: 'grid w-full content-start items-center justify-items-center text-center grid-flow-col grid-cols-[auto_minmax(auto,1fr)] justify-items-start text-start border w-auto text-sm',
+    base: 'Alert grid w-full content-start items-center justify-items-center text-center grid-flow-col grid-cols-[auto_minmax(auto,1fr)] justify-items-start text-start border w-auto text-sm',
     success: 'alert-success bg-green text-white',
     info: 'alert-info bg-white text-black',
     warning: 'alert-warning bg-yellow text-black',
     danger: 'alert-error bg-red/60 text-white',
     dismissButton: '',
   })
+  /* eslint-enable zammad/zammad-detect-translatable-string */
 
   initializeAvatarClasses({
     base: 'text-black',

app/frontend/apps/mobile/styles/main.css

@@ -13,6 +13,15 @@
   interpolate-size: allow-keywords;
 }
 
+/*
+* We don't use global styling for links on mobile
+* that's why we use a global components name styling
+* for CommonAlert links
+*/
+.Alert a {
+  @apply text-blue;
+}
+
 @layer base {
   html {
     --safe-bottom: env(safe-area-inset-bottom);