added mobile buttons

src/components/Board.jsx

@@ -130,7 +130,6 @@ const Board = ({ setBodyStyle }) => {
   }
   
   const handlePublishComment = async () => {
-    // Event.preventDefault();
     try {
       const pendingComment = await publishComment({
         content: comment,
@@ -283,10 +282,17 @@ const Board = ({ setBodyStyle }) => {
       </Header>
       <Break selectedStyle={selectedStyle} />
       <PostForm selectedStyle={selectedStyle}>
-        <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} >
+      <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
-          [
+        <div id="post-form-link-desktop">
-            <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+            [
-          ]
+              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+            ]
+          </div>
+          <div id="post-form-link-mobile">
+            <span className="btn-wrap">
+              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+            </span>
+          </div>
         </PostFormLink>
         <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
           <tbody>
@@ -344,9 +350,16 @@ const Board = ({ setBodyStyle }) => {
             <option value="Photon">Photon</option>
           </select>
         </span>
-        [
+        <div id="catalog-button-desktop">
-        <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
+          [
-        ]
+          <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
+          ]
+        </div>
+        <div id="catalog-button-mobile">
+          <span className="btn-wrap">
+            <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
+          </span>
+        </div>
       </TopBar>
       <BoardForm selectedStyle={selectedStyle}>
         <div className="board">

src/components/Catalog.jsx

@@ -269,10 +269,17 @@ const Catalog = ({ setBodyStyle }) => {
       </Header>
       <Break selectedStyle={selectedStyle} />
       <PostForm selectedStyle={selectedStyle}>
-        <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} >
+        <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
-          [
+          <div id="post-form-link-desktop">
-            <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+            [
-          ]
+              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+            ]
+          </div>
+          <div id="post-form-link-mobile">
+            <span className="btn-wrap">
+              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+            </span>
+          </div>
         </PostFormLink>
         <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
           <tbody>
@@ -330,11 +337,16 @@ const Catalog = ({ setBodyStyle }) => {
             <option value="Photon">Photon</option>
           </select>
         </span>
-        <span className="return-button">
+        <div className="return-button" id="return-button-desktop">
           [
           <Link to={`/${selectedAddress}`}>Return</Link>
           ]
-        </span>
+        </div>
+        <div id="return-button-mobile">
+          <span className="btn-wrap-catalog btn-wrap">
+            <Link to={`/${selectedAddress}`}>Return</Link>
+          </span>
+        </div>
         <hr />
       </TopBar>
       <Threads selectedStyle={selectedStyle}>

src/components/Thread.jsx

@@ -192,10 +192,32 @@ const Thread = ({ setBodyStyle }) => {
       </Header>
       <Break selectedStyle={selectedStyle} />
       <PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
-        <ReplyFormLink id="post-form-link" showReplyFormLink={showReplyFormLink} >
+        <ReplyFormLink id="post-form-link" showReplyFormLink={showReplyFormLink} selectedStyle={selectedStyle} >
+          <div id="return-button-mobile">
+            <span className="btn-wrap">
+              <Link to={`/${selectedAddress}`}>Return</Link>
+            </span>
+          </div>
+          <div id="catalog-button-mobile">
+            <span className="btn-wrap">
+              <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
+            </span>
+          </div>
+          <div id="bottom-button-mobile">
+            <span className="btn-wrap">
+              <a onClick={handleClickBottom} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</a>
+            </span>
+          </div>
+          <div id="post-form-link-desktop">
             [
               <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
             ]
+          </div>
+          <div id="post-form-link-mobile">
+            <span className="btn-wrap">
+              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
+            </span>
+          </div>
         </ReplyFormLink>
         <ReplyFormTable id="post-form" showReplyForm={showReplyForm} selectedStyle={selectedStyle} className="post-form">
           <tbody>
@@ -251,17 +273,17 @@ const Thread = ({ setBodyStyle }) => {
             <option value="Photon">Photon</option>
           </select>
         </span>
-        <span className="return-button">
+        <span className="return-button" id="return-button-desktop">
           [
           <Link to={`/${selectedAddress}`}>Return</Link>
           ]
         </span>
-        <span className="return-button catalog-button">
+        <span className="return-button catalog-button" id="catalog-button-desktop">
           [
           <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
           ]
         </span>
-        <span className="return-button catalog-button">
+        <span className="return-button catalog-button" id="bottom-button-desktop">
           [
           <a href={handleVoidClick} onClick={handleClickBottom} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickBottom}>Bottom</a>
           ]
@@ -361,34 +383,86 @@ const Thread = ({ setBodyStyle }) => {
                 })
               })}
               <BottomBar selectedStyle={selectedStyle}>
-                <hr />
+                <div id="bottombar-desktop">
-                <span className="bottom-bar-return">
+                  <hr />
+                  <span className="bottom-bar-return">
+                    [
+                    <Link to={`/${selectedAddress}`}>Return</Link>
+                    ]
+                  </span>
+                  <span className="bottom-bar-catalog">
+                    [
+                    <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
+                    ]
+                  </span>
+                  <span className="bottom-bar-top">
+                    [
+                    <a href={handleVoidClick} onClick={handleClickTop} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickTop}>Top</a>
+                    ]
+                  </span>
+                  <span className="quickreply-button">
                   [
-                  <Link to={`/${selectedAddress}`}>Return</Link>
+                  <a href={handleVoidClick} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
                   ]
-                </span>
+                  </span>
-                <span className="bottom-bar-catalog">
+                  {comment.replyCount > 0 ? (
-                  [
+                    <span className="reply-stat">{comment.replyCount} replies</span>
-                  <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
+                  ) : (
-                  ]
+                    <span className="reply-stat">No replies yet</span>
-                </span>
+                  )}
-                <span className="bottom-bar-top">
+                  <hr />
-                  [
+                </div>
-                  <a href={handleVoidClick} onClick={handleClickTop} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickTop}>Top</a>
-                  ]
-                </span>
-                <span className="quickreply-button">
-                [
-                <a href={handleVoidClick} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
-                ]
-                </span>
-                {comment.replyCount > 0 ? (
-                  <span className="reply-stat">{comment.replyCount} replies</span>
-                ) : (
-                  <span className="reply-stat">No replies yet</span>
-                )}
-                <hr />
               </BottomBar>
+              <div id="bottombar-mobile">
+                <TopBar selectedStyle={selectedStyle}>
+                  <hr />
+                  <span className="style-changer">
+                    Style:
+                     
+                    <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>
+                      <option value="Burichan">Burichan</option>
+                      <option value="Tomorrow">Tomorrow</option>
+                      <option value="Photon">Photon</option>
+                    </select>
+                  </span>
+                  {comment ? (
+                    comment.replyCount > 0 ? (
+                      <span className="reply-stat">{comment.replyCount} replies</span>
+                    ) : (
+                      <span className="reply-stat">No replies yet</span>
+                  )) : (
+                    null
+                  )}
+                  <hr />
+                </TopBar>
+                <ReplyFormLink id="post-form-link" showReplyFormLink={showReplyFormLink} selectedStyle={selectedStyle} >
+                  <div id="post-form-link-mobile" className="post-button-mobile">
+                    <span className="btn-wrap">
+                      <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
+                    </span>
+                  </div>
+                  <div id="btns-container">
+                    <div id="return-button-mobile">
+                      <span className="btn-wrap">
+                        <Link to={`/${selectedAddress}`}>Return</Link>
+                      </span>
+                    </div>
+                    <div id="catalog-button-mobile">
+                      <span className="btn-wrap">
+                        <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
+                      </span>
+                    </div>
+                    <span className="bottom-bar-top">
+                      <span className="btn-wrap">
+                        <a href={handleVoidClick} onClick={handleClickTop} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickTop}>Top</a>
+                      </span>
+                    </span>
+                  </div>
+                </ReplyFormLink>
+              </div>
             </div>
           </>
          ) : (

src/components/styles/Board.styled.jsx

@@ -1,14 +1,5 @@
 import styled, { keyframes } from 'styled-components';
 
-const slideIn = keyframes`
-  0% {
-    top: 0;
-  }
-  100% {
-    top: -25px;
-  }
-`;
-
 export const Container = styled.div`
   font-size: 10pt;
   margin-left: 0;
@@ -54,7 +45,6 @@ export const NavBar = styled.div`
       left: 0;
       right: 0;
       z-index: 9001;
-      /* animation: ${slideIn} 0.2s ease-in-out; */
       display: block !important;
       clear: left !important;
     }
