Merge pull request #624 from plebbit/master

Development

src/components/catalog-row/catalog-row.module.css

@@ -13,7 +13,11 @@
   padding: 10px 0 3px 0;
   vertical-align: top;
   display: inline-block;
+}
+
+.postContent {
   overflow: hidden;
+  max-height: 155px;
 }
 
 .large {
@@ -146,3 +150,14 @@
 .postPreview .capcode {
   color: var(--catalog-post-preview-author-capcode-color);
 }
+
+.xmasHat {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+  left: -10px;
+  margin-top: -55px;
+  z-index: 999;
+  box-shadow: none !important;
+}

src/components/catalog-row/catalog-row.tsx

@@ -19,6 +19,7 @@ import styles from './catalog-row.module.css';
 import _ from 'lodash';
 import { ContentPreview } from '../../views/home/popular-threads-box';
 import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
+import { shouldShowSnow } from '../../lib/snow';
 
 interface CatalogPostMediaProps {
   commentMediaInfo: any;
@@ -228,6 +229,8 @@ const CatalogPost = ({ post }: { post: Comment }) => {
               <span className={styles.hiddenThumbnail} />
             </Link>
           ) : hasThumbnail ? (
+            <>
+              {shouldShowSnow() && hasThumbnail && <img src={`${process.env.PUBLIC_URL}/assets/xmashat.gif`} className={styles.xmasHat} alt='' />}
               <Link to={postLink}>
                 <div
                   className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`}
@@ -249,6 +252,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
                   )}
                 </div>
               </Link>
+            </>
           ) : (
             threadIcons
           )}
@@ -264,7 +268,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
               <PostMenuDesktop post={post} />
             </span>
           </div>
-          {(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}
+          <div className={styles.postContent}>{(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}</div>
         </div>
       </div>
       {(hoveredCid === cid || isDescription) &&

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -74,7 +74,7 @@ const Style = () => {
   const today = new Date();
   const month = today.getMonth();
   const day = today.getDate();
-  const isChristmas = month === 11 && (day === 24 || day === 25);
+  const isChristmas = (month === 11 && day >= 24) || (month === 0 && day <= 5);
 
   const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const newTheme = e.target.value;

src/hooks/use-theme.ts

@@ -42,7 +42,7 @@ const useTheme = (): [string, (theme: string) => void] => {
     const today = new Date();
     const month = today.getMonth();
     const day = today.getDate();
-    const isChristmas = month === 11 && (day === 24 || day === 25);
+    const isChristmas = (month === 11 && day >= 24) || (month === 0 && day <= 5);
     const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress;
 
     if (isChristmas && isEnabled === null && subplebbitAddress && !isInAllView && !isInSubscriptionsView) {

src/lib/snow.ts

@@ -102,5 +102,5 @@ export const shouldShowSnow = (): boolean => {
   const today = new Date();
   const month = today.getMonth();
   const day = today.getDate();
-  return month === 11 && (day === 24 || day === 25);
+  return (month === 11 && day >= 24) || (month === 0 && day <= 5);
 };

src/views/board/board.module.css

@@ -1,7 +1,3 @@
-.content {
-  overflow: hidden;
-}
-
 .footer {
   color: var(--post-mobile-abbr-text-color);
   padding: 15px 0 20px 5px;

src/views/post/post.module.css

@@ -1,6 +1,6 @@
 .content {
   margin-bottom: 15px;
-  overflow-x: hidden;
+  overflow: visible;
 }
 
 .error {