added return button in thread

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 { Container, NavBar, Header, Break, PostForm } from './styles/Board.styled';
-import { ReplyFormTable, ReplyFormLink } from './styles/Thread.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>

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%;
       }

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;
+          }
+        }`;
+      
+    }
+  }}
 `;