From a5d8c68fe6537a2e069070500ca4b54ced560b64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felipe=20Lube=20de=20Bragan=C3=A7a?=
 <felipe.lubra@gmail.com>
Date: Thu, 18 Oct 2018 17:13:48 -0300
Subject: [PATCH] More explanation to the user about the suggest feature

---
 _includes/sidebar.html      | 11 ++++++++---
 assets/css/application.scss |  8 ++++----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index cbed538..0cf42ff 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -2,9 +2,14 @@
 
   <a href="#" data-clipboard-target="#license-text" data-proofer-ignore="true" class="js-clipboard-button button">Copy license text to clipboard</a>
   <h3>Suggest this license</h3>
-  <div class="repository-suggestion">
-    <input type="text" data-license-id="{{ page.spdx-id }}" placeholder="Type a repository URL" id="repository-url" title="status" />
-    <div class="status-indicator"></div>
+  <div class="repository-suggestion">    
+    <p>You can suggest this license to a Github repository to make it easier for other people to
+    contribute - this is done by opening a pull request, therefore you need to authenticate with
+    your Github account to do this.</p>
+    <div class="input-wrapper">
+      <input type="text" data-license-id="{{ page.spdx-id }}" placeholder="Type a repository URL" id="repository-url" title="status" />
+      <div class="status-indicator"></div>
+    </div>
   </div>
 
   <div class="how-to-apply">
diff --git a/assets/css/application.scss b/assets/css/application.scss
index a5836b2..e462748 100644
--- a/assets/css/application.scss
+++ b/assets/css/application.scss
@@ -301,11 +301,11 @@ strong {
   margin-right: 12px;
 }
 
-.repository-suggestion {
+.input-wrapper {
   position: relative;
 }
 
-.repository-suggestion .status-indicator {
+.input-wrapper .status-indicator {
   position: absolute;
   right: 5px;
   top: 6px;
@@ -317,12 +317,12 @@ strong {
   border: 4px solid #ddd;  
 }
 
-.repository-suggestion .status-indicator.fetching {  
+.input-wrapper .status-indicator.fetching {  
   border-right-color: transparent;
   animation: rotate 0.8s infinite linear;
 }
 
-.repository-suggestion .status-indicator.error {  
+.input-wrapper .status-indicator.error {  
   border: 4px solid #c6403d;  
 }