mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
moved styled-components code
This commit is contained in:
plebbitor
@@ -1,250 +1,10 @@
|
|||||||
import React, { useEffect, useState, useRef } from 'react';
|
import React, { useEffect, useState, useRef } from 'react';
|
||||||
|
import { StyledModal } from './styled/CaptchaModal.styled';
|
||||||
import useGeneralStore from '../hooks/stores/useGeneralStore';
|
import useGeneralStore from '../hooks/stores/useGeneralStore';
|
||||||
import Modal from 'react-modal';
|
import Modal from 'react-modal';
|
||||||
import styled from 'styled-components';
|
|
||||||
import Draggable from 'react-draggable';
|
import Draggable from 'react-draggable';
|
||||||
|
|
||||||
|
|
||||||
const StyledModal = styled(Modal)`
|
|
||||||
.hide-modal-overlay {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
position: fixed;
|
|
||||||
top: calc(50% - 150px);
|
|
||||||
left: calc(50% - 150px);
|
|
||||||
display: block;
|
|
||||||
padding: 2px;
|
|
||||||
font-size: 10pt;
|
|
||||||
border-left: none;
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
font-size: 10pt;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
padding: 0;
|
|
||||||
height: 18px;
|
|
||||||
line-height: 18px;
|
|
||||||
cursor: move;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
all: unset;
|
|
||||||
float: right;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: -4px;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#field {
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 10pt;
|
|
||||||
outline: medium none;
|
|
||||||
width: 298px;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
min-width: 296px;
|
|
||||||
float: left;
|
|
||||||
font-size: 10pt;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#captcha-container {
|
|
||||||
position: relative;
|
|
||||||
clear: both;
|
|
||||||
width: 302px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#response {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 11px;
|
|
||||||
height: 18px;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px 2px;
|
|
||||||
font-family: monospace;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 2px;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav {
|
|
||||||
float: right;
|
|
||||||
margin: 0;
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
${({ selectedStyle }) => {
|
|
||||||
switch (selectedStyle) {
|
|
||||||
case 'Yotsuba':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #f0e0d6;
|
|
||||||
border: 1px solid #d9bfb7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #ea8;
|
|
||||||
color: #800;
|
|
||||||
border: 1px solid #800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_red.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: maroon;
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Yotsuba-B':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #d6daf0;
|
|
||||||
border: 1px solid #b7c5d9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #98e;
|
|
||||||
color: #000;
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_blue.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #000;
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Futaba':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #f0e0d6;
|
|
||||||
border: 1px solid #d9bfb7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #ea8;
|
|
||||||
color: #800;
|
|
||||||
border: 1px solid #800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_red.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: maroon;
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Burichan':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #d6daf0;
|
|
||||||
border: 1px solid #b7c5d9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #98e;
|
|
||||||
color: #000;
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_blue.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #000;
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Tomorrow':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #282a2e;
|
|
||||||
border: 1px solid #111;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #282a2e;
|
|
||||||
color: #c5c8c6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_dark.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
#field {
|
|
||||||
background-color: #282a2e;
|
|
||||||
color: #c5c8c6;
|
|
||||||
border: 1px solid #515151;
|
|
||||||
width: 296px;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
background-color: #282a2e;
|
|
||||||
color: #c5c8c6;
|
|
||||||
border: 1px solid #515151;
|
|
||||||
}
|
|
||||||
|
|
||||||
#response {
|
|
||||||
background-color: #282a2e;
|
|
||||||
color: #c5c8c6;
|
|
||||||
outline: none;
|
|
||||||
border: 1px solid #515151;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #c5c8c6;
|
|
||||||
}
|
|
||||||
|
|
||||||
#next {
|
|
||||||
filter: brightness(80%);
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Photon':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #ddd;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #ddd;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_photon.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #333;
|
|
||||||
}`;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
const CaptchaModal = ({ isOpen, closeModal }) => {
|
const CaptchaModal = ({ isOpen, closeModal }) => {
|
||||||
const {
|
const {
|
||||||
challengesArray,
|
challengesArray,
|
||||||
|
|||||||
@@ -1,252 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { StyledModal } from './styled/CaptchaModal.styled';
|
||||||
import useGeneralStore from '../hooks/stores/useGeneralStore';
|
import useGeneralStore from '../hooks/stores/useGeneralStore';
|
||||||
import Modal from 'react-modal';
|
import Modal from 'react-modal';
|
||||||
import styled from 'styled-components';
|
|
||||||
import Draggable from 'react-draggable';
|
import Draggable from 'react-draggable';
|
||||||
|
|
||||||
|
|
||||||
const StyledModal = styled(Modal)`
|
|
||||||
.hide-modal-overlay {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
position: fixed;
|
|
||||||
top: calc(50% - 150px);
|
|
||||||
left: calc(50% - 150px);
|
|
||||||
display: block;
|
|
||||||
padding: 2px;
|
|
||||||
font-size: 10pt;
|
|
||||||
border-left: none;
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
font-size: 10pt;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
padding: 0;
|
|
||||||
height: 18px;
|
|
||||||
line-height: 18px;
|
|
||||||
cursor: move;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
all: unset;
|
|
||||||
float: right;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: -4px;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#name {
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 10pt;
|
|
||||||
outline: medium none;
|
|
||||||
width: 298px;
|
|
||||||
padding: 2px;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
min-width: 296px;
|
|
||||||
float: left;
|
|
||||||
font-size: 10pt;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
margin-top: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#captcha-container {
|
|
||||||
position: relative;
|
|
||||||
clear: both;
|
|
||||||
width: 302px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#response {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 11px;
|
|
||||||
height: 18px;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px 2px;
|
|
||||||
font-family: monospace;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 2px;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#next {
|
|
||||||
float: right;
|
|
||||||
margin: 0;
|
|
||||||
width: 75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
${({ selectedStyle }) => {
|
|
||||||
switch (selectedStyle) {
|
|
||||||
case 'Yotsuba':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #f0e0d6;
|
|
||||||
border: 1px solid #d9bfb7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #ea8;
|
|
||||||
color: #800;
|
|
||||||
border: 1px solid #800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_red.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: maroon;
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Yotsuba-B':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #d6daf0;
|
|
||||||
border: 1px solid #b7c5d9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #98e;
|
|
||||||
color: #000;
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_blue.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #000;
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Futaba':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #f0e0d6;
|
|
||||||
border: 1px solid #d9bfb7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #ea8;
|
|
||||||
color: #800;
|
|
||||||
border: 1px solid #800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_red.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: maroon;
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Burichan':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #d6daf0;
|
|
||||||
border: 1px solid #b7c5d9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #98e;
|
|
||||||
color: #000;
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_blue.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #000;
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Tomorrow':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #282a2e;
|
|
||||||
border: 1px solid #111;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #282a2e;
|
|
||||||
color: #c5c8c6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_dark.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
#name {
|
|
||||||
background-color: #282a2e;
|
|
||||||
color: #c5c8c6;
|
|
||||||
border: 1px solid #515151;
|
|
||||||
width: 296px;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
background-color: #282a2e;
|
|
||||||
color: #c5c8c6;
|
|
||||||
border: 1px solid #515151;
|
|
||||||
}
|
|
||||||
|
|
||||||
#response {
|
|
||||||
background-color: #282a2e;
|
|
||||||
color: #c5c8c6;
|
|
||||||
outline: none;
|
|
||||||
border: 1px solid #515151;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #c5c8c6;
|
|
||||||
}
|
|
||||||
|
|
||||||
#next {
|
|
||||||
filter: brightness(80%);
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Photon':
|
|
||||||
return `
|
|
||||||
.modal-content {
|
|
||||||
background-color: #ddd;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: #ddd;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_photon.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #333;
|
|
||||||
}`;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
const ReplyModal = ({ isOpen, closeModal }) => {
|
const ReplyModal = ({ isOpen, closeModal }) => {
|
||||||
const selectedStyle = useGeneralStore(state => state.selectedStyle);
|
const selectedStyle = useGeneralStore(state => state.selectedStyle);
|
||||||
|
|
||||||
|
|||||||
@@ -1,138 +1,9 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { StyledModal } from "./styled/SettingsModal.styled";
|
||||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||||
import Modal from "react-modal";
|
import Modal from "react-modal";
|
||||||
import styled from "styled-components";
|
|
||||||
import useGeneralStore from "../hooks/stores/useGeneralStore";
|
import useGeneralStore from "../hooks/stores/useGeneralStore";
|
||||||
|
|
||||||
const StyledModal = styled(Modal)`
|
|
||||||
.panel {
|
|
||||||
top: 60px;
|
|
||||||
width: 330px;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -178px;
|
|
||||||
position: absolute;
|
|
||||||
padding: 2px 5px 5px;
|
|
||||||
font-size: 14px;
|
|
||||||
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
margin-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
right: 5px;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
display: block;
|
|
||||||
background-size: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 10px 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
${({ selectedStyle }) => {
|
|
||||||
switch (selectedStyle) {
|
|
||||||
case 'Yotsuba':
|
|
||||||
return `
|
|
||||||
.panel {
|
|
||||||
background-color: #f0e0d6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
border-bottom: 1px solid #d9bfb7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_red.png);
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Yotsuba-B':
|
|
||||||
return `
|
|
||||||
.panel {
|
|
||||||
background-color: #d6daf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
border-bottom: 1px solid #b7c5d9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_blue.png);
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Futaba':
|
|
||||||
return `
|
|
||||||
.panel {
|
|
||||||
background-color: #f0e0d6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
border-bottom: 1px solid rgba(0,0,0,.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_red.png);
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Burichan':
|
|
||||||
return `
|
|
||||||
.panel {
|
|
||||||
background-color: #d6daf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
border-bottom: 1px solid rgba(0,0,0,.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_blue.png);
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Tomorrow':
|
|
||||||
return `
|
|
||||||
.panel {
|
|
||||||
background-color: #282a2e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
border-bottom: 1px solid #111;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_dark.png);
|
|
||||||
}`;
|
|
||||||
|
|
||||||
case 'Photon':
|
|
||||||
return `
|
|
||||||
.panel {
|
|
||||||
background-color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.20);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
background-image: url(/assets/buttons/cross_photon.png);
|
|
||||||
}`;
|
|
||||||
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const customOverlayStyles = {
|
const customOverlayStyles = {
|
||||||
overlay: {
|
overlay: {
|
||||||
backgroundColor: 'rgba(0,0,0,.25)'
|
backgroundColor: 'rgba(0,0,0,.25)'
|
||||||
|
|||||||
@@ -0,0 +1,241 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
import Modal from 'react-modal';
|
||||||
|
|
||||||
|
export const StyledModal = styled(Modal)`
|
||||||
|
.hide-modal-overlay {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
position: fixed;
|
||||||
|
top: calc(50% - 150px);
|
||||||
|
left: calc(50% - 150px);
|
||||||
|
display: block;
|
||||||
|
padding: 2px;
|
||||||
|
font-size: 10pt;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
font-size: 10pt;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
padding: 0;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
cursor: move;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
all: unset;
|
||||||
|
float: right;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: -4px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#field {
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 10pt;
|
||||||
|
outline: medium none;
|
||||||
|
width: 298px;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
min-width: 296px;
|
||||||
|
float: left;
|
||||||
|
font-size: 10pt;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#captcha-container {
|
||||||
|
position: relative;
|
||||||
|
clear: both;
|
||||||
|
width: 302px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#response {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 11px;
|
||||||
|
height: 18px;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px 2px;
|
||||||
|
font-family: monospace;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 2px;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav {
|
||||||
|
float: right;
|
||||||
|
margin: 0;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
${({ selectedStyle }) => {
|
||||||
|
switch (selectedStyle) {
|
||||||
|
case 'Yotsuba':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #f0e0d6;
|
||||||
|
border: 1px solid #d9bfb7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #ea8;
|
||||||
|
color: #800;
|
||||||
|
border: 1px solid #800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_red.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: maroon;
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Yotsuba-B':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #d6daf0;
|
||||||
|
border: 1px solid #b7c5d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #98e;
|
||||||
|
color: #000;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_blue.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #000;
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Futaba':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #f0e0d6;
|
||||||
|
border: 1px solid #d9bfb7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #ea8;
|
||||||
|
color: #800;
|
||||||
|
border: 1px solid #800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_red.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: maroon;
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Burichan':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #d6daf0;
|
||||||
|
border: 1px solid #b7c5d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #98e;
|
||||||
|
color: #000;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_blue.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #000;
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Tomorrow':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #282a2e;
|
||||||
|
border: 1px solid #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #282a2e;
|
||||||
|
color: #c5c8c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_dark.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
#field {
|
||||||
|
background-color: #282a2e;
|
||||||
|
color: #c5c8c6;
|
||||||
|
border: 1px solid #515151;
|
||||||
|
width: 296px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
background-color: #282a2e;
|
||||||
|
color: #c5c8c6;
|
||||||
|
border: 1px solid #515151;
|
||||||
|
}
|
||||||
|
|
||||||
|
#response {
|
||||||
|
background-color: #282a2e;
|
||||||
|
color: #c5c8c6;
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid #515151;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #c5c8c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#next {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Photon':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #ddd;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #ddd;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_photon.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #333;
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
`;
|
||||||
@@ -0,0 +1,242 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
export const StyledModal = styled(Modal)`
|
||||||
|
.hide-modal-overlay {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
position: fixed;
|
||||||
|
top: calc(50% - 150px);
|
||||||
|
left: calc(50% - 150px);
|
||||||
|
display: block;
|
||||||
|
padding: 2px;
|
||||||
|
font-size: 10pt;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
font-size: 10pt;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
padding: 0;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
cursor: move;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
all: unset;
|
||||||
|
float: right;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: -4px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#name {
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 10pt;
|
||||||
|
outline: medium none;
|
||||||
|
width: 298px;
|
||||||
|
padding: 2px;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
min-width: 296px;
|
||||||
|
float: left;
|
||||||
|
font-size: 10pt;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
margin-top: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#captcha-container {
|
||||||
|
position: relative;
|
||||||
|
clear: both;
|
||||||
|
width: 302px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#response {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 11px;
|
||||||
|
height: 18px;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px 2px;
|
||||||
|
font-family: monospace;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 2px;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#next {
|
||||||
|
float: right;
|
||||||
|
margin: 0;
|
||||||
|
width: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
${({ selectedStyle }) => {
|
||||||
|
switch (selectedStyle) {
|
||||||
|
case 'Yotsuba':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #f0e0d6;
|
||||||
|
border: 1px solid #d9bfb7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #ea8;
|
||||||
|
color: #800;
|
||||||
|
border: 1px solid #800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_red.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: maroon;
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Yotsuba-B':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #d6daf0;
|
||||||
|
border: 1px solid #b7c5d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #98e;
|
||||||
|
color: #000;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_blue.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #000;
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Futaba':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #f0e0d6;
|
||||||
|
border: 1px solid #d9bfb7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #ea8;
|
||||||
|
color: #800;
|
||||||
|
border: 1px solid #800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_red.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: maroon;
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Burichan':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #d6daf0;
|
||||||
|
border: 1px solid #b7c5d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #98e;
|
||||||
|
color: #000;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_blue.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #000;
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Tomorrow':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #282a2e;
|
||||||
|
border: 1px solid #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #282a2e;
|
||||||
|
color: #c5c8c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_dark.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
#name {
|
||||||
|
background-color: #282a2e;
|
||||||
|
color: #c5c8c6;
|
||||||
|
border: 1px solid #515151;
|
||||||
|
width: 296px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
background-color: #282a2e;
|
||||||
|
color: #c5c8c6;
|
||||||
|
border: 1px solid #515151;
|
||||||
|
}
|
||||||
|
|
||||||
|
#response {
|
||||||
|
background-color: #282a2e;
|
||||||
|
color: #c5c8c6;
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid #515151;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #c5c8c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#next {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Photon':
|
||||||
|
return `
|
||||||
|
.modal-content {
|
||||||
|
background-color: #ddd;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #ddd;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_photon.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #333;
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
`;
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
import Modal from 'react-modal';
|
||||||
|
|
||||||
|
export const StyledModal = styled(Modal)`
|
||||||
|
.panel {
|
||||||
|
top: 60px;
|
||||||
|
width: 330px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -178px;
|
||||||
|
position: absolute;
|
||||||
|
padding: 2px 5px 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
right: 5px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
display: block;
|
||||||
|
background-size: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
${({ selectedStyle }) => {
|
||||||
|
switch (selectedStyle) {
|
||||||
|
case 'Yotsuba':
|
||||||
|
return `
|
||||||
|
.panel {
|
||||||
|
background-color: #f0e0d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
border-bottom: 1px solid #d9bfb7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_red.png);
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Yotsuba-B':
|
||||||
|
return `
|
||||||
|
.panel {
|
||||||
|
background-color: #d6daf0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
border-bottom: 1px solid #b7c5d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_blue.png);
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Futaba':
|
||||||
|
return `
|
||||||
|
.panel {
|
||||||
|
background-color: #f0e0d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
border-bottom: 1px solid rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_red.png);
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Burichan':
|
||||||
|
return `
|
||||||
|
.panel {
|
||||||
|
background-color: #d6daf0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
border-bottom: 1px solid rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_blue.png);
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Tomorrow':
|
||||||
|
return `
|
||||||
|
.panel {
|
||||||
|
background-color: #282a2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
border-bottom: 1px solid #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_dark.png);
|
||||||
|
}`;
|
||||||
|
|
||||||
|
case 'Photon':
|
||||||
|
return `
|
||||||
|
.panel {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.20);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background-image: url(/assets/buttons/cross_photon.png);
|
||||||
|
}`;
|
||||||
|
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
`;
|
||||||
@@ -5,7 +5,7 @@ import { Tooltip } from 'react-tooltip';
|
|||||||
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||||
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
|
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled';
|
||||||
import CaptchaModal from '../CaptchaModal';
|
import CaptchaModal from '../CaptchaModal';
|
||||||
import ImageBanner from '../ImageBanner';
|
import ImageBanner from '../ImageBanner';
|
||||||
import Post from '../Post';
|
import Post from '../Post';
|
||||||
|
|||||||
@@ -4,9 +4,9 @@ import InfiniteScroll from 'react-infinite-scroller';
|
|||||||
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||||
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled';
|
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
|
||||||
import { Threads } from './styles/Catalog.styled';
|
import { Threads } from '../styled/Catalog.styled';
|
||||||
import { TopBar } from './styles/Thread.styled';
|
import { TopBar } from '../styled/Thread.styled';
|
||||||
import CaptchaModal from '../CaptchaModal';
|
import CaptchaModal from '../CaptchaModal';
|
||||||
import CatalogLoader from '../CatalogLoader';
|
import CatalogLoader from '../CatalogLoader';
|
||||||
import ImageBanner from '../ImageBanner';
|
import ImageBanner from '../ImageBanner';
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect, useRef } from 'react';
|
import React, { useEffect, useRef } from 'react';
|
||||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled';
|
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
|
||||||
|
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { Container, Header, Logo, Page, Boards, BoardsTitle } from './styles/Home.styled';
|
import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/Home.styled';
|
||||||
|
|
||||||
|
|
||||||
const NotFound = ({ setBodyStyle }) => {
|
const NotFound = ({ setBodyStyle }) => {
|
||||||
|
|||||||
@@ -4,8 +4,8 @@ import { Tooltip } from 'react-tooltip';
|
|||||||
import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||||
import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from './styles/Board.styled';
|
import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from '../styled/Board.styled';
|
||||||
import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
|
import { ReplyFormLink, TopBar, BottomBar } from '../styled/Thread.styled';
|
||||||
import CaptchaModal from '../CaptchaModal';
|
import CaptchaModal from '../CaptchaModal';
|
||||||
import ImageBanner from '../ImageBanner';
|
import ImageBanner from '../ImageBanner';
|
||||||
import Post from '../Post';
|
import Post from '../Post';
|
||||||
|
|||||||
Reference in New Issue
Block a user