Fix headings margin on security user settings tab (#8826)

* Apply kind=link to 'Learn more' link on security user settings tab

Signed-off-by: Suguru Hirahara <[email protected]>

* Remove specific margin setting from heading on security user settings tab

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/views/settings/tabs/_SettingsTab.scss

@@ -92,12 +92,6 @@ limitations under the License.
     }
 }
 
-.mx_SettingsTab_linkBtn {
-    cursor: pointer;
-    color: $accent;
-    word-break: break-all;
-}
-
 .mx_SettingsTab_toggleWithDescription {
     margin-top: $spacing-24;
 }

res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss

@@ -27,9 +27,6 @@ limitations under the License.
 }
 
 .mx_SecurityUserSettingsTab {
-    .mx_SettingsTab_heading {
-        margin-bottom: 22px;
-    }
     .mx_SettingsTab_section {
         .mx_AccessibleButton_kind_link {
             font-size: inherit;

src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -306,11 +306,12 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                             { _t("Share anonymous data to help us identify issues. Nothing personal. " +
                                  "No third parties.") }
                         </p>
-                        <p>
-                            <AccessibleButton className="mx_SettingsTab_linkBtn" onClick={onClickAnalyticsLearnMore}>
-                                { _t("Learn more") }
-                            </AccessibleButton>
-                        </p>
+                        <AccessibleButton
+                            kind="link"
+                            onClick={onClickAnalyticsLearnMore}
+                        >
+                            { _t("Learn more") }
+                        </AccessibleButton>
                     </div>
                     { PosthogAnalytics.instance.isEnabled() && (
                         <SettingsFlag