From 14337e78394f30a3893429017fa78529f6bc693f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 7 Apr 2022 21:16:26 +0200
Subject: [PATCH] Missing description modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/direct_timeline/index.js |  1 +
 .../components/missing_description_modal.js   | 52 -------------------
 .../components/missing_description_modal.tsx  | 50 ++++++++++++++++++
 app/soapbox/locales/en-Shaw.json              |  3 +-
 app/soapbox/locales/he.json                   |  3 +-
 app/soapbox/locales/pl.json                   |  3 +-
 app/soapbox/locales/zh-CN.json                |  3 +-
 7 files changed, 59 insertions(+), 56 deletions(-)
 delete mode 100644 app/soapbox/features/ui/components/missing_description_modal.js
 create mode 100644 app/soapbox/features/ui/components/missing_description_modal.tsx

diff --git a/app/soapbox/features/direct_timeline/index.js b/app/soapbox/features/direct_timeline/index.js
index 3c81c5d14..b09a58158 100644
--- a/app/soapbox/features/direct_timeline/index.js
+++ b/app/soapbox/features/direct_timeline/index.js
@@ -75,6 +75,7 @@ class DirectTimeline extends React.PureComponent {
           timelineId='direct'
           onLoadMore={this.handleLoadMore}
           emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
+          divideType='space'
         />
       </Column>
     );
