From d75027a121c0fedcba641f022af235fbf986875b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 11 Feb 2021 09:35:46 +0100
Subject: [PATCH] improve demo error styling

---
 docs/src/components/Demo/index.vue  |  9 +++------
 docs/src/components/Demo/style.scss | 18 +++++++-----------
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 4377655b..d81e7e06 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -29,12 +29,9 @@
         </a>
       </div>
     </template>
-    <template v-else>
-      <div v-if="mainFile === false" class="demo__error">
-        Could not find a demo called “{{ name }}”.
-      </div>
-      <div v-else class="demo__skeleton" />
-    </template>
+    <div v-else class="demo__error">
+      Could not find a demo called “{{ name }}”.
+    </div>
   </div>
 </template>
 
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 1bd03c66..6403afd0 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -89,16 +89,12 @@
   }
 
   &__error {
-    padding: 1rem 1.5rem;
-    color: $colorRed;
-    background-color: rgba($colorRed, 0.1);
-  }
-
-  &__skeleton {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    background-color: $colorWhite;
-    min-height: 20rem;
-    opacity: 0.1;
+    padding: 1rem 1.25rem;
+    border-radius: 0.75rem;
+    border: 3px solid $colorBlack;
+    background-color: $colorRed;
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin-bottom: 0.25rem;
   }
 }