Add spacing to Room settings - Notifications subsection

matrix-org · Oct 16, 2021 · 7b89336 · 7b89336
1 parent 4fb0d02
commit 7b89336
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git 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
@@ -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") }