rename author delete modal to alert modal

This commit is contained in:
plebeius.eth
2023-08-13 21:53:04 +02:00
parent 23a932f92b
commit 89332a38cf
10 changed files with 135 additions and 127 deletions
@@ -0,0 +1,77 @@
import styled from 'styled-components';
export const AlertModal = styled.div`
.author-delete-alert {
padding: 20px;
border: 1px solid #ccc;
position: fixed;
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 '';
}
}}
`;
@@ -3235,82 +3235,6 @@ export const Footer = styled.div`
}
}`;
default:
return '';
}
}}
`;
export const AuthorDeleteAlert = styled.div`
.author-delete-alert {
padding: 20px;
border: 1px solid #ccc;
position: fixed;
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 '';
}
+4 -3
View File
@@ -9,8 +9,9 @@ import { useAccount, useAccountComments, useFeed, usePublishCommentEdit, useSubp
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
import { AuthorDeleteAlert, Footer } from '../styled/views/Thread.styled';
import { Footer } from '../styled/views/Thread.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel';
import ImageBanner from '../ImageBanner';
@@ -419,7 +420,7 @@ const All = () => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -442,7 +443,7 @@ const All = () => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
+4 -3
View File
@@ -9,7 +9,8 @@ import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbi
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader';
import EditModal from '../modals/EditModal';
import ImageBanner from '../ImageBanner';
@@ -116,7 +117,7 @@ const CatalogPost = ({post}) => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -139,7 +140,7 @@ const CatalogPost = ({post}) => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
+4 -3
View File
@@ -9,7 +9,8 @@ import { useAccount, useAccountComments, useFeed, usePublishComment, usePublishC
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash';
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 { Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel';
@@ -573,7 +574,7 @@ const Board = () => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -596,7 +597,7 @@ const Board = () => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
+4 -3
View File
@@ -9,7 +9,8 @@ import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubpl
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader';
import EditModal from '../modals/EditModal';
import ImageBanner from '../ImageBanner';
@@ -111,7 +112,7 @@ const CatalogPost = ({post}) => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -134,7 +135,7 @@ const CatalogPost = ({post}) => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
+4 -3
View File
@@ -10,7 +10,8 @@ import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/util
import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
import { AuthorDeleteAlert, Footer } from '../styled/views/Thread.styled';
import { Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel';
@@ -421,7 +422,7 @@ const Subscriptions = () => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -444,7 +445,7 @@ const Subscriptions = () => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
@@ -9,7 +9,8 @@ import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbi
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader';
import EditModal from '../modals/EditModal';
import ImageBanner from '../ImageBanner';
@@ -116,7 +117,7 @@ const CatalogPost = ({post}) => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -139,7 +140,7 @@ const CatalogPost = ({post}) => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
+4 -3
View File
@@ -8,7 +8,8 @@ import { useAccount, useAccountComments, useComment, usePublishComment, usePubli
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/views/Board.styled';
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel';
@@ -513,7 +514,7 @@ const Thread = () => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -536,7 +537,7 @@ const Thread = () => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});