From 8f40cd39fda1ee83ec6b177ba7935f913ed5a45b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 29 Nov 2020 12:29:05 +0100
Subject: [PATCH] Added styling

---
 res/css/_components.scss                      |  1 +
 .../views/settings/_SpellCheckLanguages.scss  | 36 +++++++++++++++++++
 .../views/settings/SpellCheckSettings.tsx     |  9 +++--
 .../tabs/user/GeneralUserSettingsTab.js       |  7 ++--
 4 files changed, 44 insertions(+), 9 deletions(-)
 create mode 100644 res/css/views/settings/_SpellCheckLanguages.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 445ed70ff4..1eb4b91a31 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -207,6 +207,7 @@
 @import "./views/settings/_DevicesPanel.scss";
 @import "./views/settings/_E2eAdvancedPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
+@import "./views/settings/_SpellCheckLanguages.scss";
 @import "./views/settings/_IntegrationManager.scss";
 @import "./views/settings/_Notifications.scss";
 @import "./views/settings/_PhoneNumbers.scss";
diff --git a/res/css/views/settings/_SpellCheckLanguages.scss b/res/css/views/settings/_SpellCheckLanguages.scss
new file mode 100644
index 0000000000..734f669f0e
--- /dev/null
+++ b/res/css/views/settings/_SpellCheckLanguages.scss
@@ -0,0 +1,36 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ExistingSpellCheckLanguage {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.mx_ExistingSpellCheckLanguage_language {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.mx_SpellCheckLanguages {
+    @mixin mx_Settings_fullWidthField;
+}
\ No newline at end of file
diff --git a/src/components/views/settings/SpellCheckSettings.tsx b/src/components/views/settings/SpellCheckSettings.tsx
index 1bdcd882c9..befd98112e 100644
--- a/src/components/views/settings/SpellCheckSettings.tsx
+++ b/src/components/views/settings/SpellCheckSettings.tsx
@@ -43,8 +43,8 @@ export class ExistingSpellCheckLanguage extends React.Component<ExistingSpellChe
 
     render() {
         return (
-            <div className="mx_ExistingSpellCheckerLanguage">
-                <span className="mx_ExistingSpellCheckerLanguage_language">{this.props.language}</span>
+            <div className="mx_ExistingSpellCheckLanguage">
+                <span className="mx_ExistingSpellCheckLanguage_language">{this.props.language}</span>
                 <AccessibleButton onClick={this._onRemove} kind="danger_sm">
                     {_t("Remove")}
                 </AccessibleButton>
@@ -96,10 +96,9 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
         );
 
         return (
-            <div className="mx_SpellCheckerLanguages">
+            <div className="mx_SpellCheckLanguages">
                 {existingSpellCheckLanguages}
-                <form onSubmit={this._onAddClick} noValidate={true}
-                      className="mx_mx_SpellCheckerLanguages_new">
+                <form onSubmit={this._onAddClick} noValidate={true}>
                     <LanguageDropdown className="mx_GeneralUserSettingsTab_spellCheckLanguageInput"
                                       value={this.state.newLanguage}
                                       onOptionChange={this._onNewLanguageChange} />
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
index 68a16463b0..258ff6d318 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@@ -313,11 +313,10 @@ export default class GeneralUserSettingsTab extends React.Component {
 
     _renderSpellCheckSection() {
         return (
-             <div className="mx_SettingsTab_section">
+            <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Spell checking")}</span>
-                <SpellCheckSettings className="mx_GeneralUserSettingsTab_spellCheckLanguageInput"
-                            languages={this.state.spellCheckLanguages}
-                            onLanguagesChange={this._onSpellCheckLanguagesChange} />
+                <SpellCheckSettings languages={this.state.spellCheckLanguages}
+                                    onLanguagesChange={this._onSpellCheckLanguagesChange} />
             </div>
         );
     }