From 05763d7ede860aa2ccc4da4cae02f49071a1b5a1 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Tue, 18 Apr 2023 11:24:47 +0200
Subject: [PATCH] fixed highlight bug in Thread.jsx

---
 src/components/styled/Board.styled.jsx | 1455 ++++++++++++------------
 src/components/views/Board.jsx         |   10 +-
 src/components/views/Thread.jsx        |    4 +-
 3 files changed, 734 insertions(+), 735 deletions(-)

diff --git a/src/components/styled/Board.styled.jsx b/src/components/styled/Board.styled.jsx
index 3fd706fa..c8b46c31 100644
--- a/src/components/styled/Board.styled.jsx
+++ b/src/components/styled/Board.styled.jsx
@@ -1553,737 +1553,10 @@ export const BoardForm = styled.div`
       margin-top: 10px;
     }
   }
-
-  @media (max-width: 480px) {
-    .thread {
-      display: none;
-    }
-
-    hr {
-      margin-left: calc((100% - 100vw) / 2);
-      margin-right: calc((100% - 100vw) / 2);
-    }
-    
-    .name-block {
-      display: block;
-    }
-
-    .post-info {
-      display: flex;
-      flex-wrap: wrap;
-      margin: 4px;
-    }
-
-    #bottombar-desktop {
-      display: none;
-    }
-
-    ${({ selectedStyle }) => {
-      switch (selectedStyle) {
-        case 'Yotsuba':
-          return `
-            .op-container {
-              background-color: #f5e9e1;
-              border: 1px solid #d9bfb7 !important;
-            }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #d9bfb7;
-                background-color: #ead6ca;
-              }
-    
-              .post-menu-button-mobile {
-                color: #00e !important;
-              }
-    
-              .name-mobile {
-                color: #117743;
-                font-weight: 700;
-              }
-    
-              .subject-mobile {
-                color: #cc1105;
-                font-weight: 700;
-              }
-    
-              .date-time-mobile {
-                color: maroon;
-
-                a {
-                  text-decoration: none;
-                  color: maroon;
-                }
-              }
-    
-              .file-thumb-mobile {
-                color: #00e !important;
-              }
-    
-              .file-info-mobile {
-                color: #707070;
-                font-size: 9pt !important;
-              }
-    
-              blockquote {
-                font-size: 11pt;
-              }
-    
-              .post-link-mobile {
-                background-color: #ead6ca;
-                border-top: 1px solid #d9bfb7;
-              }
-    
-              .info-mobile {
-                color: #800;
-              }
-    
-              .button-mobile {
-                color: #800;
-                font-weight: 700;
-                background-color: #f0e0d6;
-                border: 1px solid #c0a69d;
-                background-image: url(/assets/buttonfade.png);
-                background-repeat: repeat-x;
-                text-decoration: none;
-              }
-
-            .reply-container {
-              background-color: #f0e0d6;
-
-              .post-reply {
-                background-color: #f0e0d6;
-                border: 1px solid #d9bfb7;
-              }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #d9bfb7;
-                background-color: #ead6ca;
-
-                .post-menu-button-mobile {
-                  color: #00e !important;
-                }
-
-                .name-mobile {
-                  color: #117743;
-                  font-weight: 700;
-                }
-
-                .date-time-mobile {
-                  color: maroon;
-
-                  a {
-                    color: maroon;
-                  }
-                }
-              }
-
-              blockquote {
-                font-size: 11pt;
-
-                .quotelink-mobile {
-                  color: navy !important;
-                  text-decoration: underline;
-                  font-family: arial;
-                }
-
-                .quotelink-mobile:hover {
-                  color: red !important;
-                }
-
-                p:first-of-type::before {
-                  color: #789922;
-                }
-              }
-            }
-          }`;
-
-        case 'Yotsuba-B':
-          return `
-            .op-container {
-              background-color: #d6daf0;
-              border: 1px solid #b7c5d9 !important;
-            }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #b7c5d9;
-                background-color: #c9cde8;
-              }
-    
-              .post-menu-button-mobile {
-                color: #34345c !important;
-              }
-    
-              .name-mobile {
-                color: #117743;
-                font-weight: 700;
-              }
-    
-              .subject-mobile {
-                color: #0f0c5d;
-                font-weight: 700;
-              }
-    
-              .date-time-mobile {
-                color: #000;
-
-                a {
-                  text-decoration: none;
-                  color: #000;
-                }
-              }
-    
-              .file-thumb-mobile {
-                color: #81a2be !important;
-              }
-    
-              .file-info-mobile {
-                color: #707070;
-                font-size: 9pt !important;
-              }
-    
-              blockquote {
-                font-size: 11pt;
-              }
-    
-              .post-link-mobile {
-                background-color: #c9cde8;
-                border-top: 1px solid #b7c5d9;
-              }
-    
-              .info-mobile {
-                color: #34345c;
-              }
-    
-              .button-mobile {
-                color: #34345c;
-                font-weight: 700;
-                background-color: #d6daf0;
-                border: 1px solid #b7c5d9;
-                background-image: url(/assets/buttonfade-blue.png);
-                background-repeat: repeat-x;
-                text-decoration: none;
-              }
-
-            .reply-container {
-              background-color: #d6daf0;
-
-              .post-reply {
-                background-color: #d6daf0;
-                border: 1px solid #b7c5d9;
-              }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #b7c5d9;
-                background-color: #c9cde8;
-
-                .post-menu-button-mobile {
-                  color: #34345c !important;
-                }
-
-                .name-mobile {
-                  color: #117743;
-                  font-weight: 700;
-                }
-
-                .date-time-mobile {
-                  color: #000;
-
-                  a {
-                    color: #000;
-                  }
-                }
-              }
-
-              blockquote {
-                font-size: 11pt;
-
-                .quotelink-mobile {
-                  color: #d00;
-                  text-decoration: underline;
-                  font-family: arial;
-                }
-
-                p:first-of-type::before {
-                  color: #789922;
-                }
-              }
-            }
-          }`;
-
-        case 'Futaba':
-          return `
-            .op-container {
-              background-color: #f5e9e1;
-              border: 1px solid #d9bfb7 !important;
-            }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #d9bfb7;
-                background-color: #ead6ca;
-              }
-    
-              .post-menu-button-mobile {
-                color: #00e !important;
-              }
-    
-              .name-mobile {
-                color: #117743;
-                font-weight: 700;
-              }
-    
-              .subject-mobile {
-                color: #cc1105;
-                font-weight: 700;
-              }
-    
-              .date-time-mobile {
-                color: maroon;
-
-                a {
-                  text-decoration: none;
-                  color: maroon;
-                }
-              }
-    
-              .file-thumb-mobile {
-                color: #00e !important;
-              }
-    
-              .file-info-mobile {
-                color: #707070;
-                font-size: 9pt !important;
-              }
-    
-              blockquote {
-                font-size: 12pt;
-              }
-    
-              .post-link-mobile {
-                background-color: #ead6ca;
-                border-top: 1px solid #d9bfb7;
-              }
-    
-              .info-mobile {
-                color: #800;
-              }
-    
-              .button-mobile {
-                color: #800;
-                font-weight: 700;
-                background-color: #f0e0d6;
-                border: 1px solid #c0a69d;
-                background-image: url(/assets/buttonfade.png);
-                background-repeat: repeat-x;
-                text-decoration: none;
-              }
-
-            .reply-container {
-              background-color: #f0e0d6;
-
-              .post-reply {
-                background-color: #f0e0d6;
-                border: 1px solid #d9bfb7;
-              }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #d9bfb7;
-                background-color: #ead6ca;
-
-                .post-menu-button-mobile {
-                  color: #00e !important;
-                }
-
-                .name-mobile {
-                  color: #117743;
-                  font-weight: 700;
-                }
-
-                .date-time-mobile {
-                  color: maroon;
-
-                  a {
-                    color: maroon;
-                  }
-                }
-              }
-
-              blockquote {
-                font-size: 12pt;
-
-                .quotelink-mobile {
-                  color: navy !important;
-                  text-decoration: underline;
-                }
-
-                .quotelink-mobile:hover {
-                  color: red !important;
-                }
-
-                p:first-of-type::before {
-                  color: #789922;
-                }
-              }
-            }
-          }`;
-
-        case 'Burichan':
-          return `
-            .op-container {
-              background-color: #d6daf0;
-              border: 1px solid #b7c5d9 !important;
-            }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #b7c5d9;
-                background-color: #c9cde8;
-              }
-    
-              .post-menu-button-mobile {
-                color: #34345c !important;
-              }
-    
-              .name-mobile {
-                color: #117743;
-                font-weight: 700;
-              }
-    
-              .subject-mobile {
-                color: #0f0c5d;
-                font-weight: 700;
-              }
-    
-              .date-time-mobile {
-                color: #000;
-
-                a {
-                  text-decoration: none;
-                  color: #000;
-                }
-              }
-    
-              .file-thumb-mobile {
-                color: #81a2be !important;
-              }
-    
-              .file-info-mobile {
-                color: #707070;
-                font-size: 9pt !important;
-              }
-    
-              blockquote {
-                font-size: 12pt;
-              }
-    
-              .post-link-mobile {
-                background-color: #c9cde8;
-                border-top: 1px solid #b7c5d9;
-              }
-    
-              .info-mobile {
-                color: #34345c;
-              }
-    
-              .button-mobile {
-                color: #34345c;
-                font-weight: 700;
-                background-color: #d6daf0;
-                border: 1px solid #b7c5d9;
-                background-image: url(/assets/buttonfade-blue.png);
-                background-repeat: repeat-x;
-                text-decoration: none;
-              }
-
-            .reply-container {
-              background-color: #d6daf0;
-
-              .post-reply {
-                background-color: #d6daf0;
-                border: 1px solid #b7c5d9;
-              }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #b7c5d9;
-                background-color: #c9cde8;
-
-                .post-menu-button-mobile {
-                  color: #34345c !important;
-                }
-
-                .name-mobile {
-                  color: #117743;
-                  font-weight: 700;
-                }
-
-                .date-time-mobile {
-                  color: #000;
-
-                  a {
-                    color: #000;
-                  }
-                }
-              }
-
-              blockquote {
-                font-size: 12pt;
-
-                .quotelink-mobile {
-                  color: #d00;
-                  text-decoration: underline;
-                }
-
-                p:first-of-type::before {
-                  color: #789922;
-                }
-              }
-            }
-          }`;
-
-        case 'Tomorrow':
-          return `
-            .op-container {
-              background-color: #282A2E;
-              border: 1px solid #2D2F33 !important;
-            }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #2D2F33;
-                background-color: #212326;
-              }
-    
-              .post-menu-button-mobile {
-                color: #81A2BE !important;
-              }
-    
-              .name-mobile {
-                color: #117743;
-                font-weight: 700;
-              }
-
-              .poster-address-mobile {
-                color: #707070;
-              }
-    
-              .subject-mobile {
-                color: #B294BB;
-                font-weight: 700;
-              }
-    
-              .date-time-mobile {
-                color: #707070;
-
-                a {
-                  text-decoration: none;
-                  color: #707070;
-                }
-              }
-    
-              .file-thumb-mobile {
-                color: #81A2BE !important;
-              }
-    
-              .file-info-mobile {
-                color: #707070;
-                font-size: 9pt !important;
-              }
-    
-              blockquote {
-                color: #C5C8C6;
-                font-size: 11pt;
-              }
-    
-              .post-link-mobile {
-                background-color: #212326;
-                border-top: 1px solid #2D2F33;
-              }
-    
-              .info-mobile {
-                color: #707070;
-              }
-    
-              .button-mobile {
-                color: #707070;
-                font-weight: 700;
-                background-color: rgb(27,28,30);
-                border: 1px solid #282A2E;
-                background-image: url(/assets/buttonfade-dark.png);
-                background-repeat: repeat-x;
-                text-decoration: none;
-              }
-
-            .reply-container {
-              background-color: #f0e0d6;
-              color: #C5C8C6;
-
-              .post-reply {
-                background-color: #282A2E;
-                border: 1px solid #2D2F33;
-              }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #2D2F33;
-                background-color: #212326;
-
-                .post-menu-button-mobile {
-                  color: #81A2BE !important;
-                }
-
-                .name-mobile {
-                  color: #117743;
-                  font-weight: 700;
-                }
-
-                .date-time-mobile {
-                  color: #707070;
-
-                  a {
-                    color: #707070;
-                  }
-                }
-              }
-
-              blockquote {
-                font-size: 11pt;
-              }
-
-              .quotelink-mobile {
-                color: #81A2BE;
-                text-decoration: underline;
-              }
-
-              .quotelink-mobile:hover {
-                color: #5F89AC;
-              }
-
-              p:first-of-type::before {
-                color: #b5bd68;
-              }
-            }
-          }`;
-
-        case 'Photon':
-          return `
-            .op-container {
-              background-color: #eee;
-              border: 1px solid #ccc !important;
-            }
-
-            .post-info-mobile {
-              border-bottom: 1px solid #ccc;
-              background-color: #ddd;
-            }
   
