From 4d1b9ab09320a528cbe7abdf53b34bb6d43f1e22 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 19 Aug 2024 12:06:03 +0100
Subject: [PATCH] Update announcement popup

---
 src/components/FeatureAnnouncement.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/FeatureAnnouncement.tsx b/src/components/FeatureAnnouncement.tsx
index c37c655dd..79bea471a 100644
--- a/src/components/FeatureAnnouncement.tsx
+++ b/src/components/FeatureAnnouncement.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Modal } from './Modal.tsx';
 import { PartyPopper } from 'lucide-react';
+import { isMobileScreen } from '../lib/is-mobile.ts';
 
 type FeatureAnnouncementProps = {};
 
@@ -13,7 +14,7 @@ export function FeatureAnnouncement(props: FeatureAnnouncementProps) {
       bodyClassName={'h-auto overflow-hidden'}
       wrapperClassName={'md:max-w-3xl lg:max-w-4xl xl:max-w-5xl'}
     >
-      <div className="text-balance bg-gradient-to-r from-gray-100 px-4 py-2 md:py-3 text-left text-sm lg:text-base">
+      <div className="text-balance bg-gradient-to-r from-gray-100 px-4 py-2 text-left text-sm md:py-3 lg:text-base">
         <span
           className="relative -top-px mr-1.5 rounded bg-blue-300 px-1.5 py-0.5 text-xs font-semibold uppercase text-gray-800"
           style={{ lineHeight: '1.5' }}
@@ -31,9 +32,7 @@ export function FeatureAnnouncement(props: FeatureAnnouncementProps) {
           {' '}
           and are coming soon on the others{' '}
         </span>
-        <PartyPopper
-          className="relative -top-[3px] ml-2 md:ml-1 inline-block w-5 h-5 md:w-6 md:h-6 text-blue-500"
-        />
+        <PartyPopper className="relative -top-[3px] ml-2 inline-block h-5 w-5 text-blue-500 md:ml-1 md:h-6 md:w-6" />
       </div>
       <div
         className="iframe-container"
@@ -68,7 +67,17 @@ export function FeatureAnnouncement(props: FeatureAnnouncementProps) {
       {isPlaying && videoModal}
       <button
         className="rounded-md border border-dashed border-purple-600 px-3 py-1.5 text-purple-400 transition-colors hover:border-purple-400 hover:text-purple-200"
-        onClick={() => setIsPlaying(true)}
+        onClick={() => {
+          if (isMobileScreen()) {
+            window.open(
+              'https://www.youtube.com/watch?v=9lS3slfJ0x0',
+              '_blank',
+            );
+            return;
+          }
+
+          setIsPlaying(true);
+        }}
       >
         <span className="relative -top-[1px] mr-1 text-xs font-semibold uppercase text-white">
           New