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

synced style context

Browse Source
This commit is contained in:
plebbitor
2023-02-13 12:05:10 +01:00
parent 0c07b1a308
commit 12da51f472
5 changed files with 36 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+3 -2
View File
@@ -27,6 +27,7 @@ export default function App() {
const [selectedTitle, setSelectedTitle] = useState('');
const [selectedAddress, setSelectedAddress] = useState('');
const [selectedStyle, setSelectedStyle] = useState('Yotsuba');
return (
<div>
@@ -44,9 +45,9 @@ export default function App() {
color={bodyStyle.color}
fontFamily={bodyStyle.fontFamily}
/>
<BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress }}>
<BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle }}>
<Routes>
<Route exact path='/' element={<Home />} />
<Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
<Route path='/board' element={<Board setBodyStyle={setBodyStyle} />}>
<Route path='post-thread' element={<Board />} />
</Route>
src/components/Board.jsx
+2 -3
View File
@@ -7,8 +7,7 @@ import { BoardContext } from '../App';
const Board = ({ setBodyStyle }) => {
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
const [selectedStyle, setSelectedStyle] = useState("Yotsuba");
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext);
const [showPostFormLink, setShowPostFormLink] = useState(true);
const [showPostForm, setShowPostForm] = useState(false);
const navigate = useNavigate();
@@ -204,7 +203,7 @@ const Board = ({ setBodyStyle }) => {
<span className="style-changer">
Style:
 
<select id="style-selector" onChange={handleStyleChange}>
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba B">Yotsuba B</option>
<option value="Futaba">Futaba</option>
src/components/Home.jsx
+11 -2
View File
@@ -3,9 +3,18 @@ import { Link } from 'react-router-dom';
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled';
import { BoardContext } from '../App';
const Home = () => {
const Home = ({ setBodyStyle }) => {
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext);
useEffect(() => {
setBodyStyle({
background: "#ffe url(/fade.png) top repeat-x",
color: "maroon",
fontFamily: "Helvetica, Arial, sans-serif"
});
setSelectedStyle("Yotsuba");
}, [setBodyStyle, setSelectedStyle]);
const handleClick = (title, address) => {
setSelectedTitle(title);
src/components/Thread.jsx
+2 -3
View File
@@ -7,8 +7,7 @@ import ImageBanner from './ImageBanner';
const Thread = ({ setBodyStyle }) => {
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
const [selectedStyle, setSelectedStyle] = useState("Yotsuba");
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext);
const [showReplyFormLink, setShowReplyFormLink] = useState(true);
const [showReplyForm, setShowReplyForm] = useState(false);
@@ -195,7 +194,7 @@ const Thread = ({ setBodyStyle }) => {
<span className="style-changer">
Style:
 
<select id="style-selector" onChange={handleStyleChange}>
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba B">Yotsuba B</option>
<option value="Futaba">Futaba</option>
src/components/styles/Board.styled.jsx
+18
View File
@@ -414,6 +414,7 @@ export const PostFormTable = styled.table`
margin-bottom: -3px;
outline: none;
border-radius: none;
margin-top: 0px;
}
#t-root {
@@ -423,6 +424,7 @@ export const PostFormTable = styled.table`
background: #eee;
border: 1px solid #777;
margin: 2px 0;
margin-bottom: 0px;
width: 300px;
}
@@ -489,6 +491,7 @@ export const PostFormTable = styled.table`
margin-bottom: -3px;
outline: none;
border-radius: none;
margin-top: 0px;
}
#t-root {
@@ -498,6 +501,7 @@ export const PostFormTable = styled.table`
background: #eee;
border: 1px solid #777;
margin: 2px 0;
margin-bottom: 0px;
width: 300px;
}
@@ -562,6 +566,7 @@ export const PostFormTable = styled.table`
margin-bottom: -3px;
outline: none;
border-radius: none;
margin-top: 0px;
}
#t-root {
@@ -572,6 +577,7 @@ export const PostFormTable = styled.table`
border: 1px solid #777;
margin: 2px 0;
width: 300px;
margin-bottom: 0px;
}
#t-resp {
@@ -635,6 +641,7 @@ export const PostFormTable = styled.table`
margin-bottom: -3px;
outline: none;
border-radius: none;
margin-top: 0px;
}
#t-root {
@@ -645,6 +652,7 @@ export const PostFormTable = styled.table`
border: 1px solid #777;
margin: 2px 0;
width: 300px;
margin-bottom: 0px;
}
#t-resp {
@@ -715,6 +723,7 @@ export const PostFormTable = styled.table`
border: 1px solid #000;
background-color: #282a2e;
color: #c5c8c6;
margin-top: 0px;
}
#t-root {
@@ -725,6 +734,7 @@ export const PostFormTable = styled.table`
border: 1px solid #777;
margin: 2px 0;
width: 300px;
margin-bottom: 0px;
}
#t-resp {
@@ -794,6 +804,7 @@ export const PostFormTable = styled.table`
margin-bottom: -3px;
outline: none;
border-radius: none;
margin-top: 0px;
}
#t-root {
@@ -804,6 +815,7 @@ export const PostFormTable = styled.table`
border: 1px solid #777;
margin: 2px 0;
width: 300px;
margin-bottom: 0px;
}
#t-resp {
@@ -1098,6 +1110,7 @@ export const BoardForm = styled.form`
.quote-link {
color: navy;
text-decoration: underline;
}
.quote-link:hover {
@@ -1226,6 +1239,7 @@ export const BoardForm = styled.form`
.quote-link {
color: navy;
text-decoration: underline;
}
.quote-link:hover {
@@ -1362,6 +1376,7 @@ export const BoardForm = styled.form`
.quote-link {
color: navy;
text-decoration: underline;
}
.quote-link:hover {
@@ -1496,6 +1511,7 @@ export const BoardForm = styled.form`
.quote-link {
color: navy;
text-decoration: underline;
}
.quote-link:hover {
@@ -1624,6 +1640,7 @@ export const BoardForm = styled.form`
.quote-link {
color: #5f89ac;
text-decoration: underline;
}
.quote-link:hover {
@@ -1752,6 +1769,7 @@ export const BoardForm = styled.form`
.quote-link {
color: #34345C;
text-decoration: underline;
}
.quote-link:hover {