-            .post-menu-button-mobile {
-              color: #f60 !important;
-            }
-  
-            .name-mobile {
-              color: #004a99;
-              font-weight: 700;
-            }
-  
-            .subject-mobile {
-              color: #111;
-              font-weight: 700;
-            }
-  
-            .date-time-mobile {
-              color: #333;
-
-              a {
-                text-decoration: none;
-                color: #333;
-              }
-            }
-  
-            .file-thumb-mobile {
-              color: #f60 !important;
-            }
-  
-            .file-info-mobile {
-              color: #707070;
-              font-size: 9pt !important;
-            }
-  
-            blockquote {
-              font-size: 11pt;
-            }
-  
-            .post-link-mobile {
-              background-color: #ddd;
-              border-top: 1px solid #ccc;
-            }
-  
-            .info-mobile {
-              color: #333;
-            }
-  
-            .button-mobile {
-              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;
-            }
-
-            .reply-container {
-              background-color: #eee;
-
-              .post-reply {
-                background-color: #eee;
-                border: 1px solid #ccc;
-              }
-
-              .post-info-mobile {
-                border-bottom: 1px solid #ccc;
-                background-color: #ddd;
-
-                .post-menu-button-mobile {
-                  color: #f60 !important;
-                }
-
-                .name-mobile {
-                  color: #004a99;
-                  font-weight: 700;
-                }
-
-                .date-time-mobile {
-                  color: #333;
-
-                  a {
-                    color: #333;
-                  }
-                }
-              }
-
-              blockquote {
-                font-size: 11pt;
-              }
-
-              .quotelink-mobile {
-                color: #f60;
-                text-decoration: underline;
-              }
-
-              .quotelink-mobile:hover {
-                color: #ff3300;
-              }
-
-              p:first-of-type::before {
-                color: #789922;
-              }
-            }
-          }`;
-        
-      }
-    }}
-  }
-
   .file {
     display: block;
-
+    
     .file-text {
       max-width: 600px;
       white-space: nowrap;
@@ -3586,4 +2859,730 @@ export const BoardForm = styled.div`
       
     }
   }}
