diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx
index b6ce7c99..299b1686 100644
--- a/src/components/Thread.jsx
+++ b/src/components/Thread.jsx
@@ -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 }) => {
+
+ [
+ Return
+ ]
+
diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx
index daf0562e..140d4927 100644
--- a/src/components/styles/Board.styled.jsx
+++ b/src/components/styles/Board.styled.jsx
@@ -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%;
}
diff --git a/src/components/styles/Thread.styled.jsx b/src/components/styles/Thread.styled.jsx
index c8568e1f..2f16eeb2 100644
--- a/src/components/styles/Thread.styled.jsx
+++ b/src/components/styles/Thread.styled.jsx
@@ -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;
+ }
+ }`;
+
+ }
+ }}
`;
\ No newline at end of file