Add notice to tell people to refresh after save.

This is the most common reason for settings to not work

Author: muan

src/options/index.html

@@ -10,9 +10,10 @@
 
   <div class="wrapper">
     <div id="options"></div>
+    <div class="notice">Make sure you refresh both the extensions page (chrome://extensions/) and the gmail tab after updating the settings.</div>
     <button id="save">Save</button>
   </div>
 
 </body>
 
-</html>
+</html>

src/options/options.css

@@ -18,6 +18,17 @@ body, * {
   border: 1px solid #e0e0e0;
 }
 
+.notice {
+  display: none;
+  background: #ffeeee;
+  border-top: 1px solid #fcc;
+  border-bottom: 1px solid #fcc;
+  color: #a00;
+  padding: 20px;
+  margin: -1px -20px 0;
+  font-weight: bold;
+}
+
 .option {
   margin: 0 -20px 0;
   padding: 20px;
@@ -27,7 +38,6 @@ body, * {
 
 .option:last-child {
   border-bottom: 1px solid #e0e0e0;
-  margin-bottom: 20px;
 }
 
 .option:nth-child(even) {
@@ -74,7 +84,7 @@ button {
   text-transform: uppercase;
   box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1);
   transition: all .6s;
-  margin-bottom: 20px;
+  margin: 20px 0;
 }
 
 button:active {

src/options/options.js

@@ -49,6 +49,8 @@ $(document).on('click', '#save', function() {
 
   // Update status to let user know options were saved.
   var save = document.getElementById('save')
+  $('.notice').show()
+  window.scrollTo(0, 10000)
   save.innerHTML = 'Updated!'
   $(fields).closest('.option').removeClass('saved').addClass('saved')
   setTimeout(function() {