From fa64e0616cd301015ae6f4cc6570a316d14f6055 Mon Sep 17 00:00:00 2001 From: plebbitor Date: Sun, 9 Apr 2023 08:37:29 +0200 Subject: [PATCH] moved styled-components code --- src/components/CaptchaModal.jsx | 242 +---------------- src/components/ReplyModal.jsx | 244 +----------------- src/components/SettingsModal.jsx | 131 +--------- .../{views/styles => styled}/Board.styled.jsx | 0 src/components/styled/CaptchaModal.styled.jsx | 241 +++++++++++++++++ .../styles => styled}/Catalog.styled.jsx | 0 .../{views/styles => styled}/Home.styled.jsx | 0 src/components/styled/ReplyModal.styled.jsx | 242 +++++++++++++++++ .../styled/SettingsModal.styled.jsx | 131 ++++++++++ .../styles => styled}/Thread.styled.jsx | 0 src/components/views/Board.jsx | 2 +- src/components/views/Catalog.jsx | 6 +- src/components/views/Home.jsx | 2 +- src/components/views/NotFound.jsx | 2 +- src/components/views/Thread.jsx | 4 +- 15 files changed, 625 insertions(+), 622 deletions(-) rename src/components/{views/styles => styled}/Board.styled.jsx (100%) create mode 100644 src/components/styled/CaptchaModal.styled.jsx rename src/components/{views/styles => styled}/Catalog.styled.jsx (100%) rename src/components/{views/styles => styled}/Home.styled.jsx (100%) create mode 100644 src/components/styled/ReplyModal.styled.jsx create mode 100644 src/components/styled/SettingsModal.styled.jsx rename src/components/{views/styles => styled}/Thread.styled.jsx (100%) diff --git a/src/components/CaptchaModal.jsx b/src/components/CaptchaModal.jsx index c6cf73ce..295705cc 100644 --- a/src/components/CaptchaModal.jsx +++ b/src/components/CaptchaModal.jsx @@ -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, diff --git a/src/components/ReplyModal.jsx b/src/components/ReplyModal.jsx index 5c1d89c8..630b7092 100644 --- a/src/components/ReplyModal.jsx +++ b/src/components/ReplyModal.jsx @@ -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); diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx index 26006cf7..57c59711 100644 --- a/src/components/SettingsModal.jsx +++ b/src/components/SettingsModal.jsx @@ -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)' diff --git a/src/components/views/styles/Board.styled.jsx b/src/components/styled/Board.styled.jsx similarity index 100% rename from src/components/views/styles/Board.styled.jsx rename to src/components/styled/Board.styled.jsx diff --git a/src/components/styled/CaptchaModal.styled.jsx b/src/components/styled/CaptchaModal.styled.jsx new file mode 100644 index 00000000..2b30e05c --- /dev/null +++ b/src/components/styled/CaptchaModal.styled.jsx @@ -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; + }`; + } + }} +`; \ No newline at end of file diff --git a/src/components/views/styles/Catalog.styled.jsx b/src/components/styled/Catalog.styled.jsx similarity index 100% rename from src/components/views/styles/Catalog.styled.jsx rename to src/components/styled/Catalog.styled.jsx diff --git a/src/components/views/styles/Home.styled.jsx b/src/components/styled/Home.styled.jsx similarity index 100% rename from src/components/views/styles/Home.styled.jsx rename to src/components/styled/Home.styled.jsx diff --git a/src/components/styled/ReplyModal.styled.jsx b/src/components/styled/ReplyModal.styled.jsx new file mode 100644 index 00000000..46131b47 --- /dev/null +++ b/src/components/styled/ReplyModal.styled.jsx @@ -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; + }`; + } + }} +`; \ No newline at end of file diff --git a/src/components/styled/SettingsModal.styled.jsx b/src/components/styled/SettingsModal.styled.jsx new file mode 100644 index 00000000..5114e9fb --- /dev/null +++ b/src/components/styled/SettingsModal.styled.jsx @@ -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); + }`; + + } + }} +`; \ No newline at end of file diff --git a/src/components/views/styles/Thread.styled.jsx b/src/components/styled/Thread.styled.jsx similarity index 100% rename from src/components/views/styles/Thread.styled.jsx rename to src/components/styled/Thread.styled.jsx diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 09da150d..3d632b1e 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -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'; diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index a130cfed..acb68da0 100644 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -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'; diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx index b439814b..7455ed15 100644 --- a/src/components/views/Home.jsx +++ b/src/components/views/Home.jsx @@ -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 = () => { diff --git a/src/components/views/NotFound.jsx b/src/components/views/NotFound.jsx index c799e3de..645df588 100644 --- a/src/components/views/NotFound.jsx +++ b/src/components/views/NotFound.jsx @@ -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 }) => { diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 551e96ca..6acfe624 100644 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -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';