added return button in thread

This commit is contained in:
plebbitor
2023-02-13 13:01:10 +01:00
parent 728f88be71
commit e0a86868b4
3 changed files with 148 additions and 8 deletions
+7 -2
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useContext } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Container, NavBar, Header, Break, PostForm, TopBar } from './styles/Board.styled';
import { ReplyFormTable, ReplyFormLink } from './styles/Thread.styled';
import { Container, NavBar, Header, Break, PostForm } from './styles/Board.styled';
import { ReplyFormTable, ReplyFormLink, TopBar } from './styles/Thread.styled';
import { BoardContext } from '../App';
import ImageBanner from './ImageBanner';
@@ -203,6 +203,11 @@ const Thread = ({ setBodyStyle }) => {
<option value="Photon">Photon</option>
</select>
</span>
<span className="return-button">
[
<Link to="/board">Return</Link>
]
</span>
<hr />
</TopBar>
</Container>
+6 -6
View File
@@ -1051,7 +1051,6 @@ export const BoardForm = styled.form`
}
.post {
margin: 4px 0;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
@@ -1064,6 +1063,7 @@ export const BoardForm = styled.form`
}
.post-info {
margin: 2px 0;
display: block;
width: 100%;
}
@@ -1180,7 +1180,6 @@ export const BoardForm = styled.form`
}
.post {
margin: 4px 0;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
@@ -1193,6 +1192,7 @@ export const BoardForm = styled.form`
}
.post-info {
margin: 2px 0;
display: block;
width: 100%;
}
@@ -1312,7 +1312,6 @@ export const BoardForm = styled.form`
}
.post {
margin: 4px 0;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
@@ -1325,6 +1324,7 @@ export const BoardForm = styled.form`
}
.post-info {
margin: 2px 0;
display: block;
width: 100%;
}
@@ -1448,7 +1448,6 @@ export const BoardForm = styled.form`
}
.post {
margin: 4px 0;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
@@ -1461,6 +1460,7 @@ export const BoardForm = styled.form`
}
.post-info {
margin: 2px 0;
display: block;
width: 100%;
}
@@ -1577,7 +1577,6 @@ export const BoardForm = styled.form`
}
.post {
margin: 4px 0;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
@@ -1590,6 +1589,7 @@ export const BoardForm = styled.form`
}
.post-info {
margin: 2px 0;
display: block;
width: 100%;
}
@@ -1710,7 +1710,6 @@ export const BoardForm = styled.form`
}
.post {
margin: 4px 0;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
@@ -1723,6 +1722,7 @@ export const BoardForm = styled.form`
}
.post-info {
margin: 2px 0;
display: block;
width: 100%;
}
+135
View File
@@ -468,4 +468,139 @@ export const ReplyFormTable = styled.table`
}`;
}
}}
`;
export const TopBar = styled.div`
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return `lear: both;
hr {
border: none;
border-top: 1px solid #d9bfb7;
height: 0;
}
.style-changer {
margin-left: 5px;
font-size: 10pt;
}
.return-button {
margin-left: 10px;
a, a:visited {
color: #00e !important;
text-decoration: none;
}
}`;
case 'Yotsuba B':
return `clear: both;
hr {
border: none;
border-top: 1px solid #b7c5d9;
height: 0;
}
.style-changer {
margin-left: 5px;
font-size: 10pt;
}
.return-button {
margin-left: 10px;
a, a:visited {
color: #34345c !important;
text-decoration: none;
}
}`;
case 'Futaba':
return `clear: both;
hr {
clear: both;
}
.style-changer {
margin-left: 5px;
font-size: 12pt;
}
.return-button {
margin-left: 10px;
font-size: 12pt;
a, a:visited {
color: #00e !important;
}
}`;
case 'Burichan':
return `clear: both;
hr {
clear: both;
}
.style-changer {
margin-left: 5px;
font-size: 12pt;
}
.return-button {
margin-left: 10px;
font-size: 12pt;
a, a:visited {
color: #00e !important;
}
}`;
case 'Tomorrow':
return `clear: both;
hr {
border: none;
border-top: 1px solid #282a2e;
height: 0;
}
.style-changer {
margin-left: 5px;
font-size: 10pt;
}
.return-button {
margin-left: 10px;
a, a:visited {
color: #81a2be !important;
text-decoration: none;
}
}`;
case 'Photon':
return `clear: both;
hr {
border: none;
border-top: 1px solid #ddd;
height: 0;
}
.style-changer {
margin-left: 5px;
font-size: 10pt;
}
.return-button {
margin-left: 10px;
a, a:visited {
color: #f60 !important;
text-decoration: none;
}
}`;
}
}}
`;