@@ -90,8 +80,6 @@ export const NavBar = styled.div`
     case 'Yotsuba':
       return `font-size: 9pt;
       color: #b86;
-      display: block;
-      margin-top: 5px;
       
       a {
         font-weight: 400;
@@ -120,7 +108,6 @@ export const NavBar = styled.div`
     case 'Yotsuba B':
       return `font-size: 9pt;
       color: #89a;
-      display: block;
       
       a {
         font-weight: 400;
@@ -139,7 +126,6 @@ export const NavBar = styled.div`
 
       case 'Futaba':
         return `font-size: 11pt;
-        display: block;
         
         a, a:visited {
           font-weight: 400;
@@ -165,7 +151,6 @@ export const NavBar = styled.div`
 
       case 'Burichan':
         return `font-size: 11pt;
-        display: block;
         
         a, a:visited {
           font-weight: 400;
@@ -188,7 +173,6 @@ export const NavBar = styled.div`
       case 'Tomorrow':
         return `font-size: 9pt;
         color: #c5c8c6;
-        display: block;
         
         a, a:visited {
           font-weight: 400;
@@ -209,7 +193,6 @@ export const NavBar = styled.div`
       case 'Photon':
         return `font-size: 9pt;
         color: #333;
-        display: block;
         
         a, a:visited {
           font-weight: 400;
@@ -316,12 +299,12 @@ export const Header = styled.div`
           font-size: 24pt;
           font-weight: 700;
           margin-top: 0;
+          color: #af0a0f;
         }
 
         .board-address {
-          font-size: 9pt;
           margin-top: 5px;
-          font-size: 9pt;
+          font-size: 11pt;
         }`;
 
       case 'Burichan':
@@ -348,9 +331,8 @@ export const Header = styled.div`
         }
 
         .board-address {
-          font-size: 9pt;
           margin-top: 5px;
-          font-size: 9pt;
+          font-size: 11pt;
         }`;
 
       case 'Tomorrow':
@@ -457,7 +439,158 @@ export const Break = styled.hr`
 `;
 
 export const PostFormLink = styled.div`
-  display: ${props => (props.showPostFormLink ? 'block' : 'none')};
+  @media (min-width: 480px) {
+    display: ${props => (props.showPostFormLink ? 'block' : 'none')};
+
+    #post-form-link-mobile {
+      display: none;
+    }
+  }
+
+  @media (max-width: 480px) {
+    display: ${props => (props.showPostFormLink ? 'block' : 'none')};
+    line-height: 30px;
+
+    #post-form-link-desktop {
+      display: none;
+    }
+
+    #post-form-link-mobile {
+        margin: 11px 0;
+        font-size: 10pt;
+        text-align: center;
+        font-weight: 700;
+        display: block !important;
+    }
+  }
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `.btn-wrap {
+          background-color: #f0e0d6;
+          background-image: url(/assets/buttonfade.png);
+          border: 1px solid #c0a69d;
+          color: #800;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }
+      }`;
+
+      case 'Yotsuba B':
+        return `.btn-wrap {
+          background-color: #d6daf0;
+          background-image: url(/assets/buttonfade-blue.png);
+          border: 1px solid #b7c5d9;
+          color: #34345c !important;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: #34345c !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Futaba':
+        return `.btn-wrap {
+          background-color: #f0e0d6;
+          background-image: url(/assets/buttonfade.png);
+          border: 1px solid #c0a69d;
+          color: #800;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+          font-size: 16px;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Burichan':
+        return `.btn-wrap {
+          background-color: #d6daf0;
+          background-image: url(/assets/buttonfade-blue.png);
+          border: 1px solid #b7c5d9;
+          color: #34345c;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+          font-size: 16px;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }
+      }`;
+
+      case 'Tomorrow':
+        return `.btn-wrap {
+          background-color: #1b1c1e;
+          background-image: url(/assets/buttonfade-dark.png);
+          border: 1px solid #282a2e;
+          color: #707070;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: #707070 !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Photon':
+        return `.btn-wrap {
+          background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
+          border: 1px solid #ccc;
+          color: #333;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: #333 !important;
+          white-space: nowrap;
+        }`;
+      
+      }
+    }}
 `;
 
 export const PostFormTable = styled.table`
@@ -1089,7 +1222,7 @@ export const TopBar = styled.div`
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
-        return `lear: both;
+        return `clear: both;
         hr {
           border: none;
           border-top: 1px solid #d9bfb7;
@@ -1228,6 +1361,164 @@ export const TopBar = styled.div`
       
     }
   }}
+
+  @media (min-width: 480px) {
+    #catalog-button-mobile {
+      display: none;
+    }
+
+    #catalog-button-desktop {
+      display: inline-block;
+    }
+  }
+
+  @media (max-width: 480px) {
+    line-height: 30px;
+
+    hr {
+      margin-left: calc((100% - 100vw) / 2);
+      margin-right: calc((100% - 100vw) / 2);
+    }
+
+    #catalog-button-desktop {
+      display: none;
+    }
+
+    #catalog-button-mobile {
+      position: absolute;
+      left: 50%;
+      display: inline-block;
+      transform: translateX(-50%);
+      font-size: 10pt;
+    }
+  }
+
+${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `.btn-wrap {
+          background-color: #f0e0d6;
+          background-image: url(/assets/buttonfade.png);
+          border: 1px solid #c0a69d;
+          color: #800;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }
+      }`;
+
+      case 'Yotsuba B':
+        return `.btn-wrap {
+          background-color: #d6daf0;
+          background-image: url(/assets/buttonfade-blue.png);
+          border: 1px solid #b7c5d9;
+          color: #34345c !important;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: #34345c !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Futaba':
+        return `.btn-wrap {
+          background-color: #f0e0d6;
+          background-image: url(/assets/buttonfade.png);
+          border: 1px solid #c0a69d;
+          color: #800;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+          font-size: 16px;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Burichan':
+        return `.btn-wrap {
+          background-color: #d6daf0;
+          background-image: url(/assets/buttonfade-blue.png);
+          border: 1px solid #b7c5d9;
+          color: #34345c;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+          font-size: 16px;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }
+      }`;
+
+      case 'Tomorrow':
+        return `.btn-wrap {
+          background-color: #1b1c1e;
+          background-image: url(/assets/buttonfade-dark.png);
+          border: 1px solid #282a2e;
+          color: #707070;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: #707070 !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Photon':
+        return `.btn-wrap {
+          background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
+          border: 1px solid #ccc;
+          color: #333;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: #333 !important;
+          white-space: nowrap;
+        }`;
+      }
+    }}
 `;
 
 export const BoardForm = styled.div`
@@ -1256,15 +1547,24 @@ export const BoardForm = styled.div`
     max-height: 250px;
   }
 
-  @media (min-width: 600px) {
+  @media (min-width: 480px) {
     .post-info {
       margin: 3px;
       display: block;
       width: 100%;
     }
+
+    #bottombar-mobile {
+      display: none;
+    }
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: 480px) {
+    hr {
+      margin-left: calc((100% - 100vw) / 2);
+      margin-right: calc((100% - 100vw) / 2);
+    }
+    
     .name-block {
       display: block;
     }
@@ -1274,6 +1574,10 @@ export const BoardForm = styled.div`
       flex-wrap: wrap;
       margin: 4px;
     }
+
+    #bottombar-desktop {
+      display: none;
+    }
   }
 
   ${({ selectedStyle }) => {

src/components/styles/Thread.styled.jsx

@@ -1,7 +1,171 @@
 import styled from 'styled-components';
 
 export const ReplyFormLink = styled.div`
-  display: ${props => (props.showReplyFormLink ? 'block' : 'none')};
+  @media (min-width: 480px) {
+    display: ${props => (props.showReplyFormLink ? 'block' : 'none')};
+
+    #post-form-link-mobile, #return-button-mobile, #catalog-button-mobile, #bottom-button-mobile {
+      display: none;
+    }
+  }
+
+  @media (max-width: 480px) {
+    display: ${props => (props.showReplyFormLink ? 'block' : 'none')};
+
+    #post-form-link-desktop {
+      display: none;
+    }
+
+    #post-form-link-mobile {
+        margin: 11px 0;
+        font-size: 13px;
+        text-align: center;
+        font-weight: 700;
+        display: block !important;
+        padding-top: 10px;
+    }
+
+    #return-button-mobile, #catalog-button-mobile, #bottom-button-mobile, #bottom-bar-top {
+      font-size: 10pt;
+      display: inline-block;
+      margin: 0 2px;
+    }
+
+    .post-button-mobile {
+      padding-bottom: 10px;
+    }
+
+    #btns-container {
+      text-align: center;
+    }
+  }
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `.btn-wrap {
+          background-color: #f0e0d6;
+          background-image: url(/assets/buttonfade.png);
+          border: 1px solid #c0a69d;
+          color: #800;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }
+      }`;
+
+      case 'Yotsuba B':
+        return `.btn-wrap {
+          background-color: #d6daf0;
+          background-image: url(/assets/buttonfade-blue.png);
+          border: 1px solid #b7c5d9;
+          color: #34345c !important;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: #34345c !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Futaba':
+        return `.btn-wrap {
+          background-color: #f0e0d6;
+          background-image: url(/assets/buttonfade.png);
+          border: 1px solid #c0a69d;
+          color: #800;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+          font-size: 16px;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Burichan':
+        return `.btn-wrap {
+          background-color: #d6daf0;
+          background-image: url(/assets/buttonfade-blue.png);
+          border: 1px solid #b7c5d9;
+          color: #34345c;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+          font-size: 16px;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }
+      }`;
+
+      case 'Tomorrow':
+        return `.btn-wrap {
+          background-color: #1b1c1e;
+          background-image: url(/assets/buttonfade-dark.png);
+          border: 1px solid #282a2e;
+          color: #707070;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: #707070 !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Photon':
+        return `.btn-wrap {
+          background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
+          border: 1px solid #ccc;
+          color: #333;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: #333 !important;
+          white-space: nowrap;
+        }`;
+      }
+    }}
 `;
 
 export const ReplyFormTable = styled.table`
@@ -471,15 +635,45 @@ export const ReplyFormTable = styled.table`
 `;
 
 export const TopBar = styled.div`
+  @media (min-width: 480px) {
+    #return-button-mobile {
+      display: none;
+    }
+
+    .reply-stat {
+      margin-top: 5px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    line-height: 30px;
+    
+    #return-button-desktop, #catalog-button-desktop, #bottom-button-desktop {
+      display: none;
+    }
+
+    #return-button-mobile {
+      position: absolute;
+      left: 50%;
+      display: inline-block;
+      transform: translateX(-50%);
+      font-size: 10pt;
+    }
+
+    hr {
+      margin-left: calc((100% - 100vw) / 2);
+      margin-right: calc((100% - 100vw) / 2);
+    }
+  }
+
   .return-button {
-    margin-top: 3px;
+    display: inline-block;
   }
 
   .reply-stat { 
     position: relative;
     float: right;
     margin-right: 5px;
-    margin-top: 4px;
   }
 
   .catalog-button {
@@ -656,6 +850,134 @@ export const TopBar = styled.div`
       
     }
   }}
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `.btn-wrap {
+          background-color: #f0e0d6;
+          background-image: url(/assets/buttonfade.png);
+          border: 1px solid #c0a69d;
+          color: #800;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }
+      }`;
+
+      case 'Yotsuba B':
+        return `.btn-wrap {
+          background-color: #d6daf0;
+          background-image: url(/assets/buttonfade-blue.png);
+          border: 1px solid #b7c5d9;
+          color: #34345c !important;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: #34345c !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Futaba':
+        return `.btn-wrap {
+          background-color: #f0e0d6;
+          background-image: url(/assets/buttonfade.png);
+          border: 1px solid #c0a69d;
+          color: #800;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+          font-size: 16px;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Burichan':
+        return `.btn-wrap {
+          background-color: #d6daf0;
+          background-image: url(/assets/buttonfade-blue.png);
+          border: 1px solid #b7c5d9;
+          color: #34345c;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+          font-size: 16px;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: inherit !important;
+          white-space: nowrap;
+        }
+      }`;
+
+      case 'Tomorrow':
+        return `.btn-wrap {
+          background-color: #1b1c1e;
+          background-image: url(/assets/buttonfade-dark.png);
+          border: 1px solid #282a2e;
+          color: #707070;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none !important;
+          border: none;
+          color: #707070 !important;
+          white-space: nowrap;
+        }`;
+
+      case 'Photon':
+        return `.btn-wrap {
+          background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
+          border: 1px solid #ccc;
+          color: #333;
+          border-radius: 3px 3px 3px 3px;
+          font-weight: 700;
+          padding: 6px 10px 5px;
+          background-repeat: repeat-x;
+          cursor: pointer;
+        }
+
+        .btn-wrap a {
+          text-decoration: none;
+          border: none;
+          color: #333 !important;
+          white-space: nowrap;
+        }`;
+      
+      }
+    }}
 `;
 
 export const BottomBar = styled.div`