Touch up settings: alignment, spacing, error states

Fixes https://github.com/vector-im/riot-web/issues/10554

Issues fixed:
* Fields were not ~30px from the avatar (too much right margin)
* Tooltips overflowed the dialog on some resolutions
* SetIdServer didn't have an error state for making the field red
* Spacing between sections in Discovery was wrong (fixed by just removing the problematic n+2 selector - it didn't help anything)

src/components/views/elements/Field.js

@@ -51,6 +51,9 @@ export default class Field extends React.PureComponent {
         // If specified, contents will appear as a tooltip on the element and
         // validation feedback tooltips will be suppressed.
         tooltipContent: PropTypes.node,
+        // If specified alongside tooltipContent, the class name to apply to the
+        // tooltip itself.
+        tooltipClassName: PropTypes.string,
         // All other props pass through to the <input>.
     };
 
@@ -177,8 +180,9 @@ export default class Field extends React.PureComponent {
         const Tooltip = sdk.getComponent("elements.Tooltip");
         let fieldTooltip;
         if (tooltipContent || this.state.feedback) {
+            const addlClassName = this.props.tooltipClassName ? this.props.tooltipClassName : '';
             fieldTooltip = <Tooltip
-                tooltipClassName="mx_Field_tooltip"
+                tooltipClassName={`mx_Field_tooltip ${addlClassName}`}
                 visible={this.state.feedbackVisible}
                 label={tooltipContent || this.state.feedback}
             />;

src/components/views/settings/SetIdServer.js

@@ -319,7 +319,7 @@ export default class SetIdServer extends React.Component {
                     "won't be discoverable by other users and you won't be " +
                     "able to invite others by email or phone.",
                 )}</span>
-                <AccessibleButton onClick={this._onDisconnectClicked} kind="danger">
+                <AccessibleButton onClick={this._onDisconnectClicked} kind="danger_sm">
                     {discoButtonContent}
                 </AccessibleButton>
             </div>;
@@ -341,6 +341,9 @@ export default class SetIdServer extends React.Component {
                     value={this.state.idServer}
                     onChange={this._onIdentityServerChanged}
                     tooltipContent={this._getTooltip()}
+                    tooltipClassName="mx_SetIdServer_tooltip"
+                    disabled={this.state.busy}
+                    flagInvalid={!!this.state.error}
                 />
                 <AccessibleButton type="submit" kind="primary_sm"
                     onClick={this._checkIdServer}

src/components/views/settings/SetIntegrationManager.js

@@ -196,6 +196,7 @@ export default class SetIntegrationManager extends React.Component {
                     autoComplete="off"
                     onChange={this._onUrlChanged}
                     tooltipContent={this._getTooltip()}
+                    tooltipClassName="mx_SetIntegrationManager_tooltip"
                     disabled={this.state.busy}
                     flagInvalid={!!this.state.error}
                 />