Improve the styling of search initialization errors.

Signed-off-by: Kalle Struik <[email protected]>

Author: KalleStruik

res/css/_components.scss

@@ -126,7 +126,7 @@
 @import "./views/elements/_AccessibleButton.scss";
 @import "./views/elements/_AddressSelector.scss";
 @import "./views/elements/_AddressTile.scss";
-@import "./views/elements/_DesktopBuildsNotice.scss";
+@import "./views/elements/_SearchWarning.scss";
 @import "./views/elements/_DesktopCapturerSourcePicker.scss";
 @import "./views/elements/_DialPadBackspaceButton.scss";
 @import "./views/elements/_DirectorySearchBox.scss";

res/css/views/elements/_DesktopBuildsNotice.scss renamed to res/css/views/elements/_SearchWarning.scss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_DesktopBuildsNotice {
+.mx_SearchWarning {
     text-align: center;
     padding: 0 16px;
 

src/components/structures/FilePanel.tsx

@@ -29,7 +29,7 @@ import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
 import BaseCard from "../views/right_panel/BaseCard";
 import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
-import DesktopBuildsNotice, { WarningKind } from "../views/elements/DesktopBuildsNotice";
+import SearchWarning, { WarningKind } from "../views/elements/SearchWarning";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 
 import ResizeNotifier from '../../utils/ResizeNotifier';
@@ -258,7 +258,7 @@ class FilePanel extends React.Component<IProps, IState> {
                     previousPhase={RightPanelPhases.RoomSummary}
                     withoutScrollContainer
                 >
-                    <DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
+                    <SearchWarning isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
                     <TimelinePanel
                         manageReadReceipts={false}
                         manageReadMarkers={false}

src/components/views/elements/DesktopBuildsNotice.tsx renamed to src/components/views/elements/SearchWarning.tsx

@@ -32,24 +32,27 @@ interface IProps {
     kind: WarningKind;
 }
 
-export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
+export default function SearchWarning({ isRoomEncrypted, kind }: IProps) {
     if (!isRoomEncrypted) return null;
     if (EventIndexPeg.get()) return null;
 
     if (EventIndexPeg.error) {
-        return <>
-            { _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
-                a: sub => (<a onClick={(evt) => {
-                    evt.preventDefault();
-                    dis.dispatch({
-                        action: Action.ViewUserSettings,
-                        initialTabId: UserTab.Security,
-                    });
-                }}>
-                    { sub }
-                </a>),
-            }) }
-        </>;
+        return (
+            <div className="mx_SearchWarning">
+                { _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
+                    a: sub => (<a className="mx_linkButton"
+                        onClick={(evt) => {
+                            evt.preventDefault();
+                            dis.dispatch({
+                                action: Action.ViewUserSettings,
+                                initialTabId: UserTab.Security,
+                            });
+                        }}>
+                        { sub }
+                    </a>),
+                }) }
+            </div>
+        );
     }
 
     const { desktopBuilds, brand } = SdkConfig.get();
@@ -88,7 +91,7 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
     }
 
     return (
-        <div className="mx_DesktopBuildsNotice">
+        <div className="mx_SearchWarning">
             { logo }
             <span>{ text }</span>
         </div>

src/components/views/rooms/SearchBar.tsx

@@ -20,7 +20,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import classNames from "classnames";
 import { _t } from '../../../languageHandler';
 import { Key } from "../../../Keyboard";
-import DesktopBuildsNotice, { WarningKind } from "../elements/DesktopBuildsNotice";
+import SearchWarning, { WarningKind } from "../elements/SearchWarning";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
@@ -123,7 +123,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
                     </div>
                     <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />
                 </div>
-                <DesktopBuildsNotice isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} />
+                <SearchWarning isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} />
             </>
         );
     }