From 7493136bc4872e81aec374ee1914ae07c32e8797 Mon Sep 17 00:00:00 2001
From: phoenixcodeforces-blip <phoenixcodeforces@gmail.com>
Date: Tue, 21 Oct 2025 17:29:18 +0000
Subject: [PATCH] fix: update button colo rs on models pages - changed primary
 action buttons (.import) to saffron yellow (#ebc017) - changed secondary
 action buttons (.import-secondary) to keppel green (#00b39f) - added tertiary
 button class (.import-tertiary) with transparent background - updated 'add
 new model' button to use secondary styling - updated 'quick start' button in
 modal to use secondary styling closes #2389

Signed-off-by: phoenixcodeforces-blip <phoenixcodeforces@gmail.com>
---
 _includes/models/modal.html     |  2 +-
 _layouts/single-page-model.html |  2 +-
 _sass/catalog.scss              | 14 +++++++++++---
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/_includes/models/modal.html b/_includes/models/modal.html
index 0f233325e9..d848a88c2a 100644
--- a/_includes/models/modal.html
+++ b/_includes/models/modal.html
@@ -84,7 +84,7 @@ <h2 class="modal-h2">
                 <div class="btn-tooltip-grp">
                   {% if {{model.name}} %}
                   <a href="https://docs.meshery.io/project/contributing/contributing-models-quick-start">
-                    <button class="import" style="width: 9rem;">Quick Start</button></a>
+                    <button class="import-secondary" style="width: 9rem;">Quick Start</button></a>
                   {% endif %}
                 </div>
               </div>
diff --git a/_layouts/single-page-model.html b/_layouts/single-page-model.html
index 220db9a49d..7174c9bbe9 100644
--- a/_layouts/single-page-model.html
+++ b/_layouts/single-page-model.html
@@ -128,7 +128,7 @@
 
                 <div class="btn-tooltip-grp">
                   <a href="https://docs.meshery.io/project/contributing/contributing-models-quick-start">
-                    <button class="import" style="width: 12rem;">Add New Model</button>
+                    <button class="import-secondary" style="width: 12rem;">Add New Model</button>
                   </a>
                 </div>
               </div>
diff --git a/_sass/catalog.scss b/_sass/catalog.scss
index 2fa1894263..36c8e067a5 100644
--- a/_sass/catalog.scss
+++ b/_sass/catalog.scss
@@ -189,7 +189,7 @@ p {
 }
 
 .import {
-  background-color: #00b39fff;
+  background-color: #EBC017;  // PRIMARY: Saffron yellow
   color: white;
   border-radius: 4px;
   border: none;
@@ -204,8 +204,16 @@ p {
   padding: 10px;
 }
 .import-secondary {
-  background-color: inherit;
-  border:1px solid #00b39f;
+  background-color: #00b39f;  // SECONDARY: Keppel green
+  color: white;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  padding: 10px;
+}
+.import-tertiary {
+  background-color: transparent;  // TERTIARY: Transparent background
+  border: 1px solid #00b39f;
   color: var(--color-primary-qtext);
   border-radius: 4px;
   cursor: pointer;