From 5a82cebcff9cc138b077483982a92ef9b5a2eeca Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 27 Oct 2016 11:12:22 +0100
Subject: [PATCH] Make the history teaser message look like a modal.

---
 .../web/app/views/project/editor/history.jade | 65 ++++++++++---------
 .../stylesheets/app/editor/history.less       | 12 +++-
 2 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/services/web/app/views/project/editor/history.jade b/services/web/app/views/project/editor/history.jade
index e5367e171f..e7c7c96f63 100644
--- a/services/web/app/views/project/editor/history.jade
+++ b/services/web/app/views/project/editor/history.jade
@@ -44,37 +44,40 @@ div#history(ng-show="ui.view == 'history'")
 					sixpack-when="focused"
 					ng-show="project.owner._id == user.id"
 				)
-					h4.teaser-title See who changed what. Go back to previous versions.
-					img.teaser-img(
-						src="/img/teasers/history/teaser-history.png"
-						alt="History"
-					)
-					p.text-center.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")}
-					.row
-						.col-md-8.col-md-offset-2
-							ul.list-unstyled
-								li 
-									i.fa.fa-check &nbsp;
-									| Catch up with your collaborators changes
-								
-								li
-									i.fa.fa-check &nbsp;
-									| See changes over any time period
-								
-								li 
-									i.fa.fa-check &nbsp;
-									| Revert your documents to previous versions
-								
-								li 
-									i.fa.fa-check &nbsp;
-									| Restore deleted files
-
-					p.text-center(ng-controller="FreeTrialModalController")
-						a.btn.btn-success(
-							href
-							ng-class="buttonClass"
-							ng-click="startFreeTrial('history')"
-						) #{translate("start_free_trial")}
+					header.message-header
+						h3 History
+						
+					.message-body
+						h4.teaser-title See who changed what. Go back to previous versions.
+						img.teaser-img(
+							src="/img/teasers/history/teaser-history.png"
+							alt="History"
+						)
+						p.text-center.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")}
+						.row
+							.col-md-8.col-md-offset-2
+								ul.list-unstyled
+									li 
+										i.fa.fa-check &nbsp;
+										| Catch up with your collaborators changes
+									
+									li
+										i.fa.fa-check &nbsp;
+										| See changes over any time period
+									
+									li 
+										i.fa.fa-check &nbsp;
+										| Revert your documents to previous versions
+									
+									li 
+										i.fa.fa-check &nbsp;
+										| Restore deleted files
+						p.text-center(ng-controller="FreeTrialModalController")
+							a.btn.btn-success(
+								href
+								ng-class="buttonClass"
+								ng-click="startFreeTrial('history')"
+							) #{translate("start_free_trial")}
 
 			.message(ng-show="project.owner._id != user.id")
 				p #{translate("ask_proj_owner_to_upgrade_for_history")}
diff --git a/services/web/public/stylesheets/app/editor/history.less b/services/web/public/stylesheets/app/editor/history.less
index 99bf4a856e..81af8f989f 100644
--- a/services/web/public/stylesheets/app/editor/history.less
+++ b/services/web/public/stylesheets/app/editor/history.less
@@ -26,8 +26,18 @@
 			border-radius: 8px;
 		}
 		.message-wider {
-			width: 600px;
+			width: 650px;
+			margin-top: 60px;
+			padding: 0;
 		}
+
+			.message-header {
+				.modal-header;
+			}
+
+			.message-body {
+				.modal-body;
+			}
 	}
 
 	.diff-panel {