From dc9a14b30a76fac194bb977931a73be3d7929edf Mon Sep 17 00:00:00 2001
From: Thomas Belin <me@thomasbelin.fr>
Date: Mon, 13 Feb 2023 17:14:19 +0100
Subject: [PATCH] refactor: reorganize structure

---
 .../FailedToSendWarning.styles.ts             | 22 +++++++++++++++++++
 .../FailedToSendWarning.test.tsx              |  0
 .../FailedToSendWarning.tsx                   | 22 +++++++++++++------
 .../FailedToSendWarning/index.ts              | 20 +++++++++++++++++
 4 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.styles.ts
 rename src/script/components/MessagesList/Message/ContentMessage/{ => FailedToSendWarning}/FailedToSendWarning.test.tsx (100%)
 rename src/script/components/MessagesList/Message/ContentMessage/{ => FailedToSendWarning}/FailedToSendWarning.tsx (84%)
 create mode 100644 src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/index.ts

diff --git a/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.styles.ts b/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.styles.ts
new file mode 100644
index 000000000000..5360e56b6b6f
--- /dev/null
+++ b/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)'};
diff --git a/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.test.tsx b/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.test.tsx
similarity index 100%
rename from src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.test.tsx
rename to src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.test.tsx
diff --git a/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.tsx b/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.tsx
similarity index 84%
rename from src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.tsx
rename to src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.tsx
index bc44c16bb0d9..c997ed9d99a4 100644
--- a/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.tsx
+++ b/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'}
diff --git a/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/index.ts b/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/index.ts
new file mode 100644
index 000000000000..836d3cfbcc82
--- /dev/null
+++ b/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';