Notify on saved options

ext/src/_locales/en/messages.json

@@ -119,7 +119,10 @@
   , "optionsReset": {
         "message": "Restore Defaults"
     }
-  , "optionsSubmit": {
-        "message": "Submit"
+  , "optionsSave": {
+        "message": "Save"
+    }
+  , "optionsSaved": {
+        "message": "Saved!"
     }
 }

ext/src/options/index.jsx

@@ -46,6 +46,7 @@ class App extends Component {
           , bridgeInfo: null
           , bridgeLoading: true
           , isFormValid: true
+          , hasSaved: false
         };
 
         this.handleReset = this.handleReset.bind(this);
@@ -104,6 +105,16 @@ class App extends Component {
                 }
             }
 
+            this.setState({
+                hasSaved: true
+            }, () => {
+                window.setTimeout(() => {
+                    this.setState({
+                        hasSaved: false
+                    });
+                }, 1000)
+            });
+
             // Send update message / event
             browser.runtime.sendMessage({
                 subject: "optionsUpdated"
@@ -270,13 +281,20 @@ class App extends Component {
                     </fieldset>
 
                     <div id="buttons">
+                        <div id="status-line">
+                            { do {
+                                if (this.state.hasSaved) {
+                                    _("optionsSaved")
+                                }
+                            }}
+                        </div>
                         <button onClick={ this.handleReset }>
                             { _("optionsReset") }
                         </button>
                         <button type="submit"
                                 default
                                 disabled={ !this.state.isFormValid }>
-                            { _("optionsSubmit") }
+                            { _("optionsSave") }
                         </button>
                     </div>
                 </form>

ext/src/options/styles/index.css

@@ -12,6 +12,8 @@
 }
 
 #buttons {
+    display: flex;
+    align-items: center;
     align-self: flex-end;
     margin-block-start: 5px;
 }
@@ -20,6 +22,10 @@
     margin-inline-end: 5px;
 }
 
+#status-line {
+    color: graytext;
+}
+
 
 .bridge {
     margin-top: 20px;