External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

moved styled-components code

Browse Source
This commit is contained in:
plebbitor
2023-04-09 08:37:29 +02:00
parent 60374f5724
commit fa64e0616c
15 changed files with 625 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ReplyModal.jsx
+1 -243
View File
@@ -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);