From 96a04df81d5fb4ac03d98a1f05bf217a5e183d36 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 8 Apr 2024 13:41:26 +0300
Subject: [PATCH] Button style updates

---
 .../styles/layout/templates/_templates.scss   | 34 +++++++++
 components/template/Hero/index.vue            |  4 +-
 pages/templates/index.vue                     | 74 +++++++++----------
 3 files changed, 73 insertions(+), 39 deletions(-)

diff --git a/assets/styles/layout/templates/_templates.scss b/assets/styles/layout/templates/_templates.scss
index 0b3b696e2..fa7d813eb 100644
--- a/assets/styles/layout/templates/_templates.scss
+++ b/assets/styles/layout/templates/_templates.scss
@@ -1155,6 +1155,7 @@
                 margin-top: 2rem;
 
                 a {
+                    display: inline-flex;
                     text-decoration: none;
                     height: 2.5rem;
                     flex: 1;
@@ -1635,3 +1636,36 @@
         }
     }
 }
+
+.templates-page {
+    &-button {
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        background-color: var(--primary-color);
+        color: var(--primary-inverse-color);
+        border: 1px solid var(--border-color);
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        font-family: inherit;
+        font-feature-settings: inherit;
+        transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
+        border-radius: var(--p-rounded-base);
+        outline-color: transparent;
+        flex: 1 1 0%;
+
+        &-outlined {
+            background: transparent;
+            color: var(--primary-color);
+            border-color: var(--p-primary-200);
+        }
+
+        &-label {
+            font-weight: 500;
+        }
+    }
+}
diff --git a/components/template/Hero/index.vue b/components/template/Hero/index.vue
index 595ee5336..942858196 100644
--- a/components/template/Hero/index.vue
+++ b/components/template/Hero/index.vue
@@ -9,8 +9,8 @@
             </div>
             <p>{{ templateHeroData.description }}</p>
             <div class="template-hero-card-buttons">
-                <a :href="templateHeroData.liveHref" target="_blank" class="template-hero-card-buttons-btn1 p-button"> Live Demo </a>
-                <a :href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'" target="_blank" class="template-hero-card-buttons-btn2 p-button">
+                <a :href="templateHeroData.liveHref" target="_blank" class="template-hero-card-buttons-btn1"> Live Demo </a>
+                <a :href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'" target="_blank" class="template-hero-card-buttons-btn2">
                     {{ templateHeroData.free ? 'Source Code' : 'Buy Now' }}
                 </a>
             </div>
diff --git a/pages/templates/index.vue b/pages/templates/index.vue
index b3b4d135b..678679a47 100644
--- a/pages/templates/index.vue
+++ b/pages/templates/index.vue
@@ -5,18 +5,18 @@
             <p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
         </div>
 
-        <div class="grid">
+        <div class="templates-page grid">
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
                     <a href="https://apollo.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Apollo" src="https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://apollo.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
+                        <a href="https://apollo.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
+                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/apollo" class="flex-1 p-button p-component p-button-outlined">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/apollo" class="templates-page-button templates-page-button-outlined">
+                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -27,11 +27,11 @@
                         <img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://sakai.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
+                        <a href="https://sakai.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
+                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/sakai" class="flex-1 p-button p-component p-button-outlined">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/sakai" class="templates-page-button templates-page-button-outlined">
+                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -42,11 +42,11 @@
                         <img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://atlantis.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
+                        <a href="https://atlantis.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
+                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/atlantis" class="flex-1 p-button p-component p-button-outlined">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/atlantis" class="templates-page-button templates-page-button-outlined">
+                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -57,11 +57,11 @@
                         <img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://ultima.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
+                        <a href="https://ultima.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
+                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/ultima" class="flex-1 p-button p-component p-button-outlined">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/ultima" class="templates-page-button templates-page-button-outlined">
+                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -72,11 +72,11 @@
                         <img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://freya.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
+                        <a href="https://freya.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
+                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/freya" class="flex-1 p-button p-component p-button-outlined">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/freya" class="templates-page-button templates-page-button-outlined">
+                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -87,11 +87,11 @@
                         <img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://diamond.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
+                        <a href="https://diamond.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
+                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/diamond" class="flex-1 p-button p-component p-button-outlined">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/diamond" class="templates-page-button templates-page-button-outlined">
+                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -102,11 +102,11 @@
                         <img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://verona.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
+                        <a href="https://verona.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
+                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/verona" class="flex-1 p-button p-component p-button-outlined">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/verona" class="templates-page-button templates-page-button-outlined">
+                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -117,11 +117,11 @@
                         <img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://poseidon.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
+                        <a href="https://poseidon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
+                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/poseidon" class="flex-1 p-button p-component p-button-outlined">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/poseidon" class="templates-page-button templates-page-button-outlined">
+                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -132,11 +132,11 @@
                         <img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://avalon.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
+                        <a href="https://avalon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
+                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/avalon" class="flex-1 p-button p-component p-button-outlined">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/avalon" class="templates-page-button templates-page-button-outlined">
+                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>