refactor: reorganize structure

src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.styles.ts

@@ -0,0 +1,22 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+export const warning: CSSObject = {color: 'var(--danger-color)'};

src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.tsx → src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.tsx

@@ -22,10 +22,12 @@ import {useState} from 'react';
 import type {QualifiedUserClients} from '@wireapp/api-client/lib/conversation';
 import {QualifiedId} from '@wireapp/api-client/lib/user';
 
-import {Button, ButtonVariant} from '@wireapp/react-ui-kit';
+import {Bold, Button, ButtonVariant} from '@wireapp/react-ui-kit';
 
 import {matchQualifiedIds} from 'Util/QualifiedId';
 
+import {warning} from './FailedToSendWarning.styles';
+
 export type User = {id: QualifiedId; name: string};
 type Props = {
   failedToSend: QualifiedUserClients;
@@ -58,23 +60,29 @@ export const FailedToSendWarning = ({failedToSend, knownUsers}: Props) => {
   const namedUsers = generateNamedUsers(knownUsers, failedToSend);
 
   const message =
-    namedUsers.length === 1
-      ? `${namedUsers[0].name} will receive your message later`
-      : `${userCount} Participants had issues receiving this message`;
+    namedUsers.length === 1 ? (
+      <>
+        <Bold>{namedUsers[0].name}</Bold> will receive your message later
+      </>
+    ) : (
+      <>
+        <Bold>{userCount} Participants</Bold> had issues receiving this message
+      </>
+    );
 
   return (
     <div>
-      <p>{message}</p>
+      <p css={warning}>{message}</p>
       {showToggle && (
         <>
           {isOpen && (
-            <div>
+            <p css={warning}>
               {namedUsers.map(user => (
                 <span data-uie-name="recipient" data-uie-value={user.id.id} key={user.id.id}>
                   {user.name}
                 </span>
               ))}
-            </div>
+            </p>
           )}
           <Button type="button" variant={ButtonVariant.TERTIARY} onClick={() => setIsOpen(!isOpen)}>
             {isOpen ? 'Hide details' : 'Show details'}

src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './FailedToSendWarning';