From ee1dccfae00227413a4a36b53adcf17cd5df11b0 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 11 Feb 2022 09:11:13 +0000
Subject: [PATCH] -- Create preview-box.less styles - Being used inside
 /views/console/storage/index.phtml

---
 app/views/console/storage/index.phtml |  6 ++++++
 public/styles/comps/preview-box.less  | 21 +++++++++++++++++++++
 public/styles/default.less            |  3 ++-
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 public/styles/comps/preview-box.less

diff --git a/app/views/console/storage/index.phtml b/app/views/console/storage/index.phtml
index bc493f882d..68eb7703b0 100644
--- a/app/views/console/storage/index.phtml
+++ b/app/views/console/storage/index.phtml
@@ -138,6 +138,12 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
                                                     <div class="margin-bottom-small">File Preview</div>
 
                                                     <div class="margin-bottom-small">
+                                                        <div class="preview-box">
+                                                            <div class="preview-box-image">
+                                                                <span class="IMAGE-OR-ICON">@</span>
+                                                            </div>
+                                                            <span class="preview-box-text">Preview not available</span>
+                                                        </div>
                                                         <img src="" class="file-preview" data-ls-attrs="src={{env.ENDPOINT}}/v1/storage/files/{{file.$id}}/preview?width=350&height=250&project={{router.params.project}}&mode=admin" loading="lazy" width="225" height="160" />
                                                     </div>
 
diff --git a/public/styles/comps/preview-box.less b/public/styles/comps/preview-box.less
new file mode 100644
index 0000000000..6f4851e4bc
--- /dev/null
+++ b/public/styles/comps/preview-box.less
@@ -0,0 +1,21 @@
+.preview-box {
+  display: grid;
+  place-content: center;
+  padding: 40px;
+  background: var(--config-color-background-fade);
+  border: 1px dashed var(--config-color-background-dark);
+  border-radius: 8px;
+  &-image {
+    display: grid;
+    place-content: center;
+    width: 40px;
+    height: 40px;
+    margin-inline: auto;
+    background-color: var(--config-color-background-focus);
+    border-radius: 50%;
+  }
+  &-text{
+    margin-top: 16px;
+    color: var(--config-color-fade);
+  }
+}
\ No newline at end of file
diff --git a/public/styles/default.less b/public/styles/default.less
index 660895a22e..cc1f3d3eb4 100644
--- a/public/styles/default.less
+++ b/public/styles/default.less
@@ -33,6 +33,7 @@ img[src=""] {
 @import "comps/modal";
 @import "comps/scroll";
 @import "comps/tabs";
+@import "comps/preview-box";
 
 html {
   padding: 0;
@@ -54,4 +55,4 @@ ul {
     margin: 0;
     list-style: none;
   }
-}
+}
\ No newline at end of file