From 31a271b1a463eca6fe64e13b74782edad0950816 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 20 Mar 2023 13:04:29 +0300
Subject: [PATCH] Fixed material light theme switch, cosmetics on docs

---
 assets/styles/layout/_sidebar.scss |  5 ++
 layouts/AppConfigurator.vue        | 82 +++++++++++++++---------------
 layouts/AppTopBar.vue              |  2 +-
 pages/support/index.vue            |  4 +-
 pages/uikit/index.vue              |  2 +-
 5 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss
index 43e0720ef..e635c2486 100644
--- a/assets/styles/layout/_sidebar.scss
+++ b/assets/styles/layout/_sidebar.scss
@@ -88,6 +88,11 @@
             background-color: var(--highlight-bg);
             color: var(--highlight-text-color);
 
+            &:hover {
+                background-color: var(--highlight-bg);
+                color: var(--highlight-text-color);
+            }
+
             > .menu-icon {
                 i {
                     color: var(--highlight-text-color);
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 7cfdbe53c..3b9ae89e0 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -1,5 +1,5 @@
 <template>
-    <Sidebar v-model:visible="visible" @hide="onSidebarHide" class="layout-config-sidebar w-full sm:w-30rem" position="right">
+    <Sidebar v-model:visible="visible" @hide="onSidebarHide" class="layout-config w-full sm:w-30rem" position="right">
         <div class="p-2">
             <section class="mb-5">
                 <h3>Component Scale</h3>
@@ -35,25 +35,25 @@
                 <h4>Bootstrap</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('bootstrap4-light-blue')">
+                        <button class="p-link h-3rem" @click="changeTheme('bootstrap4-light-blue')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('bootstrap4-light-purple')">
+                        <button class="p-link h-3rem" @click="changeTheme('bootstrap4-light-purple')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('bootstrap4-dark-blue', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('bootstrap4-dark-blue', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('bootstrap4-dark-purple', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('bootstrap4-dark-purple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Purple</span>
@@ -63,25 +63,25 @@
                 <h4>Material Design</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('md-light-indigo', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('md-light-indigo')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Light Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('md-light-deeppurple', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('md-light-deeppurple')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Deep Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('md-dark-indigo', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('md-dark-indigo', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('md-dark-purple', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('md-dark-purple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Deep Purple</span>
@@ -91,25 +91,25 @@
                 <h4>Material Design Compact</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('md-light-indigo')">
+                        <button class="p-link h-3rem" @click="changeTheme('md-light-indigo')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('mdc-light-deeppurple')">
+                        <button class="p-link h-3rem" @click="changeTheme('mdc-light-deeppurple')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Deep Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('mdc-dark-indigo', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('mdc-dark-indigo', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('mdc-dark-deeppurple', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('mdc-dark-deeppurple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Deep Purple</span>
@@ -119,7 +119,7 @@
                 <h4>Tailwind</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('tailwind-light')">
+                        <button class="p-link h-3rem" @click="changeTheme('tailwind-light')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/tailwind-light.png" alt="Tailwind Light" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Tailwind Light</span>
@@ -129,7 +129,7 @@
                 <h4>Fluent UI</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('fluent-light')">
+                        <button class="p-link h-3rem" @click="changeTheme('fluent-light')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/fluent-light.png" alt="Fluent Light" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Blue</span>
@@ -139,49 +139,49 @@
                 <h4>PrimeOne Design</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('lara-light-indigo')">
+                        <button class="p-link h-3rem" @click="changeTheme('lara-light-indigo')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('lara-light-blue')">
+                        <button class="p-link h-3rem" @click="changeTheme('lara-light-blue')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-blue.png" alt="Lara Light Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('lara-light-purple')">
+                        <button class="p-link h-3rem" @click="changeTheme('lara-light-purple')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-purple.png" alt="Lara Light Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('lara-light-teal')">
+                        <button class="p-link h-3rem" @click="changeTheme('lara-light-teal')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Teal</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('lara-dark-indigo', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('lara-dark-indigo', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('lara-dark-blue', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('lara-dark-blue', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('lara-dark-purple', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('lara-dark-purple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('lara-dark-teal', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('lara-dark-teal', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Teal</span>
@@ -191,37 +191,37 @@
                 <h4>Misc</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('soho-light')">
+                        <button class="p-link h-3rem" @click="changeTheme('soho-light')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho Light" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Soho Light</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('soho-dark', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('soho-dark', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/soho-dark.png" alt="Soho Dark" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Soho Dark</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('viva-light')">
+                        <button class="p-link h-3rem" @click="changeTheme('viva-light')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva Light" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Viva Light</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('viva-dark', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('viva-dark', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg" alt="Viva Dark" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Viva Dark</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('mira')">
+                        <button class="p-link h-3rem" @click="changeTheme('mira')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Mira</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('nano')">
+                        <button class="p-link h-3rem" @click="changeTheme('nano')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Nano</span>
@@ -231,73 +231,73 @@
                 <h4>PrimeOne Design - Legacy</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('saga-blue')">
+                        <button class="p-link h-3rem" @click="changeTheme('saga-blue')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/saga-blue.png" alt="Saga Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Saga Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('saga-green')">
+                        <button class="p-link h-3rem" @click="changeTheme('saga-green')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/saga-green.png" alt="Saga Green" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Saga Green</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('saga-orange')">
+                        <button class="p-link h-3rem" @click="changeTheme('saga-orange')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/saga-orange.png" alt="Saga Orange" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Saga Orange</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('saga-purple')">
+                        <button class="p-link h-3rem" @click="changeTheme('saga-purple')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/saga-purple.png" alt="Saga Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Saga Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('vela-blue', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('vela-blue', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/vela-blue.png" alt="Vela Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Vela Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('vela-green', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('vela-green', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/vela-green.png" alt="Vela Green" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Vela Green</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('vela-orange', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('vela-orange', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/vela-orange.png" alt="Vela Orange" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Vela Orange</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('vela-purple', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('vela-purple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/vela-purple.png" alt="Vela Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Vela Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('arya-blue', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('arya-blue', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/arya-blue.png" alt="Arya Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Arya Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('arya-green', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('arya-green', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/arya-green.png" alt="Arya Green" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Arya Green</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('arya-orange', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('arya-orange', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/arya-orange.png" alt="Arya Orange" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Arya Orange</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link" @click="changeTheme('arya-purple', true)">
+                        <button class="p-link h-3rem" @click="changeTheme('arya-purple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/arya-purple.png" alt="Arya Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Arya Purple</span>
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index f6afdd34a..039515a7c 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -22,7 +22,7 @@
                     </a>
                 </li>
                 <li>
-                    <button type="button" class="p-button flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300" @click="onConfigButtonClick">
+                    <button type="button" class="p-button flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" @click="onConfigButtonClick">
                         <i class="pi pi-cog"></i>
                     </button>
                 </li>
diff --git a/pages/support/index.vue b/pages/support/index.vue
index 039a24181..4a743881b 100755
--- a/pages/support/index.vue
+++ b/pages/support/index.vue
@@ -5,7 +5,7 @@
         <div class="flex flex-column xl:flex-row mb-5 gap-5">
             <div class="card xl:w-3 m-0 relative overflow-hidden">
                 <i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
-                <div class="text-xl text-900 font-semibold mb-3 relative">Community Support</div>
+                <div class="text-2xl text-900 font-semibold mb-3 relative">Community Support</div>
                 <p class="m-0 line-height-3 relative text-lg text-800">
                     <a href="https://forum.primefaces.org/viewforum.php?f=110" class="font-semibold hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-semibold hover:underline text-primary">Discord</a> are
                     where the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time although
@@ -13,7 +13,7 @@
                 </p>
             </div>
             <div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')">
-                <div class="text-xl font-semibold mb-3">PRO Support</div>
+                <div class="text-2xl font-semibold mb-3">PRO Support</div>
                 <p class="m-0 line-height-3 text-lg">
                     With PRO support, it's easy to support, tune and add features to PrimeVue as if it were an in- house library. PRO is a term based commercial support service. With the exclusive services of PRO account, it is no longer needed to
                     post questions in community forum and issue reports to community issue tracker at GitHub. A JIRA account will be created to the customer by PrimeTek, this account can be shared between any number of users within your organization.
diff --git a/pages/uikit/index.vue b/pages/uikit/index.vue
index 7ac838903..d33371b96 100644
--- a/pages/uikit/index.vue
+++ b/pages/uikit/index.vue
@@ -275,7 +275,7 @@
                         <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">All updates will be totally free of charge for existing customers for an unlimited period.</p>
                     </div>
                     <div class="col-12 lg:col-4 px-2 lg:px-5">
-                        <div class="text-xl text-900 line-height-3 mb-2 text-900">How can I get support?</div>
+                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">How can I get support?</div>
                         <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
                             Support is provided by PrimeTek via <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.
                         </p>