Improve UX

res/css/views/settings/_Notifications.scss

@@ -76,6 +76,21 @@ limitations under the License.
     display: none;
 }
 
-.mx_NotificationSound_resetSound {
+.mx_NotificationSound_browse {
+    color: $accent-color;
+    border: 1px solid $accent-color;
+    background-color: transparent;
+}
+
+.mx_NotificationSound_save {
     margin-left: 5px;
+    color: white;
+    background-color: $accent-color;
+}
+
+.mx_NotificationSound_resetSound {
+    margin-top: 5px;
+    color: white;
+    border: $warning-color;
+    background-color: $warning-color;
 }

src/components/views/settings/tabs/room/NotificationSettingsTab.js

@@ -20,7 +20,7 @@ import {_t} from "../../../../../languageHandler";
 import MatrixClientPeg from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Notifier from "../../../../../Notifier";
-import SettingsStore from  '../../../../../settings/SettingsStore';
+import SettingsStore from '../../../../../settings/SettingsStore';
 import { SettingLevel } from '../../../../../settings/SettingsStore';
 
 export default class NotificationsSettingsTab extends React.Component {
@@ -65,14 +65,19 @@ export default class NotificationsSettingsTab extends React.Component {
         this.setState({
             uploadedFile: file,
         });
+    }
+
+    async _onClickSaveSound(e) {
+        e.stopPropagation();
+        e.preventDefault();
 
         try {
             await this._saveSound();
         } catch (ex) {
             console.error(
                 `Unable to save notification sound for ${this.props.roomId}`,
-                ex,
             );
+            console.error(ex);
         }
     }
 
@@ -80,6 +85,7 @@ export default class NotificationsSettingsTab extends React.Component {
         if (!this.state.uploadedFile) {
             return;
         }
+        
         let type = this.state.uploadedFile.type;
         if (type === "video/ogg") {
             // XXX: I've observed browsers allowing users to pick a audio/ogg files,
@@ -87,6 +93,7 @@ export default class NotificationsSettingsTab extends React.Component {
             // suck at detecting mimetypes.
             type = "audio/ogg";
         }
+
         const url = await MatrixClientPeg.get().uploadContent(
             this.state.uploadedFile, {
                 type,
@@ -96,7 +103,6 @@ export default class NotificationsSettingsTab extends React.Component {
         await SettingsStore.setValue(
             "notificationSound",
             this.props.roomId,
-            SettingsStore.
             SettingLevel.ROOM_ACCOUNT,
             {
                 name: this.state.uploadedFile.name,
@@ -108,7 +114,6 @@ export default class NotificationsSettingsTab extends React.Component {
 
         this.setState({
             uploadedFile: null,
-            uploadedFileUrl: null,
             currentSound: this.state.uploadedFile.name,
         });
     }
@@ -129,13 +134,25 @@ export default class NotificationsSettingsTab extends React.Component {
     }
 
     render() {
+        let currentUploadedFile = null;
+        if (this.state.uploadedFile) {
+            currentUploadedFile = (
+                <div>
+                    <span>{_t("Uploaded sound")}: <code>{this.state.uploadedFile.name}</code></span>
+                </div>
+            );
+        }
+
         return (
             <div className="mx_SettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Notifications")}</div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <span className='mx_SettingsTab_subheading'>{_t("Sounds")}</span>
                     <div>
-                        <span>{_t("Custom Notification Sounds")}: <code>{this.state.currentSound}</code></span>
+                        <span>{_t("Notification sound")}: <code>{this.state.currentSound}</code></span><br/>
+                        <AccessibleButton className="mx_NotificationSound_resetSound" disabled={this.state.currentSound == "default"} onClick={this._clearSound.bind(this)} kind="primary">
+                                {_t("Reset")}
+                        </AccessibleButton>
                     </div>
                     <div>
                         <h3>{_t("Set a new custom sound")}</h3>
@@ -143,13 +160,16 @@ export default class NotificationsSettingsTab extends React.Component {
                             <input ref="soundUpload" className="mx_NotificationSound_soundUpload" type="file" onChange={this._onSoundUploadChanged.bind(this)} accept="audio/*" />
                         </form>
 
-                        <AccessibleButton onClick={this._triggerUploader.bind(this)} kind="primary">
+                        {currentUploadedFile}
+
+                        <AccessibleButton className="mx_NotificationSound_browse" onClick={this._triggerUploader.bind(this)} kind="primary">
                                 {_t("Browse")}
                         </AccessibleButton>
 
-                        <AccessibleButton className="mx_NotificationSound_resetSound" onClick={this._clearSound.bind(this)} kind="primary">
-                                {_t("Reset")}
+                        <AccessibleButton className="mx_NotificationSound_save" disabled={this.state.uploadedFile == null} onClick={this._onClickSaveSound.bind(this)} kind="primary">
+                                {_t("Save")}
                         </AccessibleButton>
+                        <br />
                     </div>
                 </div>
             </div>

src/i18n/strings/en_EN.json

@@ -617,10 +617,12 @@
     "Room Addresses": "Room Addresses",
     "Publish this room to the public in %(domain)s's room directory?": "Publish this room to the public in %(domain)s's room directory?",
     "URL Previews": "URL Previews",
+    "Uploaded sound": "Uploaded sound",
     "Sounds": "Sounds",
+    "Notification sound": "Notification sound",
+    "Reset": "Reset",
     "Set a new custom sound": "Set a new custom sound",
     "Browse": "Browse",
-    "Reset": "Reset",
     "Change room avatar": "Change room avatar",
     "Change room name": "Change room name",
     "Change main address for the room": "Change main address for the room",