diff --git a/app/soapbox/features/ui/components/missing_description_modal.js b/app/soapbox/features/ui/components/missing_description_modal.js
deleted file mode 100644
index d7b472bec..000000000
--- a/app/soapbox/features/ui/components/missing_description_modal.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { injectIntl, FormattedMessage } from 'react-intl';
-
-import { Button } from '../../../components/ui';
-
-export default @injectIntl
-class MissingDescriptionModal extends React.PureComponent {
-
-  static propTypes = {
-    onClose: PropTypes.func,
-    onContinue: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  componentDidMount() {
-    this.button.focus();
-  }
-
-  handleContinue = () => {
-    this.props.onClose();
-    this.props.onContinue();
-  }
-
-  handleCancel = () => {
-    this.props.onClose();
-  }
-
-  setRef = (c) => {
-    this.button = c;
-  }
-
-  render() {
-    return (
-      <div className='modal-root__modal confirmation-modal'>
-        <div className='confirmation-modal__container'>
-          <FormattedMessage id='missing_description_modal.text' defaultMessage='You have not entered a description for all attachments. Continue anyway?' />
-        </div>
-
-        <div className='confirmation-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button' ref={this.setRef}>
-            <FormattedMessage id='missing_description_modal.cancel' defaultMessage='Cancel' />
-          </Button>
-          <Button onClick={this.handleContinue}>
-            <FormattedMessage id='missing_description_modal.continue' defaultMessage='Post' />
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/ui/components/missing_description_modal.tsx b/app/soapbox/features/ui/components/missing_description_modal.tsx
new file mode 100644
index 000000000..53fe240d0
--- /dev/null
+++ b/app/soapbox/features/ui/components/missing_description_modal.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl';
+
+import { Modal } from 'soapbox/components/ui';
+
+const messages = defineMessages({
+  modalTitle: { id: 'missing_description_modal.text', defaultMessage: 'You have not entered a description for all attachments.' },
+  post: { id: 'missing_description_modal.continue', defaultMessage: 'Post' },
+  cancel: { id: 'missing_description_modal.cancel', defaultMessage: 'Cancel' },
+});
+
+interface IMissingDescriptionModal {
+  onClose: Function,
+  onContinue: Function,
+  intl: IntlShape,
+}
+
+class MissingDescriptionModal extends React.PureComponent<IMissingDescriptionModal> {
+
+  handleContinue = () => {
+    this.props.onClose();
+    this.props.onContinue();
+  }
+
+  handleCancel = () => {
+    this.props.onClose();
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    return (
+      <Modal
+        title={intl.formatMessage(messages.modalTitle)}
+        confirmationAction={this.handleContinue}
+        confirmationText={intl.formatMessage(messages.post)}
+        confirmationTheme='danger'
+        cancelText={intl.formatMessage(messages.cancel)}
+        cancelAction={this.handleCancel}
+      >
+        <p className='text-gray-600 dark:text-gray-300'>
+          <FormattedMessage id='missing_description_modal.description' defaultMessage='Continue anyway?' />
+        </p>
+      </Modal>
+    );
+  }
+
+}
+
+export default injectIntl(MissingDescriptionModal);
diff --git a/app/soapbox/locales/en-Shaw.json b/app/soapbox/locales/en-Shaw.json
index ae0b73eb2..584c53c8d 100644
--- a/app/soapbox/locales/en-Shaw.json
+++ b/app/soapbox/locales/en-Shaw.json
@@ -595,7 +595,8 @@
   "mfa.setup_warning": "𐑮𐑲𐑑 𐑞𐑰𐑟 𐑒𐑴𐑛𐑟 𐑛𐑬𐑯 𐑹 𐑕𐑱𐑝 𐑞𐑧𐑥 𐑕𐑳𐑥𐑢𐑺 𐑕𐑦𐑒𐑘𐑫𐑼 - 𐑳𐑞𐑼𐑢𐑲𐑟 𐑿 𐑢𐑴𐑯𐑑 𐑕𐑰 𐑞𐑧𐑥 𐑩𐑜𐑱𐑯. 𐑦𐑓 𐑿 𐑤𐑵𐑟  𐑨𐑒𐑕𐑧𐑕 𐑑 𐑘𐑹 2FA 𐑨𐑐 𐑯 𐑮𐑦𐑒𐑳𐑝𐑼𐑦 𐑒𐑴𐑛𐑟 𐑿𐑤 𐑚𐑰 𐑤𐑪𐑒𐑑 𐑬𐑑 𐑝 𐑘𐑹 𐑩𐑒𐑬𐑯𐑑.",
   "missing_description_modal.cancel": "𐑒𐑨𐑯𐑕𐑩𐑤",
   "missing_description_modal.continue": "𐑐𐑴𐑕𐑑",
-  "missing_description_modal.text": "𐑿 𐑣𐑨𐑝 𐑯𐑪𐑑 𐑧𐑯𐑑𐑼𐑛 𐑩 𐑛𐑦𐑕𐑒𐑮𐑦𐑐𐑖𐑩𐑯 𐑓 𐑷𐑤 𐑩𐑑𐑨𐑗𐑥𐑩𐑯𐑑𐑕. 𐑒𐑩𐑯𐑑𐑦𐑯𐑿 𐑧𐑯𐑦𐑢𐑱?",
+  "missing_description_modal.description": "𐑒𐑩𐑯𐑑𐑦𐑯𐑿 𐑧𐑯𐑦𐑢𐑱?",
+  "missing_description_modal.text": "𐑿 𐑣𐑨𐑝 𐑯𐑪𐑑 𐑧𐑯𐑑𐑼𐑛 𐑩 𐑛𐑦𐑕𐑒𐑮𐑦𐑐𐑖𐑩𐑯 𐑓 𐑷𐑤 𐑩𐑑𐑨𐑗𐑥𐑩𐑯𐑑𐑕.",
   "missing_indicator.label": "𐑯𐑪𐑑 𐑓𐑬𐑯𐑛",
   "missing_indicator.sublabel": "𐑞𐑦𐑕 𐑮𐑦𐑟𐑹𐑕 𐑒𐑫𐑛 𐑯𐑪𐑑 𐑚𐑰 𐑓𐑬𐑯𐑛",
   "morefollows.followers_label": "…𐑯 {count} 𐑥𐑹 {count, plural, one {follower} other {followers}} 𐑪𐑯 𐑮𐑦𐑥𐑴𐑑 𐑕𐑲𐑑𐑕.",
diff --git a/app/soapbox/locales/he.json b/app/soapbox/locales/he.json
index a454c56de..62c4fce07 100644
--- a/app/soapbox/locales/he.json
+++ b/app/soapbox/locales/he.json
@@ -598,7 +598,8 @@
   "mfa.setup_warning": "רשום את הקודים האלה או שמור אותם במקום מאובטח - אחרת לא תראה אותם שוב. אם תאבד את הגישה לאפליקציית 2FA ולקודי השחזור שלך תינעל מחוץ לחשבון שלך.",
   "missing_description_modal.cancel": "בטל",
   "missing_description_modal.continue": "שלח",
-  "missing_description_modal.text": "לא הזנת תיאור עבור כל הקבצים המצורפים. המשך בכל זאת?",
+  "missing_description_modal.description": "המשך בכל זאת?",
+  "missing_description_modal.text": "לא הזנת תיאור עבור כל הקבצים המצורפים.",
   "missing_indicator.label": "לא נמצא",
   "missing_indicator.sublabel": "משאב זה לא נמצא",
   "morefollows.followers_label": "ו-{count} עוד {count, plural, one {עוקב} other {עוקבים}} באתרים מרוחקים.",
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index ebb61e18e..d4feae868 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -640,7 +640,8 @@
   "migration.submit": "Przenieś obserwujących",
   "missing_description_modal.cancel": "Anuluj",
   "missing_description_modal.continue": "Opublikuj",
-  "missing_description_modal.text": "Nie podałeś(-aś) opisu dla wszystkich załączników. Czy na pewno chcesz kontynuować?",
+  "missing_description_modal.description": "Czy na pewno chcesz kontynuować?",
+  "missing_description_modal.text": "Nie podałeś(-aś) opisu dla wszystkich załączników.",
   "missing_indicator.label": "Nie znaleziono",
   "missing_indicator.sublabel": "Nie można odnaleźć tego zasobu",
   "morefollows.followers_label": "…i {count} więcej {count, plural, one {obserwujący(-a)} few {obserwujących} many {obserwujących} other {obserwujących}} na zdalnych stronach.",
diff --git a/app/soapbox/locales/zh-CN.json b/app/soapbox/locales/zh-CN.json
index 86e92a1c4..2a62dfa38 100644
--- a/app/soapbox/locales/zh-CN.json
+++ b/app/soapbox/locales/zh-CN.json
@@ -595,7 +595,8 @@
   "mfa.setup_warning": "请立即将恢复代码保存或写到纸上，否则你可能无法登录帐号。",
   "missing_description_modal.cancel": "取消",
   "missing_description_modal.continue": "发布",
-  "missing_description_modal.text": "附件没有描述信息，仍然继续发布吗？",
+  "missing_description_modal.description": "仍然继续发布吗？",
+  "missing_description_modal.text": "附件没有描述信息。",
   "missing_indicator.label": "找不到内容",
   "missing_indicator.sublabel": "无法找到此资源",
   "morefollows.followers_label": "和{count} 来自其他站点的 {count, plural, one {关注者} other {关注者}} 。",