✨ Site > File > Add unreadable message

site/src/components/file/script.js

@@ -1,6 +1,7 @@
 import Versions from '@/components/versions'
 import Viewer from '@/components/viewer'
 import Tooltip from '@/components/tooltip'
+import Illustration from '@/components/illustration'
 import copyToClipboard from 'copy-to-clipboard'
 
 export default
@@ -11,7 +12,8 @@ export default
     {
         Versions,
         Viewer,
-        Tooltip
+        Tooltip,
+        Illustration
     },
 
     computed:

site/src/components/file/style.styl

@@ -134,4 +134,30 @@ header
 
     img
         max-width 100%
-        max-height 100%
+        max-height 100%
+
+.cant-read
+    display flex
+    align-items center
+    justify-content center
+    flex-direction column
+    position absolute
+    top 0
+    right 0
+    left 0
+    height 100%
+
+    .text
+        text-align center
+        margin-bottom 35px
+        line-height 1.4em
+        color #9696a4
+        font-size 20px
+        font-weight 300
+        font-family 'DINNextRoundedLTPro'
+
+        .download
+            color #fff
+
+            &:hover
+                color #4bd1c5

site/src/components/file/template.html

@@ -15,8 +15,11 @@
 
     <!-- Can't read -->
     <div class="cant-read" v-if="!isCode && !isImage">
-        <br>Sorry, I can't read this file.
-        <br>But you can <a :href="downloadUrl" download>download it</a>
+        <illustration name="sad-robot"></illustration>
+        <div class="text">
+            Sorry, I can't read this file.
+            <br>But you can <a :href="downloadUrl" download class="download">download it</a>.
+        </div>
     </div>
 
     <!-- Header -->