+
+  @media (max-width: 480px) {
+    .thread {
+      display: none;
+    }
+
+    hr {
+      margin-left: calc((100% - 100vw) / 2);
+      margin-right: calc((100% - 100vw) / 2);
+    }
+    
+    .name-block {
+      display: block;
+    }
+
+    .post-info {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 4px;
+    }
+
+    #bottombar-desktop {
+      display: none;
+    }
+
+    ${({ selectedStyle }) => {
+      switch (selectedStyle) {
+        case 'Yotsuba':
+          return `
+            .op-container {
+              background-color: #f5e9e1;
+              border: 1px solid #d9bfb7 !important;
+            }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #d9bfb7;
+                background-color: #ead6ca;
+              }
+    
+              .post-menu-button-mobile {
+                color: #00e !important;
+              }
+    
+              .name-mobile {
+                color: #117743;
+                font-weight: 700;
+              }
+    
+              .subject-mobile {
+                color: #cc1105;
+                font-weight: 700;
+              }
+    
+              .date-time-mobile {
+                color: maroon;
+
+                a {
+                  text-decoration: none;
+                  color: maroon;
+                }
+              }
+    
+              .file-thumb-mobile {
+                color: #00e !important;
+              }
+    
+              .file-info-mobile {
+                color: #707070;
+                font-size: 9pt !important;
+              }
+    
+              blockquote {
+                font-size: 11pt;
+              }
+    
+              .post-link-mobile {
+                background-color: #ead6ca;
+                border-top: 1px solid #d9bfb7;
+              }
+    
+              .info-mobile {
+                color: #800;
+              }
+    
+              .button-mobile {
+                color: #800;
+                font-weight: 700;
+                background-color: #f0e0d6;
+                border: 1px solid #c0a69d;
+                background-image: url(/assets/buttonfade.png);
+                background-repeat: repeat-x;
+                text-decoration: none;
+              }
+
+            .reply-container {
+              background-color: #f0e0d6;
+
+              .post-reply {
+                background-color: #f0e0d6;
+                border: 1px solid #d9bfb7;
+              }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #d9bfb7;
+                background-color: #ead6ca;
+
+                .post-menu-button-mobile {
+                  color: #00e !important;
+                }
+
+                .name-mobile {
+                  color: #117743;
+                  font-weight: 700;
+                }
+
+                .date-time-mobile {
+                  color: maroon;
+
+                  a {
+                    color: maroon;
+                  }
+                }
+              }
+
+              blockquote {
+                font-size: 11pt;
+
+                .quotelink-mobile {
+                  color: navy !important;
+                  text-decoration: underline;
+                  font-family: arial;
+                }
+
+                .quotelink-mobile:hover {
+                  color: red !important;
+                }
+
+                p:first-of-type::before {
+                  color: #789922;
+                }
+              }
+            }
+          }`;
+
+        case 'Yotsuba-B':
+          return `
+            .op-container {
+              background-color: #d6daf0;
+              border: 1px solid #b7c5d9 !important;
+            }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #b7c5d9;
+                background-color: #c9cde8;
+              }
+    
+              .post-menu-button-mobile {
+                color: #34345c !important;
+              }
+    
+              .name-mobile {
+                color: #117743;
+                font-weight: 700;
+              }
+    
+              .subject-mobile {
+                color: #0f0c5d;
+                font-weight: 700;
+              }
+    
+              .date-time-mobile {
+                color: #000;
+
+                a {
+                  text-decoration: none;
+                  color: #000;
+                }
+              }
+    
+              .file-thumb-mobile {
+                color: #81a2be !important;
+              }
+    
+              .file-info-mobile {
+                color: #707070;
+                font-size: 9pt !important;
+              }
+    
+              blockquote {
+                font-size: 11pt;
+              }
+    
+              .post-link-mobile {
+                background-color: #c9cde8;
+                border-top: 1px solid #b7c5d9;
+              }
+    
+              .info-mobile {
+                color: #34345c;
+              }
+    
+              .button-mobile {
+                color: #34345c;
+                font-weight: 700;
+                background-color: #d6daf0;
+                border: 1px solid #b7c5d9;
+                background-image: url(/assets/buttonfade-blue.png);
+                background-repeat: repeat-x;
+                text-decoration: none;
+              }
+
+            .reply-container {
+              background-color: #d6daf0;
+
+              .post-reply {
+                background-color: #d6daf0;
+                border: 1px solid #b7c5d9;
+              }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #b7c5d9;
+                background-color: #c9cde8;
+
+                .post-menu-button-mobile {
+                  color: #34345c !important;
+                }
+
+                .name-mobile {
+                  color: #117743;
+                  font-weight: 700;
+                }
+
+                .date-time-mobile {
+                  color: #000;
+
+                  a {
+                    color: #000;
+                  }
+                }
+              }
+
+              blockquote {
+                font-size: 11pt;
+
+                .quotelink-mobile {
+                  color: #d00;
+                  text-decoration: underline;
+                  font-family: arial;
+                }
+
+                p:first-of-type::before {
+                  color: #789922;
+                }
+              }
+            }
+          }`;
+
+        case 'Futaba':
+          return `
+            .op-container {
+              background-color: #f5e9e1;
+              border: 1px solid #d9bfb7 !important;
+            }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #d9bfb7;
+                background-color: #ead6ca;
+              }
+    
+              .post-menu-button-mobile {
+                color: #00e !important;
+              }
+    
+              .name-mobile {
+                color: #117743;
+                font-weight: 700;
+              }
+    
+              .subject-mobile {
+                color: #cc1105;
+                font-weight: 700;
+              }
+    
+              .date-time-mobile {
+                color: maroon;
+
+                a {
+                  text-decoration: none;
+                  color: maroon;
+                }
+              }
+    
+              .file-thumb-mobile {
+                color: #00e !important;
+              }
+    
+              .file-info-mobile {
+                color: #707070;
+                font-size: 9pt !important;
+              }
+    
+              blockquote {
+                font-size: 12pt;
+              }
+    
+              .post-link-mobile {
+                background-color: #ead6ca;
+                border-top: 1px solid #d9bfb7;
+              }
+    
+              .info-mobile {
+                color: #800;
+              }
+    
+              .button-mobile {
+                color: #800;
+                font-weight: 700;
+                background-color: #f0e0d6;
+                border: 1px solid #c0a69d;
+                background-image: url(/assets/buttonfade.png);
+                background-repeat: repeat-x;
+                text-decoration: none;
+              }
+
+            .reply-container {
+              background-color: #f0e0d6;
+
+              .post-reply {
+                background-color: #f0e0d6;
+                border: 1px solid #d9bfb7;
+              }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #d9bfb7;
+                background-color: #ead6ca;
+
+                .post-menu-button-mobile {
+                  color: #00e !important;
+                }
+
+                .name-mobile {
+                  color: #117743;
+                  font-weight: 700;
+                }
+
+                .date-time-mobile {
+                  color: maroon;
+
+                  a {
+                    color: maroon;
+                  }
+                }
+              }
+
+              blockquote {
+                font-size: 12pt;
+
+                .quotelink-mobile {
+                  color: navy !important;
+                  text-decoration: underline;
+                }
+
+                .quotelink-mobile:hover {
+                  color: red !important;
+                }
+
+                p:first-of-type::before {
+                  color: #789922;
+                }
+              }
+            }
+          }`;
+
+        case 'Burichan':
+          return `
+            .op-container {
+              background-color: #d6daf0;
+              border: 1px solid #b7c5d9 !important;
+            }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #b7c5d9;
+                background-color: #c9cde8;
+              }
+    
+              .post-menu-button-mobile {
+                color: #34345c !important;
+              }
+    
+              .name-mobile {
+                color: #117743;
+                font-weight: 700;
+              }
+    
+              .subject-mobile {
+                color: #0f0c5d;
+                font-weight: 700;
+              }
+    
+              .date-time-mobile {
+                color: #000;
+
+                a {
+                  text-decoration: none;
+                  color: #000;
+                }
+              }
+    
+              .file-thumb-mobile {
+                color: #81a2be !important;
+              }
+    
+              .file-info-mobile {
+                color: #707070;
+                font-size: 9pt !important;
+              }
+    
+              blockquote {
+                font-size: 12pt;
+              }
+    
+              .post-link-mobile {
+                background-color: #c9cde8;
+                border-top: 1px solid #b7c5d9;
+              }
+    
+              .info-mobile {
+                color: #34345c;
+              }
+    
+              .button-mobile {
+                color: #34345c;
+                font-weight: 700;
+                background-color: #d6daf0;
+                border: 1px solid #b7c5d9;
+                background-image: url(/assets/buttonfade-blue.png);
+                background-repeat: repeat-x;
+                text-decoration: none;
+              }
+
+            .reply-container {
+              background-color: #d6daf0;
+
+              .post-reply {
+                background-color: #d6daf0;
+                border: 1px solid #b7c5d9;
+              }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #b7c5d9;
+                background-color: #c9cde8;
+
+                .post-menu-button-mobile {
+                  color: #34345c !important;
+                }
+
+                .name-mobile {
+                  color: #117743;
+                  font-weight: 700;
+                }
+
+                .date-time-mobile {
+                  color: #000;
+
+                  a {
+                    color: #000;
+                  }
+                }
+              }
+
+              blockquote {
+                font-size: 12pt;
+
+                .quotelink-mobile {
+                  color: #d00;
+                  text-decoration: underline;
+                }
+
+                p:first-of-type::before {
+                  color: #789922;
+                }
+              }
+            }
+          }`;
+
+        case 'Tomorrow':
+          return `
+            .op-container {
+              background-color: #282A2E;
+              border: 1px solid #2D2F33 !important;
+            }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #2D2F33;
+                background-color: #212326;
+              }
+    
+              .post-menu-button-mobile {
+                color: #81A2BE !important;
+              }
+    
+              .name-mobile {
+                color: #117743;
+                font-weight: 700;
+              }
+
+              .poster-address-mobile {
+                color: #707070;
+              }
+    
+              .subject-mobile {
+                color: #B294BB;
+                font-weight: 700;
+              }
+    
+              .date-time-mobile {
+                color: #707070;
+
+                a {
+                  text-decoration: none;
+                  color: #707070;
+                }
+              }
+    
+              .file-thumb-mobile {
+                color: #81A2BE !important;
+              }
+    
+              .file-info-mobile {
+                color: #707070;
+                font-size: 9pt !important;
+              }
+    
+              blockquote {
+                color: #C5C8C6;
+                font-size: 11pt;
+              }
+    
+              .post-link-mobile {
+                background-color: #212326;
+                border-top: 1px solid #2D2F33;
+              }
+    
+              .info-mobile {
+                color: #707070;
+              }
+    
+              .button-mobile {
+                color: #707070;
+                font-weight: 700;
+                background-color: rgb(27,28,30);
+                border: 1px solid #282A2E;
+                background-image: url(/assets/buttonfade-dark.png);
+                background-repeat: repeat-x;
+                text-decoration: none;
+              }
+
+            .reply-container {
+              background-color: #f0e0d6;
+              color: #C5C8C6;
+
+              .post-reply {
+                background-color: #282A2E;
+                border: 1px solid #2D2F33;
+              }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #2D2F33;
+                background-color: #212326;
+
+                .post-menu-button-mobile {
+                  color: #81A2BE !important;
+                }
+
+                .name-mobile {
+                  color: #117743;
+                  font-weight: 700;
+                }
+
+                .date-time-mobile {
+                  color: #707070;
+
+                  a {
+                    color: #707070;
+                  }
+                }
+              }
+
+              blockquote {
+                font-size: 11pt;
+              }
+
+              .quotelink-mobile {
+                color: #81A2BE;
+                text-decoration: underline;
+              }
+
+              .quotelink-mobile:hover {
+                color: #5F89AC;
+              }
+
+              p:first-of-type::before {
+                color: #b5bd68;
+              }
+            }
+          }`;
+
+        case 'Photon':
+          return `
+            .op-container {
+              background-color: #eee;
+              border: 1px solid #ccc !important;
+            }
+
+            .post-info-mobile {
+              border-bottom: 1px solid #ccc;
+              background-color: #ddd;
+            }
+  
+            .post-menu-button-mobile {
+              color: #f60 !important;
+            }
+  
+            .name-mobile {
+              color: #004a99;
+              font-weight: 700;
+            }
+  
+            .subject-mobile {
+              color: #111;
+              font-weight: 700;
+            }
+  
+            .date-time-mobile {
+              color: #333;
+
+              a {
+                text-decoration: none;
+                color: #333;
+              }
+            }
+  
+            .file-thumb-mobile {
+              color: #f60 !important;
+            }
+  
+            .file-info-mobile {
+              color: #707070;
+              font-size: 9pt !important;
+            }
+  
+            blockquote {
+              font-size: 11pt;
+            }
+  
+            .post-link-mobile {
+              background-color: #ddd;
+              border-top: 1px solid #ccc;
+            }
+  
+            .info-mobile {
+              color: #333;
+            }
+  
+            .button-mobile {
+              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;
+            }
+
+            .reply-container {
+              background-color: #eee;
+
+              .post-reply {
+                background-color: #eee;
+                border: 1px solid #ccc;
+              }
+
+              .post-info-mobile {
+                border-bottom: 1px solid #ccc;
+                background-color: #ddd;
+
+                .post-menu-button-mobile {
+                  color: #f60 !important;
+                }
+
+                .name-mobile {
+                  color: #004a99;
+                  font-weight: 700;
+                }
+
+                .date-time-mobile {
+                  color: #333;
+
+                  a {
+                    color: #333;
+                  }
+                }
+              }
+
+              blockquote {
+                font-size: 11pt;
+              }
+
+              .quotelink-mobile {
+                color: #f60;
+                text-decoration: underline;
+              }
+
+              .quotelink-mobile:hover {
+                color: #ff3300;
+              }
+
+              p:first-of-type::before {
+                color: #789922;
+              }
+            }
+          }`;
+      }
+    }}
+  }
 `;
\ No newline at end of file
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 5671d67f..b8386f42 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -692,7 +692,7 @@ const Board = () => {
                             </span>) 
                           : null}
                         </span>
-                        <span key={`mob-dt-${thread.cid}`} className="date-time-mobile">
+                        <span key={`mob-dt-${thread.cid}`} className="date-time-mobile post-number">
                           {getDate(thread.timestamp)}
                           &nbsp;
                           <Link to="" key={`mob-no-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
