MOBILE-3833 badges: Fix missing expired overlay

src/addons/block/badges/components/badges/badges.scss

@@ -1,21 +1,42 @@
-:host .core-block-content ::ng-deep {
+:host {
-    ul.badges {
+    --badge-size: 100px;
-        list-style: none;
+    --badge-container-size: 150px;
-        margin-left: 0;
-        margin-right: 0;
-        -webkit-padding-start: 0;
 
-        li {
+    .core-block-content ::ng-deep {
-            position: relative;
-            display: inline-block;
-            padding-top: 1em;
-            text-align: center;
-            vertical-align: top;
-            width: 150px;
 
-            .badge-name {
+        ul.badges {
-                display: block;
+            list-style: none;
-                padding: 5px;
+            margin: 0;
+
+            li {
+                position: relative;
+                display: inline-block;
+                text-align: center;
+                margin-top: 1em;
+                vertical-align: top;
+                width: var(--badge-container-size);
+
+                .badge-name {
+                    display: block;
+                    padding: 5px;
+                }
+                .badge-image {
+                    width: var(--badge-size);
+                }
+
+                .expireimage {
+                    content: 'expired';
+                    background-image: url('/assets/img/expired.svg');
+                    background-repeat: no-repeat;
+                    background-size: var(--badge-size) var(--badge-size);
+                    width: var(--badge-size);
+                    height: var(--badge-size);
+                    left: calc((var(--badge-container-size) - var(--badge-size)) /2);
+                    top: 0;
+                    position: absolute;
+                    z-index: 2;
+                    opacity: .85;
+                }
             }
         }
     }

src/assets/img/expired.svg

@@ -0,0 +1 @@
+<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet"><title>Layer 1</title><path stroke="#fff" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="8" fill="none" d="M6.773 112.162L113.546 5.39l29.7 29.698L36.47 141.86z"/><path stroke-width="5" stroke="#bf3b08" fill="none" d="M7 112.066L113.066 6l29.34 29.34L36.342 141.408z"/><text stroke="#fff" fill="#bf3b08" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="72.605" y="79.727" font-size="20" font-family="Sans-serif" text-anchor="middle" font-weight="bold" transform="rotate(-45 74.918 71.252) scale(1.00967 1)">E X P I R E D</text></svg>

src/core/features/h5p/components/h5p-player/h5p-player.scss

@@ -6,7 +6,7 @@
         position: relative;
         width: 100%;
         height: 230px;
-        background: url('../../../../../assets/img/icons/h5p.svg') center top 25px / 100px auto no-repeat var(--core-h5p-placeholder-bg-color);
+        background: url('/assets/img/icons/h5p.svg') center top 25px / 100px auto no-repeat var(--core-h5p-placeholder-bg-color);
         color: var(--core-h5p-placeholder-text-color);
 
         .icon:not([color="success"]) {