From 6e297f849e0237c69160af21a19a5c05cc402f5a Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 29 Jul 2024 15:38:13 -0500
Subject: [PATCH] enhance: DES-3046 highlight other flag of app card (#1377)

* enhance: DES-3046 highlight other flag of app card

* fix: DES-3046 use lighter blue
---
 .../templates/designsafe/apps/workspace/app_card.html        | 4 ++--
 designsafe/static/styles/app-card.css                        | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/designsafe/apps/workspace/templates/designsafe/apps/workspace/app_card.html b/designsafe/apps/workspace/templates/designsafe/apps/workspace/app_card.html
index fa0821750..9d3dde528 100644
--- a/designsafe/apps/workspace/templates/designsafe/apps/workspace/app_card.html
+++ b/designsafe/apps/workspace/templates/designsafe/apps/workspace/app_card.html
@@ -15,11 +15,11 @@ <h3 class="c-app-card__title"><i class="ds-icon ds-icon-{{app.icon}}"></i> {{app
 
     <ul class="c-app-card__flags">
         {% if app.is_popular %}
-        <li><strong>Popular</strong></li>
+        <li class="is-popular"><strong>Popular</strong></li>
         {% endif %}
 
         {% if not app.is_popular and app.is_simcenter %}
-        <li>SimCenter</li>
+        <li class="is-simcenter"><strong>SimCenter</strong></li>
         {% endif %}
 
 
diff --git a/designsafe/static/styles/app-card.css b/designsafe/static/styles/app-card.css
index 39361923c..d3cc13d79 100644
--- a/designsafe/static/styles/app-card.css
+++ b/designsafe/static/styles/app-card.css
@@ -94,9 +94,12 @@ a.c-app-card:active {
 .c-app-card__flags {
     font-size: 1.2rem;
 }
-.c-app-card__flags > *:has(strong) {
+.c-app-card__flags > .is-popular {
     background-color: #ECE4BF;
 }
+.c-app-card__flags > .is-simcenter {
+    background-color: #d9edf7;
+}
 
 .c-app-card__repo {
     font-style: italic;