tweak: user-friendly badges for apps in Dev Center

src/dev-center/css/style.css

@@ -1057,28 +1057,36 @@ dialog{
     margin-top: 0; 
     display: block;
     width: 170px;
-    clear: both;
-    margin-bottom: 3px;
+    margin-bottom: 0;
+    width: 20px;
+    height: 20px;
+    margin-right: 3px;
+    filter: grayscale(100%);
+    color: green;
+    background: #c6f6c6;
+    border: 3px solid #3efb00;
+    opacity: 0.4;
+    background-position: center;
+    background-size: contain;
 }
 
 .approval-badge-lsiting{
-    color: green;
-    background: #c6f6c6;
-    border:1px solid green;
+    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjIiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHRpdGxlPmFwcC1jZW50ZXI8L3RpdGxlPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJnMSIgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDc2NC41NDIsNDcwLjIyMSwtNDcwLjIyMSw3NjQuNTQyLDE4MC44NDcsMzA4LjMyOSkiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwMGFlZWYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA3YWVmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8c3R5bGU+CgkJLnMwIHsgZmlsbDogdXJsKCNnMSkgfSAKCQkuczEgeyBmaWxsOiAjOTJhNWI1IH0gCgkJLnMyIHsgZmlsbDogI2E2YzBjZiB9IAoJCS5zMyB7IGZpbGw6ICNlNmVjZjAgfSAKCQkuczQgeyBmaWxsOiAjNDQ0NDQ0IH0gCgkJLnM1IHsgZmlsbDogdXJsKCNnMikgfSAKCQkuczYgeyBmaWxsOiAjNmQ2ZDZkIH0gCgkJLnM3IHsgZmlsbDogIzU2NTY1NiB9IAoJCS5zOCB7IGZpbGw6ICMyYjJiMmIgfSAKCQkuczkgeyBmaWxsOiAjZWZkMzU4IH0gCgkJLnMxMCB7IGZpbGw6ICM0ZGEzNGQgfSAKCQkuczExIHsgZmlsbDogI2U4NmM2MCB9IAoJCS5zMTIgeyBmaWxsOiAjNDU4YmM0IH0gCgk8L3N0eWxlPgogIDxnIGlkPSJMYXllciAxIj4KICAgIDxwYXRoIGlkPSJMYXllciIgY2xhc3M9InMwIiBkPSJtMCAxMzcuNmMwLTc1LjIgNjIuNC0xMzcuNiAxMzcuNi0xMzcuNmg3NDguOGM3NS4yIDAgMTM3LjYgNjIuNCAxMzcuNiAxMzcuNnY3NDguOGMwIDc1LjItNjIuNCAxMzcuNi0xMzcuNiAxMzcuNmgtNzQ4LjhjLTc1LjIgMC0xMzcuNi02Mi40LTEzNy42LTEzNy42eiIvPgogICAgPGcgaWQ9IkxheWVyIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjIzNzAwNCwgMCwgMCwgMS4yODE0MDcsIC0xODMuMDU2MjI5LCAtNzAuNjkwNzk2KSIgc3R5bGU9IiI+CiAgICAgIDxwYXRoIGlkPSJMYXllciIgY2xhc3M9InMxIiBkPSJtOTIxLjYgMjExLjJjLTMuMi0xLjYtOC0zLjItMTIuOC0xLjZsLTI4My4yIDExMy42Yy00LjggMS42LTggOC04IDEyLjh2MzY4YzAgNC44IDEuNiA5LjYgNC44IDExLjJxNC44IDMuMiA4IDMuMiAzLjIgMCA2LjQtMS42bDI4MS42LTExMnE5LjYtNC44IDkuNi0xNC40di0zNjYuNGMwLTQuOC0xLjYtOS42LTYuNC0xMi44eiIvPgogICAgICA8cGF0aCBpZD0iTGF5ZXIiIGNsYXNzPSJzMiIgZD0ibTYzMC40IDMyMS42bC0yNzYuOC0xMTJjLTQuOC0xLjYtOS42IDAtMTIuOCAxLjYtNC44IDMuMi02LjQgOC02LjQgMTIuOHYzNjYuNGMwIDYuNCAzLjIgMTEuMiA4IDE0LjRsMjgzLjIgMTEycTMuMiAxLjYgNC44IDEuNnoiLz4KICAgICAgPHBhdGggaWQ9IkxheWVyIiBjbGFzcz0iczMiIGQ9Im05MTguNCAyMDkuNmwtMjgxLjYtMTEycS02LjQtMy4yLTExLjIgMGwtMjgzLjIgMTEyYy00LjggMy4yLTggOC04IDE0LjQgMCA0LjggMy4yIDkuNiA4IDEyLjhsMjgzLjIgMTEycTMuMiAxLjYgNC44IDEuNiAzLjIgMCA2LjQtMS42bDI4MS42LTExMmM2LjQtMy4yIDkuNi04IDkuNi0xMi44cTAtOS42LTkuNi0xNC40eiIvPgogICAgICA8ZyBpZD0iTGF5ZXIiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDE3LjM1MDI0MSwgMCwgMCwgMTcuNjM3MDYyLCAyMC44OTQ1MTYsIDE3My4xMTQyNTgpIiBzdHlsZT0iIj4KICAgICAgPHBhdGggZD0iTTI4LDM1aC04Yy0wLjU1MjIwNDEsMC0xLTAuNDQ3Nzk5Ny0xLTFzMC40NDc3OTU5LTEsMS0xaDhjMC41NTIxOTY1LDAsMSwwLjQ0Nzc5OTcsMSwxUzI4LjU1MjE5NjUsMzUsMjgsMzUgeiIgZmlsbD0iIzQ0NDQ0NCIvPgogICAgICA8cGF0aCBkPSJNNDUuOTQwMTk3LDQwLjY2OTM5OTNsLTMuOTMxMTk4MS0xOS42NTU2OTg4Yy0wLjY5NzIwNDYtMy40ODU0MDEyLTMuNzgzMjAzMS02LjAxNTIwMDYtNy4zMzc0MDIzLTYuMDE1MjAwNiBjLTEuOTk5MDAwNSwwLTQuMzA3MjAxNCwxLjE1MzEtNS4yOTE1MDAxLDIuMTkxODk5M0MyOC4zOTU3OTU4LDE4LjIyOTIwMDQsMjgsMTksMjgsMTloLTggYzAsMC0wLjE5MDcwNDMtMC40MzE2OTk4LTEuNDA3OTAzNy0xLjgwOTYwMDhDMTcuMzc1LDE1LjgxMjUsMTUuMjk5NTk1OCwxNC45OTg0OTk5LDEzLjMwMDU5NjIsMTQuOTk4NDk5OSBjLTMuNTU0MjAwMiwwLTYuNjQwMTk5NywyLjUyOTc5OTUtNy4zMzc0LDYuMDE1MjAwNkwyLjAzMjAwMDEsNDAuNjY5Mzk5MyBjLTAuMjQ2MTAzNCwxLjIyOTk5OTUsMC4yODA3OTY1LDIuNDU3MDk5OSwxLjM0MTc5NjQsMy4xMjU5OTk1YzEuMDYyMDAwMywwLjY2OTAwMjUsMi4zOTY1MDAxLDAuNjE1MiwzLjQwMDQwMDItMC4xMzc2OTkxTDE1LDM3aDE4IGw4LjE5ODQ5NCw2LjY1ODE5OTNjMC41MzU2MDI2LDAuNDAxNDAxNSwxLjE2NTUwNDUsMC42MDQwMDAxLDEuNzk3NDAxNCwwLjYwNDAwMDFjMC41NTI3LDAsMS4xMDczOTktMC4xNTQ4MDA0LDEuNjAyNTAwOS0wLjQ2NjgwMDcgQzQ1LjY1OTM5NzEsNDMuMTI2NDk5Miw0Ni4xODYyOTQ2LDQxLjg5OTM5ODgsNDUuOTQwMTk3LDQwLjY2OTM5OTN6IiBzdHlsZT0iZmlsbDogcmdiKDExNiwgMTE2LCAxMTYpOyIvPgogICAgICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjMzLjk5ODUwMDgiIHI9IjQiIGZpbGw9IiM2RDZENkQiLz4KICAgICAgPHBhdGggZD0iTTE2LDM4Ljk5ODUwMDhjLTIuNzU2ODAzNSwwLTUtMi4yNDMwOTkyLTUtNWMwLTIuNzU2ODAxNiwyLjI0MzE5NjUtNSw1LTVjMi43NTY3OTU5LDAsNSwyLjI0MzE5ODQsNSw1IEMyMSwzNi43NTU0MDE2LDE4Ljc1Njc5NTksMzguOTk4NTAwOCwxNiwzOC45OTg1MDA4eiBNMTYsMzAuOTk4NTAwOGMtMS42NTQzMDM2LDAtMywxLjM0NTY5OTMtMywzczEuMzQ1Njk2NCwzLDMsMyBjMS42NTQyOTY5LDAsMy0xLjM0NTY5OTMsMy0zUzE3LjY1NDI5NjksMzAuOTk4NTAwOCwxNiwzMC45OTg1MDA4eiIgZmlsbD0iIzJCMkIyQiIvPgogICAgICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMzLjk5ODUwMDgiIHI9IjQiIGZpbGw9IiM2RDZENkQiLz4KICAgICAgPHBhdGggZD0iTTMyLDM4Ljk5ODUwMDhjLTIuNzU2ODAzNSwwLTUtMi4yNDMwOTkyLTUtNWMwLTIuNzU2ODAxNiwyLjI0MzE5NjUtNSw1LTVjMi43NTY3OTQsMCw1LDIuMjQzMTk4NCw1LDUgQzM3LDM2Ljc1NTQwMTYsMzQuNzU2Nzk0LDM4Ljk5ODUwMDgsMzIsMzguOTk4NTAwOHogTTMyLDMwLjk5ODUwMDhjLTEuNjU0MzA0NSwwLTMsMS4zNDU2OTkzLTMsM3MxLjM0NTY5NTUsMywzLDMgYzEuNjU0Mjk2OSwwLDMtMS4zNDU2OTkzLDMtM1MzMy42NTQyOTY5LDMwLjk5ODUwMDgsMzIsMzAuOTk4NTAwOHoiIGZpbGw9IiMyQjJCMkIiLz4KICAgICAgPHBhdGggZD0iTTE2LDI1aDFjMC41NTIyOTU3LDAsMS0wLjQ0NzcwMDUsMS0xdi0xYzAtMC41NTIyOTk1LTAuNDQ3NzA0My0xLTEtMWgtMWMtMC41NTIzMDMzLDAtMSwwLjQ0NzcwMDUtMSwxdjEgQzE1LDI0LjU1MjI5OTUsMTUuNDQ3Njk2NywyNSwxNiwyNXoiIGZpbGw9IiMyQjJCMkIiLz4KICAgICAgPHBhdGggZD0iTTEwLDI1aDFjMC41NTIyOTY2LDAsMS0wLjQ0NzcwMDUsMS0xdi0xYzAtMC41NTIyOTk1LTAuNDQ3NzAzNC0xLTLine truncated
 }
 
 .approval-badge-incentive{
-    color: #0074ce;
-    background: #d8efff;
-    border:1px solid #0074ce;
+    background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cfilter%20id%3D%22a%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%20height%3D%2222.0859%22%20width%3D%2224.5625%22%20x%3D%224.44214%22%20y%3D%227.88281%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20mode%3D%22normal%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%221%22%20dy%3D%22-1.5%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221.75%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.713726%200%200%200%200%200.321569%200%200%200%200%200.211765%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22shape%22%20mode%3D%22normal%22%20result%3D%22effect1_innerShadow_18_21307%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22b%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%20height%3D%225.70781%22%20width%3D%228.64821%22%20x%3D%2211.8493%22%20y%3D%221.85938%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20mode%3D%22normal%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22-.2%22%20dy%3D%22.2%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.15%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%200%200%200%200%200.92549%200%200%200%200%200.403922%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22shape%22%20mode%3D%22normal%22%20result%3D%22effect1_innerShadow_18_21307%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22.1%22%20dy%3D%22-.25%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.25%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.788235%200%200%200%200%200.364706%200%200%200%200%200.12549%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22effect1_innerShadow_18_21307%22%20mode%3D%22normal%22%20result%3D%22effect2_innerShadow_18_21307%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22c%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%20height%3D%2214.4657%22%20width%3D%226.82797%22%20x%3D%2212.586%22%20y%3D%2213.1578%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20mode%3D%22normal%22%20result%3D%22shape%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur_18_21307%22%20stdDeviation%3D%22.15%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22d%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%20height%3D%2214.2157%22%20width%3D%226.47797%22%20x%3D%2212.9859%22%20y%3D%2213.1562%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20mode%3D%22normal%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22.15%22%20dy%3D%22-.2%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.15%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.352941%200%200%200%200%200.168627%200%200%200%200%200.188235%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22shape%22%20mode%3D%22normal%22%20result%3D%22effect1_innerShadow_18_21307%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22-.1%22%20dy%3D%22.15%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.11%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%2Line truncated
 }
 
 .approval-badge-opening{
-    color: #bb00ff;
-    background: #ffeaff;
-    border:1px solid #bb00ff;
+    background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0%200h48v48h-48z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.01%22%2F%3E%3Cg%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20d%3D%22m24%204v8%22%2F%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m22%2022%2020%204-6%204%206%206-6%206-6-6-4%206z%22%20fill%3D%22%232f88ff%22%20fill-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22m38.1421%209.85795-5.6568%205.65685%22%2F%3E%3Cpath%20d%3D%22m9.85787%2038.1421%205.65683-5.6569%22%2F%3E%3Cpath%20d%3D%22m4%2024h8%22%2F%3E%3Cpath%20d%3D%22m9.85783%209.85787%205.65687%205.65683%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
 }
 
