From 9279d5cc9ee2047fbd0461940b8d693d42c2ed3b Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Wed, 24 May 2023 12:27:54 +0200
Subject: [PATCH] fix board AuthorDeleteAlert

---
 src/components/styled/views/Board.styled.jsx  | 76 -------------------
 src/components/styled/views/Thread.styled.jsx |  2 +-
 src/components/views/Board.jsx                | 37 ++++-----
 3 files changed, 21 insertions(+), 94 deletions(-)

diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx
index 986edb68..4b991b81 100644
--- a/src/components/styled/views/Board.styled.jsx
+++ b/src/components/styled/views/Board.styled.jsx
@@ -3944,80 +3944,4 @@ export const PostMenu = styled.div`
   cursor: pointer;
   transition: transform 0.1s;
   transform: ${props => props.rotated ? 'rotate(90deg)' : 'none'};
-`;
-
-export const AuthorDeleteAlert = styled.div`
-  .author-delete-alert {
-    padding: 20px;
-    border: 1px solid #ccc;
-    position: absolute;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    .author-delete-buttons {
-      display: flex;
-      justify-content: center;
-
-      & > button {
-        margin-top: 10px;
-      }
-    
-      & > button:first-child {
-        margin-right: 20px;
-      }
-    }
-  }
-
-
-  
-
-  ${({ selectedStyle }) => {
-    switch (selectedStyle) {
-      case 'Yotsuba':
-        return `
-        .author-delete-alert {
-          background-color: #f0e0d6;
-          border: 1px solid #d9bfb7;
-        }`;
-
-      case 'Yotsuba-B':
-        return `
-        .author-delete-alert {
-          background-color: #d6daf0;
-          border: 1px solid #b7c5d9;
-        }`;
-
-      case 'Futaba':
-        return `
-        .author-delete-alert {
-          background-color: #f0e0d6;
-          border: 1px solid #d9bfb7;
-        }`;
-
-      case 'Burichan':
-        return `
-        .author-delete-alert {
-          background-color: #d6daf0;
-          border: 1px solid #b7c5d9;
-        }`;
-
-      case 'Tomorrow':
-        return `
-        .author-delete-alert {
-          background-color: #282a2e;
-          border: 1px solid #111;
-        }`;
-
-      case 'Photon':
-        return `
-        .author-delete-alert {
-          background-color: #ddd;
-          border: 1px solid #ccc;
-        }`; 
-        
-        default:
-          return '';
-      }
-  }}
 `;
\ No newline at end of file
diff --git a/src/components/styled/views/Thread.styled.jsx b/src/components/styled/views/Thread.styled.jsx
index a55d2a3f..257d7924 100644
--- a/src/components/styled/views/Thread.styled.jsx
+++ b/src/components/styled/views/Thread.styled.jsx
@@ -3210,7 +3210,7 @@ export const AuthorDeleteAlert = styled.div`
   .author-delete-alert {
     padding: 20px;
     border: 1px solid #ccc;
-    position: absolute;
+    position: fixed;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index d797ef50..271b0bf1 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -8,8 +8,8 @@ import { useAccount, useAccountComments, useFeed, usePublishComment, usePublishC
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu, AuthorDeleteAlert} from '../styled/views/Board.styled';
-import { Footer } from '../styled/views/Thread.styled';
+import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu} from '../styled/views/Board.styled';
+import { Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
@@ -396,21 +396,24 @@ const Board = () => {
       customUI: ({ onClose }) => {
         return (
           <AuthorDeleteAlert selectedStyle={selectedStyle}>
-            <div className="author-delete-buttons">
-              <button onClick={onClose}>No</button>
-              <button
-                onClick={() => {
-                  setCommentCid(commentCid);
-                  setPublishCommentEditOptions(prevOptions => ({
-                    ...prevOptions,
-                    deleted: true,
-                  }));
-                  setTriggerPublishCommentEdit(true);
-                  onClose();
-                }}
-              >
-                Yes
-              </button>
+            <div className='author-delete-alert'>
+              <p>Are you sure you want to delete this post?</p>
+              <div className="author-delete-buttons">
+                <button onClick={onClose}>No</button>
+                <button
+                  onClick={() => {
+                    setCommentCid(commentCid);
+                    setPublishCommentEditOptions(prevOptions => ({
+                      ...prevOptions,
+                      deleted: true,
+                    }));
+                    setTriggerPublishCommentEdit(true);
+                    onClose();
+                  }}
+                >
+                  Yes
+                </button>
+              </div>
             </div>
           </AuthorDeleteAlert>
         );