@@ -798,7 +798,7 @@ const Board = () => {
                             </span>
                             <br key={`mob-br-${reply.cid}`} />
                           </span>
-                          <span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
+                          <span key={`mob-dt-${reply.cid}`} className="date-time-mobile post-number">
                           {getDate(reply.timestamp)}&nbsp;
                             <Link to="" key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
                             <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={() => {
@@ -843,7 +843,7 @@ const Board = () => {
                           reply.content.length > 500 ?
                           <Fragment key={`fragment15-${reply.cid}`}>
                             <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
-                              <Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={() => {}}>
+                              <Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}>
                                 {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                               </Link>
                               <Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} />
@@ -855,7 +855,7 @@ const Board = () => {
                             </blockquote>
                           </Fragment>
                         : <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
-                            <Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={() => {}}>
+                            <Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}>
                               {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                             </Link>
                             <Post content={reply.content} key={`post-mobile-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} />
@@ -868,7 +868,7 @@ const Board = () => {
                             .map((reply) => (
                               <div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}>
                               <Link key={`ql-${reply.cid}`}
-                              to={() => {}} className="quote-link" 
+                              to={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link" 
                               onClick={(event) => handleQuoteClick(reply, event)}>
                                 c/{reply.shortCid}</Link>
                                 &nbsp;
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index a5126626..27e827a7 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -512,7 +512,7 @@ const Thread = () => {
                   const fallbackImgUrl = "/assets/filedeleted-res.gif";
                   const shortParentCid = findShortParentCid(reply.parentCid, comment);
                   return (
-                    <div key={`pc-${reply.cid}-${Math.random()}`} className="reply-container">
+                    <div key={`pc-${reply.cid}`} className="reply-container">
                       <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
                       <div key={`pr-${reply.cid}`} className="post-reply">
                         <div key={`pi-${reply.cid}`} className="post-info">
@@ -723,7 +723,7 @@ const Thread = () => {
                   renderedComments.map((reply) => {
                   const shortParentCid = findShortParentCid(reply.parentCid, comment);
                   return (
-                  <div key={`mob-rc-${reply.cid}-${Math.random()}`} className="reply-container">
+                  <div key={`mob-rc-${reply.cid}`} className="reply-container">
                     <div key={`mob-pr-${reply.cid}`} className="post-reply">
                       <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
                         <button className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>