From 7b893366f2957660706b8097f4a3050d44eddc12 Mon Sep 17 00:00:00 2001
From: CicadaCinema <52425971+CicadaCinema@users.noreply.github.com>
Date: Sat, 16 Oct 2021 14:52:29 +0100
Subject: [PATCH 1/2] Add spacing to Room settings - Notifications subsection

---
 res/css/views/settings/_Notifications.scss       |  4 ++++
 .../tabs/room/NotificationSettingsTab.tsx        | 16 ++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss
index a0e46c0071..571d8141ec 100644
--- a/res/css/views/settings/_Notifications.scss
+++ b/res/css/views/settings/_Notifications.scss
@@ -90,3 +90,7 @@ limitations under the License.
         margin-top: 35px; // lots of distance from the last line of the table
     }
 }
+
+.mx_AccessibleButton.mx_NotificationSound_browse {
+    margin-right: 10px;
+}
diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
index 32453b5a25..ab4929a5c1 100644
--- a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
@@ -158,18 +158,22 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <span className='mx_SettingsTab_subheading'>{ _t("Sounds") }</span>
                     <div>
-                        <span>{ _t("Notification sound") }: <code>{ this.state.currentSound }</code></span><br />
+                        <div class="mx_SettingsTab_subsectionText">
+                            <span>{ _t("Notification sound") }: <code>{ this.state.currentSound }</code></span>
+                        </div>
                         <AccessibleButton className="mx_NotificationSound_resetSound" disabled={this.state.currentSound == "default"} onClick={this.clearSound} kind="primary">
                             { _t("Reset") }
                         </AccessibleButton>
                     </div>
                     <div>
                         <h3>{ _t("Set a new custom sound") }</h3>
-                        <form autoComplete="off" noValidate={true}>
-                            <input ref={this.soundUpload} className="mx_NotificationSound_soundUpload" type="file" onChange={this.onSoundUploadChanged} accept="audio/*" />
-                        </form>
-
-                        { currentUploadedFile }
+                        <div class="mx_SettingsFlag">
+                            <form autoComplete="off" noValidate={true}>
+                                <input ref={this.soundUpload} className="mx_NotificationSound_soundUpload" type="file" onChange={this.onSoundUploadChanged} accept="audio/*" />
+                            </form>
+                        
+                            { currentUploadedFile }
+                        </div>
 
                         <AccessibleButton className="mx_NotificationSound_browse" onClick={this.triggerUploader} kind="primary">
                             { _t("Browse") }

From a9c9e5b778b4f46485f6b711418cd77f5ee0777c Mon Sep 17 00:00:00 2001
From: CicadaCinema <52425971+CicadaCinema@users.noreply.github.com>
Date: Sat, 16 Oct 2021 14:58:10 +0100
Subject: [PATCH 2/2] appease the linter

---
 .../views/settings/tabs/room/NotificationSettingsTab.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
index ab4929a5c1..3060d570a2 100644
--- a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
@@ -158,7 +158,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <span className='mx_SettingsTab_subheading'>{ _t("Sounds") }</span>
                     <div>
-                        <div class="mx_SettingsTab_subsectionText">
+                        <div className="mx_SettingsTab_subsectionText">
                             <span>{ _t("Notification sound") }: <code>{ this.state.currentSound }</code></span>
                         </div>
                         <AccessibleButton className="mx_NotificationSound_resetSound" disabled={this.state.currentSound == "default"} onClick={this.clearSound} kind="primary">
@@ -167,11 +167,11 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
                     </div>
                     <div>
                         <h3>{ _t("Set a new custom sound") }</h3>
-                        <div class="mx_SettingsFlag">
+                        <div className="mx_SettingsFlag">
                             <form autoComplete="off" noValidate={true}>
                                 <input ref={this.soundUpload} className="mx_NotificationSound_soundUpload" type="file" onChange={this.onSoundUploadChanged} accept="audio/*" />
                             </form>
-                        
+
                             { currentUploadedFile }
                         </div>