-td .approval-badge:last-child{
+.approval-badge.active{
+    filter: none;
+    opacity: 1;
+}
+
+/* td .approval-badge:last-child{
     margin-bottom: 0;
-}
+} */

src/dev-center/js/dev-center.js

@@ -1285,17 +1285,15 @@ function generate_app_card(app) {
     h += `</td>`;
 
     h += `<td style="vertical-align:middle; min-width:200px;">`;
-        h += `<div style="overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">`;
+        h += `<div style="overflow: hidden; height: 100%; display: flex; justify-content: center; align-items: center;">`;
             // "Approved for listing"
-            if(app.approved_for_listing){
-                h += `<span class="approval-badge approval-badge-lsiting">✔ Approved for Listing</span>`;
-            }        
+            h += `<span class="approval-badge approval-badge-lsiting ${app.approved_for_listing ? 'active' : ''}" title="${app.approved_for_listing ? 'Approved for listing in the App Center' : 'Not approved for listing in the App Center'}"></span>`;
+
             // "Approved for opening items"
-            if (app.approved_for_opening_items)
-                h += `<span class="approval-badge approval-badge-opening">✔ Approved for Opening Items</span>`;
+            h += `<span class="approval-badge approval-badge-opening ${app.approved_for_opening_items ? 'active' : ''}" title="${app.approved_for_opening_items ? 'Approved for opening items' : 'Not approved for opening items'}"></span>`;
+
             // "Approved for incentive program"
-            if (app.approved_for_incentive_program)
-                h += `<span class="approval-badge approval-badge-incentive">✔ Incentive Program</span>`;
+            h += `<span class="approval-badge approval-badge-incentive ${app.approved_for_incentive_program ? 'active' : ''}" title="${app.approved_for_incentive_program ? 'Approved for the incentive program' : 'Not approved for the incentive program'}"></span>`;
         h += `</div>`;
     h += `</td>`;
     h += `</tr>`;