From f62a45444d2c43cffe24a2b36c8fa93371fb7a5f Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 23 Jun 2016 12:08:13 +0100
Subject: [PATCH] Prototype mark-up and styles.

---
 services/web/app/views/contact-us-modal.jade  | 12 +++++
 .../public/stylesheets/app/contact-us.less    | 49 ++++++++++++++++++-
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/services/web/app/views/contact-us-modal.jade b/services/web/app/views/contact-us-modal.jade
index 46090eec1b..da899cbaac 100644
--- a/services/web/app/views/contact-us-modal.jade
+++ b/services/web/app/views/contact-us-modal.jade
@@ -12,6 +12,18 @@ script(type='text/ng-template', id='supportModalTemplate')
 				| #{translate("subject")}
 			.form-group
 				input.field.text.medium.span8.form-control(ng-model="form.subject", maxlength='255', tabindex='1', onkeyup='')
+			.contact-suggestions
+				p.contact-suggestion-label Have you checked our knowledge base?
+				ul.contact-suggestion-list
+					li: a.contact-suggestion-list-item
+						span Item 1 - subsection lorem 
+						i.fa.fa-angle-right
+					li: a.contact-suggestion-list-item
+						span Item 2 - subsection dolor 
+						i.fa.fa-angle-right
+					li: a.contact-suggestion-list-item
+						span Item 3 - subsection sit 
+						i.fa.fa-angle-right
 			label.desc(ng-show="'#{getUserEmail()}'.length < 1")
 				| #{translate("email")}
 			.form-group(ng-show="'#{getUserEmail()}'.length < 1")
diff --git a/services/web/public/stylesheets/app/contact-us.less b/services/web/public/stylesheets/app/contact-us.less
index 06747b5412..157f23ddbe 100644
--- a/services/web/public/stylesheets/app/contact-us.less
+++ b/services/web/public/stylesheets/app/contact-us.less
@@ -3,4 +3,51 @@
 	textarea {
 		height: 120px;
 	}
-}
\ No newline at end of file
+}
+
+.contact-suggestions {
+	margin: -5px -20px 10px;
+	padding: 10px 0;
+	color: @gray-dark;
+	background-color: @gray-lightest;
+	border-top: solid 1px @gray-lighter;
+	border-bottom: solid 1px @gray-lighter;
+	font-size: 0.9rem;
+}
+
+	.contact-suggestion-label {
+		margin-bottom: 10px;
+		padding: 0 20px;
+	}
+
+	.contact-suggestion-list {
+		.list-unstyled();
+		background-color: #FFF;
+		border-top: solid 1px @gray-lighter;
+		border-bottom: solid 1px @gray-lighter;
+
+		li:last-child .contact-suggestion-list-item {
+			border-bottom: none;
+		}
+	}
+
+		.contact-suggestion-list-item {
+			display: table;
+    		width: 100%;
+			color: @dropdown-link-color;
+			padding: 10px 20px; 
+			border-bottom: solid 1px lighten(@gray-lighter, 10%);
+			cursor: pointer;
+
+			&:hover,
+			&:focus {
+				text-decoration: none;
+				color: @dropdown-link-hover-color;
+				background-color: @dropdown-link-hover-bg;
+			}
+
+			i {
+				display: table-cell;
+				text-align: right;
+			}
+		}
\ No newline at end of file