Style unstable apps accordingly

dashboard/src/components/AppStoreItem.vue

@@ -21,12 +21,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="item" ref="elem">
+  <div class="item" ref="elem" :class="{ unstable: app.releaseState === 'unstable' }">
     <img v-if="visible" class="icon" :src="app.iconUrl" />
     <div class="description">
       <div class="title">{{ app.manifest.title }}</div>
       <div class="tagline">{{ app.manifest.tagline }}</div>
     </div>
+    <div v-if="app.releaseState === 'unstable'" class="unstable-label">{{ $t('appstore.unstable') }}</div>
   </div>
 </template>
 
@@ -39,6 +40,7 @@ onMounted(() => {
   padding: 10px 15px;
   border-radius: 10px;
   cursor: pointer;
+  position: relative;
 }
 
 .item:hover {
@@ -66,4 +68,21 @@ onMounted(() => {
   opacity: 0.8;
 }
 
+.unstable {
+  background-image: linear-gradient(45deg,rgba(128,128,128,.15) 25%,transparent 25%,transparent 50%,rgba(128,128,128,.15) 50%,rgba(128,128,128,.15) 75%,transparent 75%,transparent);
+  background-size: 64px 64px;
+}
+
+.unstable:hover {
+  background-color: var(--card-background);
+}
+
+.unstable-label {
+  position: absolute;
+  color: var(--pankow-color-danger);
+  top: 3px;
+  right: 6px;
+  font-size: 12px;
+}
+
 </style>