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 { StyledModal } from './styled/CaptchaModal.styled';
|
||||
import useGeneralStore from '../hooks/stores/useGeneralStore';
|
||||
import Modal from 'react-modal';
|
||||
import styled from 'styled-components';
|
||||
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 {
|
||||
challengesArray,
|
||||
|
||||
@@ -1,252 +1,10 @@
|
||||
import React from 'react';
|
||||
import { StyledModal } from './styled/CaptchaModal.styled';
|
||||
import useGeneralStore from '../hooks/stores/useGeneralStore';
|
||||
import Modal from 'react-modal';
|
||||
import styled from 'styled-components';
|
||||
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 selectedStyle = useGeneralStore(state => state.selectedStyle);
|
||||
|
||||
|
||||
@@ -1,138 +1,9 @@
|
||||
import React from "react";
|
||||
import { StyledModal } from "./styled/SettingsModal.styled";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import Modal from "react-modal";
|
||||
import styled from "styled-components";
|
||||
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 = {
|
||||
overlay: {
|
||||
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 { debounce } from 'lodash';
|
||||
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 ImageBanner from '../ImageBanner';
|
||||
import Post from '../Post';
|
||||
|
||||
@@ -4,9 +4,9 @@ import InfiniteScroll from 'react-infinite-scroller';
|
||||
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled';
|
||||
import { Threads } from './styles/Catalog.styled';
|
||||
import { TopBar } from './styles/Thread.styled';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
|
||||
import { Threads } from '../styled/Catalog.styled';
|
||||
import { TopBar } from '../styled/Thread.styled';
|
||||
import CaptchaModal from '../CaptchaModal';
|
||||
import CatalogLoader from '../CatalogLoader';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
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 = () => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
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 }) => {
|
||||
|
||||
@@ -4,8 +4,8 @@ import { Tooltip } from 'react-tooltip';
|
||||
import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from './styles/Board.styled';
|
||||
import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from '../styled/Board.styled';
|
||||
import { ReplyFormLink, TopBar, BottomBar } from '../styled/Thread.styled';
|
||||
import CaptchaModal from '../CaptchaModal';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import Post from '../Post';
|
||||
|
||||
Reference in New Issue
Block a user