fix: bugfix for timeline calendar

packages/icons/icon-generated-as-jsx.js

@@ -2145,7 +2145,12 @@ export const LeftArrow = /*#__PURE__*/ __createIcon('LeftArrow', [
 ])
 export const LinearCalendar = /*#__PURE__*/ __createIcon('LinearCalendar', [
     {
-        u: () => new URL('./general/LinearCalendar.svg', import.meta.url),
+        c: ['dark'],
+        u: () => new URL('./general/LinearCalendar.dark.svg', import.meta.url),
+    },
+    {
+        c: ['light'],
+        u: () => new URL('./general/LinearCalendar.light.svg', import.meta.url),
     },
 ])
 export const Link = /*#__PURE__*/ __createIcon('Link', [

packages/icons/icon-generated-as-url.js

@@ -215,7 +215,8 @@ export function japan_url() { return new URL("./general/Japan.svg", import.meta.
 export function jpy_url() { return new URL("./general/JPY.svg", import.meta.url) }
 export function key_square_url() { return new URL("./general/KeySquare.svg", import.meta.url) }
 export function left_arrow_url() { return new URL("./general/LeftArrow.svg", import.meta.url) }
-export function linear_calendar_url() { return new URL("./general/LinearCalendar.svg", import.meta.url) }
+export function linear_calendar_dark_url() { return new URL("./general/LinearCalendar.dark.svg", import.meta.url) }
+export function linear_calendar_light_url() { return new URL("./general/LinearCalendar.light.svg", import.meta.url) }
 export function link_url() { return new URL("./general/Link.svg", import.meta.url) }
 export function link_out_url() { return new URL("./general/LinkOut.svg", import.meta.url) }
 export function loader_url() { return new URL("./general/Loader.svg", import.meta.url) }

packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx

@@ -7,8 +7,8 @@ import { Tab } from '@mui/material'
 import { TabContext, TabPanel } from '@mui/lab'
 import { DatePickerTab } from './components/DatePickerTab.js'
 import { useEventList, useNFTList, useNewsList } from '../hooks/useEventList.js'
-import { EventList } from './components/EventList.js'
 import { NewsList } from './components/NewsList.js'
+import { EventList } from './components/EventList.js'
 import { NFTList } from './components/NFTList.js'
 import { Footer } from './components/Footer.js'
 import { safeUnreachable } from '@masknet/kit'
@@ -46,9 +46,9 @@ export function CalendarContent() {
     const [selectedDate, setSelectedDate] = useState(new Date())
     const [open, setOpen] = useState(false)
     const t = useI18N()
-    const { data: eventList, isLoading: eventLoading } = useEventList()
-    const { data: newsList, isLoading: newsLoading } = useNewsList()
-    const { data: nftList, isLoading: nftLoading } = useNFTList()
+    const { data: eventList, isLoading: eventLoading } = useEventList(selectedDate)
+    const { data: newsList, isLoading: newsLoading } = useNewsList(selectedDate)
+    const { data: nftList, isLoading: nftLoading } = useNFTList(selectedDate)
     const list = useMemo(() => {
         switch (currentTab) {
             case 'news':
@@ -89,20 +89,27 @@ export function CalendarContent() {
                 />
                 <TabPanel value={tabs.news} style={{ padding: 0 }}>
                     <NewsList
-                        list={newsList[dateString]}
+                        list={newsList}
                         isLoading={newsLoading}
                         empty={!Object.keys(newsList).length}
+                        dateString={dateString}
                     />
                 </TabPanel>
                 <TabPanel value={tabs.event} style={{ padding: 0 }}>
                     <EventList
-                        list={eventList[dateString]}
+                        list={eventList}
                         isLoading={eventLoading}
                         empty={!Object.keys(eventList).length}
+                        dateString={dateString}
                     />
                 </TabPanel>
                 <TabPanel value={tabs.nfts} style={{ padding: 0 }}>
-                    <NFTList list={nftList[dateString]} isLoading={nftLoading} empty={!Object.keys(newsList).length} />
+                    <NFTList
+                        list={nftList}
+                        isLoading={nftLoading}
+                        empty={!Object.keys(newsList).length}
+                        dateString={dateString}
+                    />
                 </TabPanel>
                 <Footer provider={currentTab} />
             </TabContext>

packages/plugins/Calendar/src/SiteAdaptor/components/CountDownTimer.tsx

@@ -9,6 +9,7 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 400,
         lineHeight: '16px',
         background: theme.palette.maskColor.bg,
+        color: theme.palette.maskColor.main,
         borderRadius: '4px',
         display: 'flex',
         alignItems: 'center',

packages/plugins/Calendar/src/SiteAdaptor/components/DatePicker.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import format from 'date-fns/format'
 import startOfMonth from 'date-fns/startOfMonth'
 import endOfMonth from 'date-fns/endOfMonth'
@@ -11,7 +11,7 @@ import { Box } from '@mui/system'
 
 const useStyles = makeStyles<{ open: boolean }>()((theme, { open }) => ({
     container: {
-        background: theme.palette.maskColor.white,
+        background: theme.palette.mode === 'dark' ? '#18232E' : theme.palette.maskColor.white,
         boxShadow: '0px 4px 30px 0px rgba(0, 0, 0, 0.10)',
         borderRadius: '16px',
         display: open ? 'flex' : 'none',
@@ -86,19 +86,17 @@ interface DatePickerProps {
 
 export function DatePicker({ list, selectedDate, setSelectedDate, open, setOpen }: DatePickerProps) {
     const { classes } = useStyles({ open })
-    const [currentDate, setCurrentDate] = useState(selectedDate || new Date())
 
-    const monthStart = useMemo(() => startOfMonth(currentDate), [currentDate])
-    const monthEnd = useMemo(() => endOfMonth(currentDate), [currentDate])
+    const monthStart = useMemo(() => startOfMonth(selectedDate), [selectedDate])
+    const monthEnd = useMemo(() => endOfMonth(selectedDate), [selectedDate])
 
     const handleDateClick = (date: Date) => {
         setSelectedDate(date)
-        setCurrentDate(date)
         setOpen(false)
     }
 
     const changeMonth = (amount: number) => {
-        setCurrentDate(addMonths(currentDate, amount))
+        setSelectedDate(addMonths(selectedDate, amount))
     }
 
     const renderDatePicker = () => {
@@ -150,7 +148,7 @@ export function DatePicker({ list, selectedDate, setSelectedDate, open, setOpen
         return (
             <div className={classes.container}>
                 <div className={classes.header}>
-                    <Typography className={classes.headerText}>{format(currentDate, 'MMMM yyyy')}</Typography>
+                    <Typography className={classes.headerText}>{format(selectedDate, 'MMMM yyyy')}</Typography>
                     <Box className={classes.headerIcon}>
                         <IconButton size="small" onClick={() => changeMonth(-1)}>
                             <Icons.LeftArrow size={24} />

packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { EmptyStatus, LoadingStatus } from '@masknet/shared'
 import format from 'date-fns/format'
@@ -11,9 +11,10 @@ const useStyles = makeStyles()((theme) => ({
         flexDirection: 'column',
         height: '506px',
         width: '100%',
-        overflowY: 'auto',
+        overflow: 'overlay',
         position: 'relative',
         gap: '10px',
+        paddingBottom: '50px',
     },
     empty: {
         position: 'absolute',
@@ -32,10 +33,6 @@ const useStyles = makeStyles()((theme) => ({
         padding: '8px 12px',
         flexDirection: 'column',
         gap: '8px',
-        fontWeight: 700,
-        lineHeight: '16px',
-        fontSize: '12px',
-        cursor: 'pointer',
     },
     eventHeader: {
         display: 'flex',
@@ -48,6 +45,12 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         color: theme.palette.maskColor.main,
     },
+    projectName: {
+        color: theme.palette.maskColor.main,
+        fontSize: '12px',
+        fontWeight: 700,
+        lineHeight: '16px',
+    },
     logo: {
         width: '24px',
         height: '24px',
@@ -57,54 +60,76 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: '14px',
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.palette.mode === 'dark' ? theme.palette.maskColor.main : theme.palette.maskColor.second,
     },
     poster: {
         borderRadius: '8px',
         width: '100%',
         height: '156px',
         objectFit: 'cover',
     },
+    dateDiv: {
+        fontSize: '14px',
+        fontWeight: 700,
+        lineHeight: '18px',
+        color: theme.palette.maskColor.main,
+        padding: '10px 12px',
+    },
 }))
 
 interface EventListProps {
-    list: any[]
+    list: Record<string, any[]>
     isLoading: boolean
     empty: boolean
+    dateString: string
 }
 
 export const formatDate = (date: string) => {
-    const dateFormat = 'MMM dd, yyyy HH:mm:ss'
+    const dateFormat = 'MMM dd, yyyy HH:mm'
     return format(new Date(date), dateFormat)
 }
 
-export function EventList({ list, isLoading, empty }: EventListProps) {
+export function EventList({ list, isLoading, empty, dateString }: EventListProps) {
     const { classes, cx } = useStyles()
     const t = useI18N()
+    const listAfterDate = useMemo(() => {
+        const listAfterDate: string[] = []
+        for (const key in list) {
+            if (new Date(key) >= new Date(dateString)) {
+                listAfterDate.push(key)
+            }
+        }
+        return listAfterDate
+    }, [list, dateString])
     return (
         <div className={classes.container}>
             {isLoading && !list?.length ? (
                 <div className={cx(classes.empty, classes.eventTitle)}>
                     <LoadingStatus />
                 </div>
-            ) : !empty ? (
-                list?.map((v) => {
+            ) : !empty && listAfterDate.length ? (
+                listAfterDate.map((key, index) => {
                     return (
-                        <div
-                            className={classes.eventCard}
-                            key={v.eventTitle}
-                            onClick={() => {
-                                window.open(v.event_url)
-                            }}>
-                            <div className={classes.eventHeader}>
-                                <div className={classes.projectWrap}>
-                                    <img src={v.project.logo} className={classes.logo} alt="logo" />
-                                    <Typography> {v.project.name}</Typography>
+                        <div key={key}>
+                            <Typography className={classes.dateDiv}>{format(new Date(key), 'MMM dd,yyy')}</Typography>
+                            {list[key].map((v) => (
+                                <div
+                                    className={classes.eventCard}
+                                    key={v.eventTitle}
+                                    onClick={() => {
+                                        window.open(v.event_url)
+                                    }}>
+                                    <div className={classes.eventHeader}>
+                                        <div className={classes.projectWrap}>
+                                            <img src={v.project.logo} className={classes.logo} alt="logo" />
+                                            <Typography className={classes.projectName}> {v.project.name}</Typography>
+                                        </div>
+                                    </div>
+                                    <Typography className={classes.eventTitle}>{v.event_title}</Typography>
+                                    <Typography className={classes.eventTitle}>{formatDate(v.event_date)}</Typography>
+                                    <img className={classes.poster} src={v.poster_url} alt="poster" />
                                 </div>
-                            </div>
-                            <Typography className={classes.eventTitle}>{v.event_title}</Typography>
-                            <Typography className={classes.eventTitle}>{formatDate(v.event_date)}</Typography>
-                            <img className={classes.poster} src={v.poster_url} alt="poster" />
+                            ))}
                         </div>
                     )
                 })

packages/plugins/Calendar/src/SiteAdaptor/components/Footer.tsx

@@ -9,7 +9,7 @@ import { useOpenApplicationSettings } from '@masknet/shared'
 const useStyles = makeStyles()((theme) => ({
     container: {
         display: 'flex',
-        background: 'rgba(255, 255, 255, 0.80)',
+        background: theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.80)' : 'rgba(255, 255, 255, 0.80)',
         backdropFilter: 'blur(10px)',
         borderRadius: '0 0 12px 12px',
         position: 'absolute',
@@ -30,15 +30,19 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     poweredBy: {
+        display: 'flex',
         color: theme.palette.maskColor.second,
-        fontSize: 14,
+        fontSize: '14px',
         fontWeight: 700,
         lineHeight: '18px',
         alignItems: 'center',
     },
     calender: {
         display: 'flex',
         gap: '8px',
+        alignItems: 'center',
+    },
+    calendarText: {
         color: theme.palette.maskColor.main,
         fontSize: '16px',
         fontWeight: 700,
@@ -47,9 +51,9 @@ const useStyles = makeStyles()((theme) => ({
     },
     providerName: {
         color: theme.palette.maskColor.main,
-        fontSize: '16px',
+        fontSize: '14px',
         fontWeight: 700,
-        lineHeight: '20px',
+        lineHeight: '18px',
         alignItems: 'center',
     },
 }))
@@ -87,7 +91,7 @@ export function Footer({ provider }: FooterProps) {
             <div className={classes.lineWrap}>
                 <div className={classes.calender}>
                     <Icons.Calendar size={24} />
-                    <Typography>{t.title()}</Typography>
+                    <Typography className={classes.calendarText}>{t.title()}</Typography>
                 </div>
                 <div className={classes.poweredByWrap}>
                     <Typography className={classes.poweredBy}>{t.powered_by()}</Typography>