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
DesignSafe-CI · Jul 29, 2024 · 6e297f8 · 6e297f8
1 parent f771a42
commit 6e297f8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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;