use classnames rather than string manipulation

Author: uhoreg

src/components/views/messages/DecryptionFailureBody.tsx

@@ -6,6 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
+import classNames from "classnames";
 import React, { forwardRef, ForwardRefExoticComponent, useContext } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { DecryptionFailureCode } from "matrix-js-sdk/src/crypto-api";
@@ -45,21 +46,22 @@ function getErrorMessage(mxEvent: MatrixEvent, isVerified: boolean | undefined):
     return _t("timeline|decryption_failure|unable_to_decrypt");
 }
 
-function getErrorExtraClass(mxEvent: MatrixEvent): string {
+function getErrorExtraClass(mxEvent: MatrixEvent): Record<string, boolean> {
     switch (mxEvent.decryptionFailureReason) {
         case DecryptionFailureCode.SENDER_IDENTITY_PREVIOUSLY_VERIFIED:
-            return " mx_DecryptionFailureVerifiedIdentityChanged";
+            return { mx_DecryptionFailureVerifiedIdentityChanged: true };
 
         default:
-            return "";
+            return {};
     }
 }
 
 // A placeholder element for messages that could not be decrypted
 export const DecryptionFailureBody = forwardRef<HTMLDivElement, IBodyProps>(({ mxEvent }, ref): React.JSX.Element => {
     const verificationState = useContext(LocalDeviceVerificationStateContext);
+    const classes = classNames("mx_DecryptionFailureBody", "mx_EventTile_content", getErrorExtraClass(mxEvent));
     return (
-        <div className={"mx_DecryptionFailureBody mx_EventTile_content" + getErrorExtraClass(mxEvent)} ref={ref}>
+        <div className={classes} ref={ref}>
             {getErrorMessage(mxEvent, verificationState)}
         </div>
     );