added template for bonus page with html linking to us

services/web/app/views/referal/bonus.jade

@@ -6,7 +6,7 @@ block content
 			.row
 				.col-md-8.col-md-offset-2
 					.card
-						.container-fluid
+						.container-fluid(ng-controller="BonusLinksController")
 							.row
 								.col-md-12
 									.page-header
@@ -44,7 +44,7 @@ block content
 							.row
 								.col-md-8.col-md-offset-2.bonus-banner
 									.title
-										a(href='#link-modal', data-toggle="modal").link Link to us from your website
+										a(href='#link-modal', data-toggle="modal", ng-click="openLinkToUsModal()").link Link to us from your website
 
 							.row
 								.col-md-10.col-md-offset-1.bonus-banner
@@ -86,17 +86,40 @@ block content
 									- else
 										p.thanks You've introduced <strong>#{refered_user_count}</strong> people to ShareLaTeX. Good job!
 						
-						#link-modal.modal.hide
+						script(type="text/ng-template", id="BonusLinkToUsModal")
 							.modal-header
+								button.close(
+									type="button"
+									data-dismiss="modal"
+									ng-click="cancel()"
+								) &times;
 								h3 Link to ShareLaTeX
-							.modal-body
+							.modal-body.modal-body-share.link-modal
+
 								p You can link to ShareLaTeX with the following HTML:
 								p
-									textarea(readonly=true)
+									textarea.col-md-12(readonly=true)
 										<a href="#{buildReferalUrl("d")}">Online LaTeX Editor ShareLaTeX</a>
+
 								p Thanks!
-							.modal-footer
-								button.btn(data-dismiss="modal") Close
+
+
+							.modal-footer()
+								button.btn.btn-default(
+									ng-click="cancel()",
+								)
+									span Close
+
+
+
+
+
+
+
+
+
+
+
 
 	script(type='text/javascript', src='//platform.twitter.com/widgets.js')
 	script(src='https://connect.facebook.net/en_US/all.js')

services/web/app/views/view_templates/bonus_templates.jade

@@ -0,0 +1,45 @@
+script(type="text/ng-template", id="BonusLinkToUsModal")
+	.modal-header
+		button.close(
+			type="button"
+			data-dismiss="modal"
+			ng-click="cancel()"
+		) ×
+		h3 Dropbox link
+	.modal-body.modal-body-share
+
+		div(ng-show="dbState.gotLinkStatus")
+			div(ng-hide="dbState.userIsLinkedToDropbox || !dbState.hasDropboxFeature")
+
+				span(ng-hide="dbState.startedLinkProcess") Your account is not linked to dropbox
+					|    
+					a(ng-click="linkToDropbox()").btn.btn-info Update Dropbox Settings
+
+				p.small.text-center(ng-show="dbState.startedLinkProcess")
+					| Please refresh this page after starting your free trial.
+
+
+			div(ng-show="dbState.hasDropboxFeature && dbState.userIsLinkedToDropbox")
+				progressbar.progress-striped.active(value='dbState.percentageLeftTillNextPoll', type="info")
+				span 
+					strong {{dbState.minsTillNextPoll}} minutes 
+					span until dropbox is next checked for changes.
+
+			div.text-center(ng-hide="dbState.hasDropboxFeature")
+				p You need to upgrade your account to link to dropbox.
+				p
+					a.btn.btn-info(ng-click="startFreeTrial('dropbox')") Start Free Trial
+				p.small(ng-show="startedFreeTrial")
+					| Please refresh this page after starting your free trial.
+
+		div(ng-hide="dbState.gotLinkStatus")
+			span.small   checking dropbox status  
+			i.fa.fa-refresh.fa-spin 
+
+
+
+	.modal-footer()
+		button.btn.btn-default(
+			ng-click="cancel()",
+		)
+			span Dismiss

services/web/public/coffee/main.coffee

@@ -7,6 +7,7 @@ define [
 	"main/group-members"
 	"main/scribtex-popup"
 	"main/event-tracking"
+	"main/bonus"
 	"directives/asyncForm"
 	"directives/stopPropagation"
 	"directives/focus"

services/web/public/coffee/main/bonus.coffee

@@ -0,0 +1,14 @@
+define [
+	"base"
+], (App) ->
+	App.controller "BonusLinksController", ($scope, $modal) ->
+		$scope.openLinkToUsModal = ->
+			$modal.open {
+				templateUrl: "BonusLinkToUsModal"
+				controller:  "BonusModalController"
+			}
+			
+	App.controller "BonusModalController", ($scope, $modalInstance)->
+
+		$scope.cancel = () ->
+			$modalInstance.dismiss()

services/web/public/stylesheets/app/bonus.less

@@ -118,10 +118,8 @@
 
 }
 
-#link-modal {
-   .modal-body{
-		text-align: center;
-	}
+.link-modal {
+	text-align: center;
 	textarea {
 		width: 95%;
 		margin-bottom: 0;