feat: add christmas theme

src/components/board-header/board-header.module.css

@@ -39,8 +39,8 @@
 }
 
 @media (max-width: 640px) {
-  .boardTitle {
-    padding-top: 40px;
+  .content {
+    margin-top: 40px;
   }
  }
 
@@ -48,4 +48,14 @@
   .bannerCnt {
     padding: 5px 0 2px 0;
   }
+ }
+
+ .garland {
+  border-image-slice: 50 0 50 0;
+  border-image-width: 40px 0px 0px 0px;
+  border-image-outset: 0px 0px 0px 0px;
+  border-image-repeat: repeat repeat;
+  border-image-source: url('/public/assets/garland.png');
+  border-style: solid;
+  padding-top: 50px;
  }

src/components/board-header/board-header.tsx

@@ -6,6 +6,7 @@ import styles from './board-header.module.css';
 import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
 import useIsMobile from '../../hooks/use-is-mobile';
 import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
+import { shouldShowSnow } from '../../lib/snow';
 
 const totalBanners = 61;
 
@@ -37,7 +38,7 @@ const BoardHeader = () => {
   const { isOffline, isOnlineStatusLoading, offlineIconClass, offlineTitle } = useIsSubplebbitOffline(subplebbit);
 
   return (
-    <div className={styles.content}>
+    <div className={`${styles.content} ${shouldShowSnow() ? styles.garland : ''}`}>
       {!useIsMobile() && (
         <div className={styles.bannerCnt}>
           <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : address} />

src/components/post-desktop/post-desktop.tsx

@@ -28,6 +28,7 @@ import Tooltip from '../tooltip';
 import { PostProps } from '../../views/post/post';
 import { create } from 'zustand';
 import _ from 'lodash';
+import { shouldShowSnow } from '../../lib/snow';
 
 interface ShowOmittedRepliesState {
   showOmittedReplies: Record<string, boolean>;
@@ -213,15 +214,15 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
   );
 };
 
-const PostMedia = ({ post }: PostProps) => {
+const PostMedia = ({ post, hasThumbnail }: PostProps) => {
   const { t } = useTranslation();
   const { link, spoiler, cid } = post || {};
 
   // Reset state by remounting component when post changes
-  return <PostMediaContent key={cid} post={post} link={link} spoiler={spoiler} t={t} />;
+  return <PostMediaContent key={cid} post={post} hasThumbnail={hasThumbnail} spoiler={spoiler} t={t} />;
 };
 
-const PostMediaContent = ({ post, link, spoiler, t }: { post: any; link: string; spoiler: boolean; t: any }) => {
+const PostMediaContent = ({ post, hasThumbnail, spoiler, t }: { post: any; hasThumbnail: boolean | undefined; spoiler: boolean; t: any }) => {
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const commentMediaInfo = useCommentMediaInfo(post);
   const { url } = commentMediaInfo || {};
@@ -235,7 +236,6 @@ const PostMediaContent = ({ post, link, spoiler, t }: { post: any; link: string;
   }
 
   const embedUrl = url && new URL(url);
-  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
   const [showThumbnail, setShowThumbnail] = useState(true);
 
   const mediaDimensions = getMediaDimensions(commentMediaInfo);
@@ -451,6 +451,9 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
     replyCount: 0,
   };
 
+  const commentMediaInfo = useCommentMediaInfo(post);
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+
   return (
     <div className={styles.postDesktop}>
       {showReplies ? (
@@ -466,8 +469,9 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
             <span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} />
           </span>
         )}
-        <div data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
-          {link && !isHidden && !(deleted || removed) && isValidURL(link) && <PostMedia post={post} />}
+        <div data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid} className={shouldShowSnow() && hasThumbnail ? styles.xmasHatWrapper : ''}>
+          {shouldShowSnow() && hasThumbnail && <img src={`${process.env.PUBLIC_URL}/assets/xmashat.gif`} className={styles.xmasHat} />}
+          {link && !isHidden && !(deleted || removed) && isValidURL(link) && <PostMedia post={post} hasThumbnail={hasThumbnail} />}
           <PostInfo isHidden={hidden} openReplyModal={openReplyModal} post={post} postReplyCount={replyCount} roles={roles} />
           {!isHidden && !content && !(deleted || removed) && <div className={styles.spacer} />}
           {!isHidden && <PostMessage post={post} />}

src/components/post-mobile/post-mobile.tsx

@@ -23,6 +23,7 @@ import ReplyQuotePreview from '../reply-quote-preview';
 import Tooltip from '../tooltip';
 import { PostProps } from '../../views/post/post';
 import _ from 'lodash';
+import { shouldShowSnow } from '../../lib/snow';
 
 const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: PostProps) => {
   const { t } = useTranslation();
@@ -400,7 +401,13 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
           )}
           <div className={showReplies ? styles.thread : styles.quotePreview}>
             <div className={styles.postContainer}>
-              <div className={styles.postOp} data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
+              <div
+                className={`${styles.postOp} ${shouldShowSnow() ? styles.xmasHatWrapper : ''}`}
+                data-cid={cid}
+                data-author-address={author?.shortAddress}
+                data-post-cid={postCid}
+              >
+                {shouldShowSnow() && <img src={`${process.env.PUBLIC_URL}/assets/xmashat.gif`} className={styles.xmasHat} />}
                 <PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={replyCount} roles={roles} />
                 <PostMessageMobile post={post} />
               </div>

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

@@ -8,6 +8,7 @@ import _ from 'lodash';
 import useInterfaceSettingsStore from '../../../stores/use-interface-settings-store';
 import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store';
 import useExpandedMediaStore from '../../../stores/use-expanded-media-store';
+import useSpecialThemeStore from '../../../stores/use-special-theme-store';
 
 const commitRef = process.env.REACT_APP_COMMIT_REF;
 const isElectron = window.isElectron === true;
@@ -69,19 +70,33 @@ const CheckForUpdates = () => {
 
 const Style = () => {
   const [theme, setTheme] = useTheme();
+  const { isEnabled, setIsEnabled } = useSpecialThemeStore();
+  const today = new Date();
+  const month = today.getMonth();
+  const day = today.getDate();
+  const isChristmas = month === 11 && (day === 24 || day === 25);
 
   const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setTheme(e.target.value);
+    const newTheme = e.target.value;
+
+    if (newTheme === 'special') {
+      setIsEnabled(true);
+      setTheme('tomorrow');
+    } else {
+      setIsEnabled(false);
+      setTheme(newTheme);
+    }
   };
 
   return (
-    <select className={styles.themeSettings} value={theme} onChange={handleThemeChange}>
+    <select className={styles.themeSettings} value={isEnabled ? 'special' : theme} onChange={handleThemeChange}>
       <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>
+      {isChristmas && <option value='special'>Special</option>}
     </select>
   );
 };