From 4aae99d6956d4ade9a8e09cda584061e662c04de Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Tue, 7 May 2019 15:37:44 -0700
Subject: [PATCH] apps: Style disable app icons according to design

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
---
 static/themes/default/css/plinth.css | 42 ++++++++++++++++++----------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index c888c0ed1..a80787311 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -288,23 +288,26 @@ footer {
   justify-content: left;
 }
 
-.apps-page .card-icon img {
+/* Enabled app icons */
+.apps-page .card-list-primary .card-icon img {
   transition: filter 0.3s;
-
-  /* --- .installed ---*/
   filter: contrast(0.2) sepia(1) hue-rotate(171deg) contrast(2);
-
-  /* TODO #1309: uninstalled state */
-  /* --- .uninstalled ---*/
-  /* filter: grayscale(1) opacity(0.5); */
-  /* --- .uninstalled:hover ---*/
-  /* filter: grayscale(1) opacity(1); */
 }
 
-.apps-page .card:hover .card-icon img {
+.apps-page .card-list-primary .card:hover .card-icon img {
   filter: none;
 }
 
+/* Disabled app icons */
+.apps-page .card-list-secondary .card-icon img {
+    transition: filter 0.3s;
+    filter: grayscale(1) opacity(0.5);
+}
+
+.apps-page .card-list-secondary .card:hover .card-icon img {
+    filter: grayscale(1) opacity(1);
+}
+
 a.menu_link {
     text-decoration: none;
 }
@@ -356,11 +359,20 @@ a.menu_link_active {
     font-size: 12px;
 }
 
-.card-icon {
-	  background: radial-gradient(farthest-side at bottom,#eefff0, white);
-	  background-position: 50% 100%;
-	  background-repeat: no-repeat;
-	  background-size: 150% 25%;
+/* Enable apps - green glow */
+.card-list-primary .card-icon {
+    background: radial-gradient(farthest-side at bottom,#eefff0, white);
+    background-position: 50% 100%;
+    background-repeat: no-repeat;
+    background-size: 150% 25%;
+}
+
+/* Disabled apps - grey glow */
+.card-list-secondary .card-icon {
+    background: radial-gradient(farthest-side at bottom,#f0f0f0, white);
+    background-position: 50% 100%;
+    background-repeat: no-repeat;
+    background-size: 150% 25%;
 }
 
 .card-icon span {