Revert Ramadan 2024 changes

src/components/Navbar/Navbar.module.scss

@@ -19,9 +19,4 @@
 .hiddenNav {
   // https://ptgamr.github.io/2014-09-13-translate3d-vs-translate-performance/
   transform: translate3d(0, calc(-1 * var(--navbar-container-height)), 0);
-
-  // TODO: remove this when banner is removed
-  @include breakpoints.smallerThanTablet {
-    transform: translate3d(0, calc(-1 * (var(--navbar-container-height) + var(--banner-height))), 0);
-  }
 }

src/components/Navbar/Navbar.tsx

@@ -1,39 +1,23 @@
 import React from 'react';
 
 import classNames from 'classnames';
-import useTranslation from 'next-translate/useTranslation';
 import { useSelector, shallowEqual } from 'react-redux';
 
 import styles from './Navbar.module.scss';
 import NavbarBody from './NavbarBody';
 
-import Banner from '@/components/Banner/Banner';
-import DonateButton from '@/components/Fundraising/DonateButton';
 import { useOnboarding } from '@/components/Onboarding/OnboardingProvider';
 import { selectNavbar } from '@/redux/slices/navbar';
-import DonateButtonClickSource from '@/types/DonateButtonClickSource';
-import DonateButtonType from '@/types/DonateButtonType';
 
 const Navbar = () => {
   const { isActive } = useOnboarding();
-  const { t } = useTranslation('common');
   const { isVisible: isNavbarVisible } = useSelector(selectNavbar, shallowEqual);
   const showNavbar = isNavbarVisible || isActive;
 
   return (
     <>
       <div className={styles.emptySpacePlaceholder} />
       <nav className={classNames(styles.container, { [styles.hiddenNav]: !showNavbar })}>
-        <Banner
-          text={t('fundraising-sticky-banner.title')}
-          ctaButton={
-            <DonateButton
-              isTextBasedOnType={false}
-              type={DonateButtonType.MONTHLY}
-              source={DonateButtonClickSource.BANNER}
-            />
-          }
-        />
         <NavbarBody />
       </nav>
     </>

src/components/QuranReader/EndOfScrollingControls/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import useTranslation from 'next-translate/useTranslation';
 import { useSelector } from 'react-redux';
 
 import RevelationOrderNavigationNotice, {
@@ -16,11 +15,7 @@ import QuranReaderReadingStreak from './QuranReaderReadingStreak';
 import RubControls from './RubControls';
 import VerseControls from './VerseControls';
 
-import Banner from '@/components/Banner/Banner';
-import DonateButton from '@/components/Fundraising/DonateButton';
 import { selectIsReadingByRevelationOrder } from '@/redux/slices/revelationOrder';
-import DonateButtonClickSource from '@/types/DonateButtonClickSource';
-import DonateButtonType from '@/types/DonateButtonType';
 import { VersesResponse } from 'types/ApiResponses';
 import { QuranReaderDataType } from 'types/QuranReader';
 import Verse from 'types/Verse';
@@ -36,7 +31,6 @@ const EndOfScrollingControls: React.FC<Props> = ({
   lastVerse,
   initialData,
 }) => {
-  const { t } = useTranslation('common');
   const isReadingByRevelationOrder = useSelector(selectIsReadingByRevelationOrder);
 
   return (
@@ -69,18 +63,6 @@ const EndOfScrollingControls: React.FC<Props> = ({
           )}
         </div>
       </div>
-      <div className={styles.donationBannerContainer}>
-        <Banner
-          text={t('common:fundraising-sticky-banner.title')}
-          ctaButton={
-            <DonateButton
-              type={DonateButtonType.MONTHLY}
-              isTextBasedOnType={false}
-              source={DonateButtonClickSource.QURAN_READER}
-            />
-          }
-        />
-      </div>
     </>
   );
 };

src/components/QuranReader/SidebarNavigation/SidebarNavigation.module.scss

@@ -138,12 +138,6 @@
 
 .spaceOnTop {
   padding-block-start: calc(3.5 * var(--spacing-mega));
-  @include breakpoints.smallerThanTablet {
-    padding-block-start: calc(4.5 * var(--spacing-mega));
-  }
-  @include breakpoints.tablet {
-    padding-block-start: calc(3.5 * var(--spacing-mega));
-  }
 }
 
 .chapterNumber {

src/components/QuranReader/hooks/useSyncReadingProgress.ts

@@ -29,8 +29,8 @@ import { isLoggedIn } from '@/utils/auth/login';
 import mergeVerseKeys from '@/utils/mergeVerseKeys';
 import { getVerseAndChapterNumbersFromKey } from '@/utils/verse';
 
-const READING_DAY_SYNC_TIME_MS = 10000; // 10 seconds
-const READING_SESSION_DEBOUNCE_WAIT_TIME = 5000; // 5 seconds
+const READING_DAY_SYNC_TIME_MS = 5000; // 5 seconds
+const READING_SESSION_DEBOUNCE_WAIT_TIME = 2000; // 5 seconds
 
 interface UseSyncReadingProgressProps {
   isReadingPreference: boolean;

src/pages/_app.tsx

@@ -12,10 +12,10 @@ import useSWRImmutable from 'swr/immutable';
 import AudioPlayer from '@/components/AudioPlayer/AudioPlayer';
 import UserAccountModal from '@/components/Auth/UserAccountModal';
 import DeveloperUtility from '@/components/DeveloperUtility/DeveloperUtility';
-import DonatePopup from '@/components/DonatePopup/DonatePopup';
 import FontPreLoader from '@/components/Fonts/FontPreLoader';
 import GlobalListeners from '@/components/GlobalListeners';
 import Navbar from '@/components/Navbar/Navbar';
+import OnboardingChecklist from '@/components/Onboarding/OnboardingChecklist';
 import SessionIncrementor from '@/components/SessionIncrementor';
 import ThirdPartyScripts from '@/components/ThirdPartyScripts/ThirdPartyScripts';
 import Footer from '@/dls/Footer/Footer';
@@ -104,7 +104,7 @@ function MyApp({ Component, pageProps }): JSX.Element {
                       <Component {...pageProps} />
                       <AudioPlayer />
                       <Footer />
-                      <DonatePopup />
+                      <OnboardingChecklist />
                     </OnboardingProvider>
                   </ThemeProvider>
                   <SessionIncrementor />

src/pages/index.module.scss

@@ -4,12 +4,6 @@
 $list-max-width: 80rem;
 
 .pageContainer {
-  @include breakpoints.smallerThanTablet {
-    padding-block-start: var(--banner-height);
-  }
-  @include breakpoints.tablet {
-    padding-block-start: var(--spacing-small);
-  }
   padding-block-end: var(--spacing-small);
   padding-inline-start: 0;
   padding-inline-end: 0;

src/pages/index.tsx

@@ -10,7 +10,6 @@ import styles from './index.module.scss';
 
 import ChapterAndJuzListWrapper from '@/components/chapters/ChapterAndJuzList';
 import HomePageHero from '@/components/HomePage/HomePageHero';
-import HomePageWelcomeMessage from '@/components/HomePage/HomePageWelcomeMessage';
 import QuranGrowthJourneySection from '@/components/HomePage/QuranGrowthJourneySection';
 import RamadanActivitiesSection from '@/components/HomePage/RamadanActivitiesSection';
 import NextSeoWrapper from '@/components/NextSeoWrapper';
@@ -41,9 +40,6 @@ const Index: NextPage<IndexProps> = ({ chaptersResponse: { chapters } }): JSX.El
       <div className={styles.pageContainer}>
         <div className={styles.flow}>
           <HomePageHero />
-          <div className={classNames(styles.flowItem, styles.fullWidth)}>
-            <HomePageWelcomeMessage />
-          </div>
           <div className={classNames(styles.flowItem, styles.fullWidth)}>
             <RamadanActivitiesSection />
           </div>