improved empty state

app/app/styles/view/document/content.scss

@@ -110,23 +110,7 @@
 	}
 }
 
-.no-sections {
+.empty-state-document {
+	margin-top: 150px;
 	text-align: center;
-	opacity: 0.5;
-
-	> .box {
-		padding: 35px;
-		display: inline-block;
-		margin: 0 20px;
-
-		> .message {
-			font-size: 14px;
-			color: $color-off-black;
-			margin-top: 20px;
-		}
-
-		> .regular-button {
-			cursor: default !important;
-		}
-	}
 }

app/app/styles/view/page-documents.scss

@@ -173,31 +173,9 @@
 	}
 }
 
-.no-documents {
+.empty-state-space {
 	margin-top: 150px;
 	text-align: center;
-	opacity: 0.5;
-	background-image: url("/assets/img/no-documents.png");
-	background-repeat: no-repeat;
-	background-position: center;
-
-	> .box {
-		max-width: 400px;
-    	margin: 0 auto;
-    	border: 1px dashed #b3adad;
-    	padding: 20px;
-
-		> .message {
-			font-size: 14px;
-			color: $color-off-black;
-			margin-top: 20px;
-			line-height: 50px;
-		}
-
-		> .regular-button {
-			cursor: default !important;
-		}
-	}
 }
 
 .templates-list {

app/app/templates/components/document/document-view.hbs

@@ -61,14 +61,7 @@
 </div>
 
 {{#if noSections}}
-	<div class="no-sections">
-		<div class="box">
-			<div class="message">Click the
-				<div class="round-button-mono">
-					<i class="material-icons color-gray">add</i>
-					<div class="name">section</div>
-				</div>
-				to add a new section to this document</div>
-		</div>
+	<div class="empty-state-document">
+		<img src="/assets/img/empty-state-document.gif" />
 	</div>
 {{/if}}

app/app/templates/components/folder/documents-list.hbs

@@ -20,18 +20,7 @@
 </ul>
 
 {{#if emptyState}}
-	<div class="no-documents">
-		<div class="box">
-			<h3>This space is empty</h3>
-			<div class="message">Click the
-				<div class="round-button-mono">
-					<i class="material-icons color-gray">add</i>
-				</div> button to add a new document<br/>or
-				<div class="round-button-mono">
-					<i class="material-icons color-gray">file_upload</i>
-				</div>
-				to import .doc .docx, .txt .md files
-			</div>
-		</div>
+	<div class="empty-state-space">
+		<img src="/assets/img/empty-state-space.gif" />
 	</div>
 {{/if}}