From 1dee39f419dfe63213d9d3ad959c059bd51d34cc Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Tue, 14 Jun 2022 13:20:54 +0000
Subject: [PATCH] Improve help user settings tab styling (#8838)

* Set the default margin between the debug button and the subsection texts

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove obsolete style rule for AccessibleButton

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove the special block margin setting from the reload button

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove obsolete class name - mx_HelpUserSettingsTab_versions

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace <br>s for spacing with a margin style declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace <br> for spacing with a margin style declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove <br>s for spacing

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply mx_SettingsTab_subsectionText to the credits list

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply spacing-16 instead of spacing-12

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 .../tabs/user/_HelpUserSettingsTab.scss       | 21 +++++------
 .../tabs/user/HelpUserSettingsTab.tsx         | 35 +++++++++----------
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
index 3779162223..c03de9f36c 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
@@ -15,16 +15,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_HelpUserSettingsTab_debugButton {
-    margin-bottom: 5px;
-    margin-top: 5px;
-}
+.mx_HelpUserSettingsTab {
+    code {
+        word-break: break-all;
+        user-select: all;
+    }
 
-.mx_HelpUserSettingsTab span.mx_AccessibleButton {
-    word-break: break-word;
-}
+    details {
+        margin: $spacing-16 auto;
 
-.mx_HelpUserSettingsTab code {
-    word-break: break-all;
-    user-select: all;
+        summary {
+            margin-bottom: $spacing-16;
+        }
+    }
 }
diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
index 45ffa3e8ba..c4e0e5d87f 100644
--- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
@@ -110,7 +110,7 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
         }
 
         return (
-            <div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
+            <div className='mx_SettingsTab_section'>
                 <span className='mx_SettingsTab_subheading'>{ _t("Legal") }</span>
                 <div className='mx_SettingsTab_subsectionText'>
                     { legalLinks }
@@ -125,7 +125,7 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
         return (
             <div className='mx_SettingsTab_section'>
                 <span className='mx_SettingsTab_subheading'>{ _t("Credits") }</span>
-                <ul>
+                <ul className='mx_SettingsTab_subsectionText'>
                     <li>
                         The <a href="themes/element/img/backgrounds/lake.jpg" rel="noreferrer noopener" target="_blank">
                             default cover photo
@@ -245,11 +245,11 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
                             "last interacted with, and the usernames of other users. " +
                             "They do not contain messages.",
                         ) }
-                        <div className='mx_HelpUserSettingsTab_debugButton'>
-                            <AccessibleButton onClick={this.onBugReport} kind='primary'>
-                                { _t("Submit debug logs") }
-                            </AccessibleButton>
-                        </div>
+                    </div>
+                    <AccessibleButton onClick={this.onBugReport} kind='primary'>
+                        { _t("Submit debug logs") }
+                    </AccessibleButton>
+                    <div className='mx_SettingsTab_subsectionText'>
                         { _t(
                             "To report a Matrix-related security issue, please read the Matrix.org " +
                             "<a>Security Disclosure Policy</a>.", {},
@@ -280,7 +280,7 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
                         { _t("Keyboard Shortcuts") }
                     </AccessibleButton>
                 </div>
-                <div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
+                <div className='mx_SettingsTab_section'>
                     <span className='mx_SettingsTab_subheading'>{ _t("Versions") }</span>
                     <div className='mx_SettingsTab_subsectionText'>
                         <CopyableText getTextToCopy={this.getVersionTextToCopy}>
@@ -292,25 +292,22 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
                 </div>
                 { this.renderLegal() }
                 { this.renderCredits() }
-                <div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
+                <div className='mx_SettingsTab_section'>
                     <span className='mx_SettingsTab_subheading'>{ _t("Advanced") }</span>
                     <div className='mx_SettingsTab_subsectionText'>
-                        { _t("Homeserver is") } <code>{ MatrixClientPeg.get().getHomeserverUrl() }</code><br />
-                        { _t("Identity server is") } <code>{ MatrixClientPeg.get().getIdentityServerUrl() }</code><br />
-                        <br />
+                        <div>{ _t("Homeserver is") } <code>{ MatrixClientPeg.get().getHomeserverUrl() }</code></div>
+                        <div>{ _t("Identity server is") } <code>{ MatrixClientPeg.get().getIdentityServerUrl() }</code></div>
                         <details>
-                            <summary>{ _t("Access Token") }</summary><br />
+                            <summary>{ _t("Access Token") }</summary>
                             <b>{ _t("Your access token gives full access to your account."
                                + " Do not share it with anyone.") }</b>
                             <CopyableText getTextToCopy={() => MatrixClientPeg.get().getAccessToken()}>
                                 { MatrixClientPeg.get().getAccessToken() }
                             </CopyableText>
-                        </details><br />
-                        <div className='mx_HelpUserSettingsTab_debugButton'>
-                            <AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
-                                { _t("Clear cache and reload") }
-                            </AccessibleButton>
-                        </div>
+                        </details>
+                        <AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
+                            { _t("Clear cache and reload") }
+                        </AccessibleButton>
                     </div>
                 </div>
             </div>